Horloge

 

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.

Ligne

Trace des droites et se paramètre de la même manière que l’outil Crayon (épaisseur du trait, pointillé, brouillon…)

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.

 

Créer une horloge :

Nouveau document :

créer un nouveau document par le menu Fichier / Nouveau ou les touches Ctrl + N

Dans la fenêtre Nouveau document :

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

Modifier le document
survoler l’image pour la voir en grand

Pour afficher le panneau Propriétés s’il n’est pas ouvert,
utiliser le menu Fenêtre / Propriétés 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 Affichage / Règles 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

Ajouter des Guides

Configurer le cercle :

prendre l’outil Ovale ou touche O

Outil Ovale

Dans le panneau Propriétés,
choisir la taille du trait (Hauteur), par exemple 10,00
choisir la couleur du trait Noir

Taille du trait et couleur

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

Choisir Sans remplissage

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

Tracer le cercle

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

Nouveau calque

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

Tracer l'aiguille

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 Modification / Convertir en symbole… ou touche F8
dans la fenêtre, laisser cocher Type Clip et donner un Nom, donc aiguille
valider la fenêtre par OK

Convertir en symbole

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)

Déplacer l'axe de rotation de l'aiguille

Vous pouvez masquer les Guides par le menu Affichage / Guides / Afficher les guides (décocher) ou les supprimer par le menu Affichage / Guides / Effacer les guides, 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 Insertion / Scénario / Image ou utiliser la touche F5

Insérer une image

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 :

Images à l'étape 50

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 Insertion / Interpolation de mouvement ou faire un clic droit sur la 1ère étape et choisir Créer une interpolation de mouvement

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 Contrôle, sélectionner la ligne Lire en boucle

Sens de rotation

Lire l’animation :

appuyer sur la touche Entrée ou utiliser le menu Contrôle / Lire

L’animation se joue en boucle.

Enregistrer et Exporter l’animation :

utiliser le menu Fichier / Enregistrer pour enregistrer le document au format .fla

utiliser le menu Fichier / Exporter / Exporter l’animation… ou les touches Ctrl + Alt + Maj + S pour enregistrer au format .swf

L’image finale se trouve au début du tutoriel ▲

 

Ce tutoriel a été créé par ---/// F®K Design ///---. Photoshoplus en a créé une nouvelle version, avec son autorisation.
Toute reproduction, exploitation ou diffusion du présent document est interdite.

Articles similaires :