objectif général : Savoir créer des animations avec Flash objectifs opérationnels : Comprendre l’interface Savoir produire des dessins vectoriels Etre capable de créer des animations Savoir intégrer du son

1. Initiation à Flash
Abdoulaye DIENG

2. Objectif général
Savoir créer des animations avec Flash
2

3. Objectifs opérationnels
• Comprendre l’interface
• Savoir produire des dessins vectoriels
• Etre capable de créer des animations
• Savoir intégrer du son
3

4. Sommaire
1. Présentation de Flash
2. Espace de travail
3. Utiliser des éléments graphiques
4. Ajouter du texte
5. Manipuler les symboles
6. Créer une animation
7. Ajouter du son
4

5. Présentation
• Flash est une technologie qui permet de réaliser des
animations, des bannières publicitaires, des sites Web, des
vidéos, des jeux, des applications, etc.
• Adobe Flash est un EDI permettant, entre autres, :
– l’édition de fichiers source au format .fla
– la génération de fichiers d’export au format .swf
– la lecture des .swf avec le plugin Flash Player
5

6. Espace de travail
principaux éléments
6
Scénario
Scène
Propriétés
Panneaux
Boîte à outils

7. Espace de travail
fenêtre Scène
• La scène contient une représentation spatiale des éléments
visuels de l’animation à un instant donné
• Configurer la scène avec (Modification>document )
• Pour bien placer les éléments afficher :
– la grille ( Affichage>grille)
– les règles (Affichage>règles)
• Zoomer pour une bonne visibilité de éléments
7

8. Espace de travail
fenêtre Scénario
• Le scénario contient une représentation temporelle de
l’animation
• Un scénario est découpé temporellement en Images
• Chaque Image est constituée d’objets (visuel ou non) répartis sur
des calques
• Les calques permettent de gérer indépendamment les différents
objets placés sur la scène
• Une tête de lecture parcourt les différentes Images pour
effectuer l’animation
• Paramétrer la cadence (ips) des images via les propriétés du
documents. (Ex : tv : 25 ips, ciné : 24 ips)
8

9. Espace de travail
palette Propriétés
• La palette «Propriétés» sert à paramétrer la sélection.
• Elle s’adapte à l’objet sélectionné.
9

10. Espace de travail
panneaux
• Les panneaux permettent d’accéder rapidement aux outils et
fonctions favoris.
• Par défaut, ils sont ancrés sur le côté droit de l’écran
• Ils sont déplaçables (drag&drop sur la barre supérieure)
• Tous les panneaux sont accessibles par le menu "Fenêtre".
• Quelques panneaux :
– « Couleur » et « Nuanciers » : sélectionner, mémoriser
une couleur, influer sur la saturation ou la luminosité des
couleurs.
– « Aligner » : placer des éléments de l'animation par
rapport à la scène ou à d'autres éléments.
– « Bibliothèque » : éléments visuels, sonores, vidéo, …
10

11. Espace de travail
boîte à outils
11
Sélection/Transfo
Dessin
Couleurs
Affichage
Options
tp1

12. Utiliser des éléments graphiques
types de couleurs
• Tout élément graphique a un contour
et un remplissage
• Il existe plusieurs types de couleurs :
– Aucune : sans remplissage ou sans trait.
– Couleur uni : Couleurs standard
– Dégradé linéaire : changement progressif de
couleurs d'un côté à l'autre
– Dégradé radial : de l'intérieur vers
l'extérieur
– Bitmap : image bitmap importées (cas d’une
texture)
• La valeur alpha permet de définir le degré de
transparence d'une couleur. 12

13. Utiliser des éléments graphiques
boîte à outils
13
Sélection (V) Sous sélection (A)
Transfo libre (Q) Lasso (L)
Texte (T)
Rectangle (R)
Pinceau (B)
Pot de peinture (K)
Gomme (E)
Zoom (M,Z)
Couleur de trait
Couleur de remplissage
Plume (P)
Ligne (N)
Crayon (Y)
Encrier (S)
Pipette (I)
Main (H)
Noir & Blanc, permuter, pas de couleur

14. Utiliser des éléments graphiques
outil Sélection
• Icône :
• Raccourci : V
• Rôle : sélectionner, déplacer et déformer
• Simple clic : sélectionner une portion du contour ou le
remplissage
• Double-clics sur le remplissage : sélectionner le contour et le
remplissage
• Encadrer avec un cliquer-glisser : sélectionner
• Cliquer-glisser sur la sélection : déplacer
• Cliquer-glisser sur un contour : déformer
14

15. Utiliser des éléments graphiques
outil Sous-sélection
• Icône :
• Raccourci : A
• Rôle : sélectionner les points
d’un objet vectoriel
• Simple clic sur le contour : apparition des points d’ancrages
• Encadrer l’objet : apparition des points d’ancrages
• Déformer l’objet par cliquer-glisser sur un point d’ancrage ou
sur point directeur
• Déplacer l’objet par cliquer-glisser du contour
15
Point directeur

16. Utiliser des éléments graphiques
outil Lasso
• Icône :
• Raccourci : L
• Rôle : sélectionner à main levée
• Options :
– Baguette magique : limiter la sélection ou le remplissage aux
zones adjacentes à celle qui est sélectionnée. (touche Ctrl)
– Lasso polygonal : définir la sélection avec des points
d’ancrages. Cliquer pour créer un point et double cliquer
pour fermer la sélection.
• Utiliser le mode polygone dans le mode « main levée » en
maintenant ALT appuyée.
16

17. Utiliser des éléments graphiques
outil Transformation libre
• Icône :
• Raccourci : Q
• Rôle : transformer une forme
• Sélectionner l’objet puis choisir l’une des 4 options :
17
Pivoter et incliner
Déformer
Redimensionner
Enveloppe

18. Utiliser des éléments graphiques
outil Transformation de dégradé
• Icône :
• Raccourci : Q suivie de F
• Transformer un dégradé linéaire avec 3 poignées :
– petit cercle au centre : déplacer
– petit carré sur le centre d’un côté : redimensionner
– petit rond dans le coin du même côté : faire pivoter
• Transformer un dégradé radial avec 4 poignées :
– les 3 du linéaire
– petit rond avec flèche : redimensionner d’une manière
circulaire
18

19. Utiliser des éléments graphiques
outil Ligne
• Icône :
• Raccourci : N
• Rôle : Tracer des traits droits
• Cliquer pour définir le 1er point puis relâcher pour définir le 2nd
• Appuyer Shift en même temps pour orienter horizontalement,
verticalement ou diagonalement.
19

20. Utiliser des éléments graphiques
outil Crayon
• Icône :
• Raccourci : Y
• Tracer des lignes et des formes comme avec un crayon normal.
• Pour dessiner, cliquer et faire glisser
• Maintenir Maj enfoncée pour forcer le tracé de lignes verticales
ou horizontales.
• Options :
– Redresser : dessiner des lignes droites et convertir des
formes approximatives en formes géométriques précises.
– Lisser : dessiner des lignes incurvées lisses.
– Encre : dessiner des lignes à main levée sans apporter
aucune modification
20

21. Utiliser des éléments graphiques
outil Plume
• Icône :
• Raccourci : P
• Rôle :
– tracer un contour point à point.
– Rajouter ou supprimer des points d'ancrage.
• Cliquer pour créer les points des segments de droite
• Cliquer-glisser pour créer les points des segments de courbe
• En mode ajout de points, un + apparaît à proximité du curseur
et en mode suppression de points, c'est un -.
• En mode ajout de points, ALT permet de passer en mode
suppression et vice-versa
21
tp2

22. Utiliser des éléments graphiques
outil Pinceau
• Icône :
• Raccourci : B
• Rôle : tracer une surface pleine.
• Choisir le type (taille & forme) de pinceau
• Choisir un mode :
– « normalement » : toutes les formes se trouvant sur la
même calque
– « les zones remplies » : que les surfaces pleines
– « derrière » : n’affecte aucune forme
– « la sélection » : que les surfaces pleines sélectionnées
– « à l’intérieur » : que le remplissage qui a subi le 1er coup de
pinceau. 22

23. Utiliser des éléments graphiques
outil Rectangle
• Icône :
• Raccourci : R
• Rôle : dessiner des rectangles dont les angles peuvent être
droits ou arrondis
• Indiquer les rayons des angles : 0 (droit) et ≠0 (arrondi)
• Cliquer-glisser : dessiner une figure
• Appuyer sur les flèches Haut et Bas tout en dessinant pour
ajuster le rayon des angles arrondis.
• Maintenir la touche MAJ enfoncée : dessiner un carré
• Possibilité de modifier les angles d’une forme primitive
• Dans tous les cas ( ou ), l'inspecteur des propriétés
conserve les valeurs du dernier rectangle.
23

24. Utiliser des éléments graphiques
outil Ovale
• Icône :
• Raccourci : O
• Rôle : dessiner des ellipses et des cercles
• Indiquer le rayon intérieur et les angles de début et de fin
• Cliquer-glisser : dessiner une figure
• MAJ enfoncée : dessiner un cercle
• ALT enfoncée : la forme évolue à partir de son centre
• Possibilité de modifier les paramètres d’une forme primitive
• Dans tous les cas ( ou ), l'inspecteur des propriétés
conserve les valeurs du dernier objet.
24

25. Utiliser des éléments graphiques
outil Polygone
• Icône :
• Rôle : dessiner des polygones ou des étoiles
• Cliquer sur Options du panneau Propriétés pour choisir :
– le style : Polygone ou Etoile.
– le nombre de côtés : entre 3 et 32.
– la taille des branches d’une étoile : entre 0 et 1.
• Cliquer-glisser : dessiner une figure
25

26. Utiliser des éléments graphiques
outil Encrier
• Icône :
• Raccourci : S
• Rôle : modifier (couleur, épaisseur et style) d’un trait
• Sélectionner l'outil Encrier.
• Sélectionner une couleur de trait.
• Sélectionner un style et une épaisseur de trait dans l'inspecteur
des propriétés.
• Cliquer sur un objet sur la scène pour appliquer les paramètres
courants à son contour.
26

27. Utiliser des éléments graphiques
outil Pot de peinture
• Icône :
• Raccourci : K
• Rôle : remplir une zone fermée avec une nouvelle couleur ou un
nouveau dégradé
• Sélectionner l'outil Pot de peinture.
• Sélectionner une couleur de remplissage et un style
• Cliquer sur la forme ou la zone fermée à remplir.
27

28. Utiliser des éléments graphiques
outil Pipette
• Icône :
• Raccourci : I
• Rôle : Prélever les informations de couleurs et de styles dans la
scène, afin de les réutiliser pour dessiner ou les appliquer à
d'autres parties du dessin.
• Sélectionner l'outil Pipette
• Cliquer sur l’objet (remplissage ou contour)
28

29. Utiliser des éléments graphiques
outil Gomme
• Icône :
• Raccourci : E
• Rôle : effacer les traits et les remplissages.
• Choisir la forme de la gomme
• Cliquer ou cliquer-glisser pour effacer
• Option Robinet : supprimer un tracé complet ou une surface
entière en un seul clic
• Double-cliquer sur la Gomme : nettoyer toute la scène
29

30. Utiliser des éléments graphiques
outil Gomme (mode d’effacement)
• «Efface normalement» efface tout sur son passage.
• «Efface les zones remplies» efface uniquement les remplissages
• «Efface les lignes» efface uniquement les traits.
• «Efface les zones remplies sélectionnées» efface uniquement
les remplissages sélectionnés.
Sélectionner d’abord les remplissages à effacer
• «Efface à l’intérieur» efface uniquement le remplissage qui a
subi le premier coup de gomme.
30

31. Utiliser des éléments graphiques
outil Zoom
• Icône :
• Raccourci : M ou Z
• Rôle : agrandir ou réduire une zone
• Tracer un rectangle pour zoomer une zone spécifique.
• Options : agrandissement et réduction
• ALT permet d’alterner l’agrandissement et la réduction
31

32. Utiliser des éléments graphiques
outil Main
• Icône :
• Raccourci : H
• Rôle : déplacer la scène
• Utile pour grand dessin, petit écran ou zoom fort.
32
tp3

33. Ajouter du texte
types de texte
• Ajouter du texte :
1) Sélectionner l’outil «Texte» (raccourci clavier : T)
2) Cliquer sur la scène à l’emplacement souhaité
• Types de champ de texte :
– Statique (simple texte pour l’écriture d’un titre, d’un
paragraphe, …).
– Dynamique (dont le contenu change en fonction d’une
variable).
– De saisie (pour les champs d’un formulaire)
33

34. Ajouter du texte
configuration
La configuration d’un champ texte passe par le panneau
«Propriétés» :
34
tp4

35. Manipuler les symboles
présentation
• Les différents composants d'une animation (décors, figures,
textes, …) doivent être des symboles afin qu'ils puissent être
animés, interactifs et/ou réutilisés.
• L'utilisation de symboles dans un document
– réduit la taille d’un fichier
– accélère la lecture d’un fichier.
• Tout symbole (« acteur ») créé devient automatiquement un
élément de la bibliothèque (« loge ») du document courant
• Un symbole est une entité qui possède des attributs (nom, type,
point d'alignement, … ).
• Une occurrence est une copie d'un symbole sur la scène.
Ex : L'image d'un acteur sur un écran
• Une occurrence a ses propres valeurs pour chaque attribut
35

36. Manipuler les symboles
types de symbole
• Graphique
– Partie statique de la scène comme un élément d'un décor ou
se déplaçant sans mouvement interne.
• Bouton
– Élément qui réagit aux actions sur la souris
– Muni d’un scénario à 4 images : Haut (repos), Dessus (survol),
Abaissé (appui) et Cliqué (zone de réactivité)
• Clip
– Muni d’un scénario qui offre des fonctionnalités identiques à
celles du scénario principal
– petite animation dans une animation principale, pouvant
contenir des contrôles interactifs, des sons, d’autres clips, etc.
36

37. Manipuler les symboles
création et édition d’un symbole
• Créer un nouveau symbole vide avec l’une de ces opérations :
– Sélectionner le menu Insertion > Nouveau symbole
– Cliquer sur Nouveau symbole du panneau Bibliothèque
• Convertir une sélection en symbole avec l'une de ces opérations:
– Cliquer-droit puis sélectionner Convertir en symbole
– Menu Modification > Convertir en symbole (ou F8)
– Glisser la sélection dans le panneau Bibliothèque
• Editer le symbole en double-cliquant soit sur le symbole dans la
bibliothèque ou sur l’instance qui se trouve sur la scène
37

38. Manipuler les symboles
création et édition d’une occurrence
• Création d’une occurrence de symbole
– Sélectionner un calque dans le scénario
– Sélectionner Fenêtre > Bibliothèque.
– Glisser le symbole de la bibliothèque jusqu’à la scène.
• Éditer une occurrence avec le panneau Propriétés
• Nommer une occurrence de clip ou de bouton pour permettre
la modification de ses propriétés avec ActionScript.
• Possibilité de transformer une occurrence sans affecter le
symbole. 38
Tp5&6

39. Créer une animation
Introduction
• Une animation est un effet d'optique créé par l'enchainement
de nombreuses images fixes.
• Un minimum de 16 images par seconde est requis pour créer
un mouvement continu.
• Deux méthodes de création d’une animation dans Flash :
– animation image par image
chaque image de l’animation est créée
– animation interpolée (forme ou mouvement)
seule quelques images sont créées
• Une animation se conçoit essentiellement dans le scénario à
l’aide des Images, des calques, des pelures d’oignon, …
39

40. Créer une animation
Images du scénario
• Image :
– Cellule du scénario
– Unité de temps
• Une Image peut avoir 3 états :
– Image-clé : définit un changement dans une animation
– Image-clé vide : ne contient aucun élément à afficher
– Image fixe : prolonge la durée d’affichage de l’image-clé
précédente
40

41. Créer une animation
opérations sur les Images du scénario
• Insérer une Image-clé
1) Sélectionner une Image de la Timeline
2) Taper F6 ou cliquer droit puis "Insérer une image clé"
• Ajouter une Image fixe
1) Cliquer sur une Image du calque concerne.
2) Taper F5 ou cliquer droit puis "Ajouter image"
• Ajouter des Images fixes
Maintenir Alt + Ctrl en déplaçant une Image-clé vers la droite
• Déplacer une Image clé
Cliquer glisser l’Image clé vers la gauche ou la droite.
• Déplacer une Image fixe
Maintenir Ctrl en déplaçant le rectangle.
• Sélectionner +sieurs Images en maintenant Shift ou Ctrl. 41
Tp7

42. Créer une animation
calques
• Les calques sont les supports des éléments (graphiques ou
non) d’une animation
• Les calques sont comme des transparents empilés
• Le calque situé le plus en bas dans la fenêtre du scénario est
situé le plus en arrière-plan.
• En général, un élément déposé en dernier sera situé en avant-plan
par rapport aux autres éléments du même calque.
• Sur un même calque l’ordre de l’arrière vers l’avant est Forme
(graphisme construit à partir des outils de dessin), Groupe
(ensemble de Formes) puis Symbole.
42

43. Créer une animation
opérations sur les calques
43
Insérer
Ajouter un guide
Masquer/Afficher
tous les calques
Regrouper
Supprimer
Afficher tous les
calques comme
des contours
(Dé)verrouiller
tous les calques
• Renommer : double-cliquer sur le nom
• Déplacer : cliquer-glisser sur le calque

44. Créer une animation
animation image par image
• Technique utilisée traditionnellement (ex : Disney).
• Le concepteur crée toutes les images de l’animation
• Adaptée aux animations complexes dans lesquelles le contenu
change d'une image à l'autre au lieu d'être simplement
déplacé sur la scène
• Inconvénients : poids, temps et difficulté 44

45. Créer une animation
pelures d’oignon
Rôle : afficher +sieurs images adjacentes sur la scène pour ajuster
ou modifier une image
45
Afficher les
images
adjacentes sans
possibilité de
les modifier
Afficher les
contours des
images
adjacentes
Afficher les
images
adjacentes avec
possibilité de
les modifier
NB : Pour éviter l'affichage d'une multitude
d'images rendant la visualisation difficile,
verrouiller ou masquer les calques qui ne
doivent pas apparaître dans l'effet de
pelure d'oignon

46. Créer une animation
déplacer une animation sur la scène
1) Verrouiller ou masquer tout calque dont le contenu n’est pas
concerné par l’opération.
2) Cliquer sur le bouton « Modifier plusieurs images » des
pelures d’oignons
3) Faire glisser les repères de pelures d'oignon pour qu'ils
entourent toutes les Images concernées
4) Sélectionner menu Modifier > Sélectionner tout.
5) Faire glisser la totalité de l'animation vers le nouvel
emplacement sur la scène.
46
Tp8

47. Créer une animation
interpolation
• Une interpolation est un effet généré par le logiciel Flash
• Intérêt : améliorer sensiblement le poids du fichier.
• Principe :
– le concepteur crée deux Images-clés (début et fin)
– Flash crée les Images intermédiaires au moment de la
lecture du fichier.
• Il existe deux types d’interpolation :
– Interpolation de formes
– Interpolation de mouvement
47

48. Créer une animation
interpolation de formes
• Transformation d’une Forme en une autre Forme (morphing)
• Méthode :
1) Insérer éventuellement une Image-clé vide
2) Dessiner une Forme (simple ou complexe) sur la scène
3) Insérer une nouvelle Image-clé vide
4) Dessiner une autre Forme
5) Se positionner sur une Image intermédiaire du scénario.
6) Cliquer droit et choisir l’interpolation de formes.
• Un groupe, une occurrence ou un bitmap doit au préalable être
séparé (Modification > Séparer) pour devenir une Forme.
• Un texte doit être séparé deux fois. 48
Tp9&10

49. Créer une animation
interpolation de forme avec repères
• Obj : guider et orienter le morphing de Formes complexes
• Méthode :
1) Créer l’interpolation de forme classique
2) Se placer sur l’Image-clé de début
3) Modification > Forme > Ajouter des repères de formes
4) Placer le(s) repère(s) de forme.
5) Se positionner sur l’Image-clé de fin et placer les repères
• Placer les repères dans le sens horaire en commençant en haut
à gauche
• Faciliter le placement des repères avec les contours des pelures
d’oignon.
49
Tp11

50. Créer une animation
interpolation de mouvement
• Interpolation de mouvement = déplacement d’un objet
• Méthode :
1) Insérer éventuellement une Image clé vide dans le scénario
2) Dessiner une forme ou écrire un texte statique sur la scène
3) Convertir la forme ou le texte en symbole graphique
4) Sur le même calque, insérer une nouvelle Image-clé vide.
5) Se positionner sur cette nouvelle Image-clé
6) Insérer, à une autre position de la scène, une occurrence
de ce même symbole
7) Se placer sur une Image intermédiaire dans le scénario.
8) Cliquer droit et choisir l’interpolation de mouvement 50
Tp12&13

51. Créer une animation
interpolation de mouvement guidé
• Obj : modifier la trajectoire (rectiligne par défaut) en une
trajectoire quelconque
• Méthode :
1) Réaliser une interpolation de mouvement classique.
2) Sélectionner le calque contenant cet interpolation puis
cliquer sur « Ajouter un guide de mouvement »
ou cliquer-droit sur le calque contenant l’interpolation et
choisir « Ajouter un guide de mouvement »
3) Dessiner une trajectoire quelconque sur le nouveau calque
4) Positionner respectivement les centres des symboles de la
1ère Image clé et de la 2ème Image clé sur les points de
départ et d’arrivée de la trajectoire
51
Tp14&15

52. Ajouter du son
formats audio supportés
• Formats supportés par Flash
– Adobe Sound
– AAC (Advanced Audio Coding)
– AIFF (Audio Interchange File Format)
– AVI (Audio Video Interleave)
– MP3 (Moving Pictures Expert Group Level-Layer-3)
– Sun AU
– WAVE (Waveform Audio Format)
• Format le plus conseillé :
MP3 : meilleur rapport qualité/poids
• Formats alternatifs : AAC et Adobe Sound
52

53. Ajouter du son
méthode d’insertion
1. Importer le son dans la Bibliothèque
Fichier> Importer> Importer dans la Bibliothèque
Sélectionner le fichier sonore à importer
2. Créer un nouveau calque
3. Insérer une Image clé
4. Glisser le fichier de la bibliothèque jusqu’à la scène.
53

54. Ajouter du son
synchronisation avec l’animation
Option de synchronisation dans le menu déroulant Sync du
panneau Propriété :
• Evénement : son joué quand la tête de lecture atteint l'image-clé
qui lui est associée et la lecture se poursuit intégralement
et indépendamment de l’animation.
• Démarrage : identique à l'option Evénement, sauf que le son
est joué une seule fois
• Arrêter : interrompt le son.
• En continue : son diffusé de manière continue pendant la
lecture et le chargement de l'animation. Le son s'arrête si
l’animation s'interrompt.
NB : pour arrêter un son, créer une Image-clé vide sur le même
calque, et y insère le même son mais avec la synchro Arrêter 54
Tp16

55. Ajouter du son
lier un son à un bouton
• Méthode
1) Double-cliquer le bouton pour être dans son scénario
2) Créer un nouveau calque dans ce scénario
3) Dans ce calque, insérer une Image-clé vide correspondant
à l'état du bouton pour lequel le son sera défini
4) Dans l'inspecteur des propriétés :
• choisir un fichier audio dans le menu déroulant Son
• choisir l’option de synchro « Evénement »
• Possibilité d’associer un son différent à chacun des états du
bouton ou d’utiliser le même son et appliquer un effet audio
distinct pour chaque état du bouton.
55
Tp17