32
Création d’un papillon : Guide de mouvements
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 : du gazon et une pour l’objet en déplacement : un papillon.
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 1er 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.
- Guide de mouvement - Pack d’animation
- cliquez ici pour télécharger le pack contenant les fichiers de l’animation flash papillon
Article publié par MØG
Vous aimez cet article? Partagez le !
Adepte de Photoshop et Flash depuis de nombreuses années. J’aime faire partager mes connaissances avec le plus grand nombre.
Pour en savoir plus : Mon Portfolio
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 27 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
9 septembre 2008 15:28, par Wonka
Qu’une chose à dire o_O bluffant, Mog tu te surpasses en flash maintenant, vraiment j’adore vivement le prochain
Répondre
-
9 septembre 2008 18:12, par Monk’
Je plussoie, vraiment incroyable ! ^^
Ça donne envie de laisser tomber les cours et faire du flash x)
Répondre
-
-
-
10 septembre 2008 11:45
Salut à tous, Magnifique ... peut être pas quand même, je trouve la forme du guide un peu surnaturel et l’amplitude du mouvement des ailes un peu léger en tous cas sa explique le fonctionnement des guides.
Répondre-
14 septembre 2008 15:37, par lesloups
salut, en même le guide de mouvement est simple
tu peux le faire archi compliqué moi j’aime bien ça fait style avec un bon design vecto ça serait style :p Merci mais bon je connaisais
Vous pouvez utiliser ce tutoriel pour faire une animation avec une voiture vous construiser un circuit et après vous fait un guide de mouvement du circuit (le guide du mouvement sur la voiture) et la voiture suivra le circuit c’est pas magique après vous jouer avec l’acceration et la deceleration vous pouvez faire des derapages avec la rotation ou la tranformation manuel :p
Répondre
-
-
-
10 septembre 2008 14:40, par Kraosor
Je ne vois pas l’animation :o Sinon bravo pour le tuto.
Répondre-
-
13 septembre 2008 18:03, par Romain
L’animation n’est pas visible chez moi non plus... testé sur 2 laptops.
Répondre-
13 septembre 2008 18:58, par MØG
Vérifie que la dernière version de Flash player est installée . tu arrives à lire d’autres animations Flash ?
Voir en ligne : http://mog007.free.fr
Répondre
-
-
-
-
22 novembre 2008 01:02, par maniphil
Salut MOG !
juste pour te dire que ton tuto m’a lancé dans le monde de flash. j’ai en effet réussis a créer un carré qui bouge. Ce n’est rien comparé à l’oeuvre que tu a faite mais juste pour te dire merci pour ce tuto !!
mani
Répondre-
22 novembre 2008 16:01, par MØG
Merci pour le com’
L’univers du Flash un domaine plein de bonne surprise alors bonne continuation
Voir en ligne : The MØG WebSite
Répondre
-
-
16 février 2009 19:21, par jype
Franchement Sympa...
J’ai galeré un peu pour comprendre qu’il fallait mettre le clip papillon dans le calque papillon ! Mais sinon, pour un debutant j’ai fait la meme anime que toi... et ca c est cool !
Je vais voir si tu as d’autre tuto, car c simple et efficace.. !
Merci encore
Répondre-
17 février 2009 18:24, par MØG
Merci
Oui j’ai d’autre tutos à mon actif sur WKS :
Présentation de l’interface Flash
Voir en ligne : MØG Website
Répondre
-
-
17 juillet 2009 13:23, par Audrey
super tuto, mais malheureusement je n’arrive pas à faire tourner le papillon pour rendre la chose plus crédible, je double clic sur le papillon à la position que je veux, je sélectionne le calque, je prend l’outil pour pivote, je pivote, je reviens sur ma séquence et là le papillon a bougé sur tout mon calque papillon... au lieu d’une seule position précise, alors que j’ai bien l’image clé qui se crée automatiquement comme marqué dans le tuto... je ne vois pas mon erreur ! merci d’avance pour la réponse
Répondre -
17 juillet 2009 14:25, par Audrey
oups ça y est j’ai trouvé... j’avais mal lu, il faut double cliquer pour rentrer dans le clip, en resortir et cela crée une image clé et pivoter le papillon sur la timeline et non dans le clip lui meme sinon toutes ces occurences changent !!!
Répondre -
28 décembre 2009 11:50, par thvi
Bonjour, Et l’option « Orienter vers la trajectoire » ne fonctionne plus sous CS4 ? Doit-on réaliser autant de manipulations pour orienter l’objet ?
Répondre -
31 mars 2010 15:01, par Eva
Je sais que le tuto est un peu vieux, mais si quelqu’un passe par ici, j’ai un soucis a l’étape « Ensuite nous créons une interpolation de mouvements sur le calque Papillon : Clic droit > Créer une interpolation de mouvements. » Je crée mon interpolation mais mon papillon ne suis pas ma courbe, il se téléporte a son emplacement final. Il n’y a pas les petites fléches (qui indiquent le mouvement) sur le TimeLine. J’ai vérifé et mon clip touche bien ma courbe
Merci d’avance pour les réponses !(j’utilise flash CS4)
Répondre -
24 mai 2010 20:07, par puppetGirl
Bonjour, J’ai bien suivi ton tuto (qui est bien sympa) mais j’ai un problème : mon papillon sur la scène ne bat pas des ailes alors que c’est bien le clip papillon qui bat des ailes que je rajoute dans ma scène...
Répondre -
25 juillet 2010 20:54, par muchtard
Excellent tutoriel, vraiment, ca fait plaisir de trouver des tutos flash qui sachent nous montrer concretement l’interet des differents outils. Merci beaucoup pour ce travail. A très bientot pour pleins d’autres tutos.
mUcHtARd
Répondre
