Roadbook

Caroline Boulanger

 Page précédente - Page suivante 

Interpolation de mouvement

Télécharger les fichiers

Création des movie clip

Dessiner d'abord une coccinelle sans les ailes, puis convertir en Movie Clip (clic droit / convertir en symbole / Clip).
Dessiner ensuite une aile, qui aura deux états, sur 2 images clés : Une aile sur la première image-clé, puis faire une rotation de l'aile pour la seconde image-clé. On réalise ainsi un battement d'aile.

Création du décor

Dessiner le décor (paysage) sur la scène.
Dessiner une fleur, puis la sélectionner et convertir en Movie-Clip (clic droit / convertir en symbole / graphique). Créer une deuxième fleur et de l'herbe pour compléter le décor. Il est possible d'animer l'herbe en créant une interpolation de mouvement (double clic sur le clip de l'herbe). On peut visualiser le mouvement du clip "herbe" dans la bibliothèque (clic sur la flèche de lecture dans la fenêtre de visualisation). Il faut ensuite déposer plusieurs fois le movie clip animé "herbe" pour recouvrir tout le bas de l'animation.

Interpolation de mouvement

Ajouter la coccinelle sur l'animation, dans un calque "coccinelle". Faire un clic droit sur ce calque, et choisir "Ajouter un guide de mouvement classique" : un claque de guide se positionne au dessus du calque "coccinelle".

Sur le calque de guide, dessiner une forme (avec l'outil crayon par exemple) : c'est le chemin qui sera emprunté par la coccinelle. Revenir sur le calque "coccinelle" et déplacer la coccinelle jusqu'à être sur le début de la forme. Elle va "s'accrocher" au guide. Sur la première image du calque "coccinelle", faire clic droit, créer une interpolation classique. Aller sur la dernière image, déplacer le movie-clip coccinelle à l'autre bout du guide, et faire F6.

Tester l'animation (Controle + Entrée) : la coccinelle se déplace en suivant le guide.

L'animation en HTML5

Conversion avec Swiffy

Comparatif de poids

Fichier source (.FLA)

Fichier Flash Player (.SWF)

Fichier HTML5 (.HTML)

Poids

60 ko 12 ko 35 ko

 Page précédente - Page suivante