« Les Bases de Flash : Choses utiles

Les Bases de Flash : Animation simple

le 11 juin 2009 • Flash • par Dawlin

Waw ! Enfin ! Vous l'attendiez tous. Certes vous avez tous flash 8 (du moins ceux qui voulaient ce tutoriel) mais vous ne savez pas vous en servir. Ce sera chose faite à la fin de cette suite de tutoriels.

Vous avez vu l'interface, c'est très simple : à gauche les outils, à droite les couleurs (et la bibliothèque je crois bien), en bas les propriétés/filtres/actions/paramètres.

Si vous n'avez pas toutes ces fenêtres comme je vous l'ai dit, cliquez sur fenêtre, lancez celle que vous voulez, cliquez sur la fleche en haut à droite et dans grouper avec choisissez

Note : ceci n'est qu'un exemple. Moi je travaille comme ça :

Vous voilà prêt à travailler !! On va faire court et simple, vous voulez faire de l'animation ? En voilà :

AnimationS simpleS

a) par Interpolation de mouvement

Avec l'outil ovale créer un rond (enfoncez shift pour les proportions) pas trop gros. Maintenant dans la timeline (la barre d'animation, de temps, en haut) vous avez ça :

C'est à dire que la première image est remplie (elle est grise et pas blanche) que je suis en train de visionner la première (le rectangle rouge au dessus me l'indique) et que c'est une image clé, c'est le rond noir au milieu qui me le dit.

Une image-clé, ça veut dire un des points phare de notre animation. ça veut dire qu'entre les images clés, si je mets une "interpolation", flash va se débrouiller pour calculer les différences et calculer l'animation. On teste donc

Quelques images plus loin (30 ça suffit) vous cliquez-droit et "insérer une image-clé) :

Et OOOOh ! on obtient ça !

C'est à dire une image clé au début, une image clé à la fin (la même pour l'instant) et entre les deux (30-2 =28) 28 images non-clés, des images quoi

En anglais on dit aussi frame et donc KeyFrame (image-clé).

Et là ouloulou passage compliqué, je clique-droit sur les images simples entre les deux images-clés, et "Créer une interpolation de mouvement" (Cette fonction est TRES importante).

Donc sur notre première image on a notre rond, qui est devenu un "graphique" un type de symbole dont je parlerai après:

Et sur mon image 30, j'ai bougé mon rond et je l'ai même AGRANDIT... Waw :

Et ... ça marche ! Quand vous cliquez sur les frames, votre symbole bouge et grandit. Testez pour voir ! (CTRL+ENTREE).

Note : Vous pouvez aussi avec l'outils transformation libre le rotater, lui faire plein de trucs.

Maintenant, votre animation elle fait un peu ça :

C'est de une pas très fluide, et de deux ça se répète tout le temps. pour la fluidité, vous rajoutez des images à votre animation (au lieu de 30 prenez 60)... Ba oui mais c'est plus lent. Alors changez également la fréquence d'IPS (en anglais de FPS), c'est à dire les images par seconde. Si vous cliquez sur le document, vous avez ça dans les propriétés :

Vous pouvez changer, mettez 24 par exemple.

Note: films d'animation sont cadencés à 24 ips

Pour ce qui est du "ça se répète", deux solutions. Soit vous faites un "retour" c'est à dire la même animation mais à l'envers, à la suite (si si vous savez faire, la timeline elle est comme ça après) :

Et ça donne ça :

Ou alors, si vous voulez que ça s'arrête là, vous entrez votre premier code actionScript 2 :

clic-droit sur l'image-clé de fin, et "actions"(F9)

Et dedans vous allez marquer stop(); :

Juste ça. ça a pour effet de stopper l'animation (à l'inverse de play();)

Vous venez de réaliser votre première animation !! Nous allons voir un deuxième type d'animation (je pense personellement qu'il y en a 3), c'est à dire l'interpolation de forme

b) par Interpolation de forme

C'est pareil. Strictement pareil. Sauf que la flèche dans la timeline devient verte, et que pour la créer il ne faut pas faire clic-droit mais dans les propriétés :

La différence c'est que votre image, votre dessin ne se transforme pas en symbole graphique, et sur l'autre image, vous pouvez le modifier comme vous voulez. Approchez votre souris à côté du bord, et déformez-le, changez la couleur, amusez-vous.

Moi ça donne ça :

C'est moche mais bon pourquoi pas... et là, bonheur, vive flash :

Trop simple. Donc, à retenir, l'interpolation de mouvement transforme en symbole, celle de forme non, et on peut modifier le dessin. A vous d'utiliser chacune en fonction de vos besoin.

AH oui, autre chose, bien pratique, quelques effets sympatoches, vous pouvez aller dans l'onglet "filtres" des propriétés pour ajouter des effets comme ombre, flou, rayonement, etc...

Autre truc sympa sur une interpolation, quand vous cliquez sur le symbole d'arrivée ou de départ, dans la fenêtre propriétés à droite vous avez une petite liste "Couleur :", cette liste vous permet de changer la couleur (teinte) et l'opacité (alpha), ainsi que d'autres trucs.

L'opacité, c'est le niveau de transparence. Très important pour faire des effets de fondu !

Voilà, merci d'avoir suivi ce tutoriel qui s'inscrit dans la suite de tutoriels flash,

Dawlin

Les Bases de Flash : Boutons et symboles »