tutoriel flash 3 - académie de Bordeaux

Flash3.exe
Flash 3 est un logiciel d’édition de graphiques
vectoriels.
Il permet de créer des animations et des
animations
interactives
destinées
principalement à être diffusées sur internet.
Tutoriel créé par Mathieu Caussé
Professeur d’arts plastiques
Académie de Bordeaux
Ce tutoriel est libre d’utilisation.
INTERFACE
Les scènes.
L’animation
contient
initialement 01
scène. La scène
active est en
blanc.
Pour insérer une
scène :
Insérer > Scène.
Une flèche
blanche et bleue
permet de
revenir à la
scène principale.
L’échelle temporelle.
À gauche
Les différentes couches, semblables à des
calques, dans lesquelles sont placées les
éléments de l’animation. Pour insérer une
couche : Insérer > Couche.
À droite
Le nombre d’images que l’animation contient.
En bas
Le nombre d’images par seconde ou
cadence (ici 12 ips) et durée totale de
l’animation.
La barre d’outils.
En haut les outils, en
bas leurs options.
La scène.
Entourée par la zone de travail en gris.
Pour afficher totalement cette dernière :
Afficher > Zone de travail
La bibliothèque.
Elle contient les symboles
(graphique, Movie Clip ou bouton),
sons et bitmaps utilisables sur la
scène. Pour l’afficher :
Fenêtre > Bibliothèque ou Ctl+L.
PRINCIPES GENERAUX
C’EST PARTI !
Je paramètre une scène qui sert de base à l’animation (dimensions,
01 cadence, couleur de fond…).
***
PREPARATION
Je lance le logiciel :
Démarrer > Programmes > Macromedia Flash 3 > Flash 3.
02 Sur la scène, je dessine les éléments nécessaires à l’animation.
Ces éléments peuvent être transformés en symboles, chacun doté d’un nom.
Ils sont alors automatiquement intégrés dans la bibliothèque et réutilisables.
L’occurrence d’un symbole est ce symbole placé sur la scène.
Un symbole peut avoir trois types de comportement :
•
graphique (exemple : le dessin d’un décor de fond) ;
•
Movie Clip (exemple : personnage) ;
•
bouton (interactivité).
Ces éléments sont placés sur des couches, nommables et visibles dans
l’échelle temporelle. Une couche est semblable à une feuille de papier calque.
La couche supérieure correspond au premier plan, la couche
inférieure à l’arrière-plan. Conseil : il est préférable de placer chaque
élément animé sur une couche différente.
Ces éléments sont modifiés dans le temps, image par image (couleur, forme,
dimensions, position…). Toute image comportant la modification d’un élément
devient une image-clé (elle contient un rond bleu uni). Il existe deux moyens
principaux de créer une animation : image par image (je dessine toutes les
images) ou interpolation (je défini une image-clé de départ, une image-clé de
fin et je laisse Flash calculer les images intermédiaires.
***
03
Si nécessaire, j’ajoute de l’interactivité à l’animation : création de
boutons et utilisation d’ActionScript, le langage de programmation de Flash.
***
04 Enfin, une fois l’animation terminée et testée, je la publie (exportation). Je
peux ainsi la publier :
•
sous forme de page HTML afin de l’intégrer dans un site web ;
•
sous forme d’un projecteur autonome afin de pouvoir lire
l’animation sans recourir à un navigateur web.
Si la scène est calée contre la barre
d’outils à gauche, je décide d’agrandir
ma zone de travail : Afficher > Zone de
travail. La scène est maintenant au
centre de la zone de travail grise.
Afin de faciliter mon travail futur, je
choisis Fichier > Préférences… et
dans la fenêtre qui s’ouvre je coche les
cases « Sélection avec la touche Maj »
et « Afficher le menu déroulant de
l’image ».
Je vais maintenant créer une animation. Elle comprendra au final :
•
une image « photographique » au format *.jpeg comme décor de fond ;
•
un personnage dessiné qui évoluera dans ce décor ;
•
un peu d’interactivité.
ANIMATION
Le nouveau fichier d’animation est ouvert. Il est pour l’instant vierge.
Je l’enregistre sous le nom « animation ». Le fichier créé porte l’extension
« *.fla » (animation.fla).
Le décor
J’importe l’image « paysage_nuit.jpeg » : Fichier > Importer et je cherche
l’image voulue (ou Ctrl+R).
Comme indiqué, j’ai l’intention d’utiliser une image photographique au format
*.jpeg comme décor de fond. Je modifie donc les dimensions de la scène afin
qu’elles correspondent à celles de cette image (500x375 px) :
Modifier > Animation et dans la fenêtre Propriétés de l’animation qui s’ouvre,
entrer 500 px en largeur et 375 px en hauteur (l’unité est le pixel).
L’image se place sur la
scène. Elle est entourée d’un
liserai grisé, comme l’est tout
élément sélectionné sur la
scène. Je remarque qu’elle a
été automatiquement insérée
dans la Bibliothèque.
J’affiche la fenêtre Bibliothèque qui me servira plus tard :
Fenêtre > Bibliothèque (ou Ctrl+L).
La Bibliothèque s’ouvre : elle est vide (normal !).
Pour aligner l’image au centre de la scène :
je sélectionne l’image, fais Modifier > Aligner
(ou Ctrl+K).
Dans la fenêtre qui s’ouvre, je coche Aligner
à la page et clique sur les boutons
d’alignement centré horizontal et vertical. Je
fais OK.
Dans l’échelle temporelle, j’ai maintenant un élément
dans l’image 01 de la couche 01. Pour plus de clarté, je
renomme cette couche : je double-clique sur le nom de la
couche et remplace « couche 1 » par « fond ». Je fais
Entrée.
Afin de pouvoir intervenir sur l’image de fond, je vais en séparer
les pixels (opération de traçage) :
Je sélectionne l’image, puis choisis Modifier > Tracer bitmap…
Dans la fenêtre qui s’ouvre, je mets le seuil de
couleur à 80, la zone minimale à 5, j’ajuste la
courbe à pixels et seuil de coin à plusieurs
coins.
Je fais OK.
Petit temps de calcul… et l’image apparaît
comme tramée : elle est sélectionnée.
Je clique dans la zone de travail pour la désélectionner.
Au passage : l’image perd plus ou moins de sa qualité !
Solution 02 :
Je groupe les pixels : Modifier > Associer
(Ctrl+G).
Le personnage
Je vais séparer ce paysage en deux zones : une que je place dans une
couche de premier plan, et une dans une couche d’arrière-plan. Ainsi, mon
personnage pourra évoluer non pas sur mais à l’intérieur du paysage.
Je crée une nouvelle couche que je nomme arbre : Insérer > Couche.
Le personnage va évoluer dans ce décor et passer entre l’arbre
du premier plan à gauche et ceux plus en arrière, i.e. entre les
couches fond et arbre.
Afin d’éviter toute modification accidentelle, je verrouille ces
deux couches : je clique sur l’icône main ou crayon à côté du
nom de la couche et dans le menu qui s’affiche je sélectionne
Verrouillée (un cadenas s’affiche alors).
Je crée une nouvelle
couche
personnage
que je glisse entre les
couches fond et arbre.
Avec l’outil Lasso ou au moyen de l’icône Flèche + touche Majuscule, je
détoure l’arbre au premier plan à gauche et un peu de sol (chaque partie
sélectionné devient grisée).
Je coupe l’arbre de la couche Fond : Ctl+X.
Je clique dans la couche arbre, sélectionne l’image 01 et fais Édition > Coller
sur place.
Tant que l’arbre est encore sélectionné, j’associe ses pixels afin d’éviter toute
modification accidentelle. Deux solutions au choix pour cela.
Solution 01 :
Je le transforme pour cela Clip :
Insérer > Créer un symbole. Dans la
fenêtre qui s’ouvre, je sélectionne Clip
et donne arbre comme nom. Je fais OK.
Je clique dans la première image de la couche
personnage. Je choisis l’outil Pinceau et
dessine un fantôme (couleur et remplissage au
choix).
Afin de le nommer et d’y apporter des
modifications, je change mon dessin en
symbole Clip : je sélectionne mon
fantôme, fais Insérer > Créer un
symbole et dans la fenêtre qui s’ouvre
nomme fantôme et choisis Clip.
Mouvement
Je vais faire se déplacer mon Clip « fantôme » sur une durée de
02 secondes à partir de la gauche jusqu’à un hors-champ à droite.
La cadence de l’animation étant de 12 images par seconde, mon animation
comportera 24 images.
Couche personnage : je clique sur l’image 24 et fais Insérer > Image-clé
(ou touche F6). Je crée ainsi une nouvelle occurrence de mon fantôme à
l’image 24.
Mon fond et mon arbre ont disparu. Normal, ils ne duraient qu’une seule
image. Je les fais donc durer eux-aussi 24 images.
J’observe qu’une flèche rouge s’est
dessinée dans la couche personnage
entre l’image 01 e l’image 24,
définissant ainsi les images
intermédiaires par interpolation.
Pour voir mon animation : je fais Entrée.
Pour la tester, je fais Contrôle > Tester
animation (Ctrl+entrée). Pour fermer la
fenêtre de test, je clique sur la croix en
haut à droite.
Bravo ! Je viens de réaliser ma première animation sous Flash 3 !
Mais je peux compliquer un peu !
Je veux faire apparaître mon fantôme en fondu.
Couche personnage : je clique sur l’image 24 et sélectionne mon fantôme.
Je le déplace à droite en dehors de la scène sur la zone de travail grise.
Je clique sur l’image 01 de la couche
personnage qui contient mon
fantôme.
Je double-clique sur le fantôme.
La fenêtre Propriétés de l’occurrence
s’ouvre. Je sélectionne l’onglet Effet
de couleur, choisis Couche Alpha et
paramètre celle-ci à 0%. Je fais OK.
Je teste mon animation (Ctrl+Entrée).
Je veux que mon fantôme change de taille lors de son déplacement.
Couche personnage : je clique n’importe où entre l’image-clé 01 et l’imageclé 24. J’effectue un clic-droit et choisis Propriétés (ou menu Modifier >
Image).
Dans la fenêtre qui s’ouvre :
Je choisis l’onglet Interpoler,
Dépl ac em ent dans l e m enu
déroulant et je coche la case
Interpoler les changements de taille.
Je fais OK.
Il va rapetisser en passant
derrière l’arbre pour regrandir
ensuite.
Je clique entre l’image 01 et 24
là où le fantôme passe derrière
l’arbre.
Je clique sur F6 afin d’insérer
une image-clé dans laquelle je
vais modifier mon fantôme.
Avec l’outil redimensionner, je
rapetisse mon fantôme.
Je teste mon animation
(Ctrl+Entrée).
INTERACTIVITE
Je veux que mon fantôme suive une trajectoire moins rectiligne.
Pour cela, je dois créer un chemin de trajectoire (ou guide de
déplacement).
Je clique dans la couche qui contient mon fantôme sur l’icône à côté du
nom de la couche (main ou crayon). Dans le menu déroulant qui s’affiche,
je sélectionne Ajouter un guide de déplacement. Une nouvelle couche,
appelée couche de trajectoire et reconnaissable à son icône linéaire
bleue apparaît.
Dans cette couche, avec l’outil Crayon, je dessine une trajectoire partant
de la gauche et sortant hors-champ à droite.
Je sélectionne l’outil Flèche puis l’outil Adhérence.
Dans l’image-clé 01 de la couche personnage, je
sélectionne mon fantôme et le place au point de
départ de ma trajectoire (croix centrale sur point
de départ qui devient un cercle).
Je fais de même dans l’image-clé 24.
Flash ajoute de l’interactivité aux animations par le biais de symboles
Boutons et du langage ActionScript par lequel je détermine des actions.
Je veux créer un bouton qui me permettra de lire et de stopper
l’animation.
Je crée une nouvelle couche que je nomme actions (je la place au-dessus
des autres). Je repère que flash a automatiquement inséré les 24 images
nécessaires à mon animation.
Il faut tout d’abord que j’interdise la lecture automatique de l’animation si
je veux la lancer plus tard à l’aide d’un bouton. Je vais donc commencer
par bloquer l’animation sur l’image 01.
En premier, j’isole celle-ci du reste des images de la couche actions : je
clique sur l’image 02 et y insère une image-clé par F6.
Puis je reviens dans l’image 01 et effectue un clic droit pur sélectionner
Propriétés. Dans la fenêtre qui s’ouvre je choisis l’onglet Actions. En haut
à gauche, je clique sur le bouton + et dans le menu qui s’affiche je choisis
stop. Je fais OK. Je repère qu’un petit a apparaît sur cette première
image, indiquant la présence d’une action sur celle-ci.
Création du bouton de lecture
Je dessine dans l’image 01 de la couche actions l’image qui me servira
pour le bouton et la place en bas à gauche (ici un crâne).
Je fais de ce dessin un symbole bouton : je le sélectionne et fais Insérer >
Créer un symbole, coche Bouton et nomme lire.
Je place aussi sur ma trajectoire le fantôme de l’image-clé à laquelle il
change de taille.
Pour rendre le déplacement plus juste, je vais orienter le fantôme dans le
sens de la trajectoire.
Je sélectionne le fantôme de l’image-clé 01 et fais Modifier > Image. Dans
la fenêtre qui s’ouvre je coche la case Orienter vers la trajectoire.
Je fais OK et teste mon animation.
J’effectue un clic-droit sur ce symbole et choisis Modifier. Mon dessin est
maintenant isolé sur un fond blanc. Je remarque que mon échelle
temporelle en haut a changé. Elle ne comporte plus que 4 images : Haut
(bouton non survolé), Dessus (bouton survolé), Abaissé (clic de souris) et
Cliqué (zone réactive de la souris).
Avec l’outil Flèche je sélectionne les
trois images vides et fais F6 afin de
rajouter trois images-clés identiques
à la première.
Dans l’image-clé Dessus je modifie
mon dessin. J’inscris par exemple le
texte « lecture » afin d’indiquer
l’usage du bouton. Je peux modifier
aussi l’image Abaissé. L’image
Cliqué sert à sélectionner la partie du
dessin qui sera sensible à la souris.
Mon bouton de lecture n’existe que dans l’image 01 de l’animation.
Je veux créer dans les autres images le même bouton mais qui me
servira cette fois à stopper l’animation pour revenir à l’image 01.
Dans la Bibliothèque je sélectionne le bouton « lire ».
Je clique sur la flèche de menu en haut à droite et choisis Dupliquer.
Dans la fenêtre qui s’ouvre, je rentre
stop comme nom, garde Bouton comme
sélection et fais OK. Un second bouton
nommé stop et identique à lire est créé.
Je modifie ce bouton stop afin d’inscrire
« stop » à la place de « lecture ».
Je reviens à la scène principale en cliquant sur la
flèche blanche et bleue au-dessus des onglets de
scène à droite de la fenêtre d’animation.
J’intègre maintenant l’action nécessaire à la lecture et à
la pause de l’animation.
Dans la scène principale, je sélectionne le bouton que je viens de créer.
J’effectue un clic-droit, choisis Propriétés (ou, sans clic-droit : Modifier >
Occurrence) et sélectionne l’onglet Actions.
Je clique sur le bouton + et choisis l’action Go To. Dans les champs
d’information à droite je garde <scène actuelle> comme scène de renvoie,
entre 2 comme numéro d’image et coche la case Aller à et lire.
Ainsi, lorsque je cliquerai sur le crâne, la lecture commencera à partir de
l’image 02.
Dans la scène principale, à partir de la
bibliothèque, je place par glisserdéposer le bouton stop dans l’image 02
de la couche actions, exactement
superposé au bouton lire de l’image 01.
Pour faciliter ce placement, je clique sur
l’icône Calque contenant trois petits
carrés rouges en haut à gauche des
couches. Je rends ainsi visibles
plusieurs images successives. Une fois
le bouton calé, je désactive la fonction
Calque.
Je sélectionne le bouton stop et lui attribue comme action Go To avec
Aller et lire à l’image 1 comme paramètres.
Une fois ce bouton cliqué, l ‘animation reviendra à l’image 01.
Note : je peux définir différentes destinations comme lien de ce bouton
(une image d’une autre scène, une page HTML…).
PUBLICATION
Je veux créer un bouton me permettant de fermer et quitter le lecteur
d’animation dans le cas d’une animation autonome non inscrite dans une
page HTML.
Comme précédemment, je crée un bouton.
J’effectue un clic-droit sur ce bouton, choisis Propriétés et l’onglet
Actions.
Je choisis FSCommand comme action et entre dans le champ
d’information à droite le mot « Quit ».
Ainsi, en cliquant sur ce bouton, le lecteur se fermera automatiquement.
Pour publier une animation sous la forme d’un lecteur autonome.
Je fais Fichier > exporter l’animation.
Dans la fenêtre qui s’ouvre je choisis un nom, le format *.swf et je fais
enregistrer.
Dans la fenêtre Export shockwave flash qui s’ouvre alors, je change la
qualité et laisse les autres informations telles que. Je fais OK.
Dans l’explorateur windows, je double-clique sur le fichier Shockwave
flash que je viens de créer. Une fois ouvert, je fais Fichier > Créer
projection… et je saisis un nom. Je remarque que je crée ainsi un fichier
*.exe.
MISE EN ŒUVRE FACILE AVEC UN ELEVE.
Pour publier une animation sous la forme d’une animation à lire dans un
navigateur web.
Il est assez facile de permettre à un élève de démarrer un projet avec Flash,
sans pour autant engager un « long et profond » apprentissage du logiciel.
Voici donc les quelques indications nécessaires pour ce faire :
Je fais Fichier > exporter l’animation.
Dans la fenêtre qui s’ouvre je choisis un nom, le format *.swf et je fais
enregistrer.
Dans la fenêtre Export shockwave flash qui s’ouvre alors, je change la
qualité et laisse les autres informations telles que. Je fais OK.
•
•
Je crée une page HTML dans laquelle j’insèrerais l’animation shockwave
flash.
•
•
•
•
L’élève démarre l’ordinateur.
Il ouvre le logiciel (Démarrer > Programmes > Macromedia Flash 3 >
Flash 3).
Si la scène est calée contre la barre d’outils à gauche, il agrandit la zone
de travail afin d’y placer la scène au centre : Afficher > Zone de travail.
Il choisit Fichier > Préférences… et dans la fenêtre qui s’ouvre coche les
cases « Sélection avec la touche Maj » et « Afficher le menu déroulant de
l’image ».
L’enseignant explique à l’élève :
•
où se trouve la barre d’outils et son fonctionnement (sélection de
l’outil pour plus d’options) ;
•
où se trouve la scène sur laquelle il va dessiner ;
•
où se trouve l’échelle temporelle et son fonctionnement (un petit
rectangle = 01 image ; quand je dessine sur la scène, le cercle contenu
dans ce rectangle devient bleu ; je rajoute une nouvelle image en cliquant
sur la touche F6 du clavier : je copie-colle ainsi à l’identique le contenu de
mon image précédente ; je modifie la nouvelle image ; je clique sur F6 ;
etc.).
L’élève voit ainsi que trois images suffisent à créer une petite animation.
S’il le désire, l’élève conserve l’animation créée en l’enregistrant dans le
dossier approprié définit par l’enseignant.
Indication complémentaire 1 : l’enseignant explique le fonctionnement des
couches et leur utilité.
•
Il vaut mieux dessiner chaque élément sur une couche différente afin de
faciliter la réalisation de l’animation.
•
L’élève ajoute une nouvelle couche en faisant Insérer > Couche. La
couche supérieure définit le premier plan, la couche inférieure définit
l’arrière-plan.
Indication complémentaire 2 : l’enseignant explique comment regrouper les
différentes parties d’un même « corps ».
•
Soit l’élève sélectionne tout d’abord chaque partie voulue en maintenant
la touche Majuscule enfoncée puis fait Modifier > Associer (Ctrl+G).
•
Soit l’élève sélectionne ces parties de même mais les convertit en Clip en
faisant Insérer > Créer un symbole (F8). Il choisit alors l’option Clip et
nomme son élément.