Voici une méthode pour créer une animation plutôt simple avec un objet suivant une trajectoire particulière grâce au guide de mouvements. Nous allons utiliser 2 images pour cette animation, une pour le fond et une pour l’objet en déplacement :

Etape 1 : Préparation

L’étape 1 se déroule sous Photoshop.

1. Recadrer l’image de fond (le gazon) pour être dans les dimensions de notre animation (500x300 pixels)

2. Découper l’image de notre papillon en 3 parties (l’aile gauche, l’aile droite, le corps) avec l’outil Lasso (raccourci clavier : L) et les intégrer dans une image à part grâce à un copier-coller puis avec la baguette magique (raccourci clavier : W) supprimer le fond blanc.

3. Sauvegarder les 3 nouvelles images au format PNG pour conserver la transparence sous Flash.

Etape 2 : Fond et Logo

Maintenant, nous pouvons commencer notre animation avec Flash

1. Redimensionner le document à 500x300 et régler la cadence à 24 ips.

2. Importer les 4 images dans la bibliothèque : Fichier> Importer > Importer dans la bibliothèque.

3. Renommer calque 1 en Fond et y mettre notre image de gazon (utiliser le panneau Aligner pour un positionnement exact)

4. Insérer un nouveau calque, que l’on nomme Logo. Sur ce calque, on ajoute un texte (raccourci clavier : T) en noir. Sélectionner le texte et déplacer le un peu au-dessus en maintenant la touche Alt enfoncée. Ainsi je crée un nouveau texte identique au 1^er mais je change sa couleur par du blanc.

Etape 3 : Animation du Papillon

Passons à l’animation de notre Papillon

1. Insérer un nouveau calque, que l’on nomme Papillon. Sur ce calque nous allons réassembler les 3 parties de notre papillon.

2. Sélectionner le papillon en entier puis le convertir en symbole : Clic Droit > Convertir en Symbole. Nous allons le nommer clip_papillon et son comportement sera celui d’un clip.

3. Aller dans clip_papillon, puis dans la TimeLine, insérer une image-clé à la frame 4 : Clic Droit > Insérer une image-clé. Sur cette nouvelle image-clé, nous allons modifier la largeur des ailes avec l’outil transformation (raccourci clavier : Q) pour les rendre plus petites (Penser à appuyer sur la touche Alt). Ensuite nous allons insérer une image à la frame 6 : Clic droit > Insérer une image.

4. Retourner à l’animation, ainsi on vient de créer l’illusion du battement des ailes de notre papillon.

Etape 4 : Guide de Mouvement

1. Sur le calque Papillon, nous allons créer une image-clé à la frame 96 sur la TimeLine : Clic Droit > Insérer une image-clé. Puis sur nos deux autres calques nous rajoutons une image à la frame 96 : Clic droit > Insérer une image.

2. En restant sur le calque Papillon, nous rajoutons un guide de mouvements qui va se fixer au-dessus du calque Papillon : Clic Droit > Ajouter un guide de Mouvements. Sur ce calque guide, nous allons créer une forme que notre clip_papillon suivra comme sur des rails. Pour ça j’utilise l’outil plume (raccourci clavier : P) pour créer l’itinéraire de mon papillon.

3. Une fois le tracé effectué sur le calque Guide, nous retournons sur le calque Papillon pour placer notre clip_papillon sur une des extrémités de notre tracé puis à l’autre bout sur le frame 96. Ensuite nous créons une interpolation de mouvements sur le calque Papillon : Clic droit > Créer une interpolation de mouvements.

Etape 5 : Finition

1. Maintenant, testons notre animation (raccourci clavier : Ctrl + Entrée). Normalement, clip_papillon devrait suivre le guide que nous venons tout juste de créer. Si ce n’est pas le cas, vérifier que votre objet touche bien à votre guide.

2. Nous remarquons que notre clip_papillon ne pivote pas sur les virages. Lorsque qu’il arrive prés d’un virage, effectuer un double-clic sur clip_papillon (pensez à retourner dans la séquence) et le faire pivoter avec l’outil transformation (raccourci clavier : Q), une image-clé est automatiquement crée. Faire cette manipulation plusieurs fois sur chaque virage que prend notre papillon.

3. Pour que notre animation ne tourne pas en boucle, mettre cet action-script sur l’image-clé à la fin du calque Papillon (frame 96)

Conclusion :

Voila nous avons une animation plutôt sympathique, j’espère que vous aurez maintenant compris comment utiliser un guide de mouvements sous Flash. Si vous avez des questions, n’hésitez pas à utiliser les commentaires ci-dessous.

Post-Scriptum : Ce tutorial à était réalisé sous Flash MX 2004, certains menus ou fenêtres peuvent être différents de la version Flash 8 ou Flash CS3, mais rien de bien dramatique, les raccourcis claviers et le fonctionnement du guide de mouvements reste inchangés.