Formation Flash.

Formation Flash.
Remarque : pour la suite du travail, créez un dossier de travail dans lequel vous placerez les fichiers
amenés par le formateur.
Lancer le logiciel en cliquant sur son icône
1-Afficher la fenêtre de travail de flash : Menu Nouveau / Fichier (Raccourci : Ctrl + N).
Remarque : au lancement, vous travaillez sur une animation vierge nommée Sans titre-1.
Liste des
calques
Le scénario : liste des images de l’animation.
Au départ, une seule image clé vide
Outils
Fenêtres de
travail
(voir menu
Fenêtres et
triangles
d’extension)
La surface de
dessin, c'est-àdire la scène
2-Afficher les propriétés de votre animation : Menu Modification / Document (Raccourci : Ctrl + J)
Vous pouvez modifier
- La cadence : si vous voulez intégrer votre fichier flash à une
séquence vidéo, celle-ci est cadencée en principe à 25 i/s.
- Les dimensions des images : quelle sera l’exploitation visuelle
de votre travail ? Si c’est pour intégrer à un fichier web, prenez
320x240, si c’est pour un travail sur moniteur, le standard actuel
est 640x480 voire 800x600, pour une visualisation télévision au format européen PAL, adoptez 720x576.
- La couleur de l'arrière-plan.
Pour que cette fenêtre soit toujours présente en bas l’écran, mais dont le contenu s’adaptera avec
le travail effectué, faites menu Fenêtres / Propriétés (Raccourci Ctrl + F3) ou cliquez sur le triangle
Formateur : Jean Brossard
Flash Mx
Page 1 sur 16
devant « Propriétés ».
3 - Une première animation : animation image par image ou séquentielle.
3-1 : visualisation du fichier « maison image par image.swf » avec Flash player.
3-2 : analyse du fichier « maison image par image.fla » dans Flash Mx.
Ce document est une succession d’images clés dont la succession à
12 i/s donne l’impression d’une continuité.
Vous pouvez faire défiler les images en utilisant le point-virgule
(en avant) ou la virgule (en arrière).
Image-clé 9 correspondant
à l’image vue dans la zone
de dessin
Si vous cliquez sur les images clés (ronds noirs), vous visualisez les
composants de l’image.
3 – 3 : créez une animation image par image.
Fermerz le document ; créez un nouveau document par menu ou avec Ctrl + N.
Une image-clé vide (cercle intérieur blanc) est dans l’image 1.
Pensez à régler les paramètres de votre animation : et pour voir 1s d’animation, il vous faudra créer
12 images …
Dés que vous ajoutez un élément (graphique ou texte) avec les outils, cette image-clé vide est
convertie en image-clé (rond noir).
Pour créer l’image 2, cliquez bouton droit dans la barre de scénario du calque 1 et choisissez
« insérer une image clé » (raccourci F6).
Modifiez l’image 2.
Créez la succession de vos images en répétant ces étapes.
Pour tester votre animation, faites Contrôle / Lire (raccourci Entrée).
Pour visualiser votre animation, faites Contrôle / tester l’animation (raccourci Ctrl + Entrée).
Pour revenir à votre travail, fermez le flash player (x de la barre des menus !).
Sauvegardez votre travail (raccourci Ctrl +s ou Ctrl + Maj + s).
4 – Animation par interpolation de mouvement (trajectoire linéaire).
L’idée : si un objet apparaît sur plusieurs images, mais à des endroits différents, plutôt que de déplacer « à
la main » cet objet à chaque image, on indique sa position sur la 1 ère image, sa position sur la dernière
image et Flash, qui est un logiciel vectoriel utilisant donc des algorithmes mathématiques), calculera par
interpolation, les différentes positions intermédiaires de l’objet.
Formateur : Jean Brossard
Flash Mx
Page 2 sur 16
Lacez l’animation « interpolation ballon1.swf ».
Objectif : il s'agit d'animer un ballon sur une trajectoire linéaire oblique avec un effet de diminution de la
taille du ballon.
une interpolation ne peut fonctionner qu’avec des symboles !
il ne peut y avoir qu’un symbole muni d’une interpolation sur un même calque !
étape 1 : créez un nouveau document (Ctrl + N) et sauvegardez (Ctrl + s) sous Ballon1.fla.
étape 2 : création d’un symbole de bibliothèque : Ctrl + L ou F11.
Nous allons créer un ballon et le stoker dans la bibliothèque regroupant les symboles
de l'animation. Sélectionner : Fenêtre / bibliothèque ou F11.
Tapez sur le signe
pour créer un nouveau symbole.
Une fenêtre de propriétés s’ouvre.
Dans la fenêtre Propriétés du symbole taper Ballon comme nom du symbole
et cocher le bouton Graphique et valider par un clic sur OK.
Après validation une zone de travail permet de créer le symbole Ballon
sélectionnez l’outil ovale pour dessiner le symbole ballon. (si les outils
n’apparaissent pas, faites Fenêtre / Outils ou Ctrl F2).
Avant de dessiner le ballon, pensez à définir ses couleurs, trait de contour et
intérieur de remplissage !
L'outil Ovale étant sélectionné faites glisser le
pointeur de la souris dans la zone de travail en
maintenant la touche Maj enfoncée.
En cas d'erreur annuler la manipulation par le
Raccourci : Ctrl + Z
Remarques :
Si la touche Ma j n'est pas maintenu
enfoncée on obtient une ellipse et non un disque.
Si les couleurs ne conviennent pas, il faut
reselectionner le disque en totalité avec l’outil
flèche et un double-clic (sinon, vous ne prenez
que l’intérieur).
Le symbole Ballon est créé et apparaît dans la bibliothèque.
Remarque : faites votre dessin à proximité de la croix pour le voir apparaître !
étape 3 : création d’une première image-clé.
Cliquer sur le lien Séquence 1 pour revenir à l'édition des images d'animation.
Formateur : Jean Brossard
Flash Mx
Page 3 sur 16
Les images-clés
On distingue : Les images-clés : images définies par l'utilisateur.
Les images interpolées : images qui constituent les transitions
entre deux images-clés Elles sont calculées par Flash.
Au départ le scénario est constitué d'un seul Calque et d'une seule image-clé, vide
Il s'agit maintenant de placer l'occurrence du symbole Ballon pour obtenir la première image-cl é, non
vide
Sélectionner l'outil flèche (La flèche noire).
Cliquer sur le ballon de la Bibliothèque et puis clic enfoncé faites glisser le ballon dans la zone de travail,
en bas à gauche.
La première image-clé n'est plus vide. Un petit rond noir le signale.
L'image-clé l
étape 4 : extension des images fixes et création d’une seconde image clé.
Pour prolonger l'image-clé l par des images fixes :
Méthode 1 : la touche Alt enfoncée, faites glisser avec le pointeur de souris,
l'image-clé l vers la droite du scénario, et relâcher le bouton de la souris sur
l'image 30.
Méthode 2 : mettez le pointeur de la souris sur l’image 30, cliquez droit et choisissez « insérer une image
clé » ou utilisez le raccourci F6 .
Flash a créé 30 images identiques (vérifiez en cliquant sur une image ou en utilisant le ; ).
Placez-vous sur l’image 30, et avec l’outil flèche (noire), déplacez le ballon en haut à droite.
Testez l’animation.
étape 6 : mise en place d’une interpolation de mouvement.
Il y a 29 images identiques en bas à gauche et 1 différente, la 30, en haut à droite. On va créé un mouvent
continu de la 1 à la 30 (les images 2 à 29 étant interpolées).
Cliquez sur une image fixe entre 1 et 30 (inutile de sélectionner l'ensemble des images).
Si ce n’est fait, ouvrir la fenêtre de configuration du
mouvement par Fenêtre / Propriétés (Raccourci : Ctrl +
F3) ou clic sur le triangle.
Pour interpolation, sélectionner : Mouvement
Choisir une valeur pour l'accélération (un nombre positif ralentit le mouvement, négatif l’accélère)
Cochez les cases :
- Redimens.
- Orienter vers la trajectoire - Accrocher .
étape 7 : visualisation.
Dans le menu sélectionner : Contrôle / Rembobiner / Lire ou simplement validez la commande Entrée
Formateur : Jean Brossard
Flash Mx
Page 4 sur 16
étape 8 : modifications.
Mettez vous sur l’image 30. Dans cette image-clé on veut une occurrence du symbole Ballon avec une
taille plus petite ; cliquez sur l'outil Flèche (flèche noire) par un Clic droit ouvrir le menu contextuel,
sélectionner la commande Redimensionner, à l'aide des poignets-cadre modifier la taille de l'image pour
la rendre plus petite.
Visualisez.
Enregistrez votre travail.
Remarque : si l’objet n’est pas un disque, vous pouvez lui attribuer un effet de rotation.
Comprendre les Représentations d'effets animés dans le scénario
Flash différencie une animation interpolée d'une animation image par image dans le scénario de la façon suivante :
L'interpolation de mouvement est indiquée par un point noir au niveau de la première imageclé, alors que les images interpolées intermédiaires comportent une flèche noire sur fond bleu
clair.
L'interpolation de forme est indiquée par un point noir au niveau de la première image-clé, les
images intermédiaires comportant une flèche noire sur fond vert clair.
Une ligne pointillée indique que l'interpolation est rompue ou incomplète, par exemple parce
que l'image-clé finale est absente.
Une image-clé unique est indiquée par un point noir. Les images gris clair après une image-clé
unique ont le même contenu sans modifications et comportent une ligne noire avec un rectangle
vide au niveau de la dernière image de la plage.
5 – Animation par interpolation de formes Morphisme (trajectoire linéaire).
Visualisez le fichier morphing.swf.
Dans cet exercice, il s'agit de transformer un carré en un rond. Les effets d'animation (mouvement et
forme) s'exercent sur un objet-départ « un carré » qui se transforme en un objet-arrivée « un disque »
Créer une nouvelle animation Flash par le raccourci Ctrl + N et l'enregistrer sous le nom de Morphismel
1 -Création de la première image-clé
Dans la Scène 1, sélectionner la première image du scénario (image-clé vide).
Dans la zone de travail dessiner un carré, en bas à gauche de la zone de travail de la scène, en dégradé de
bleu à l'aide de l'outil Rectangle (Pour obtenir un carré, et non un rectangle, garder la touche Maj
enfoncée pendant le tracé).
Pour la couleur de remplissage ouvrir le mélangeur de couleurs par : Fenêtre /. mélangeur de couleurs ou
Maj + F9.
Nous avons la première image-clé.
2-Création des images fixes
La touche Alt enfoncée faites glisser sur la droite l'image-clé jusqu'à
l'emplacement 36 pour créer une suite d'images fixes.
Formateur : Jean Brossard
Flash Mx
Page 5 sur 16
- Mettez-vous sur l’image 36, et déplacez, après avoir sélectionné tout le carré, la figure en haut à droite.
- Cliquer sur l'image qui suit les images fixes (la N°37) et placer une nouvelle
image-clé-vide par, F7 - Sélectionner l'image-clé-vide
- Dessiner, en haut à droite, où se trouvait le carré, dans la zone de travail de la
scène un disque de couleur dégradée rouge.
3-Création de l’interpolation de forme
- Cliquer sur une des images fixes pour les sélectionner
Accéder au panneau Propriétés (Ctrl + F3), dérouler le menu local
Interpolation et choisissez Forme (on veut déplacer mais passer d’un carré à un
disque et de bleu à rouge !).
- accélération choisir une valeur entre -1 et -100
- décélération choisir une valeur entre +1 et +100
- Pour Mélange : Distributif.
- mettez-vous sur l’image 36 (la dernière image du carré) et supprimez l’image clé.
- Lancer l'animation par la touche Entrée.
6 – Animation par interpolation de formes Morphisme (animation de texte).
1 -Création de la première image-clé
Sélectionnez l’outil Texte, modifiez dans le cadre des propriétés, la police, sa couleur, ses attributs …
Cliquez dans la fenêtre de travail et tapez votre texte.
Faits deux fois à la suite, la même manipulation : Manipulation puis séparer ; cela crée autant de cadres
graphiques qu’il y a de lettres.
2-Création des images fixes
Sélectionnez l’image clé 1, et avec la touche Alt enfoncée, glissez l’image clé sur l’image 30.
Mettez-vous sur l’image 30, et avec l’outil de sélection, déplacez l’ensemble de votre texte à l’endroit où
vous voudrez que le mot entier soit écrit.
Revenez sur l’image 1.
Cilquez en dehors des lettres pour les déselectionner.
Sélectionnez une lettre et déplacez-là ; recommencez pour les autres.
3-Création de l’interpolation de forme
Dans la barre de scénario, cliquez sur une image entre 1 et 30, puis faites une interpolation de forme.
Testez l’animation.
Remarques : il est préférable d’utiliser des polices True Type.
vous pouvez sur l’image clé 1 changer la couleur et la taille de chacune des lettres.
Formateur : Jean Brossard
Flash Mx
Page 6 sur 16
7 – Animation par interpolation de mouvement : guide de mouvement.
Il s'agit d'imposer une trajectoire de mouvement au ballon avec un effet de diminution de la taille du
ballon (il rebondit en s’éloignant).
1- enregistrement de l’animation
Ouvrez le fichier d'animation précédent Ballon1.fla et Sauvegardez-le sous le nom de Ballon2.fla.
(Raccourci : Ctrl + Maj + S)
2- Création d'un guide de mouvement
Un guide de mouvement est une trajectoire définie par l'utilisateur.
Sélectionner par un clic le calque 1 (le seul existant pour l'instant).
Sélectionnez : Insertion / Guide de mouvement
Un nouveau calque guide se place au dessus du calque 1 déjà
en place
Sélectionner le Crayon du menu des Outils, prenez l’option
« lisser » pour avoir une courbe plus harmonieuse (une tablette graphique pourrait être utile !!!)
et dessiner dans la page de travail votre trajectoire.
Remarque : la trajectoire doit être un trait continu, ce qui vous interdit d’utiliser l’outil ligne
pour faire une succession de segments !
Dans le Calque 1, sélectionner l'outil Flèche (Flèche noire)
et cliquer sur la première image-clé. Dans la zone de travail
placer le « centre » du ballon en début de trajectoire.
Toujours dans le calque 1 cliquer sur la dernière image-clé
(l'image N°30). Dans la zone de travail placer le« centre »
du Ballon en fin de trajectoire.
Vous pouvez diminuer la taille du ballon.
Remarque : le trait de la trajectoire n’est pas visible lorsque
vous visualisez l’animation avec le Flash player.
3- Visualisation de l'animation
Validez Ici commande Enter (Entrée).
Remarque : avec une accélération négative, vous accentuez l’effet des rebonds
4- Amélioration de l’effet visuel.
Recherchez les images où le ballon est au plus bas et au plus haut de la trajectoire (touche ; ou ,). ; à
chacun de ces endroits créez une nouvelle image clé (touche F6 ).
Aux endroits les plus bas, modifiez la taille du ballon pour donner une impression de tassement.
Remarque : plus vous créez d’images clés, plus vous rendez réaliste l’animation …
5-Sonorisation de l'animation
Il s'agit de sonoriser les rebonds du ballon quand il touche le sol.
Formateur : Jean Brossard
Flash Mx
Page 7 sur 16
Les sons reconnus par Flash sont wav, mp3 et si vous avez installé QuickTime, au, aiff.
Sélectionner dans le menu de Flash : Fichier / Ouvrir comme une bibliothèque
(Raccourci : Ctrl + Maj + O).
Accéder par navigation dans le dossier de stage et trouvez le fichier rebond.wav
Pour Associer le Son avec les images où rebondi le ballon, il faut créer un nouveau
calque
Cliquer sur le Calque guide et utiliser les commandes Insertion / Calque du menu de Flash, puis par un
double clic sur le nouveau calque donner lui donner le nom : SonBallon.
Pour placer le son du ballon aux bons endroits (impacts sur le sol) sélectionner le calque SonBallon et
parcourir la scène image par image(, ou ;) pour se placer
sur les images de contact sol-ballon.
Lorsque la tête de lecture se trouve sur une image
contact sol-ballon, créer une Image-Clé via le menu
Insertion ou utiliser le Raccourci F6, puis faites glisser
le son depuis la bibliothèque Son jusqu’à la scène.
Répéter l'opération pour les autres images de contact.
Remarque : Pour l'image-Clé de fin d'animation, il est nécessaire de l'étirer pour entendre le son. Pour
cela, faites-la glisser et maintenant la touche Alt enfoncée.
8 - l'interpolation de mouvement à la volée
Créer une nouvelle animation Flash par le raccourci Ctrl + N et l'enregistrer sous le nom Interpolations
Il s'agit de dessiner un carré, de le déplacer et de le faire pivoter d'un quart de tour.
Dans cet exemple les effets d'animation (mouvement et forme) s'exercent sur le même objet : Ici le carré.
1 -Création de la scène
Dans la zone de travail de la Scène 1, en haut à gauche, dessiner un carré en dégradé de gris à l'aide de
l'outil Rectangle. (Pour obtenir un carré, et non un rectangle, garder la touche Maj enfoncée pendant le
tracé.)
2-Création de l'interpolation de mouvement
Avec l'outil Flèche sélectionner le carré par un Clic puis créer une interpolation de mouvement par
Insertion / créer une interpolation de mouvement.
Le carré devient un symbole de la bibliothèque sous le nom Interpolation (faites apparaître la bibliothèque
avec menu fenêtre ou F11).
Cliquer, par exemple, sur l'image20, puis créer la dernière image de l'interpolation par Insertion / Image.
Remarque : les pointillés dans le scénario signalent qu'il manque l'image
clé marquant la fin de l'interpolation.
Se placer sur l'image 20 puis faire glisser le carré en bas du coin droit (les pointillés dans le scénario
deviennent une flèche).
Formateur : Jean Brossard
Flash Mx
Page 8 sur 16
Par un clic droit sur le carré ouvrir le menu contextuel et modifier la taille du carré et faite le pivoter de
90° vers la droite.
Lancer l'animation par la touche Entrée.
Le mouvement s'effectue sur la droite joignant la position du point-départ à la position du point-arrivé.
3-Interpolation du mouvement fixé par une trajectoire
- Comme dans l'exercice précédent créer un Calque-Guide, par Insertion / Guide de mouvement.
- Tracer la trajectoire de votre choix avec l'outil plume ou crayon.
- Placer le point d'alignement (+) du carré de départ en début de trajectoire et le point d'alignement (+) du
carré de fin sur le dernier point de la trajectoire.
- Pour que le carré suive la trajectoire dans le panneau image cocher Orienter vers la trajectoire et
Accrocher
- Masquer le Calque-Guide en cliquant sur sa puce « œil » de la liste des calques. (même non masqué, il
ne sera pas visible dans le Flash player)
- Lancer l'animation par la touche Entrée.
10 utilisation des calques
Les calques servent notamment lorsque l’on veut animer plusieurs objets.
10 – 1 : utilisation des calques : interpolation de mouvement de plusieurs objets
Ouvrez le fichier morphisme1.fla créé à la séquence 5.
Cliquez sur le bouton « insérer un calque » dans la fenêtre de
scénario ; cela crée un nouveau calque nommé calque 2.
Pour vous y reconnaître, renomez chacun de ces calques par
double clic.
Mettez vous dans le 2 ème calque, et refaites une nouvelle
animation comme dans le calque 1.
Testez. Enreistrez sous morphisme2.
10 – 2 : utilisation des calques : animation d’un texte (1)
Visualisez le document « calques lettres 1 ».
Créez un nouveau document.
Avec l’outil texte, créez un texte type « stage ».
Séparez les lettres (modification / séparer).
Formateur : Jean Brossard
Flash Mx
Page 9 sur 16
Répartissez les lettres sur différents calques (modification / répartir vers les calques) : le calque 1 est vide,
et il y a autant de nouveaux calques créés que de lettres au mot, chaque calque a le nom de la lettre.
Travail à effectuer : chaque apparaît du même endroit avec la même taille, et va se positionner vers sa
destination finale en tourant.
Pour le calque de la lettre s :
Désactivez les autres calques en cliquant sur l’œil.
Convertissez la lettre s en symbole graphique.
Créez une deuxième image clé en 15 et une troisième en 100.
En 1, donnez les propriétés suivantes au clip : L = 195, H= 360, X=265, Y=200
Pour la 15 et la 100 : L=40, H=80, X= 50, Y=200.
Cliquez entre 1 et 15, faites une interpolation de mouvement avec rotation et entre 15 et 100 sans rotation.
Testez.
Pour la lettre suivante : cachez le 1er calque, activez le 2 ème ; déplacez la 1 ère image clé en 15, créez la
2ème en 30 et la 3 èmme en 100 ; prenez les mêmes paramètres sauf en 100 où vous décalez les X de 100,
doc 150.
Faites de même ppour les autres lettres.
Réactivez les calques ; visualisez.
Remarque : avec cette méthode, les lettres ont forcément la même couleur au départ et à l’arrivée, mais
elles peuvent tourner. Si voulez avoir des effets de couleurs, il faut utiliser la méthode de l’activité 6,
mais on perd la possibilité de rotation.(voir fichier « calques lettres 2 »).
10 – 3 : utilisation des calques : animation d’un texte (2)
L’exercice est la réalisation d’un texte tournant : voir le fichier « texte tournant.swf ».
Texte tournant
- sur le calque 1, créez un texte, puis
convertissez-le en symbole ; centrez grâce
à la fenêtre Aligner (notez la largeur du
cadre).
Étape 1 :
- créez une image clé en 25 ;
redimensionnez en largeur au minimum
(L=10=. Faites une interpolation de
mouvement ; sélectionnez le symbole et
faites un copier.
- créez un masque 2. (vous pouvez cacher
le masque 1).
Étape 2 :
- dans ce masque 2, créez avec F7, une image clé vide en 26 ; collez votre symbole puis retournez-le
Formateur : Jean Brossard
Flash Mx
Page 10 sur 16
avec Modification / Transformer / retourner horizontalement.
- faites une image clé en 50 et 75.
- en 50, redimensionnez le symbole à la taille d’origine, et faites une interpolation de mouvement de 26 à
50 puis de 50 à 75.
Étape 3 :
- refaites comme à l’étape 2 dans le masque 1, à partir de l’image 76 : image clé vide, coller, retourner,
image clé en 100, redimensionner, interpoler.
- tester l’animation.
Texte défilant.
- Créez un calque 3 ; sur l’image 1, créez un texte que vous transformez en symbole. Positionnez-le à
droite de l’image.
- créez une image clé en 100 ; positionnez le symbole à gauche de l’image ; créez unee interpolation de
mouvement.
- Testez.
10 – 4 : utilisation des calques : fondu enchaîné
Visualisez le fichier « transparence.swf » puis « spirale_2.swf » qui est le travail à réaliser.
Le Calque « Spirale_1 »
1. Créer un symbole graphique, nommé spirale_l en chargeant l'image Spiralel.gif du répertoire de travail
(répondre Non à la question d’importation, pour n’avoir qu’une image).
2. Nommer le calque l « Spirale_l » , puis se placer en image 1, faites glisser le symbole Spirale_l en bas
à droite de la scène. .
3. Créer par glissement de l'image-Clé 1, avec la touche Alt enfoncée, des images fixes jusqu'à l'image 30.
4. Se placer en image 15, Clic avec touche Ctrl enfoncée, créer une image Clévide par F7, faites glisser le symbole Spiralel de la bibliothèque sur la scène.
5. Redimensionner pour obtenir une spirale plus grande, puis ouvrir la fenêtre
Aligner par Ctrl + K, et positionner la spirale au milieu du bord gauche de la
scène . Mettez-vous sur la 30, centrez l’image et diminuez sa taille.
Clic sur :
6. Cliquer entre les images N°2 et N°15 puis entre la N°15 et la N° 30 et programmer l'animation grâce à
la fenêtre de propriétés :
Sélectionner : Pour interpolation : Mouvement,
Pour accélération : 0, cocher Orienter vers la
trajectoire et Accrocher. Rotation : Automatique.
7. Tester la scène.
Le Calque « Spirale_2 »
1. Insérer un nouveau calque et le nommer le
Spirale_2. Ouvrez la bibliothèque si ce n’est déjà
Formateur : Jean Brossard
Flash Mx
Page 11 sur 16
fait. Puis se placer en image 3l, créer une image-Clé par F6, faites glisser le symbole Spirale_l de la
bibliothèque dans la scène et positionner la spirale au centre de la cène à l'aide de la fenêtre Aligner.(si
possible, reprenez les mêmes dimensions que pour l’mage 30)
2. Avec la touche Alt enfoncée, créer des images Fixes jusqu'à l'image 75.
3. Se placer en image 76 et créer une image-Clé par F6
4. Se placer en 31, ouvrir le panneau propriétés du symbole et cliquer sur l'onglet Couleur / Alpha. Régler
le pourcentage à 0% ; recommencer en 75 avec cette fois 100 %
6. Créer comme précédemment une animation avec interpolation de mouvement.
7. Tester la scène.
10 – 4 : utilisation des calques : masques
Visualisez les fichiers « masque.swf » « masque2.swf » « masque3.swf » et « masque4.swf ».
Réalisation du fichier masque.swf : l’idée est de voir, à travers une fenêtre bleue ciel, découpée dans un
rectangle vert, passer en diagonale un ovale noir.
1- créez un nouveau document ; renommez le calque 1 « fond » puis recouvrez l’image entière par un
rectangle vert.
2. Avec la touche Alt enfoncée, créer des images Fixes jusqu'à l'image 40.
3 – cachez le calque « fond », créez un nouveau calque et renommez-le « fond_fenêtre » ; recouvrez
l’image entière par un rectangle bleu.
4. Avec la touche Alt enfoncée, créer des images fixes jusqu'à l'image 40.
5 – cachez ce calque, créez un nouveau calque et nommez-le « ovale » ; créez en image 1 un ovale noir en
haut à gauche, puis une image clé en 40 ; déplacez l’ovale en bas à droite ; créez une interpolation de
forme.
6 – cachez ce calque ; créez un nouveau calque et nommez-le masque ; dessinez en son centre un
rectangle, dont la couleur importe peu ; à la lecture, toute zone remplie sera transparente et inversement,
toute zone non remplie sera opaque.
7 – réactivez tous les calques.
8 – placez-vous sur le calque masque, avec le bouton droit,
demandez « masque » ; remarquez les différents symboles
qui apparaissent : verrou, icônes bleues et décalages. Un
calque de masque cache toujours le calque qui se trouve
immédiatement en dessous de lui, donc soyez vigilent lors de sa création !
9 – le calque « fond_fenêtre » doit aussi être masqué : activez-le, cliquez
droit sur son nom et demandez ses propriétés ; cochez masqué ; notez les
changements.
10 – pour voir le résultat final, il ne suffit pas de lire l’animation (touche
entrée), il faut la tester (Ctrl + Entrée) ! ou alors il faut s’assurer que les 3
calques (le masque, et les 2 calques masqués) soient verrouillés.
Formateur : Jean Brossard
Flash Mx
Page 12 sur 16
10 – 5 : utilisation des calques : pelures
Visualisez le fichier « pelure_marteau.swf ».
- Sur le calque 1, que vous pouvez renommer en « enclume », importer l’image pelure_image1.jpg ;
convertissez en symbole ; faites des images figes fixes ou créez une interpolation de mouvement
jusqu’en 40.
- Créez un nouveau calque, que vous renommez en « marteau ». importez l’image « marteau
haut.gif » ; attention, l’image jpg a dû être retravaillée afin de rendre les zones blanches
transparentes !
- Transformez le marteau en symbole ; le marteau devant tourner, il faut changer le centre du
symbole et le positionner sur le centre de rotation souhaité :
Modification / transformer / transformerImages
librement
puis faire un glisser
concernées
déplacer du centre.
- Dans le calque du marteau, créez des images clés en 10, 20, 30 et 40.
- En 10 et 30, le marteau doit frapper l’enclume : modification /
transformer / rotation à droite de 90° ; faites des interpolation de
mouvement sur chaque intervalle.
- Pour voir les positions intermédiaires du marteau pendant l’étape de
création, vous pouvez utiliser la « pelure d’oignon » et régler le
nombre d’images concernées.
- Vous pouvez ajouter un son (marteau.wav) aux images 120 et 30.
11 utilisation des liens et des scripts.
11 -1 liens hypertextes.
Le but est de créer des liens hypertextes sur des images.
Visualisez le fichier « académies-liens.swf ».
- Vous importerez les images de chaque académie dans des
calques différents, et les images seront transformées en symbole
Clip ; les animations seront décalées de 15 images et donc l’image
animée finale sera en 90 mais les liens seront sur l’image 91 …
- pour chaque image, vous pourrez, en plus des mouvements,
utiliser les variations Alpha …
- Le travail nouveau commence en 91 avec la création des liens hypertextes.
Création du lien pour l’académie d’Orléans-Tours.
- cachez tous les autres calques ; créez une image clé en 91,sélectionnez le symbole de l’académie et
transformez-le en symbole Bouton (pour pouvoir définir des actions de souris !).
- Agrandissez la fenêtre de Actions-Boutons.
- Mettez la fenêtre de programmation en « mode
expert » pour qu’elle soit plus grande » et faites
afficher les numéros de ligne.
- Désactivez le symbole de l’académie pour
travailler sur l’image dans sa globalité;
- Commencez par arrêter l’animation à : dans la rubrique Actions,
puis Contrôle de l’animation, sélectionnez « Stop » et faites un glisser-déplacer dans la fenêtre de
Formateur : Jean Brossard
Flash Mx
Page 13 sur 16
programmation.
Remarque : un @ est apparu sur l’image 91 indiquant qu’une action a été implantée.
- Reste à programmer le déclenchement d’un lien si on clique sur l’image.
- Activez l’image de l’académie ; dans la même section, faites un glisser-déplacer avec l’Action « On »
puis tapez « press » entre les parenthèses ( ) qui suivent « on ».
Fermez la section contrôle de l’animation et ouvrez la section Navigateur/réseau.
Glissez déplacez l’instruction getURL pour la positionner entre les accolades {}
Tapez ensuite "http://www.ac-orleans-tours.fr","_blank" (les liens ouvriront de nouvelles fenêtres).
Le texte de programmation sera donc :
on (press) {
getURL("http://www.ac-orleans-tours.fr", "_self");}
Testez l’animation (désactivez l’option boucle dans le lecteur).
Recommencez pour les autres académies : un copier coller pour la programmation fera gagner du temps !
11 -2 scripts, séquences.
Le but est par clic sur un bouton de déclencher une action telle que aller à la page suivante, précédente,
déclencher une autre séquence d’animation …
Visualisez le fichier « chainage-scene.swf ».
Création de la scène 1
- renommez le calque 1 sapins ; dessinez une piste, puis un sapin que vous remplirez (options ferme les
grands espaces) ; faites un doble clic pour sélectionner l’ensemble contour-intérieur, redimensionnez, puis
faites un copier ; faites des coller successifs (le cadre de dimensionnement apparaît à chaque fois). Pour
avoir les autres sapins.
- activez l’image 1 et avec la touche Alt, créez des images fixes jusqu’en 45.
- créez un nouveau calque que vous nommez boule.
- en 1 créez une boule bleue que vous transformerez en symbole clip ; placez-là en haut de la piste ; créez
une image clé en 45 et placez la boule en bas ; faites une interpolation de mouvement.
En 45, désactivez le symbole boule, et comme dans l’exercice précédent, arrêtez la scène.
- testez la scène : la boule sort de la piste : créez une trajectoire courbe (pensez à l’option lisse pour le
crayon) en utilisant un guide de mouvement. Testez.
Création de la scène 2
- faites Insertion / séquence ; sous le scénario séquence 2 (ou scène 2) apparaît
- modifiez la couleur de l’arrière plan (ce qui n’est pas possible si on n’a qu’une scène !).
- renommez le calque 1 boule_2, puis créez une boule en bas à droite quevous convertirez en symbole
clip.
Formateur : Jean Brossard
Flash Mx
Page 14 sur 16
- créez une image clé en 35, agrandissez la boule et centrez-la ; faites une interpolation de mouvement.
Liaisons entre les scènes : boutons de navigation
- Revenez à la scène 1 avec Affichage / atteindre / Prenière (raccourci Origine É).
- créez un nouveau calque que vous nommez bouton ; insérez une image clé vide avec F7 en 40 ; ouvrez
la bibliothèque commune des Boutons et choisissez dans la catégorie Playback celui nommé gel Right et
glissez le sur l’image ;
- Activez le bouton ; agrandir la fenêtre des Actions : avec les commandes de Actions puis Contrôle de
l’animation, créez les instructions suivantes : on (press) {gotoAndPlay("Séquence 2", "image1");}
- Créez unre interpolation de mouvement (ou des images fixes) jusqu’en 46.
- Testez.
Passez à la scène 2 : Affichage / atteindre / suivante ou séquence 2 ou raccourci .
- Créez un nouveau calque nommé bouton.
- En image 30, vous allez créer deux boutons personnalisés constitués d’un rectangle coloré, d’un texte
(recommencer puis terminer), texte positionné sur le rectangle, puis vous groupez les objets (avec
modification). Ensuite, vous convertissez chaque objet en symbole bouton.
- pour le bouton « recommencer », programmez-le pour qu’il relance la séquence 1 en image 1 ; pour le
bouton « terminer », créez une image de fin en 40, et faites une programmation vers cette image.
Remarque : ne pas oublier de « stopper » vos animations en 35 et 40 …
12 - Des scènes toute faites …
II s'agit de transformer une animation Gif animé GIF en un symbole Clip
Ouvrir la bibliothèque des symboles par le Raccourci : Ctrl + L Cliquer sur le signe + pour Créer un
nouveau symbole
1. Saisir pour Nom : ClipBonjour
2. Comportement : Clip
3. Cliquer sur Fichier / Importer ou effectuer le Raccourci : Ctrl + R et importer à
partir du répertoire de travail l'image coucou_1.gif
Les images Bitmap de 3 à 10 représentent les images qui composent le GIF animé
importé Coucou_1.gif.
Attention à l’endroit dans lequel vous travaillez ! Ici le calque est celui du clip … et
non pas celui d’une animation !
Pour revenir à l’animation, cliquez sur Séquence 1, puis faites un
glisser déplacer de Copie de coucou_1.gif (type clip) ; cela vous crée
une image clé.
Testez : avec une image clé, vous avez une animation de plusieurs
images … mais elle est lue en boucle. Pour corriger ce problème,
Formateur : Jean Brossard
Flash Mx
Page 15 sur 16
revenez au calque d’animation du clip, en faisant un double clic, puis sur la dernière image (16), mettez
un script stop().
Revenez à l’animation, testez.
Remarque : si vous importez le fichier gif animé directement dans le calque d’animation, vous créez
directement 16 images …
13 - Publication
Les fichiers propriétaires de Flash ont l’extension .fla.
Pour les utiliser, vous devez les publier, ce qui crée automatiquement 2 fichiers, l’un au format swf l’autre
au format html, pouvant être utilisés dans des sites web par exemple (Frontpage ou Dreamweaver
incorporant parfaitement ces fichiers).
Il ya d’autres formats de conversion possibles, en utilisant la
commande fichier / exporter l’animation :
Gif animé (intérêt vu au paragraphe 12).
AVI Windows (.avi) pour mettre dans des vidéos, dvd …
Quick Time (.mov) animation vidéo
Attention : les autres formats (gif, emf, wmf, jpg …) sont des
fichiers images « simples » donc Flash crée autant de fichiers que
d’images dans l’animation …
La commande « exporter l’image » exporte dans les mêmes conditions que ci-dessus mais seulement
l’image active !
14 – Des sites pour apprendre Flash …
http://www.klondik.net/
http://www.portail-flash.com/annuaire/index.php
http://fr.gograph.com/fusion/FR/extra/tutoriel/FlashV5/flashV5.cfm?cfid=7127166&cftoken=60476673
http://www.flash-france.com/sections.php
Sans oublier bien sur que Flash intègre dans le menu Aide, des leçons, des
didacticiels et une utilisation commentée.
Remarque : une nouvelle fonctionnalité de Open Office Impress : l’export au
format swf ! mais les animations sont perdues …
Formateur : Jean Brossard
Flash Mx
Page 16 sur 16