Horloge (contrôles du temps)

 

Ce tutoriel est écrit avec Flash CS 6.

 

Outils utilisés :

Rectangle

Permet de tracer un rectangle 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é. La touche Alt permet d’effectuer le tracé à partir du centre. Avec la touche Maj, le tracé est contraint à un cercle parfait ou un carré parfait.

PolyEtoile

Cet outil permet de dessiner des polygones en choisissant le nombre de côtés. Par défaut il dessine avec 5 côtés mais on peut modifier ce nombre, pour dessiner par exemple un triangle.

 

Créer une horloge, avec des boutons de contrôles :

Ce tutoriel est la suite du tutoriel : ► Créer une horloge.

Fichier source :

Pour suivre ce tutoriel vous pouvez télécharger le fichier source en .fla de l’Horloge.

Télécharger : Flash horlogeTéléchargé 394 fois – 6,55 Ko

Ajouter des boutons de contrôles :

Dans Flash, un bouton permet une interactivité qui passe obligatoirement par un langage de programmation qu’on appelle Action Script (ou A.S.).
Il existe plusieurs types de langages A.S. Nous nous cantonnerons au langage Action Script 2.0 défini lors de la création d’un nouveau document.

ouvrir le fichier téléchargé horloge.fla, provenant du tutoriel Créer une Horloge

dans le panneau Scenario, sélectionner la ligne du calque aiguille puis ajouter un nouveau calque, en cliquant sur l’icône en bas du panneau. Le nouveau calque se place au-dessus.

faire un double-clic sur le nom de ce calque et le nommer boutons

Nouveau calque

Sur ce nouveau calque, nous allons dessiner deux boutons : Lecture et Arrêt. Ces deux boutons vont piloter la tête de lecture de l’animation.

Dessiner les boutons :

Pour positionner ces 2 boutons nous allons nous aider de la Grille, puis nous allons dessiner un triangle pour simuler le bouton Lecture.

afficher la Grille par le menu Affichage / Grille / Afficher la grille ou les touches Ctrl + ²

modifier l’espacement de la Grille avec le menu Affichage / Grille / Modifier la grille… ou les touches Ctrl + Alt + G

dans la fenêtre, entrer des valeurs de 40px et 40px, de façon à choisir un espacement qui permette de positionner des boutons. Les boutons seront positionnés par rapport à la Grille, l’un à gauche et l’autre à droite de l’horloge

Modifier la Grille

Pour dessiner le bouton en triangle de gauche (Lecture),
prendre l’outil PolyEtoile (pas de raccourci), le dernier de la liste sous l’outil Rectangle

Outil PolyEtoile

Cet outil permet de dessiner des polygones en choisissant le nombre de côtés. Par défaut il dessine avec 5 côtés mais nous allons le paramétrer pour 3 côtés (triangle).

Dans la panneau Propriétés,
cliquer sur la couleur de remplissage (celle de droite) et choisir du Noir puis
cliquer sur le bouton Paramètres de l’outil Options… en bas du panneau

Options de l'outil PolyEtoile

Dans la fenêtre des Options de l’outil,
entrer 3 dans Nombre de côtés puis valider la fenêtre par OK

Nombre de côtés

dans le document, agrandir la vue vers 200% à l’aide de l’outil Zoom ou la touche Z, au niveau en bas à gauche de l’horloge

dans le panneau Scénario, sélectionner le calque boutons (calque du haut)

avec l’outil PolyEtoile dessiner un triangle

Pour positionner le triangle il faut le sélectionner,
choisir l’outil Sous-sélection ou touche A, faire un clic droit sur le triangle et choisir Tout sélectionner ou directement les touches Ctrl + A

Cela sélectionne uniquement le bouton puisque nous sommes sur le calque bouton dans le panneau Scenario.

déplacer maintenant le triangle avec les touches Flèches pour le positionner

Dessiner le triangle et le positionner

cliquer à l’extérieur du bouton (triangle) pour le désectionner

Nous allons maintenant dessiner un carré pour le bouton Arrêt, à droite de l’horloge.

prendre l’outil Rectangle ou touche R

se placer à droite de l’horloge et en maintenant la touche Maj, tracer un carré

Pour positionner ce carré il faut utiliser l’outil Sous-sélection ou touche A, mais comme nous avons maintenant 2 objets sur le calque boutons, il faut sélectionner le carré de façon individuelle.

Pour ne sélectionner que le carré,
avec l’outil Sous-sélection tracer une sélection autour du carré (à partir de l’extérieur) puis,
positionner le carré avec les touches Flèches dans le document

Sélectionner le carré uniquement

Vous pouvez également modifier les formes avec l’outil Sous-sélection.

Par exemple pour réduire la taille du carré,
sélectionner l’objet en l’entourant avec l’outil Sous-sélection puis,
maintenir les touches Maj + Ctrl et en prenant l’objet par un angle, modifier ses dimensions

Modifier le carré

Nos 2 boutons sont créés.

Horloge avec 2 boutons de contrôle

Convertir en symbole :

Nous allons maintenant convertir ces boutons en symbole.

prendre l’outil Sélection ou touche V et cliquer sur le triangle pour le sélectionner

faire un clic du bouton droit et choisir Convertir en symbole… ou utiliser le menu Modification / Convertir en symbole… ou la touche F8

dans la fenêtre, entrer Nom lecture et dans le menu Clip sélectionner Bouton puis valider la fenêtre par OK

Symbole clip, bouton lecture

Le bouton apparaît dans le panneau Bibliothèque.

Paramétrer le bouton Lecture :

faire un double-clic sur le bouton, soit depuis le document soir depuis la Bibliothèque

Le contenu du panneau Scénario change et passe en mode Modifier, il affiche les 4 étapes (ou frames) du bouton (Haut, Dessus, Abaissé et Cliqué).

Modifier le bouton

  • Haut : je ne fait rien, le bouton est inactif, c’est l’étape 1
  • Dessus : je survole le bouton, il change de couleur, c’est l’étape 2
  • Abaissé : je clique sur le bouton, il change de couleur, c’est l’étape 3
  • Cliqué : le bouton est cliqué (activé), c’est l’étape 4

Pour modifier les étapes et leur attribuer une couleur,
cliquer sur l’étape 1 puis choisir le menu Modification / Scénario / Convertir en image-clés ou la touche F6

Convertir en image-clé

La sélection passe automatiquement à l’étape suivante, Dessus.

Pour cette étape nous allons changer la couleur du bouton en vert.

l’étape (frame) Dessus étant sélectionnée, afficher le panneau Couleur et sélectionner la couleur Verte (de votre choix)

Changer la couleur Dessus

Après le changement de couleur,
appuyer sur la touche F6 pour convertir en image-clé, la sélection se déplace sur l’étape (frame) Abaissé

modifier à nouveau la couleur, par exemple en Rouge, dans le panneau Couleur

Changer la couleur Abaisser

appuyer à nouveau sur la touche F6 pour convertir en image-clé

quitter le mode Modifier du bouton, en cliquant sur Séquence 1 en haut à gauche de la fenêtre ou utiliser le menu Modifier / Modifier le document ou les touches Ctrl + E

Enregistrer en .fla :

enregistrer votre travail par le menu Fichier / Enregistrer ou Enregistrer sous, au format .fla (donner un Nom)

Aperçu du bouton :

utiliser le menu Contrôle / Tester la séquence ou les touches Ctrl + Alt + Entrée

Les couleurs du bouton fonctionne mais n’agisse pas encore sur l’horloge.

Paramétrer le bouton Arrêt :

Nous allons maintenant répéter les mêmes opérations pour le bouton Arrêt, le carré de droite.

prendre l’outil Sélection ou touche V et cliqué sur le carré de droite
faire un clic droit sur le carré et choisir Convertir en symbole…

dans la fenêtre entrer Nom arret (pas d’accent) et sélectionner Type Bouton

faire un double-clic sur le carré pour passer en mode Modifier ou utiliser le menu Modifier / Modifier les symboles ou les touches Ctrl + E

Dans le mode Modifier :
à l’étape 1 Haut, appuyer sur la touche F6 pour convertir en image-clé puis,
à l’étape 2 Dessus, modifier la couleur en Vert par exemple soit à l’aide du panneau Couleur, soit avec l’outil Pot de peinture
puis appuyer sur F6
à l’étape 3 Abaissé, modifier également la couleur en Rouge par exemple
puis appuyer sur F6
à l’étape 4 Cliqué, modifier la couleur et remettre en Noir (facultatif)

Contrôler les boutons :

Nous allons configurer les boutons (contrôle du scénario).

afficher le panneau Actions par le menu Fenêtre / Actions ou touche F9

dans le document, sélectionner le bouton Lecture (triangle de gauche), avec l’outil Sélection (touche V)

dans la partie droite du panneau Actions, écrire le texte

puis dans le document, sélectionner le bouton Arrêt (carré de droite), avec l’outil Sélection

dans la partie droite du panneau Actions, écrire le texte

Configurer les boutons

Enregistrer :

enregistrer votre fichier de travail, en .fla, avec le menu Fichier / Enregistrer ou les touches Ctrl + S

Aperçu :

Lancer un aperçu du document,
utiliser le menu Contrôle / Tester la séquence ou les touches Ctrl + Alt + Entrée

L’horloge tourne, si on clique sur le bouton Arrêt elle s’arrête et si on clique sur le bouton Lecture elle tourne à nouveau.

Exporter l’animation :

utiliser le menu Fichier / Exporter / Exporter l’animation… 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.