Animate

Découverte d’Animate.

A savoir: pour animer un personnage il faut absolument le convertir en symbole.(movie-clip) (interpolation de mouvement)

Pour les formes, une interpolation de forme sans conversion.

Également:

shift F5 supprime une image (la ligne de temps diminue)

shift F6 supprime l’image clef.

Pour animer un élément:

• Cliquer sur la « timeline » au niveau de la duré souhaité pour définir la duré. Un rectangle jaune apparait. (si plusieurs, cliquer glisser)
• aller dans, insertion, scenario, image ou F5.
• Pour l’élément en mouvement, cliquer sur la ligne correspondant et insertion, interpolation de mouvement.
• Placer le curseur sur la première image et placer celle-ci au point de départ de votre animation.
• Déplacer le curseur sur la dernière image et placer celle-ci à la fin de votre animation

Un avion:

• Concevoir l’avion et le convertir en symbole.
• Faire une ligne guide (à la plume) sur un autre calque et dans ces propriété convertir en guide.
• Placer l’avion (son point central) sur la ligne guide.
• Placer le calque de l’avion sous et collé au calque trajectoire(légèrement décalé).
• Cliquer sur la ligne(timeline) avions et créer une interpolation.
• Comme dans le premier exemple, placer le curseur et l’avion au début et idem pour la fin.
• Cliquer ensuite sur le calque avion et dans ses propriété cocher orienté vers la trajectoire.

Un oiseau:

• Dessiner l’oiseau sans l’aile et en faire un symbole.
• Sur un autre calque dans la bibliothèque faire l’aile.
• Sur une duré pas trop long, au milieu de la timeline, placer une image clef aile vers le bas.
• faire une image clef aile vers le haut au début et à la fin(copier coller pour qu’elles soit identique)
• Faire glisser cette oiseau sur un nouveau calque dans la scène principale.
• Répéter les action de l’exercice précédant à savoir: Faire une ligne guide sur un autre calque…..

Une locomotive qui vibre:

• Créer un carré noir sur un calque dans le scénario.
• Le convertir en symbole.
• Créer un autre carré, le nommer locomotive et le convertir en symbole.
• Ouvrir ce symbole (locomotive) en double cliquant sur son image.
• Faire glisser le symbole carré noir sur la fenêtre locomotive pour compléter celle-ci, le modifier selon les besoins.
• Créer une image clef a (par exemple) une seconde sur toutes les lignes du scénario.(cliquer glisser puis F5)
• Créer une interpolation classique de toutes les lignes.
• Par ligne créer des images clefs au endroit désirés en déplaçant les rectangle noir de la locomotive.
• Créer un nouveau symbole (roue).
• Pour les rayon nous pouvons utiliser la fenêtre transformer une fois un rayon crée et son axe de pivot déplacé. Changer l’angle à 60° et dupliquer.
• Cliquer sur la première image de la roue qui tourne et créer une interpolation.
• Créer une image clef de fin.
• Le curseur sur l’image de fin cliquer, et faire un clique droit sur l’image dans la fenêtre,transformer,rotation antihoraire.
• Plus loin sur la ligne créer un autre image clef F6 cliquer dessus et clique droit sur l’image et recommencer.
• Ouvrir le symbole locomotive et y glisser autant de roue qui tourne que l’on désire.
• Sélectionner les roues, clique droit et repartir dans les calques pour que chaque roues soit dans un calque distinct.
• Revenir dans le scénario et placer comme précédemment la loco au début et à la fin.
• Sur la locomotive créer un calque, dessus faire une forme pleine au dessus de la loco et dans ses propriétés cocher masque.
• Sur le calque de la locomotive , propriété, cocher masqué.
• Pour la fumée, dans symbole ouvrir la locomotive et créer un nouveau calque.
• Dessiner la fumée et convertir en symbole.
• Symbole fumée dans la timeline placer une image clef au début, puis une différente à la fin et interpolation de forme.
• Pour plusieurs forme en même temps, cliquer sur l’image clef de début et modification, forme, ajouter un repère de forme.
• Placer le repère de forme sur le bord du premier objet et cliquer sur l’image de fin et placer le repère sur le bord du même nuage.

Pour ajouter un son (wav ou mp3)

• Importer le son.
• Créer un calque et une image clef au début.
• Dans propriétés dans son choisir son son.

Un lien très utile: cliquer ici

Pour arrêter l’animation (éviter la boucle):

• Dans la séquence au dessus, créer un calque (action) .
• Créer une image clef à la fin et dessus faire F9, ce qui donne accès a une fenêtre de script.
• Dans la fenêtre écrire : this.stop();

Ajouter des scripts (F9)

• Créer un calque « action » au dessus de la pille des calques.
• Y créer une image clef où on le désir et faire F9.
• Dans la fenêtre écrire: this.stop(); ceci arrêtera l’animation sur l’image clef (pas ce qui est en clip).

Pour arrêter le clip(ex: un papillon qui bat des ailes)

• Cliquer dans la fenêtre sur le papillon et dans ces propriétés le nommer « papillon_mc ».
• Dans la fenêtre action écrire: this.papillon_mc.stop();

Pour ajouter des boutons de contrôle

• Cliquer dans la fenêtre sur le bouton choisi (lecture) et le nommer dans ses propriétés « lecture_mc ».
• Sur le calque action, cliquer au début et F9.
• Dans la fenêtre action écrire:

this.lecture_mc.addEventListener('click', lecture.bind(this) );

function lecture(e) {

this.play();

}

Pour pause

• Cliquer dans la fenêtre sur le bouton pause et le nommer dans ses propriétés « pause_mc ».
• Sur le calque action, cliquer au début et F9.
  Dans la fenêtre action écrire:

 
this. pause_mc.addEventListener('click', pause.bind(this) );

function  pause(e) {

this.stop();

} 

Pour retour

• Idem que plus haut et écrire:

 
this. retour_mc.addEventListener('click', retour_debut.bind(this) );

function  retour_debut (e) {

this.gotoAndStop(0);

}  

Il faut faire attention au n° « 0 » de l’image ci-dessus, (si celui-ci était le n° 172) si l’on ajoute des images dans l’animation.

Il est plus prudent de créer un calque « label » et y placer les images clef, et dans leur propriétés les nommer début puis fin. Dans le script nous pouvons alors remplacer le n° par début et faire pareil pour fin.

Exporter:

• Créer un dossier d’exportation.
• Dans fichier, paramètre de publication, choisir son dossier d’exportation(nom de sortie).
• Dans avancés, décocher remplacer le fichier html.
• Cliquer sur OK.( Nous avons donc un dossier comprenant: suonds un fichier html et un fichier js).
• Soit intégrer un iframe en src= »loco.html » (ne pas oublier dans le sit de placer les deux autres fichier.
• Soit d’intégrer le html directement en temps que page du site.

Le site pour les codes: ici.