Phase 1. Animer

Sans rentrer dans le détail de la création d'animations dans Flash Professionnal (cela fait un paquet d'années qu'on trouve d'excellents tutoriels sur le sujet en ligne), je voulais attirer votre attention sur les points qui me semblent indispensables pour gagner du temps en animation.

DivingFishAnimation.png

Première chose, décomposez votre animation en éléments simples et utilisables, via la création de symboles. Mais attention : utilisez des Graphiques, et pas des MovieClips.

Comme je le disais il y a bien longtemps :

Les movieClips ne prévisualisent que la première image d'une anim, alors que les graphiques prévisualisent les animations qu'ils contiennent, très très pratique pour caler des éléments sur plusieurs niveaux. L'inconvénient, c'est qu'ils ne contiennent pas de code.

Fl-Anim-Sprites-Stage.png

Ensuite, dans votre scénario, profitez des calques (que vous nommerez) histoire de bien décomposer les plans et de ne pas redessiner 50 fois les mêmes éléments. Ici, le verre est fixe durant toute l'animation, et l'eau qui le remplit puis se vide est basée sur la même séquence à l'envers. Économisons les crayons :)

A côté du contrôleur (play/pause, etc), profitez de l'icône "En boucle". Elle vous permettra de voir et revoir une seule partie d'un mouvement afin de l'optimiser. Pour définir la plage sur laquelle cette boucle se joue, vous utiliserez soit les curseurs dans la timeline, soit la quatrième icône pour modifier les marqueurs. Pratique pour passer de "toute mon anim" à seulement 2 ou 5 autour.

Et n'oubliez pas que l'icône juste avant vous permet de modifier plusieurs images en même temps !

Phase 2. Exporter

Vous pouvez directement publier votre animation au format .swf, mais cela ne résoudra pas notre problème de tablettes. Le gros avantage reste malgré tout que cette animation pèse 3ko et complètement redimensionnable

Dans les paramètres de publication, vous pourrez aussi exporter en .gif, tout en demandant bien d'exporter l'animation (pas seulement l'image). Pas mal, mais pas forcément optimal, que ce soit en terme de poids ou de qualité d'image.

De plus, si je souhaite "diriger" mon animation, cela devient fort complexe via du gif, qui est automatisé pour se lire seul.

Fl-Anim-Sprites-Library.pngC'est pour cela qu'il existe une excellente fonction dans flash pour compiler chacune de ces animation sous la forme d'une Sprite Sheet (ou feuille Sprite, rien à voir avec la boisson gazeuse).

D'un simple ctrl-clic sur le panneau bibliothèque, ou dans le menu contextuel du panneau, vous accéderez à cette fenêtre qui va vous permettre de sélectionner tous les symboles que vous souhaitez mutualiser sur une même feuille.

Vous aurez ensuite à choisir les dimensions de la page en question (parfois pour vous faciliter la vie, vous pouvez décider de ne bouger qu'en X), ainsi que le format des données.

Fl-Anim-Sprites-SpriteSheet-Generer.png

Vous générez ainsi une image .png qui comporte chaque image de votre animation et reprend même les images en double (par exemple, dans l'animation originale, le verre se vide après une pause, dans la feuille générée, les images du remplissage ne sont présentes qu'une seule fois).

DivingFishAnimationSprite.gif

Les amateurs (et les développeurs) de jeu vidéo apprécieront.