Les animations Flash

Dans cet article, je vais tenter d’expliquer via des petits travaux pratiques comment animer des objets avec Flash CS3.

Pour commencer nous allons voir l’animation d’objet, décrit comme une interpolation de mouvement par Flash.

Je vais animer un logo dans une scène tournée en 24 image par seconde et de dimensions 550×400 pixels. Le fichier source est téléchargeable ici : AllStars.fla

 Voici le rendu de l’animation

Pour commencer j’ai utilisé un logo tiré de google image. Elle est téléchargeable ici : ImageAllStars

J’ai utilisé les outils de création pour vectoriser chaque éléments puis je les ai placés sur un calque différent. Chaque éléments à donc son propre calque. Pourquoi ? Pour pouvoir les animer individuellement. J’ai aussi créé des dossiers et nommer chaque calque pour une meilleur visibilité. Voir sur l’image ci-dessous :

tuto-allstars1

Pour animer maintenant tous ces objets, il faut les transformer. Vous pouvez remarquer deux couleurs, le bleu et le vert. Ces couleurs définissent qu’il y a des interpolations de mouvement d’objets. Le vert représente un mouvement de forme, c’est-à-dire un objet non transformé, brut. C’est le cas des objets que vous venez de vectoriser. Exemple en sélectionnant deux objets.

tuto-allstars2

Pour les transformer, utilisez le raccourci F8 et choisissez CLIP. Pensez à nommer votre clip !

allstars_img3

Petite subtilité, les trois étoiles mauve auront droit à un traitement particulier. Tout d’abord on peut voir sur l’animation qu’elles sont en mouvement continue. C’est-à-dire que que l’animation de ces étoiles est imbriquée en plus de l’animation de notre scénario. Explication… Commencez par transformer une étoile en graphique (F8). En passant cela ne sert à rien de vectoriser les trois étoiles, une seule suffira et il ne restera plus qu’a la copier ! Une fois transformée en graphique, recommencez la manipulation de transformation (F8) mais cette fois-ci en clip. Du coup nous avons la possibilité d’animer notre étoile de l’intérieur. Pour entrer dans notre clip, double cliquez dessus :

allstars_img4allstars_img5

On peut désormais créer une animation. Exemple, sur 20 images, je vais créer une image clé toutes les 5 images (raccourci F6) et faire une rotation de 90° à chaque fois. J’aurai donc 5 images clé où la première et dernière image seront strictement identique. Lorsque vous avez placer vos étoiles à chaque image, faites clic droit puis « créer une interpolation de mouvement »

allstars_img7

allstars_img6

Une fois que votre étoile a été vectorisée, transformée en graphique puis en clip, dupliquée là deux fois pour avoir vos trois étoiles (servez-vous du fichier source pour comprendre). On peu remarquer qu’une étoile tourne dans l’autre sens. C’est pourtant exactement le même clip que les autres mais nous pouvons changer le sens de l’animation sans pour autant faire une deuxième animation, donc un deuxième clip et graphique avec des noms différents. Pour cela, sélectionnez le clip étoile que vous souhaitez puis faire:

Menu > modification > transformer > renverser horizontalement/verticalement. Tester avec ctrl + entrer.

 Voilà pour les images. Pour animer les lettres, c’est le même principe sauf que là ça va se passer sur notre scénario. Dans le fichier source regardez comment j’ai placé les objets et cela aux différents endroits. Cela vous permettra de mieux comprendre le système d’animation.

Mettre des effets sur les objets, à l’emplacement des images clés. Sélectionnez un de vos objets, puis regardez ses propriétés. Ça se trouve normalement en bas de la fenêtre de création. Si vous ne la visualiser pas, raccourci ctrl + F3 ou menu fenêtre > propriétés.

allstars_img8

Afin de vous aider, utilisez dans le fichier source le montage des effets sur l’étoile rouge. Dans cette animation j’ai simplement utilisé des effets de fondu alpha, un filtre de rayonnement, l’option teinte de couleur toujours dans les propriétés et agrandissement/réduction de mon étoile

Le loader, qui n’en est pas un vrai puisque normalement cela doit servir à charger l’animation lorsqu’elle est lourde et que le débit internet est très moyen. Ici il ne sert juste qu’à montrer la durée de l’animation. Pourquoi je vous ai mis ça ? Et bien pour vous montrer que l’animation reprendra au début. De plus j’ai volontairement utilisé une interpolation de forme. Ce n’est donc pas un objet transformé, juste une forme rectangulaire.

Si on avait voulu arrêter l’animation, il nous aurait fallu insérer du code pour gérer l’animation. On verra ça plus tard…

A VOUS DE JOUER !