Ce tutoriel est écrit avec Flash CS 6.
Outils utilisés :
|
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. |
|
Trace des droites et se paramètre de la même manière que l’outil Crayon (épaisseur du trait, pointillé, brouillon…) |
|
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. |
Ovale
Ligne
Transformation
Créer une horloge :
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 cercle de l’horloge :
Au centre de notre document nous allons dessiner un cercle parfait avec l’outil Ovale.
Identifier le centre du document :
Pour déterminer le centre du document vous pouvez ajouter des Guides.
► afficher les Règles par le menu ou les touches Ctrl + Alt + Maj + R
► prendre l’outil Sélection ou touche V
► placer le pointeur sur la Règle horizontale et en maintenant le bouton de la souris, tirer un Guide vers le centre du document
► puis le positionner au centre en s’aidant de la Règle verticale, donc à 300 puisque notre document fait 600 pixels de haut
► faire de même avec un Guide vertical, à partir de la Règle verticale, donc placé à 400 puisque notre document fait 800 pixels de large
Configurer le cercle :
► prendre l’outil Ovale ou touche O
Dans le panneau Propriétés,
► choisir la taille du trait (Hauteur), par exemple 10,00
► choisir la couleur du trait Noir
Pour configurer la couleur de remplissage en Sans remplissage,
► cliquer sur la vignette de droite et dans les couleurs qui s’affichent, sélectionner l’icône avec une barre rouge
Tracer le cercle :
Avec l’outil Cercle, dans le document
► placer le pointeur au centre du document (intersection des Guides)
► maintenir les touches Maj + Alt et tracer un cercle parfait
La touche Maj permet de tracer un cercle et la touche Alt permet de tracer à partir du centre.
Dessiner l’aiguille :
Dans le panneau Scénario,
► faire un double clic sur le nom Calque 1 et le nommer cercle
► cliquer sur l’icône Nouveau calque, pour ajouter un calque
► nommé ce Calque 2 aiguille
► pour tracer l’aiguille, prendre l’outil Ligne ou touche N
► dans le document, placer le pointeur au centre du cercle (centre du document),
► maintenir la touche Maj (pour aller en ligne droite) et tracer le trait de l’aiguille vers le haut en s’arrêtant près du bord du cercle
Une fois l’aiguille tracée, si vous avez besoin de la positionner, il faut utiliser l’outil Sous-sélection (flèche blanche) ou touche A.
Symbole clip :
Nous allons convertir notre aiguille en symbole clip, de façon à pouvoir l’animer.
Dans le panneau Scénario,
► sélectionner le calque aiguille (cliquer sur sa ligne)
► choisir le menu ou touche F8
► dans la fenêtre, laisser cocher Type Clip et donner un Nom, donc aiguille
► valider la fenêtre par OK
Si vous sélectionnez le panneau Bibliothèque, vous avez le clip aiguille.
Pour plus d’information sur les Symboles, vous pouvez consulter le tutoriel : ► Flash, animer une boule (interpolation mouvement)
Déplacement de l’axe de rotation :
Nous allons déplacer le centre de rotation de l’aiguille à sa base.
► prendre l’outil Zoom ou touche Z et agrandir le document au niveau du bas de l’aiguille, vers 400%
► prendre l’outil Transformation libre ou touche Q
► placer le pointeur sur le centre de l’aiguille et en maintenant le bouton de la souris, le déplacer tout en bas de celle-ci (un petit rond vert apparaît)
Vous pouvez masquer les Guides par le menu (décocher) ou les supprimer par le menu , nous n’en avons plus besoin.
Interpolation de mouvement :
Maintenant que nos éléments sont prêts, nous allons les animer.
Pour cela il faut créer du temps dans le panneau Scénario, en ajoutant une image-clé à l’étape 50, sur chacune des pistes (les 2 calques).
Insérer une image :
► dans le panneau Scénario, cliquer à l’étape 50
► choisir le menu ou utiliser la touche F5
Faire la même chose pour la piste en dessous, celle du cercle,
► cliquer sur l’étape 50 et appuyer sur la touche F5
Vous devez avoir 2 lignes grises comme sur la capture suivante :
En ajoutant une image, on détermine la longueur de l’animation.
Créer l’interpolation de mouvement :
► dans le panneau Scénario, sur le calque aiguille, cliquer sur la 1ère étape puis
► choisir le menu ou faire un clic droit sur la 1ère étape et choisir Créer une interpolation de mouvement
Il faut au moins deux clés pour qu’une interpolation fonctionne.
► dans le panneau Scénario, sélectionner aiguille
► dans le panneau Propriétés, dans l’onglet Rotation, déclarer le sens de la rotation en sélectionnant Direction 90° à droite
► dans le menu , sélectionner la ligne Lire en boucle
Lire l’animation :
► appuyer sur la touche Entrée ou utiliser le menu
L’animation se joue en boucle.
Enregistrer et Exporter l’animation :
► utiliser le menu pour enregistrer le document au format .fla
► 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 ©
