ANIMATIONS Flash CS6 5.1 La concepion d'animaion A- Le concep d'animaion dans Flash Flash perme de créer des animaions. Lorsque vous animez un obje, vous gérez deux espaces : l'espaceemps dans le panneau Scénario avec les images clés e l'espace géographique avec la scène dans la créaion de l'animaion. Le emps dans Flash es géré à deux niveaux : - La cadence qui es la viesse d'exécuion du documen Flash final publié (fichier SWF) ; par défau, la cadence es de 24 images par seconde. - La durée enre deux éapes d'une animaion pour qu'elle s'exécue plus ou moins rapidemen. L'espace géographique es égalemen géré à deux niveaux : - La aille du documen Flash final publié (fichier SWF) ; ou ce que va voir l'uilisaeur se verra dans ce espace fini. - L'espace de créaion des animaions, des clips. Vous allez déerminer les posiions de dépar e d'arrivée des objes animés. ANIMATIONS B- Les différenes animaions dans Flash L'animaion image par image perme de créer des mouvemens rès précis, des déformaions rès fines. À chaque image consiuive de l'animaion, vous allez devoir dessiner un nouveau dessin ou modifier finemen le dessin précéden. Cee echnique alourdi foremen le poids de l'animaion. L'animaion par inerpolaion de forme perme de déformer un dessin. Flash crée l'inerpolaion enre la forme de dépar e la forme d'arrivée. L'animaion es légère puisqu'il n'y a que deux dessins. Flash CS6 47
L'animaion par inerpolaion de mouvemen perme d'animer un dessin, de le déplacer, de lui appliquer un mouvemen. Un seul dessin doi êre crée e c'es ce dessin qui es déplacé. C- Les symboles d'animaion Flash ravaille avec des symboles pour créer les animaions. Un symbole es un obje, un dessin, un visuel qui inervien dans une animaion e qui es réuilisable. Il exise rois ypes de symbole : Le symbole graphique Le symbole clip Le symbole bouon Le symbole bouon inervien quand vous devez avoir une ineracion avec l'uilisaeur qui doi, par exemple, cliquer sur un bouon pour arrêer une animaion, pour la relancer, pour aciver un lien hyperexe... Acuellemen la endance es de ou créer avec des symboles clips car avec les clips vous pouvez ou faire. Dans ce ouvrage, nous uiliserons ces rois ypes de symbole. D-Les occurrences des symboles Les symboles ne serven qu'à créer les objes e les animaions, mais ce son leurs occurrences qui son animées e uilisées. Voici la démarche concrèe pour la créaion d'une animaion : - Créaion d'un symbole graphique conenan le dessin de l'obje qui sera animé. - Créaion d'un symbole clip. - Uilisaion d'une occurrence du symbole graphique dans le symbole clip pour créer l'animaion. - Uilisaion d'une ou de plusieurs occurrences du clip sur la scène principale de la séquence. E- La séquence de l'animaion Le symbole graphique perme de créer un dessin uilisé dans une animaion par inerpolaion de mouvemen. Il es saique e ne conien pas d'animaion. Le symbole clip es une animaion auonome, il conien les animaions image par image, les animaions par inerpolaion de forme e les animaions par inerpolaion de mouvemen. Une fois ous vos symboles créés, pour concevoir vore animaion finale, vous allez placer oues les occurrences des clips sur la scène principale de l'animaion, nommée aussi la racine de l'animaion. Dans Flash, dans ous les documens, cee scène principale es nommée par défau : la séquence 1. 48 Flash CS6
F- Les animaions des objes Les méhodes d animaion Depuis la version Flash CS4, les animaions peuven êre conçues selon deux méhodes différenes. La méhode hisorique se fai uniquemen avec le panneau Scénario avec l uilisaion d images-clés. Cee méhode, oujours uilisable, n es plus conseillée acuellemen, car elle offre moins de facilié, moins de précision e nécessie plus de manipulaions. Mais c es cee méhode que vous devez uiliser si vous souhaiez créer e publier une animaion exploiable sur smarphones e ablees aciles. Pour en savoir plus sur l'uilisaion de cee méhode, reporez-vous au ire Publier pour les smarphones e les ablees aciles du chapire 7.1 La publicaion des animaions. La deuxième méhode, celle qui es préconisée e celle que nous allons uiliser ou au long de ce livre, uilise le panneau Edieur de mouvemen. Elle perme une grande précision des paramères de mouvemen (déplacemen, roaion, couleur, accéléraion...) e cenralise ous ces paramères d animaion dans ce panneau. Cee méhode es faie pour créer des animaions qui seron vues sur écran d ordinaeur. Les images-clés dans le scénario Les objes son animés dans les symboles clips avec la noion «d'images-clés». Une image-clé es une éape à un insan donné au cours de l'animaion où il y a un changemen. Ce changemen à l'insan donné (espace-emps) peu inervenir sur la posiion d'un obje (espace géographique), sur l'aspec d'un obje (couleur, aille...), sur l'animaion elle-même (accéléraion...). Ces images-clés se gèren dans les panneaux Scénario e Edieur de mouvemen de l'animaion. C'es dans le scénario que se gère l'espace emps de l'animaion. Les flasheurs parlen de «imeline» : la ligne de emps. ANIMATIONS Les images-clés dans les mouvemens Une fois le débu d'une animaion déerminée de ype inerpolaion de mouvemen uniquemen, les éapes de ce mouvemen se gèren avec des images-clés dans l'edieur de mouvemen. Chacune de ces éapes es visible dans le panneau Edieur de mouvemen. Flash CS6 49
La règle d'or Pour ne jamais vous romper dans la créaion de vos animaions, rappelez-vous e appliquez cee règle d'or : une animaion par symbole par calque. Cela signifie que pour animer dans un même mouvemen une occurrence d'un symbole, vous devez le faire dans un même calque, sachan qu'un mouvemen peu êre fai de plusieurs éapes. G- Une méhodologie de créaion des animaions Première éape Dans un premier emps, vous devez écrire e dessiner le «soryboard» de vore animaion : avec des feuilles de papier, dessiner rapidemen, éape par éape, les différens mouvemens qui inerviennen dans vore animaion. N'hésiez pas à dessiner des flèches pour indiquer le sens des mouvemens, plus ou moins épaisses pour symboliser les viesses des mouvemens. Prenons un exemple : le soryboard m'indique qu'une voiure se déplace dans un paysage avec des nuages en mouvemen dans le ciel. Deuxième éape Ensuie, vous devez éudier ous les objes qui son en mouvemen dans l'animaion e ous ceux qui son évenuellemen fixes. La quesion à se poser es la suivane : les objes en mouvemens on-ils des relaions emporelles ou géographiques enre eux? Si deux objes se déplacen indépendammen l'un de l'aure, ils se gèren séparémen. Ils seron simplemen placés sur la scène à l'endroi voulu. Si deux objes «ineragissen» enre eux : l'un es soppé par l'arrivé de l'aure, l'un se déplace en même emps que l'aure..., dans ce cas il faudra gérer les deux objes en même emps. Troisième éape À cee roisième éape, vous devez individualiser ous les mouvemens qui inerviennen dans les animaions des objes. Chaque mouvemen individuel va correspondre à un symbole clip. Cee éape es la plus imporane, mais aussi la plus délicae. De cee éape essenielle va découler la suie de la réalisaion. Quarième éape À parir de la lise des mouvemens définis dans l'éape précédene, vous pouvez mainenan dresser la lise des symboles. Souvenez-vous que pour avoir une animaion par inerpolaion de mouvemen il fau forcémen un symbole graphique (ou un symbole clip si vous désirez ravailler ou en clip). Dernière éape À vous de jouer! 50 Flash CS6
H-Visualiser le mouvemen avec l'effe Pelure d'oignon Le sysème de visualisaion appelé Pelure d'oignon perme d'afficher par dégradé de ransparence les différenes images-clés dans la scène afin de mieux visualiser le mouvemen des objes animés. Cliquez sur le bouon Conours de pelures d'oignon siué dans le bas du panneau Scénario pour afficher les pelures d'oignon en mode filaire ou cliquez sur le bouon Pelure d'oignon les pelures d'oignon en mode plein. pour afficher Conours de pelures d oignon Pelure d oignon ANIMATIONS Faies glisser les poignées de débu e de fin pour définir le nombre d'images duran lesquelles l'effe de pelure d'oignon doi êre affiché à l'écran, avan la êe de lecure e après la êe de lecure. Pour modifier les opions de l'effe Pelure d'oignon, cliquez sur le bouon Modifier les repères de pelures d'oignon puis choisissez : - Toujours afficher les repères pour que les poignées permean de délimier la durée de l'effe soien affichées en permanence dans la barre de emps, que l'opion d'affichage Pelure d'oignon soi acivée ou non. - Marqueurs d'ancre pour bloquer l'affichage de la pelure d'oignon dans le emps e ainsi empêcher que l'effe Pelure d'oignon suive la êe de lecure lorsque vous la déplacez. - Plage de marqueurs2 ou Plage de marqueurs5 pour régler auomaiquemen l affichage Pelure d oignon sur 2 images ou 5 images ou cliquez sur Plage de marqueurs Tous pour appliquer l affichage Pelure d oignon sur oues les images de l animaion. Pour masquer les pelures d oignon, cliquez, selon le cas, sur le bouon ou. I- Visualiser une animaion Pour visualiser une animaion dans le panneau Scénario, faies glissez la êe de lecure (recangle rouge au-dessus des images). Pour lire une animaion dans la scène, dans le panneau Scénario, cliquez sur la première image-clé puis faies Conrôle - Lire ou appuyez sur la ouche E. Flash CS6 51
Pour lire une animaion, uilisez les bouons de conrôle siués en bas du panneau Scénario : Pour lire une animaion, vous pouvez égalemen uiliser le panneau Conrôleur (Fenêre - Barres d'ouils - Conrôleur). Pour eser une animaion dans une fenêre indépendane en généran le fichier SWF de publicaion, faies Conrôle - Teser l'animaion - Teser ou pe (Mac) ou CE (PC). Après avoir visionné l'animaion, fermez la fenêre de l'animaion SWF pour revenir dans l'environnemen de ravail Flash. 5.2 La gesion des images du Scénario A- Modifier l'affichage des images du Scénario Cliquez sur le menu des opions du panneau Scénario puis cochez les opions qui vous conviennen : (a) Définissen la largeur des images. (b) Le conenu de chaque image-clé apparaî dans une vignee. (c) L'inégralié de la scène apparaî en miniaure dans chaque vignee. (d) Rédui la haueur des images. (e) Affiche en couleurs le fond des images selon le ype d'inerpolaion. u Une animaion peu conenir un grand nombre d'images qui ne pourron pas oues êre visibles dans le panneau Scénario. Le bouon perme de faire défiler rapidemen le conenu du panneau Scénario afin d'afficher l'image où se rouve la êe de lecure. 52 Flash CS6