Flash Mx 2004
Niveau I
tutorial 20/22
Animer silhouette
Fichier source animer_silhouette.fla
Pour configurer votre interface de travail vous devez ouvrir ces panneaux: "menu du haut > Fenêtres"
Les outils à utiliser
Outil | Symbole | Descriptif | Raccourci |
Le pinceau | ![]() |
La plume est un outil de tracé vectoriel. "Clic" permet de placer des points reliés par des droites. "Clic" et déplacement de souris permet de créer des courbes. "Clic" sur un point permet d'annuler une courbe. "Clic" sur une ligne permet d'ajouter un point. "Clic + Alt" efface un point. La flèche blanche de la palette d'outil permet de sélectionner un ou plusieurs points, les déplacer, les effacer avec "Suppr" |
B |
La transformation | ![]() |
Sur toute sélection, permet de modifier l'échelle, le biseau, la rotation, l'inclinaison. "Alt" permet de transformer symétriquement, "Ctrl" permet de déplacer les coins indépendamment |
Q |
Le pot de peinture | ![]() |
Permet de dessiner à main levée avec la couleur de remplissage (dégradé ou uni) Tailles et inclinaisons de brosses dans les options. |
K |
Le cercle | ![]() ![]() |
Trace un cercle seul ou un contour seul ou les deux à la fois selon que les options de couleur ou de contour sont activées. On peut remplir un ton uni ou dégradé. L'options "Alt" : le tracé s'effectue à partir du centre L'option "Maj/Shift" : le tracé est contraint à un cercle parfait ou un carré parfait |
O |
Créer un nouveau fichier depuis "Flash" "menu du haut > fichier > nouveau" A.S.2
Un nouveau document se crée en allant dans le "menu du haut > fichier > nouveau" ou "Ctrl+N"
Choisir le format de document ici "Flash" A.S. 2.0" qui signifie Action Script 2.0, le langage de programmation de "Flash", ainsi que A.S. 3.0 dernière génération.
Paramétrage du document
Au bas de l'interface par défaut nous avons un onglet propriétés (que l'on ouvre par le "menu du haut > fenêtre" s'il n'est pas ouvert).
Cet onglet "propriété" configure notre document de travail, taille en largeur, en hauteur, couleur de fond, vitesse de lecture des images. Nous allons régler notre document en 800 x 600 pixels, fond blanc, cadence de 25 images (frames) secondes. Nous allons enregistrer ces paramètres comme les paramètres par défaut à l'ouverture de "Flash".
Nous avons donc ici un document de 800 X 600 pixels, fond banc, débit de 25 images (frames) par secondes.
Créez un nouveau document dans flash.
I) Le pinceau
Nous allons dessiner au pinceau et sans contour une silhouette (une tête, un buste et des bras) sur plusieurs calques.
Un calque pour le buste, un calque pour un bras, un calque pour l'autre bras et enfin un calque pour la tête, donc quatre calques en tout.
Nous avons donc 4 calques biens distincts pour chaque élément à animer.
II) Les symboles clips
Nous allons convertir chacun de nos éléments en symbole clip et en veillant bien à les nommer.
Convertir une forme en symbole clip est la condition obligatoire pour passer à l'étape d'animation. Un clip est interprété par flash comme élément animable.
Plusieurs manipulations pour convertir une forme en "symbole clip"
1) Sélectionner cette forme avec la flèche noire de la boite des outils
2) Clic droit sur cette sélection puis "convertir en symbole" ou "menu du haut > modification > convertir en symbole" ou "F8"
3) Les symboles se placent dans la bibliothèque.
III) Interpolation de mouvement
L'interpolation déclarée sur une ou plusieurs pistes est la condition obligatoire pour animer. L'interpolation est le principe de calculer les positions intermédiaires entre deux images clés.
Par exemple, un objet sur une piste à la clé 1 et ce même objet à la clé 20 a une position et une échelle différente. Toutes les positions intermédiaires de l'image 2 (frame2)à l'image 19 (frame 19) sont calculées.
L'interpolation de mouvement se déclare soit par un clic droit sur le piste à animer, soit par l'onglet des propriétés (en bas de l'interface) de la piste sélectionnée.
Notre document de travail est prêt à être animé.
IV) Images clés
Les images clés sont autant de repères de position, rotation, échelle d'un objet sur une piste. Si je veux que mon objet de déplace de gauche à droite et traverse l'écran en 2 secondes et bien je vais créer une piste de 50 frames (25 frames par secondes).
je vais créer par la suite deux images clés de mes deux positions: étape 50, clé 1 l'objet est placé à gauche de l'écran puis à l'étape 50, clé 2 l'objet est à droite de l'écran. L'interpolation calcule les positions intermédiaires entre deux clés.
Créons nos images clé pour chacun de nos objets à l'étape 15 et à l'étape 30 (fin)
Sélectionner toute la colonne de frames (images) à l'étape 15 puis "F6"
V) Pivot des objets
L'outil transformation va nous permettre de déplacer les positions et modifier la rotation de nos bras, tête et buste.
Lorsqu'on utilise cet outil sur un objet sélectionné, un cadre muni de poignées apparaît autour de l'objet, au centre le point de pivot peut être placé selon les besoins.
Déplaçons l'orientation des bras aux images clés 15, modifions la position et l'inclinaison de la tête et enfin répétons la même opération pour le buste.
Toutes les images clés de l'étape 1 et de l'étape 30 sont les mêmes, nous avons animé les clés de l'étape 15.
Le mouvement ou la rotation se fait de la 1 à la 15 puis revient à la position de départ.
Plus d'info sur les symboles l'interpolation de mouvement, voir le tutorial "interpolation_bille.html"
"Ctrl + Alt + Entrée" pour une pré visualisation rapide. Utilisez la touche "Entrée" afin de bien prévisualiser la justesse du mouvement.
Exporter l'animation
Menu du haut > Fichier > Exporter > Exporter l'animation ou "Ctrl + Maj/Shift + Alt + S