Ce tutoriel est écrit avec Flash CS 6.
Outils utilisés :
Ovale Trace une forme ovale (ou cercle) ou un contour seul ou les deux à la fois selon que les options de couleur ou de contour sont activées. On peut remplir d’un ton uni ou dégradé. La touche Alt permet d’effectuer un tracé à partir du centre, avec la touche Maj le tracé est contraint à un cercle parfait. |
Plume La Plume est un outil de tracé vectoriel. Un clic permet de placer des points reliés par des droites. Cliquer et déplacer la souris permet de créer des courbes. Un clic sur un point permet d’annuler une courbe. Un clic sur une ligne permet d’ajouter un point. Clic + la touche Alt efface un point. L’outil Sous-sélection (flèche blanche) permet de sélectionner un ou plusieurs points pour les déplacer. Pour effacer un point appuyer sur la touche Suppr. |
Transformation Sur toute sélection, permet de modifier l’échelle, le biseau, la rotation, l’inclinaison. La touche Alt permet de transformer symétriquement, la touche Ctrl permet de déplacer les coins indépendamment. |
Animer un chat :
Nouveau document :
► créer un nouveau document par le menu ou les touches Ctrl + N
Dans la fenêtre Nouveau document :
survoler l’image pour la voir en grand
► cocher ActionScript 2.0, le langage de programmation de Flash
► puis dans la partie droite de la fenêtre, entrer Largeur 800 px et Hauteur 600 px, Unité de la règle Pixels et mettre la cadence d’image à 25,00 ips
► si vous voulez, vous pouvez cocher la case Etablir comme valeur par défaut, de façon à mémoriser ces dimensions
► valider la fenêtre par OK
Une fois le document créé, vous pouvez encore modifier vos choix, dans le panneau Propriétés à droite de l’interface
► il suffit de cliquer sur l’icône en forme de clé, pour afficher à nouveau la fenêtre
survoler l’image pour la voir en grand
Pour afficher le panneau Propriétés s’il n’est pas ouvert,
► utiliser le menu ou les touches Ctrl + F3
Dessiner le chat (formes de remplissage) :
Pour dessiner la silhouette de notre chat, nous allons utiliser l’outil Ovale (formes géométriques de remplissage). Ensuite nous affinerons notre dessin à l’aide des outils Sélection (flèche noire) et Sous-sélection (flèche blanche).
Dans le panneau Scénario,
► faire un double-clic sur le nom du calque par défaut (calque 1) et le nommer silhouette
► puis à l’aide de l’outil Ovale ou touche O, dessiner grossièrement le corps et la tête du chat (couleur Noire sans contour)
► avec l’outil Ovale, tracer le corps puis la tête du chat
Pour tracer un cercle parfait, il suffit de maintenir la touche Maj.
Modification de tracé :
Nous voici avec notre silhouette, nous allons à présent l’affiner en utilisant uniquement l’outil Sélection (flèche noire) et la touche Alt.
Lorsqu’on approche la souris d’un tracé, on peut le modifier.
L’outil Sélection (flèche noire) ou touche V. Cet outil permet de sélectionner tout ou partie d’une forme. Lorsqu’on approche l’outil du bord d’un tracé, une petite icône apparaît (courbe ou angle) et l’on peut modifier la courbe ou l’angle (1).
► avec l’outil Sélection, maintenir la touche Alt pour ajouter un point sur la courbe, puis le déplacer (2)
L’outil Sous-sélection (flèche blanche) ou touche A. Cet outil permet de sélectionner les points et les vecteurs du tracé (la tangente de la courbe avec une poignée) et de les modifier.
L’outil Plume permet de tracer, d’ajouter ou de supprimer des points.
Affiner la silhouette :
Ainsi, à l’aide de la flèche noire, nous allons affiner notre silhouette.
Dessiner les yeux et la queue du chat :
► dans le panneau Scénario, ajouter un nouveau calque en cliquant sur l’icône en bas du panneau
► nommer ce calque yeux
Afin de ne pas modifier par inadvertance la silhouette du chat, nous allons verrouiller le calque silhouette.
► dans le panneau Scénario, sélectionner la ligne du calque silhouette
► puis cliquer sur le second point blanc sur sa ligne, à la verticale de l’icône en forme de cadenas
Une icône cadenas apparait sur la ligne du calque silhouette, le calque est verrouillé.
Nous allons maintenant dessiner une paire d’yeux. Le principe est de dessiner un œil puis de le copier pour créer le second, c’est plus simple.
Il ne nous reste plus qu’à dessiner la queue du chat.
► ajouter un nouveau calque placé entre la silhouette et les yeux
► nommer ce calque queue
Un coup de peinture avec une grosse brosse et le tour est joué.
► prendre l’outil Pinceau ou touche B et dessiner la queue du chat
Animation par interpolation de formes :
Pour finaliser notre projet, nous allons faire une animation de 60 images, afin de faire cligner les yeux et remuer la queue de notre chat.
Principe de fonctionnement :
On détermine la longueur en temps d’une animation en sélectionnant les frames vides des calques puis en insérant une image à l’étape finale.
Une interpolation de forme se fait en cliquant sur la piste de notre choix puis en faisant un clic droit et Créer une interpolation de forme.
Pour créer des étapes de temps différentes, on crée des images avec la touche F6, qui seront autant de copies de l’objet présent sur la piste.
On modifie la forme d’un objet entre deux clés pour obtenir une interpolation.
Il faut supprimer le contenu (objet) d’une image clé afin d’en faire une image clé vide, ainsi entre deux images clés, une image clé vide montrera un objet qui disparaît puis et ré-apparaît selon une vitesse qui dépend de la longueur de la clé vide.
Animation du chat :
► dans le panneau Scénario, avec l’outil Sélection,
► sélectionner toutes les étapes vides (frames) sur les 3 lignes de calques, afin de déterminer la longueur de l’animation, jusqu’à l’étape 60
► faire un clic droit et choisir Insérer une image ou touche F5
Exemple de sélection de plusieurs étapes (frames) :
Animation des yeux :
Pas d’interpolation pour les yeux
► sur la ligne du calque yeux, ajouter des images clés, avec la touche F6, aux étapes 25 et 35
► à l’étape 25 (image clé), supprimer l’objet de la paire d’yeux, de façon à faire clignoter les yeux (on aura donc une image clé vide)
Pour supprimer des points, prendre l’outil Sous-sélection (flèche blanche) puis sélectionner le point avant de le supprimer.
Animation de la queue :
► sélectionner la ligne du calque yeux,
► faire un clic droit et choisir Créer une interpolation de forme
► puis aux frames 30 et 60, faire un clic droit et choisir Insérer une image clé
Puis pour animer la queue,
► se placer sur la ligne du calque queue et à l’étape 30 (au milieu de l’interpolation de forme),
► modifier la forme (les vecteurs et les points) à l’aide de l’outil Sous-sélection (flèche blanche)
Pour modifier une courbe, prendre l’outil Sous-sélection (flèche blanche), cliquer sur un point puis le déplacer ou déplacer les poignées des vecteurs.
L’interpolation de forme prend en compte les modification des formes.
Aide avec d’autres tutoriels :
Pour plus d’informations sur l’interpolation de forme et l’interpolation de mouvement, vous pouvez également consulter ces autres tutoriels :
► Animer une boule (interpolation de mouvement)
Enregistrer son travail :
► enregistrer votre fichier de travail, en .fla, avec le menu ou les touches Ctrl + S
Aperçu de l’animation :
Lancer un aperçu du document,
► utiliser le menu ou les touches Ctrl + Alt + Entrée
Le chat est animé, les yeux clignotent et la queue bouge
Exporter l’animation en swf :
► utiliser le menu ou les touches Ctrl + Alt + Maj + S pour enregistrer au format .swf
Ce tutoriel a été réécrit avec l’autorisation de son auteur.
Ce tutoriel est la propriété du site Photoshoplus. Toute reproduction, exploitation ou diffusion du présent document est interdite.
Photoshoplus ©