CATALOGUE Code & Data Formation Animate CC Maîtrisez la programmation dans Animate CC - Ateliers créatif avec Create JS Ajouter et Centrer un Objet dans une Scène d'Animation

Ajouter et Centrer un Objet dans une Scène d'Animation

Création d'une instance de l'animation de chargement au centre de la scène

Vidéo non disponible ! Réessayez plus tard

3h 27min

57 leçons

5,0

Transcription

Cette leçon fait partie de la formation

Maîtrisez la programmation dans Animate CC - Ateliers créatif avec Create JS

59,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

3h 27min

57 leçons

5,0

Cette leçon fait partie de la formation

Maîtrisez la programmation dans Animate CC - Ateliers créatif avec Create JS

59,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Étapes de Développement et Débogage

Objectifs

Les objectifs de cette vidéo sont d'apprendre à :

Créer et positionner un objet dans une scène.
Effectuer un débogage efficace pour résoudre des erreurs de code.
Appliquer des concepts de base en animation et en programmation.

Résumé

Apprenez à créer un objet loop, le positionner au centre d'une scène, et déboguer le code pour résoudre les erreurs.

Description

Dans cette leçon, nous allons couvrir la création d'un nouvel objet loop en utilisant new lib.loadLoop, ainsi que la manière de le positionner au centre de la scène. Nous aborderons les concepts de StageCanvas, la largeur (width) et la hauteur (height) de la scène. Après cela, nous passerons par une session de débogage rigoureuse pour identifier les erreurs dans le code et les corriger. Vous apprendrez comment isoler des segments de code pour détecter les causes des problèmes et comment ajuster les propriétés des objets pour améliorer l'affichage.

Plus spécifiquement, vous verrez comment :

Créer un objet d'animation avec précision.
Le centrer en utilisant les dimensions de la scène.
Utiliser des commentaires pour rendre le code plus compréhensible.
Effectuer des ajustements d'échelle pour améliorer l'apparence de l'objet.
Résoudre des erreurs liées à l'ajout d'événements de clic.

Ce tutoriel est essentiel pour ceux qui cherchent à maîtriser les bases des animations dans un contexte de développement plus large.

Questions fréquentes

Quelle méthode est utilisée pour centrer un objet dans une scène ?

La méthode consiste à utiliser les propriétés width et height de la scène, puis diviser ces valeurs par 2 pour positionner l'objet au centre.

Pourquoi le débogage est-il nécessaire dans ce contexte ?

Le débogage est essentiel pour identifier et corriger les erreurs de code qui empêchent les objets, comme les boutons, de s'afficher correctement.

Quelles sont les étapes pour réduire la taille d'un objet ?

Pour réduire la taille, il faut sélectionner l'objet, cocher l'option pour modifier plusieurs images en même temps, sélectionner tout (Ctrl+A), et ajuster l'échelle à un pourcentage souhaité.

Programme détaillé

Accueil de la formation

Module 1 - Créer une expand banner

Présentation des assets et de l'atelier 01:56

Création de la première partie de l'animation 04:55

Référencement du scénario principal dans une variable et ajout d'un gestionnaire de survol sur la zone bouton 02:23

Ajout d'une animation Tween pour agrandir le stage 02:06

Modification du fichier html de publication pour pouvoir redimensionner le stage 02:53

Test du gestionnaire d'évènement survol et ajout d'un gestionnaire pour la sortie de survol 02:00

Ajout d'une fonction call à la fin du mouvement Tween 02:20

Intégration de l'animation au sein d'une page html 05:06

Module 2 - Créer une animation de chargement

Présentation de l'atelier et de la structure de l'animation 01:59

Création de l'animation de preloading 04:05

Liaison du symbole MovieClip dans la bibliothèque et ajout d'un gestionnaire d'évènement click sur le premier bouton 02:37

Création d'une instance de l'animation de chargement au centre de la scène 05:06

Programmation du deuxième bouton pour charger une instance de l'animation de chargement dans un symbole MovieClip 05:36

Programmation du Troisième bouton 02:22

Module 3 - Créer une galerie photo version 1

Présentation de l'atelier 00:44

Présentation du fichier de départ / structure de l'animation 02:26

Organisation du code / Ajout d'écouteurs d'évènements sur le MC menu 07:27

Ajout de fonctions évènement (survol, sortie, click) sur le MC menu 05:01

Animations grossissement / rétrécissement des vignettes 07:44

Fonction évènement click sur les vignettes 01:14

Animation Tween des visuels Zoom 09:53

Module 4 - Créer une galerie photo version 2

Présentation de l'atelier 01:44

Présentation du fichier de départ / structure de l'animation 01:26

Vidage du MC chargeur 04:35

Dimensions du chargeur / ajout d'une animation de chargement 07:03

Composition du chemin du fichier à charger 03:09

Fonction de préchargement de l'image 04:32

Chargement de l'image dans le MC chargeur 18:41

Module 5 - Creation et lecture d’un objet son

Présentation de l'atelier 01:16

Présentation du fichier de départ / Objet son / Evènement fileload / identification du fichier son à charger 06:16

Ajout d'une animation de chargement 02:40

Fonction de chargement / Ajout de gestionnaire "click" sur les boutons 04:01

Fonction de paramétrage et lancement du son après le chargement 02:46

Fonction de fin de lecture du son 00:38

Programmation du bouton switch de lancement/arrêt du son 05:47

Module 6 - Création et utilisation d’une liste de sons

Présentation de l'atelier 00:58

Présentation du fichier de départ / Chemin dossier assets / Tableau listing des fichiers son 02:17

Format alternatif / Evènement fileload pour vérifier le chargement de chaque son 01:41

Enregistrement des sons et de leur dossier / Fonction de chargement son 02:14

Fonction de lancement du son chargé / Fonction de fin de lecture du son 04:10

Programmation des boutons pour lancer les 3 sons 03:59

Module 7 - Chargement et lecture de formats vidéo

Présentation de l'atelier 03:26

Positionnement de la balise <canvas> dans le DOM 02:11

Création et positionnement d'un div dans le DOM pour recevoir la vidéo 03:08

Ajout d'un script de fermeture de la vidéo dans le header du DOM 07:08

Creation d'une fonction d'ajout de la vidéo dans le div prévu dans le DOM 04:11

Réglage, ajout dans le Dom et lancement de la vidéo 02:50

Ajout et position d'un bouton image par dessus la vidéo pour la fermer 03:25

Ajout d'un gestionnaire d'évènement appelant le script de fermeture 01:42

Programmation du bouton de lancement de la vidéo 01:44

Module 8 - Chargement et utilisation d’API externes (Jquery, Greensock)

Chargement des bibliothèques des API externes 01:47

Solution 1 : insertion d'une balise script directement dans la page html 01:38

Solution 2 : insertion d'une balise script dans le Dom à partir de l'animation 05:48

Temporisation des instructions de déplacement 01:45

Programmation du mouvement de la boule bleue (createJS) 02:52

Programmation du mouvement de la boule verte (Greensock) 02:08

Programmation du mouvement de la boule orange (Jquery) 01:45

1 commentaire

5,0

1 vote

C0C23DAC-E0F0-4671-A5DA-98CC3C3F0FD7@cyberlibris.studi.fr

Il y a 11 mois

RAS