Les outils interactifs du Web

Tutoriel 1 - FLASH version 5.0

Le dessin et l'animation interpolée

A. Le dessin

La première activité vous amènera à tracer une étoile avec les outils de dessin de Flash.

1. Sur la scène (espace de travail), tracez un cercle avec l'outil Ovale (pour tracer un cercle parfaitement rond, maintenez enfoncer la touche Majuscule pendant le tracé).

2. Activez l'outil Flèche , et approchez le pointeur du bord de votre cercle. Lorsque vous verrez la Flèche accompagnée d'une courbe , cela signifiera que vous pouvez modifier la forme vers l'int

3. Enfoncez donc la touche CTRL, puis faites glisser la souris pour vous éloigner du cercle. Vous avez ainsi créer un premier bras de votre étoile. Continuez ainsi pour créer les autres bras. Vous devriez obtenir à la fin quelque chose de ce genre:

(En pressant sur la touche CTRL et en vous approchant d'une courbe; vous pouvez alors définir une forme plus anguleuse. Vous verrez également ce symbole lorsque le pointeur s'approchera du sommet d'un quelconque polygone.) 

4. Enfoncez l'outil et choisissez une couleur qui vous convient, avec ou sans dégradé; avec l'outil , déversez cette la nouvelle couleur sur la forme dessinée.
 
5. Avec l'outil Flèche, tracez un rectangle autour de votre étoile pour la sélectionner. Pour un contour plus lisse (smooth) ou plus anguleux / redressé (straighten) , cliquez autant de fois que nécessaire sur l'un ou l'autre de ces outils; n'hésitez pas à annuler l'opération au besoin en vous servant des touches CTRL-Z ou du menu Édition / Annuler (Edit / Undo) . Voici le résultat de l'étoile après avoir utilisé l'outil Redressé (straighten).
 

6. Vous pouvez utiliser l'outil Pivoter si vous désirez changer l'orientation de votre étoile.

 
7. Vous entrevoyez une bordure autour de l'étoile; nous pouvons la sélectionner (faites un double-clic sur la bordure pour la sélectionner d'un seul coup) et l'effacer en pressant une des touches d'effacement de votre clavier.
 

B. Symbole et bibliothèque (library)

Deux choses étroitement liées! Nous pouvons convertir tous les éléments - boutons, graphiques, clips d'animation, sons - en symboles.

FLASH possède une bibliothèque Windows / Library dans laquelle vous pouvez retrouver vos propres éléments convertis pour le fichier de travail en cours. Ce logiciel possède également une bibliothèque Windows / Common Libraries incorporant des boutons, des graphiques, des clips d'animation et des sons .

Nous allons maintenant créer un symbole avec notre étoile qui sera déposé dans notre bibliothèque de travail.

1. Cliquez sur l'étoile et au menu choisissez Insérer / Convertir en symbole (Insert/ Convert to symbol), inscrivez "étoile" comme nom, choisissez "graphic" et cliquez sur OK.

2. Ouvrez votre bibliothèque Fenêtre / Bibliothèque (Window / Library) et retrouvez-y le symbole étoile; vous pourrez utiliser une occurence de ce symbole autant de fois que vous le désirez.

 

C. L'animation interpolée

Nous animerons maintenant notre étoile en simulant une étoile filante; nous passerons de l'étoile initiale à une étoile plus petite et nous ferons déplacer en ligne droite d'abord, puis selon un guide que nous lui fournirons.

1. Vous avez créé un objet dans la scène 1 qui fait partie du calque 1 (layer1); modifiez le nom calque1 (layer 1)" par "étoile filante" en double-cliquant sur les mots calque 1 (ou layer 1).

2. Votre étoile est déjà inséré à l'image 1 (frame) sur la ligne du temps. Ajoutez une nouvelle image-clé (Keyframe) à l'image 44 : cliquez dans cette case sur la ligne du temps et pressez sur la touche F6.

4. Modifiez maintenant l'apparence de votre étoile; cliquez sur celle-ci avec le bouton droit de la souris, choisissez l'option redimensionner (scale); en déposant votre pointeur sur un des coins, maintenez le côté gauche de la souris enfoncé et réduisez l'aire de votre étoile.

5. Déplacez-la dans le coin inférieur droit la scène.

4. Cliquez sur l'image 20 (frame 20), utilisez le côté droit de la souris, choisissez l'option Animation interpolée ( Create Motion Tween).

5. Vous pouvez visualiser dans la même fenêtre votre animation en pressant Enter et dans une nouvelle fenêtre entière avec CTRL-Enter; refermez cette fenêtre en cliquant sur le X dans le coin supérieur droit.

6. Vous pouvez modifier la vitesse de votre pluie d'étoile en modifiant la vitesse de déplacement - nombre d'images (frames) par seconde. Enregistrez votre travail sous le nom de fichier "etoile1.fla"

 

 

 

7. Si vous désirez que votre étoile suive un itinéraire défini, utilisez un nouveau calque en cliquant sur l'icône dans le cadre des calques.

8. Avec l'outil Crayon, tracez le chemin sur lequel vous désirez faire circuler votre étoile. Vous pouvez adoucir ou non le parcours en utilisant l'outil "Lisser" ou "Redresser" .

9. Placez le pointeur sur la première image du calque de l'étoile, cliquez sur Déplacez votre étoile de façon à ce que l'aimant se fixe au début de la ligne-guide; répétez cette opération à l'image 44 et acrochez votre étoile à la fin de la ligne-guide.

Tutoriel suivant