Roadbook

Caroline Boulanger

 Page précédente - Page suivante 

Interpolation de forme sans repères

Télécharger les fichiers

Création des movie clip

Créer les formes (ici, ce sont les lettres "A", "B", "C" et "D", créées avec l'outil "Texte"). Chaque forme est un clip (Menu Modification / Convertir en symbole / Clip)

Ajout des formes sur la scène

Une fois les formes créées, on ajoute la première forme (lettre "A") sur la scène. A l'image 20 par exemple, on ajoute une image-clé (touche F6).
On supprime la lettre "A" de l'image 20, pour remplacer par l'image "B"
Important : Pour les interpolations de forme, les clips doivent être "séparés" (Menu Modification / Séparer ou touches Ctrl + B) : les images ainsi séparées sont représentées par une trame avec des petits points blancs. Si ce n'est pas le cas, il faut refaire la même opération plusieurs fois.
Puis sur la première image, on créée une interpolation de forme (clic droit, créer une interpolation de forme). Une flèche sur fond vert va de l'image 1 à l'image 20.
Répéter l'opération pour les autres lettres.

L'animation en HTML5

Conversion avec Swiffy

Comparatif de poids

Fichier source (.FLA)

Fichier Flash Player (.SWF)

Fichier HTML5 (.HTML)

Poids

51 ko 8 ko 18 ko

Interpolation de forme avec repères de forme

Télécharger les fichiers

Création des movie clip

Comme pour la première animation, nous créons des formes (ici, les chiffres "1", "2" et "3") que nous convertissons toutes en Clip.

Ajout des formes sur la scène

Comme pour la première animation, ajouter les clips sur la scène. Pour pouvoir créer une interpolation de forme entre deux clips, les formes doivent être séparées (Menu Modifier / separer ou Ctrl+B, le chiffre est maintenant une trame avec des points blancs. Si ce n'est pas le cas, séparer la forme de nouveau).

Les repères de forme

Après avoir créé une interpolation de forme entre deux formes, on ajoute des repères de forme : il s'agit de points que l'on place à quelques endroits de nos formes (un repère de forme "a" sur la première forme, correspond à un repère de forme "a" sur la forme finale) pour indiquer que lors de l'interpolation, ces points ne doivent pas changer d'emplacement et leur interpolation de forme sera faite indépendemment du reste de la forme.
On peut mettre de un à plusieurs repères de forme, mais plus il y en a, plus l'interpolation sera complexe, et donc moins fluide.

L'animation en .swf

Comparatif de poids

Fichier source (.FLA)

Fichier Flash Player (.SWF)

Fichier HTML5 (.HTML)

Poids

11 ko 3 ko 11 ko

 Page précédente - Page suivante