Easy-Micro [ EDGE ANIMATE - Symbole Edge ] - Formations informatiques pour entreprises

Edge Animate
Symbole Edge
Utilisation des symboles dans Edge Animate

Les symboles Edge Animate - comme dans Adobe Flash - permettent d'encapsuler les différents éléments de notre animation.
L'encapsulation des objets Edge Animate permet de réaliser des animations qui contiennent d'autres animations.

Pour découvrir la notion de symbole dans Animate, prenons l'exemple de l'animation d'une voiture vue de profile qui traverse la scène avec les roues qui tournent.

Voir le résultat Easy-Micro de cet exemple de voiture Edge Animate

Pour réaliser cet exemple, vous avez besoin de trois objets:

un dessin de voiture de profil (carosserie),
un dessin de roue,
et - éventuellement - un fond (un décor)

Création d'un projet
Par le bouton Créer ou Fichier/Nouveau puis choix de la taille de la scène dans le panneau propriétés (700X400 par exemple - voir photo ci-dessous). On enregistre notre projet dans un dossier précis. Edge à créé dans ce dossier différents fichiers (voir Premier pas dans Edge Animate).
Importation des objets dans Edge Animate
Par un clic sur bouton + des Images du panneau Bibliothèque (ou par un cliquer/Glisser). Si vous avez utilisez le cliquer/Glisser, vous pouvez supprimer de la scène Animate tous les objets (ils sont conservé dans la bibliothèque).
Positionnement des objets sur la scène
Cliquer/ Glisser le fond sur la scène. Une fois le fond à la taille de la scène, clic droit "Vérouillé".
On rajoute ensuite la carrosserie sur la scène (cliquer/Glisser), puis clic droit (Cmd + Clic sur MAc) sur la carrosserie, "Convertir en symbole". Nommé le "Carrosserie". Un double clic sur ce symbole ouvre le symbole.
Dans le symbole Carrosserie, glisser une roue. Clic droit, convertir en symbole.

Avant de faire tourner la roue, assurez-vous que les deux premiers boutons "Mode image-clé auto (K)" et "Mode de transition automatique (X)" du scénario Edge Animate sont bien activés. Cela va nous permettre d'éviter de créer des images clé et des transitions manuelle :

Par contre, évitez d'activer le troisème bouton "Activer/Désactiver le vérouillage (P)" pour cet exercice car ce bouton permet d'activer des images clés et des transitions en un seul clic. Très pratique sur des animations simple mais pas içi :-)
Pour faire tourner la roue
On positionne le curseur (tête de lecteur) sur 0. Dans le panneau de transformation de gauche, on clic sur le bouton lozange à côté des options de rotation pour inserer une image clé (rotation à 0). On déplace le curseur (vers 00:00,5) et on rajoute une image clé toujours dans transformation / Rotation (rotation autour de 300°).

Pour la deuxième roue, dans le scénario, faîte un clic droit / dupliquer et positionez correctement la deuxième roue.
Pour faire avancer la voiture
On réduit la voiture sur la scène principale.
Tête de lecture sur l'instant 0, on ajoute une image clé de positionnement. On déplace le curseur plus loin et on rajoute une autre image clé.
Pour que les roues tournent pendant toute l'animation
On ouvre le symbole roue par un clic droit dans la bibliothèque Edge Animate:

Dans le scénario, on clic ensuite sur le petit losange de la ligne action. Dans le déclencheur, on clic sur "Lire" puis on saisie 0 dans les parenthèses. Attention, on ne peut voir l'effet d'un déclencheur qu'en mode final (soit après publication, soit en affichant un aperçu dans le navigateur via un Ctrl + Entrée).
Pour faire accélérer la voiture
Dans le scènario, on sélectionne la ligne correspondant au déplacement de la voiture (la ligne qui à les coordonnées en x) et avec le petit bouton carré d'accélération visible au dessus du scénario, on sélectionne "Accélération progressive" puis valider par "Entrée".
Pour stoper les roues
Sur la scène principale, on se positionne avec le curseur à la fin de l'anime et, par un clic sur le losange de la ligne action, on rajoute une action (Ctrl + T) et on saisie :
Sym.getSymbol("voiture").getSymbol("roue").Stop();