Flash Mx 2004

Niveau I

tutorial 12/22

Contrôler le temps

Fichier source horloge.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 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
La ligne		Trace des droites et se paramètre de la même manière que l'outil crayon (épaisseur du trait, pointillé, brouillon...	N
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

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.

Ouvrir le document "horloge.fla" dans flash.

I) Les boutons

Le bouton dans flash permet une interactivité qui passe obligatoirement par un langage de programmation qu'on appelle l'"Action Script" ou A.S. Il y a plusieurs types de langages A.S. Nous nous cantonnerons au langage "Action Script 2.0" défini à la création d'un nouveau document.

Le fichier "horloge.fla" est ouvert dans flash. Sur un nouveau calque, au dessus des autres, c'est à dire au dessus du calque "aiguille" nous ajoutons un nouveau calque nommé "boutons".

Dans ce nouveau calque, nous allons dessiner deux boutons : "lecture" et "stop". Ces deux boutons vont piloter la 'tête de lecture' de l'animation.

Nous avons donc nos deux boutons, occupons nous du bouton "lecture". Dans le cas de la création d'un bouton, il s'agit d'un symbole "bouton".

Sélectionner le triangle et son contour par une sélection englobante, le cadre de la sélection englobe tout l'objet.

Clic droit sur le triangle sélectionné puis "convertir en symbole" en bas du menu qui apparaît, presser la touche "F8" donne le même effet. Dans le fenêtre qui s'ouvre, sélectionner "bouton" puis nommer celui-ci "lecture".

Plus d'info sur le symbole, voir le tutorial "interpolation_bille.html"

II) L'interface du bouton

Nous allons double cliquer sur notre bouton, soit depuis la bibliothèque soit depuis le document ouvert.

L'interface du symbole bouton "lecture" se présente de manière différente de la timeline (ligne de temps). 4 frames seulement pour définir les différents états du bouton en fonction du comportement de la souris.

Haut: Lorsque je ne fait rien, le bouton est inactif, c'est l'étape 1 nommée "Haut"

Dessus: Lorsque je survole le bouton, il change de couleur, c'est l'étape 2 nommée "Dessus"

Abaissé: Lorsque je clique sur le bouton, il change de couleur, c'est l'étape 3 nommée "Abaissé"

Cliqué: Lorsque je survole le bouton, la souris devient cliquable (une icone de doigt sur un navigateur internet) c'est la zone de clic, c'est l'étape 4 nommée "Cliqué"

Voilà, retournons sur la scène principale en cliquant sur l'icone "séquence1" ou "Ctrl + E".

Prévisualisons notre bouton en lançant une "preview", "Ctrl + Alt + Entrée" pour une prévisualisation rapide.

On peut aussi lancer l'activation des boutons depuis le "menu du haut > contrôle > activer les boutons simples"

Répétons la même opération pour le bouton "stop"

1. Créer le symbole "bouton"
2. Nommer bouton
3. Double clic sur bouton puis aller dans l'interface de celui-ci
4. Copier l'image clé 1 sur les 3 frames vides ("F6")
5. Modifier les couleurs avec l'outil de sélection ou le pot de peinture et la palette des couleurs
6. revenir sur la scène principale et tester avec "menu du haut > contrôle > activer les boutons simples"

III) La fonction lecture "contrôle du scénario"

Notre bouton sélectionné, rendons-nous dans le panneau des actions "F9" ou "menu du haut > fenêtres > actions".

La panneau "actions" se divise en 3 parties.

1) La liste des actions

2) Les paramètres des actions

3) Les syntaxes ou lignes de codes

Dans le panneau des actions activer l'assistant de scripts puis dans la liste de gauche:

"fonction globales > contrôle du scénario > play" pour le bouton "lecture"

"fonction globales > contrôle du scénario > stop" pour le bouton "stop"

Plus d'info sur les actions, voir le tutorial "deplacer_galet.html"

"Ctrl + Alt + Entrée" pour une prévisualisation rapide.

Exporter l'animation

Menu du haut > Fichier > Exporter > Exporter l'animation ou "Ctrl + Maj/Shift + Alt + S"