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

Amélioration de la Galerie Photo V2

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

Cette vidéo montre comment améliorer une galerie photo V2 en rendant les animations plus dynamiques.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous procédons à l'amélioration d'une galerie photo déjà existante, la version V2. Nous allons modifier le code actuel en supprimant certaines parties, en ajoutant d'autres, et en réorganisant le reste. Notre objectif est de rendre l'animation des photos plus fluide et attractive. Toutes les images agrandies seront chargées dynamiquement à partir du dossier images de l'animation. Utilisant un preloader et une boucle de chargement, nous optimisons le chargement des photos. Nous débuterons par le fichier de base de la galerie photo V2, en conservant le menu de vignettes identique à la version précédente, car les vignettes sont déjà présentes dans l'animation. Bien que nous aurions pu aller plus loin en utilisant les images chargées également pour les menus vignettes, l'accent ici est mis sur la simplicité afin de garder un atelier pédagogique et accessible. Toute la gestion de menu reste ainsi identique à la première version. Les changements sont introduits à partir du clic sur les vignettes, où nous ajoutons de nouvelles programmations et modifications.

Objectifs de cette leçon

Les objectifs de cette vidéo sont d'améliorer une galerie photo existante, de rendre les animations plus dynamiques, et d'optimiser le chargement des images pour une meilleure expérience utilisateur.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en programmation web et en manipulation d'images. Une familiarité avec la version précédente de la galerie photo est souhaitable.

Métiers concernés

Cette leçon est particulièrement utile pour les métiers liés au développement web, à la conception graphique, et au design d'interfaces utilisateur.

Alternatives et ressources

Pour ceux cherchant des alternatives, d'autres solutions incluent l'utilisation de bibliothèques JavaScript comme Lightbox ou Fancybox, ou des applications de gestion de photos en ligne telles que Google Photos ou Flickr.

Questions & Réponses

Un preloader est utilisé pour offrir une meilleure expérience utilisateur en affichant une animation pendant le chargement des images, ce qui évite des temps de chargement longs et des surprises visuelles.
Conserver les vignettes identiques à la V1 simplifie l'atelier, réduit le temps de modification et permet aux utilisateurs de se concentrer sur l'amélioration des animations.
L'animation des photos peut être rendue plus dynamique en utilisant des techniques de zoom et de transition, en optimisant le chargement des images et en rajoutant des effets visuels attractifs.