CATALOGUE Code & Data Formation Animate CC Maîtrisez la programmation dans Animate CC - Ateliers créatif avec Create JS

Comment Charger et Redimensionner des Images avec Create.js

Retour à la formation
Chapitre 4 Leçon 7
Précédent
Suivant

Apprenez à charger et redimensionner des images dans une interface de chargement en utilisant Create.js.

Détails de la leçon

Description de la leçon

Dans cette leçon, vous allez apprendre à charger une image bitmap dans un chargeur en utilisant la bibliothèque Create.js. Nous aborderons les étapes nécessaires pour supprimer les animations de chargement une fois le préchargement de l'image terminé, ainsi que la méthode pour récupérer et utiliser les dimensions initiales de l'image afin de la redimensionner de manière adaptée. Nous explorerons également les calculs nécessaires pour adapter les dimensions de l'image au chargeur, en tenant compte des formats paysage et portrait.

Vous découvrirez comment utiliser des formules mathématiques pour ajuster l'échelle des images et les centrer correctement dans le chargeur. Enfin, nous discuterons des limites actuelles de Create.js en matière de redimensionnement d'images et des solutions de contournement possibles. Cette leçon est idéale pour ceux qui souhaitent approfondir leur compréhension de la gestion dynamique des images dans des applications web interactives.

Objectifs de cette leçon

L'objectif de cette vidéo est d'apprendre à charger et à redimensionner des images en fonction des dimensions initiales et des contraintes du chargeur, tout en utilisant les propriétés disponibles dans Create.js.

Prérequis pour cette leçon

Il est recommandé d'avoir une connaissance de base de JavaScript et des bibliothèques de manipulation d'images, notamment Create.js.

Métiers concernés

Les connaissances acquises ici peuvent être appliquées dans des métiers liés au développement web, ainsi que par des graphistes numériques qui souhaitent s'initier à l'intégration d'images dynamiques dans les projets interactifs.

Alternatives et ressources

En alternative à Create.js, d'autres bibliothèques comme PixiJS ou Phaser peuvent être utilisées pour des applications similaires de manipulation d'images.

Questions & Réponses

Les dimensions initiales utilisées dans l'exemple de la leçon pour les photos zoom sont 1200x900 pixels.
Il est nécessaire de redimensionner les images en pourcentage dans Create.js car la bibliothèque ne permet pas de définir directement les dimensions en pixels pour les images chargées.
Pour déterminer si une photo est en format paysage ou portrait, il faut comparer les variables de largeur et de hauteur de la photo: si la largeur est supérieure ou égale à la hauteur, la photo est en format paysage; sinon elle est en format portrait.