flash partie4
-
Upload
mourad-haddad -
Category
Documents
-
view
215 -
download
0
description
Transcript of flash partie4
Cours développement
multimédia
Assuré par :
Mme MAHA Charfeddine Hamza
2009/2010
REPUBLIQUE TUNISIENNE
MINISTERE DE L’ENSEIGNEMENT SUPERIEUR ET DE LA RECHERCHE SCIENTIFIQUE
UNIVERSITE DE SFAX
ECOLE NATIONALE D’INGENIEURS
DE SFAX
Plan PARTIE I
• Présentation de l’application flash
• Interpolation
• Notions de comportement
• Actions script
3Maha Charfeddine Hamza
• Présentation de l’application flash
• Interpolation
• Notions de comportement
• Actions script
Maha Charfeddine Hamza 4
Présentation de l’application flashIntroduction
• Flash est un logiciel qui sert à créer des animationsadaptées aux caractéristiques d'Internet.
• Ces animations sont très petites en taille rapides àtransmettre sur le Web.
• Flash est un logiciel de design vectoriel, qui permetl'incorporation des images, de sons,...
• Le logiciel Flash est un outil puissant permettant lacréation facile des interfaces de haut niveau(interaction et esthétique).
5Maha Charfeddine Hamza
Présentation de l’application flash
Introduction
• Flash interpole des mouvements dans le temps :
– il crée des hyperliens entre les éléments de lascène
– son langage Action Script, permet de concevoir deseffets d'interactivité spectaculaires etprofessionnels dans un scénario linéaire.
• Plusieurs designers d'interface préconisent maintenantl'utilisation de Flash dans leurs sites Web, pour leursprésentations, la publicité, etc.
6Maha Charfeddine Hamza
Présentation de l’application flash
InterfaceLa scène (stage) : désigne le plan de travail.
La zone grise n'apparaît pas dans le film final, mais elle permet de travailleret de disposer les objets (clips, graphiques ou boutons) pour uneanimation.
8Maha Charfeddine Hamza
Présentation de l’application flash
Interface : Barre d’outils
9Maha Charfeddine Hamza
Barre d’outils (drawing toolbar):
Les différents icônes de la barre
d'outils sont similaires aux
logiciels de dessins Bitmap ou
vectoriels, comme Photoshop,
Paint ou Illustrator.
Présentation de l’application flash
Interface : Barre d’outils
Chaque outil possède différentes propriétés, par exemple :
– Une couleur de remplissage ou/et un contour :
• Vous pouvez fixer la couleur, la taille et le style de
la ligne.
• Vous pouvez choisir directement vos couleurs, des
solides ou des dégradés ou créer vos propres
couleurs.
– Vous ferez des formes droites et proportionnelles
lorsque vous appuierez sur Shift en les créant, en les
transformant ou en les déplaçant.
10Maha Charfeddine Hamza
Présentation de l’application flashInterface : Barre d’outils
Comprendre les fonctions dessin et peinture de Flash :
Lorsque vous tracez une ligne qui croise une autre ligne ou une forme
peinte, la ligne que vous dessinez agit comme un couteau et divise la
ligne ou la forme qu'elle croise en différents segments.
La ligne tracée est elle-même divisée en segments. Vous pouvez
sélectionner, déplacer et modifier individuellement la forme de chaque
segment.
11Maha Charfeddine Hamza
Présentation de l’application flash
Interface : Barre d’outils
Dessiner avec l'outil Crayon
Vous pouvez dessiner des lignes et des formes avec l'outil Crayon.
Après avoir tracé les lignes, Flash les redresse ou les lisse.
Choisissez un des modes de dessin : redresser, lisser, encre
Tracer des lignes droites, des ovales et des rectangles
Vous pouvez utiliser les outils Ligne, Ovale et Rectangle pour tracerfacilement des formes.
Les outils Ovale et Rectangle vous permettent de tracer et deremplir la forme lors de son dessin.
L'outil Rectangle vous permet de dessiner des rectangles avec descoins droits ou arrondis.
Pour l'outil Rectangle, indiquez des coins droits en cliquant surle modificateur Rayon de rectangle arrondi et entrez une valeurpour définir son rayon. La valeur zéro crée des coins droits.
12Maha Charfeddine Hamza
Présentation de l’application flashInterface : Barre d’outils
Peindre avec l'outil Pinceau
• L'outil Pinceau trace des traits qui évoquent ceux d'un pinceau
• Sélectionnez l'outil Pinceau.
• Choisissez un mode de peinture :
• Choisissez une taille de pinceau, une forme de pinceau et une
couleur de peinture dans les modificateurs de l'outil Pinceau.
Image originale, Peint normalement, Peint derrière, Remplissage, Peint la sélection, et Peint à l'intérieur
13Maha Charfeddine Hamza
Présentation de l’application flash
Interface : Barre d’outils
Effacer
L'outil Gomme efface les lignes et la peinture de remplissage.
• Pour effacer rapidement tout ce qui se trouve sur la Scène :
Double-cliquez sur l'outil Gomme.
• Pour supprimer en totalité des segments de ligne ou des remplissages :
Sélectionnez l'outil Gomme puis cliquez sur le modificateur Robinet.
Cliquez sur la ligne ou la zone remplie que vous souhaitez effacer.
• Pour effacer par glissement :
Sélectionnez l'outil Gomme.
Choisissez un mode d'effacement
Choisissez une forme de gomme et vérifiez que le modificateur Robinet
n'est pas sélectionné.
14Maha Charfeddine Hamza
Présentation de l’application flashInterface : Barre d’outils
Utiliser l'outil Remplissage
L'outil Remplissage remplit de couleur les zones fermées. Il remplit les
zones vides et modifie la couleur de la peinture existante.
Vous pouvez également utiliser l'outil Remplissage pour ajuster la
dimension, la direction et le centre des remplissages dégradés et
bitmaps.
15Maha Charfeddine Hamza
Présentation de l’application flashInterface : Barre d’outils
Utiliser l'outil Remplissage pour remplir une zone :
Sélectionnez l'outil Remplissage.
Choisissez la couleur de remplissage.
Choisissez une option de fermeture pour que Flash ferme
automatiquement les espaces.
Cliquez sur la zone à remplir.
16Maha Charfeddine Hamza
Présentation de l’application flashInterface : Barre d’outils
Utiliser l'outil Remplissage pour ajuster un remplissage dégradé :
Choisissez l'outil Remplissage.
Cliquez sur le modificateur Transformer le remplissage.
Cliquez sur une zone remplie avec un remplissage dégradé.
Modifiez la forme du dégradé
17Maha Charfeddine Hamza
Présentation de l’application flashInterface : Barre d’outils
Utiliser l'outil Encrier
Sélectionnez l'outil Encrier.
Choisissez la couleur de ligne, le style de ligne et l'épaisseur de ligne
dans les modificateurs de l'outil.
Cliquez sur une ligne ou une forme de la Scène.
Utiliser l'outil Pipette
Sélectionnez l'outil Pipette et cliquez sur une ligne ou une forme.
Cliquez sur une autre ligne ou forme.
18Maha Charfeddine Hamza
Présentation de l’application flashInterface : Barre d’outils
Pour modifier la forme d'une ligne ou d'un contour de forme à
l'aide de l'outil Flèche :
Sélectionnez l'outil Flèche.
Faites glisser la souris à partir de n'importe quel point du segment pour
en modifier la forme.
19Maha Charfeddine Hamza
Remarque : Pour sélectionner une forme remplie et ses contours
hachurés, sélectionnez l'outil Flèche et double-cliquez sur le
remplissage.
Présentation de l’application flashInterface : Barre d’outils
Pour sélectionner des objets en dessinant une zone de sélection à
main levée :
Sélectionnez l'outil Lasso et faites-le glisser autour de la zone.
Terminez la boucle approximativement à l'endroit où vous avez
commencé, ou laissez Flash fermer automatiquement la boucle par
une ligne droite.
Pour sélectionner des objets en dessinant une zone de sélection
polygonale :
Sélectionnez l'outil Lasso et sélectionnez le modificateur Lasso
polygonal.
Cliquez pour définir le point de départ.
Positionnez le pointeur à l'endroit où vous voulez arrêter la première
ligne, et cliquez. Continuez de définir les points d'arrêt pour les
segments de ligne supplémentaires.
Pour fermer la zone de sélection, double-cliquez.
20Maha Charfeddine Hamza
Présentation de l’application flash
InterfaceVous avez accès à toutes les fenêtres par le menu Window (fenêtre)
21Maha Charfeddine Hamza
Présentation de l’application flashInterface
Panneau de contrôle (Controller)
Gère le déroulement du film, avec les fonctionnalités habituelles d'un
visionnement d'un film (Play, revient au début ou de un, avance de un
ou à la fin).
Il ne permet pas de tester un film avec plusieurs scènes ou divers
éléments actifs complexes, c'est pourquoi on utilise plus souvent la
commande Ctrl + Enter pour voir l'interaction dans le film.
22Maha Charfeddine Hamza
Présentation de l’application flashInterface
Propriétés (Properties) : Vous pourrez ajuster les propriétés de base
de votre film, vous pourrez ajuster la cadence de l'animation en fps
(frame per second), sa dimension et la couleur de l'arrière-plan
(background).
23Maha Charfeddine Hamza
Présentation de l’application flashInterface
Actions [-Object] : Sert à définir des comportements ou des actions
sur des objets positionnés sur la scène ou à une image clé précise
dans le scénario.
24Maha Charfeddine Hamza
Présentation de l’application flashInterface
Scénario (Timeline) : la barre avec plusieurs petites cases
numérotées, représente le scénario dans le temps de l’animation.
Ces cases sont des marques dans le temps des différentes
interventions qui sont effectuées.
L'accès au menu contextuel (clic du bouton droit de la souris sur un
objet, une image clé) est très utile pour ajuster les propriétés de
mouvement (Tweening), de transformation, d'inscription de, pour savoir
où sont joués les sons (Sounds).
Le scénario affiche les images à l'aide d'un pointeur courant, c'est-à-
dire qu'il détermine quelle image vous affichez. Les images sont
numérotées dans l'ordre croissant de l'animation.
25Maha Charfeddine Hamza
Présentation de l’application flashImportation
Vous pouvez importer ces fichiers : .eps, .ai, .dxf, .bmp, .emf, .fh, .spl,
.gif, .jpg, .png, .swf, .wmf
Les types de fichiers suivant peuvent être importés si vous avez
Quicktime 4 installé : .psd, .pct, .pic, .qti, mov, .sai,.tga, .tif.
Vous pouvez importer les fichiers de sons suivants : .wav, .aif, .mp3.
Enfin vous pouvez importer des fichiers d'images animées ou de films
de type .mov, .avi, .swf.
26Maha Charfeddine Hamza
Présentation de l’application flashExportation
Les fichiers Flash (.fla) sont enregistrés et ne peuvent être lus que par
l'application.
Vous pouvez enregistrer votre document en différents types de fichiers.
Voici la liste disponible dans File/Export Movie ou Image: .swf, . swt,
.spl, .avi, .mov, .gif, .wav, .emf, .wmf, .eps, .ai, .dxf, .bmp, .jpg, .png.
27Maha Charfeddine Hamza
• Présentation de l’application flash
• Interpolation
• Notions de comportement
• Actions script
Maha Charfeddine Hamza 28
Interpolation
Pour créer une animation, vous devez modifier le contenu d'une
succession d'images.
Vous pouvez déplacer un objet sur la scène, augmenter ou diminuer
sa taille, le faire pivoter, changer sa couleur, ou modifier sa forme.
Pour créer une séquence d'animation dans Flash, vous créez les
images de début et de fin et laissez ensuite à Flash le soin de créer les
images intermédiaires.
Chaque image dont un élément change sur la scène est une
image-clé.
29Maha Charfeddine Hamza
Interpolation
Une image-clé est une image où vous définissez les modifications
dans l'animation.
Dans l'animation interpolée, vous définissez les images-clés aux
points importants dans l'animation et laissez Flash créer le contenu
des images intermédiaires.
Flash affiche les images interpolées d'une animation interpolée en
vert ou bleu clair avec une flèche dessinée entre les images-clés.
30Maha Charfeddine Hamza
Interpolation
Les images-clés apparaissent dans une image sous forme de cercle plein.
Des images-clés vides apparaissent comme des cercles creux.
La première image de chaque calque devient automatiquement une
image-clé.
Le contenu d'une image clé apparaît dans de nouvelles images que vous
ajoutez à un calque.
Pour créer une image-clé :
Sélectionnez une image et cliquez sur Insérer > Image-clé ou Choisir le
menu insertion puis cliquez sur image-clé.
31Maha Charfeddine Hamza
Interpolation
Distinction des animations dans le scénario
Dans le scénario, Flash distingue l'animation interpolée de la façon
suivante :
Les images-clés en interpolation de mouvement sont signalées par un
point noir alors que les images interpolées intermédiaires sont
désignées par une flèche noire sur un fond bleu clair.
Les images-clés en interpolation de forme sont signalées par un point
noir alors que les images intermédiaires sont désignées par une flèche
noire sur un fond vert clair.
32Maha Charfeddine Hamza
Interpolation
Une ligne discontinue signale un problème d'interpolation.
Les images-clés uniques ont des points noirs. Les images gris clair
placées avec une image-clé unique présentent le même contenu sans
modification.
33Maha Charfeddine Hamza
Interpolation
Animer à l'aide de calques :
• Chaque scène d'une animation Flash peut comprendre un nombre
quelconque de calques.
• Lorsque vous effectuez une animation, utilisez des calques pour
organiser les composants d'une séquence d'animation et séparez les
objets animés de façon à éviter tout problème d'effacement, de
connexion ou de segmentation entre eux.
• Si vous voulez que Flash interpole le mouvement de plusieurs
groupes ou symboles à la fois, placez chacun d'eux sur un calque
séparé.
• En principe, le calque d'arrière plan contient des graphismes
statiques. Les calques supplémentaires contiennent chacun un objet
animé distinct.
34Maha Charfeddine Hamza
Interpolation
Mouvement
Flash peut interpoler la position, la taille, la rotation, la couleur.
Pour opérer une interpolation de mouvement :
Choisissez la forme carré et glissez la sur la scène
Sélectionnez la première cellule (frame) dans le calque (layer) de
l'objet à déplacer
Bouton droit de la souris, créez une interpolation de mouvement
Sélectionnez une cellule plus loin dans le temps (scénario : timeline)
Sélectionnez Insérer une image-clé
Modifiez la position de l'objet dans le deuxième temps
• Faites une interpolation de mouvement de rotation puis
d’agrandissement puis de modification de couleur.
• Combinez tous ces mouvements sur l’objet choisi dans un
même calque35Maha Charfeddine Hamza
Interpolation
Forme
Pour opérer une interpolation de forme:
Choisissez la forme carré et glissez la sur la scène
Sélectionnez la première cellule (frame) dans le calque (layer) de
l'objet à transformer
Sélectionnez forme dans l’onglet interpolation de la fenêtre propriétés
Sélectionnez une cellule plus loin dans le temps (scénario : timeline)
Modifiez la forme de l'objet dans le deuxième temps (utilisez la flèche
blanche ou supprimez la forme et la changez avec une autre ou
supprimez la forme et dessinez une autre avec l’outil crayon)
Combinez toutes ces interpolations de forme dans un mêmecalque
Faites un exemple de combinaison d’interpolation de mouvementde déplacement suivi d’une interpolation de forme dans un mêmecalque
36Maha Charfeddine Hamza
Interpolation
GUIDE DE MOUVEMENT
Choisissez la forme carré et glissez la sur la scène
Sélectionnez la première cellule (frame) dans le calque (layer) del'objet
Bouton droit de la souris, créez une interpolation de mouvement
Sélectionnez une cellule plus loin dans le temps (scénario : timeline)
Sélectionnez Insérez une image-clé
Bouton droit de la souris sur le calque, ajoutez un guide demouvement.
Tracez le guide souhaité à partir du centre de l’objet avec l’outil crayon
Dans la frame de fin, déplacez votre objet à la fin du guide à suivreavec la souris
Exercice du guide - Créez une balle qui rebondit.
37Maha Charfeddine Hamza
• Présentation de l’application flash
• Interpolation
• Notions de comportement
• Actions script
Maha Charfeddine Hamza 38
Notions de comportement
Faites un exemple de combinaison
d’interpolation de mouvement de couleur
suivi d’une interpolation de forme.
Maha Charfeddine Hamza 39
Notions de comportement
• Un symbole est une image, une animation ou un bouton réutilisable.
• Une occurrence est une instance d'un symbole sur la scène ou d'unsymbole imbriqué dans un autre symbole
• Les symboles simplifient la modification d'une animation dans lamesure où il suffit d'effectuer les modifications dans le symbole deséléments qui se répètent pour que Flash mette à jour toutes leursoccurrences.
• L'utilisation de symboles dans les animations réduit sensiblement lataille du fichier ; l'enregistrement de plusieurs références à un symboleexige, en effet, moins d'espace disque que l'enregistrement d'unedescription complète de l'élément de chaque occurrence.
Maha Charfeddine Hamza 40
Notions de comportement
• L'utilisation de symboles peut également accélérer lalecture des animations dans la mesure où un symbole n'abesoin d'être téléchargé qu'une seule fois vers lenavigateur.
Pour une introduction interactive à l'utilisation dessymboles et des occurrences, cliquez sur Aide > Leçons >Création et manipulations de symboles
Maha Charfeddine Hamza 41
Notions de comportementDéterminer le type de symbole à utiliser : Chaque fois que vous créez un
symbole, vous devez déterminer comment vous voulez l'utiliser dans l'animation.
• Utilisez des symboles graphiques pour les images statiques et pour créer dans
une animation des éléments réutilisables qui sont liés au scénario de la principale
animation. Les sons et les contrôles interactifs ne fonctionnent pas dans la
séquence d'animation d'un symbole graphique.
• Utilisez des symboles clips d'animation pour créer les éléments réutilisables
d'une animation qui s'exécute indépendamment du scénario de l'animation
principale. Les clips sont des mini-animations qui s'exécutent au sein d'une
animation principale pouvant contenir des contrôles interactifs, des sons et même
d'autres occurrences de clips. Vous pouvez également placer des occurrences de
clips dans le scénario d'un symbole bouton pour créer des boutons animés.
• Utilisez des symboles bouton pour créer dans l'animation des boutons interactifs
qui réagissent à des événements standard de la souris (tels que les clics et les
boutons). Définissez les graphiques associés à divers états du bouton, puis
affectez des actions à une occurrence du symbole bouton.
Maha Charfeddine Hamza 42
Notions de comportement
Graphique, Bouton et clip
Essayons de voir la différence entre graphique, clip et bouton
•Fichier importer dans la bibliothèque les trois images.
•Faites glisser une occurrence d’une image dans la scène.
redimensionner cette occurrence.
•Bouton droite, convertir en symbole, choisissez comme comportement
« graphique » et nommez le symbole « saladeG1 »
•Double click sur saladeG1
•Vous allez animer dans ce symbole. Créez trois calques pour les trois
images importés et faites plusieurs interpolations de mouvement dans
chaque calque. Appuyez sur entrée
•Retournez à la séquence et faites ctrl entrée
Pas d’animation car c’est un symbole de type Graphique
• Utilisez l’outil texte pour écrire au dessous le mot graphique
Maha Charfeddine Hamza 43
Notions de comportement
Graphique, Bouton et clip
•Dans la scène (de séquence), faites glisser une occurrence de
« saladeG1 »
•Dans propriétés, remplacez graphique par « clip »
•Double click sur « saladeG1 »
• Animation car c’est un symbole de type Clip
• Utilisez l’outil texte pour écrire au dessous le mot Clip
Maha Charfeddine Hamza 44
Notions de comportement
Graphique, Bouton et clip• Faites glisser une occurrence d’une image dans la scène.
Redimensionnez cette occurrence.
• Bouton droite, convertir en symbole, choisissez comme comportement
« bouton» et nommez le symbole « saladeBTN »
• Dans l’image « haut », bouton droite, convertir en symbole, choisissez
comme comportement « graphique» et nommez le symbole « btn_grah1»
• Insérez une image clé dans l’image « dessus » et dans propriétés
agissez sur la teinte (choisissez une teinte bleu de 50%)
•Insérez une image clé dans l’image « abaissé» et dans propriétés
agissez sur la teinte (choisissez une teinte rouge de 50%)
•Insérez une image clé dans l’image « Cliqué». Il n'est pas nécessaire de
la modifier
• Retournez à la séquence et faites ctrl entrée
Animation car c’est un symbole de type Bouton
• Utilisez l’outil texte pour écrire au dessous le mot BoutonMaha Charfeddine Hamza 45
Notions de comportement
BoutonCréation de boutons
Un bouton vous permet d'ajouter de l'interaction dans vos pagesInternet.Chaque image dans le scénario d'un symbole bouton possèdeune fonction spécifique :• La première image (l'état Haut ) représente l'apparence
normale du bouton quand le pointeur n'est pas dessus.• La deuxième image (l'état Dessus) représente l'apparence du
bouton quand le pointeur se trouve dessus.• La troisième image (l'état Abaissé) représente l'apparence du
bouton au moment où vous cliquez dessus.
Maha Charfeddine Hamza 46
Notions de comportement
BoutonBouton simple
Pour créer un bouton simple, suivez les instructions
suivantes :
• Cliquez Insertion > Nouveau symbole (ou Ctrl+F8).
Dans la boîte de dialogue, donnez un nom à votre
bouton et choisissez son comportement (bouton);
Maha Charfeddine Hamza 47
Notions de comportement
Bouton•Cliquez Insertion > Image clé (ou F6) pour insérer une imageclé pour l'image « dessus »
•Modifiez la couleur de l'image dessus. Répétez pour les images« abaissé » et « cliqué ». Il n'est pas nécessaire de modifierl'image « cliqué »
•Une fois terminé, cliquez Édition > Modifier le document pourrevenir à l'animation;
•Ouvrez la bibliothèque pour voir le bouton et le faire glisser surla surface de travail
•Pour le tester, dans le menu Contrôle, cliquez sur Activer unbouton simple
•Pour voir l'effet du bouton, cliquez Contrôle > Tester l'animation
Exercice : Créer un bouton " rollover "
Maha Charfeddine Hamza 49
Notions de comportement
BoutonAjouter un son à un bouton
• Cliquez Fichier > Importer dans la bibliothèque pour importer le fichier son désiré
• Ouvrez le symbole bouton pour le modifier
• Choisissez l'état du « dessus » sur lequel vous allez insérerez le son
• Faites glisser le son sur l’image de l’état choisi
• Dans propriétés de l’image de l’état choisi du calque, il ya des options de synchronisation
– Événement : synchronise le son et l'événement;
– Démarrage : est identique à Événement sauf qu'il ne peut redémarrer avant qu'il ne soit terminé;
– Arrêt :interrompt le son;
– En continu : permet le son sur un site Internet.
• Sélectionnez Synchronisation > événement et tester l’animation
• Changer sélectionnez Synchronisation > Démarrage et tester l’animation
• Faites glisser le son sur l’image de l’état « abaissé » et sélectionnez Synchronisation > Arrêt puis tester l’animation
Maha Charfeddine Hamza 50
Notions de comportementExemple de bus qui roule (sans clip)
• Dans un premier calque, on dessine le bus (sans roues).
• Dans un deuxième calque, on dessine la première roue.
• Dans un troisième calque, on dessine la deuxième roue.
• On sélectionne toutes les images de début des trois calques et onfait bouton droit, créer une interpolation de mouvement.
• Plus loin, dans les images 100 des trois calques, on insère desimages clés.
• On fait un mouvement de déplacement
• On teste l’animation le bus roule mais les roues non !!!!!!!!!!
Idée: dans les calques des deux roues, on insère dans chaque 10images des images clés et on fait des rotations
Inconvénient : C’est ennuyeux de le faire plusieurs fois pour chaqueroue
Maha Charfeddine Hamza 51
Notions de comportementExemple de bus qui roule (avec clip)
Solution : utilisation de clips
• On choisit une roue, on la transforme en clip (propriétés)
• On double clique sur la roue, on crée seulement 4 images clés avec
des rotations
• Pour la deuxième roue il suffit de la remplacer par une occurrence
de la première roue à partir de la bibliothèque
Maha Charfeddine Hamza 52
Notions de comportement
Exercice : faites l’animation d’une
personne qui marche en utilisant
un clip
Maha Charfeddine Hamza 53
• Présentation de l’application flash
• Interpolation
• Notions de comportement
• Actions script
Maha Charfeddine Hamza 54
Actions script
• Pour créer des animations interactives, vous devez définir des actions : des
jeux d'instructions qui s'exécutent lorsqu'un événement spécifique se produit.
• Les événements pouvant déclencher une action interviennent soit quand la
tête de lecture atteint une image, soit quand l'utilisateur clique sur un bouton ou
appuie sur des touches du clavier.
• Vous créez des instructions qui indiquent à Flash l'action à exécuter lorsque
l'événement se produit.
• Les actions sont définies dans l'onglet Actions.
• Les instructions peuvent se résumer à une seule instruction ordonnant l'arrêt
de lecture d'une animation ou correspondre à une série d'instructions qui
évaluent d'abord une condition avant d'exécuter l'action correspondante.
Maha Charfeddine Hamza 55
Actions scriptPetite animation Actions script
• Créer une nouvelle animation vide.
• Dessinez un simple carré bleu dans la première image du seul
calque existant .
• Insérez une "image clé vide" sur la 2ème image (bouton droite
insérer une image clé vide ou F7)
• Testez l'animation (CTRL Enter)
Vous verrez les deux images qui clignotent ; flash affiche la
première image : Le carré bleu, puis la 2ème image : Rien, puis
retour à la première image : Le carré bleu, puis rien, puis le carré
bleu, etc.
Maha Charfeddine Hamza 56
Actions scriptPetite animation Actions script
• Nous allons faire une première Action avec Action Script : dès qu‘on lit la
première image, on s'arrête dessus ! Ce qui fera évidemment qu'il n'y aura
plus de clignotement, plus rien qu'un carré bleu statique.
• On commence par sélectionner la première image en cliquant dessus.
• On fait apparaître la boîte des actions avec le menu Fenêtre/Actions :
• Vers le haut, c'est écrit "Actions-image" :
Ca veut dire que nous allons faire « Quelque Chose » dès que cette image
sera atteinte
Maha Charfeddine Hamza 57
Actions scriptPetite animation Actions script
• Dans actions, choisir contrôle de l’animation puis Cliquez 2 fois sur Stop
• Sur la partie de droite, il écrit : stop():
• Un minuscule petit "a" apparait sur la première image :
• Tester l'animation, le carré bleu ne clignote plus : Il est resté coincé sur la
première image
Maha Charfeddine Hamza 58
Actions scriptPetite animation Actions script
Nous allons maintenant nous décoincer de cette première image.
• La deuxième image est bien vide pour qu'on puisse se rendre compte de
quelque chose. Ecrivez y "Nous sommes sur l'image 2" :
Maha Charfeddine Hamza 59
Actions scriptPetite animation Actions script
• Nous allons revenir au carré de l'image 1. Sélectionnez-le et transformez en
symbole Graphique. Appelez-le « Mon bouton »
• Laissez le sélectionné, et regardez la boîte des actions :
CA NE MARCHE PAS car c’est un symbole Graphique
• Transformez le en symbole bouton (propriété, bouton)
• Maintenant, ça marche : Dans Actions, contrôle de l’animation, choisissez on(release) puis gotoAndStop(2). Tester l’animation
Maha Charfeddine Hamza 60
Actions scriptAvancer un objet
• Dans une nouvelle animation, sur la première et unique image-clé de
l'unique calque, dessinez un cercle
• Sélectionnez-le, et avec le bouton droit de la souris, choisissez "Convertir
en symbole", sélectionnez comme comportement bouton et choisissez
comme nom « MonCercle »
• Cliquez sur ce bouton, et affichez les propriétés
(Fenêtre/Propriétés). Réécrivez MonCercle ici :
• Affichez maintenant le panneau Actions
• Ecrivez le code suivant :
on (press)
{
MonCercle._X = MonCercle._X + 10;
}
• Testez l'animation, et cliquez sur le bouton pour le faire avancer vers la
droite
Maha Charfeddine Hamza 61
Actions scriptLes événements de bouton
• Lorsque vous créez un bouton, il est possible d'assigner du code
ActionScript à celui-ci. Mais on peut jouer très finement avec ces boutons :
il est possible de déclencher une action lorsqu'on clique sur le
bouton, mais également lorsque la souris passe par dessus le bouton
ou même lorsqu'on saisit des caractères au clavier.
• Pour montrer les différentes possibilités liées aux boutons, on crée une petiteanimation comme suit :
Maha Charfeddine Hamza 62
Actions scriptLes événements de bouton
• Il y a donc deux boutons : "Testez-moi", sur lequel il y aura plein
d'événements, et "Effacer", qui remet la zone bleue à vide.
• Tous les tests que nous allons effectuer vont renvoyer un texte explicite
dans la zone bleue. Il s'agit d'une zone de texte dynamique créée sur le
calque Résultat, derrière laquelle on a mis un fond bleu
• Dans la première image, comme action(le calque actions) on initialise la
zone de texte à vide :
Maha Charfeddine Hamza 63
Actions scriptLes événements de bouton (souris)
• Le bouton "Effacer" remet également la zone de texte à vide en cas de besoin
(quand elle est trop pleine) :
• Sur le bouton "Testez-moi", inscrivons-y le code suivant :
Lorsqu'on va "presser" sur le bouton avec la souris, TXTResultat (la zone en
bleue) sera égale à elle-même avec en plus (+=) le texte entre guillemets
"on(press)", suivi d'un retour chariot (pour passer à la ligne; c'est à dire le code
ASCII 13).Maha Charfeddine Hamza 64
Actions scriptLes événements de bouton (souris)
• on(release)
on (release)
{
TXTResultat += "on(release)" + chr(13);
}
• on(releaseOutside) : essayez maintenant de cliquer dans le bouton et
d'essayer de le faire glisser vers l'extérieur, ou carrément sur le bouton Effacer.
Vous n'y arriverez pas, mais lorsque vous relâcherez le bouton de la souris, le
on(releaseOutside) va s'afficher
• on(rollOver) : cette fois, le simple fait de survoler le bouton sans même cliquer
va exécuter cet événement.
• on(rollOut) : cette fois, c'est une fois que la souris a survolé le bouton mais
qu'elle s'en va (sans cliquer) que rollOut est exécuté
• on(dragOut) : le dragOut se situe à mi-chemin entre rollOut et releaseOutside.
C'est à dire que si vous cliquez sur le bouton et que vous essayez de le faire
glisser ailleurs, dès que la souris va se trouver en dehors du bouton, mais que
vous avez bien le doigt pressé sur le bouton, dragOut va apparaître dans la liste
Maha Charfeddine Hamza 65
Actions scriptLes événements de bouton (clavier)
Il y a maintenant les événements-clavier.
La simple présence d'un bouton sur une animation suffit à pouvoir utiliser le clavier.
• on (keyPress "<Left>")
Premier essai de clavier : la touche flèche gauche : ajoutez ce code sous les autres
codes de souris:
on (keyPress "<Left>")
{
TXTResultat += "keyPress '<Left>'" + chr(13);
}
Maha Charfeddine Hamza 66
Actions scriptLes événements de bouton (clavier)
• Les autres touches de clavier
Left
Right
Up
Down
Home
End
Insert
*Delete
*Backspace
*Enter
PageUp
PageDown
*Tab
Escape (Ne semble pas fonctionner)Space
* Ne fonctionne qu'en situation réelle et pas avec un test effectué dans Flash avec CTRL-ENTER
Maha Charfeddine Hamza 67
Actions scriptPréparation aux évènements clips
•Le calque Actions et le calque Résultat sont une reprise du .FLA que nous
avons vu dans les événements de boutons. On supprime seulement les
calques correspondant aux boutons "Testez-moi" et "Effacer".
•Le calque "Actions" contient simplement une instruction de mise à vide de
la zone de texte dynamique TXT Résultat. Changerz en :
TXTResultat = "Début animation";
• Le calque résultat contient une zone de texte dynamique nommée
TXTResultat, qui va contenir les résultats des tests d'événements
Maha Charfeddine Hamza 68
Actions scriptPréparation aux évènements clips
•Créez un calque Le Clip, et dessinez dans sa première image un Ovale
•Sélectionnez-le et transformez-le en occurrence graphique : GRAOvale :
Maha Charfeddine Hamza 69
Actions scriptPréparation aux évènements clips
•Effacez votre ovale du scénario
•Dans la même première image du calque "Le Clip", allez dans le menu
Insertion/Nouveau Symbole :
Maha Charfeddine Hamza 70
Actions scriptPréparation aux évènements clips
•Dans ce clip, dans la première et seule image, faites glisser votre
GRAOvale :
•Demandez une nouvelle image-clé en image 10, et une interpolation de
mouvement :
•Dans l'image 10, descendez un peu l'ovale
Maha Charfeddine Hamza 71
Actions script
Préparation aux évènements clips
• Et enfin, dans le scénario principal, dans l'image 1 du calque "Le
clip", faites glisser CLIOvale :
Maha Charfeddine Hamza 72
Actions script
Préparation aux évènements clips
• Maintenant, nous allons installer dans un calque "Bouton effacer",
un bouton qui va permettre de remettre à vide la zone TXTResultat :
Maha Charfeddine Hamza 73
Actions script
Préparation aux évènements clips
• Nous n'allons pas laisser l'animation principale avec une seule image :
Demandez une image-clé vide en image 15 du calque "Le clip" et une
autre en image 20 :
• L'idée est d'avoir cette petite animation de 10 images (celle de l’ovale) qui
a le temps de s'animer une fois et demi (jusqu'à l'image 14), et ensuite
disparait. A la 20ème image, ça boucle sur la première image, et c'est
reparti pour un tour.
Maha Charfeddine Hamza 74
Actions script
Préparation aux évènements clips
• Mettez maintenant une image clé normale (pas vide) en image 20 des
calques Bouton Effacer et Resultat, pour laisser les autres éléments
visibles :
• Allez dans le menu Modification/document, et demandez une cadence de
3 images par secondes à la place de 12, pour qu'on puisse bien se rendre
compte des différents instants de l'exécution des événements et testez
votre animation
Maha Charfeddine Hamza 75
Actions scriptLes événements de clip
Les événements de clip ressemblent beaucoup aux événements de
boutons mais leurs syntaxes est un peu différentes et les effets également.
onClipEvent :
Alors que les boutons possédaient l'événement on (on(press), on(rollOut),
...), les clips exigent les événements onClipEvent.
Il y a 3 genres d'événements pour les clips :
• Les événements automatiques : ils se déclenchent indépendamment
d'une quelconque action de l'utilisateur : load (au l'apparition), unload(à
la disparition), et enterFrame (une fois par image)
• Les événements de souris : dès que l'utilisateur manipule la souris en
présence d'un clip visible dans l'animation
• Les événements de clavier : dès que l'utilisateur presse une touche
quelconque de son clavier en présence d'un clip visible dans l'animation
Maha Charfeddine Hamza 76
Actions scriptLes événements de clip (automatiques)
onClipEvent(load)
• Cet événement se produit lors du chargement de l'animation.
• Ajoutez ce code sur le clip :
onClipEvent(load){_root.TXTResultat = _root.TXTResultat + "load" + chr(13);}
• Constatez que ce n'est pas TXTResultat = quelque chose, mais_root.TXTResultat.
• _root veut dire "Racine", c'est à dire que comme nous sommes dans le clip,même si on a pas cliqué 2 fois dessus, il faut, pour assigner une valeur àTXTResultat, préciser qu'il s'agit bien de TXTResultat de l'animation principale
Maha Charfeddine Hamza 77
Actions scriptLes événements de clip (automatiques)
•L'événement load est exécuté lors de l'apparition du clip dans l'animation.
• Si on avait laissé quelques images vides avant, comme ceci :
•On va attendre quelques instants avant de voir apparaître le mot "load".
•Vous ajoutez une numérotation des images pour mieux se rendre compte
de l'ordre d'apparition des textes
•Testez
Maha Charfeddine Hamza 78
Actions scriptLes événements de clip (automatiques)
onClipEvent(unload)
• Ajoutez le code suivant en dessous du onload :
• onClipEvent(load){_root.TXTResultat = _root.TXTResultat + "load" + chr(13);}
onClipEvent(unload)
{
_root.TXTResultat = _root.TXTResultat + "unload" + chr(13);
}
• Cet événement s'exécutera à l'instant où le clip disparait de l'écran
Maha Charfeddine Hamza 79
Actions scriptLes événements de clip (automatiques)
onClipEvent(enterFrame)
• onClipEvent(load){_root.TXTResultat = _root.TXTResultat + "load" + chr(13);}
onClipEvent(unload){_root.TXTResultat = _root.TXTResultat + "unload" + chr(13);}
onClipEvent(enterFrame)
{
_root.TXTResultat = _root.TXTResultat + "enterFrame" + chr(13);
}
•Supprimez des images du calque le Clip tel que le clip apparait de l'image 7 à
l'image 14
Maha Charfeddine Hamza 80
Actions scriptLes événements de clip (automatiques)
•Juste après l'événement load, enterFrame s'exécute une fois par image
d'apparition du clip. Ici, le clip apparait de l'image 7 à l'image 14 :
On fait exprès de modifier le temps d'apparition du clip, car comme il fait 10 images,
on ne veut pas qu'il apparaisse exactement sur 10 images pour lever toute
ambigüité.
enterFrame va s'exécuter très exactement 7 fois : sur les images 8,9,10,11,12,13
et 14. mais pas sur la 7.
La première image ou apparait le clip ne déclenche par enterFrame contre
toute attente
Résumé :
• load est exécuté sur la première image où le clip est visible
• enterFrame est exécuté sur chaque image où le clip est visible, sauf la première
• unload est exécuté sur la première image où le clip n'est plus visible (l'image clé
vide juste à la fin)
Maha Charfeddine Hamza 81
Actions scriptLes événements de clip (souris)
• Pour mieux nous rendre compte des événements de souris, laissons les deux
événements
onClipEvent(load)
{
_root.TXTResultat = _root.TXTResultat + "load" + chr(13);
}
onClipEvent(unload)
{
_root.TXTResultat = _root.TXTResultat + "unload" + chr(13);
}
et enlevons enterFrame qui s'exécute trop souvent, et empêche une bonne
compréhension.
Maha Charfeddine Hamza 82
Actions scriptLes événements de clip (souris)
onClipEvent(mouseDown)
• Comme on pourrait s'y attendre, cet événement s'exécute à l'instant où l'utilisateurappuie sur le bouton de sa souris.
• A l'inverse des événements de boutons, l'utilisateur peut cliquer n'importe ou dansl'animation, du moment que c'est lorsque l'animation est apparente (donc entre loadet unLoad), l'événement mouseDown sera exécuté.onClipEvent(mouseDown){_root.TXTResultat = _root.TXTResultat + "mouseDown" +chr(13);}
• Si vous cliquez dans l'animation mais que le clip n'est pas présent, rien ne sepasse
• Si vous cliquez dans l'animation quand le clip est présent, que ce soit sur le clip ouailleurs, mouseDown apparait dans la liste autrant de fois que vous cliquez
• Si vous cliquez sur le bouton Effacer, mouseDown apparait dans la liste, mais, unmillième de seconde plus tard, la liste est effacée, ce qui fait que vous n'aurez pasle temps de voir le dernier affichage
• Si vous cliquez très très vite plusieurs fois, vous pourrez faire apparaître plus defois mouseDown qu'il n'y a d'images dans le clip (plus de 7 fois donc)
Maha Charfeddine Hamza 83
Actions scriptLes événements de clip (souris)
onClipEvent(mouseMove)
onClipEvent(mouseMove)
{
_root.TXTResultat = _root.TXTResultat + "mouseMove" +chr(13);
}
• Les commentaires sur mouseDown sont les mêmes que pour mouseMove.
• mouseMove s'exécute à chaque déplacement de la souris, c'est à dire que si vous
déplacez la souris juste d'un demi centimètre sur l'animation, mouseMove a le
temps de s'afficher déjà une dizaine de fois
c'est un événement encore bien plus "intensif" que mouseDown ou enterFrame.
Maha Charfeddine Hamza 84
Actions scriptLes événements de clip (souris)
onClipEvent(mouseUp)
• L'utilisation de mouseUp est la même que mouseDown, sauf que cette fois, c'est quand lebouton de la souris est relâché que cet événement est exécuté. Pour mieux comprendre, nousallons enlever mouseMove, pour laisser seulement les événements suivants :
onClipEvent(load){_root.TXTResultat = _root.TXTResultat + "load" + chr(13);}
onClipEvent(unload){_root.TXTResultat = _root.TXTResultat + "unload" + chr(13);}
onClipEvent(mouseDown){_root.TXTResultat = _root.TXTResultat + "mouseDown" + chr(13);}
onClipEvent(mouseUp){_root.TXTResultat = _root.TXTResultat + "mouseUp" + chr(13);}
• S'il existe à la fois les événements mouseDown et mouseUp, les deux événements serontFORCEMENT exécutés.
• Cliquez dans l'animation entre load et unload, et attendre avec la souris appuyée que unloadapparaisse dans la liste, puis alors seulement relâcher. Là, il n'y aura pas de mouseUp.
Maha Charfeddine Hamza 85
Actions scriptLes événements de clip (clavier)
• Il n'y en a que deux:
onClipEvent(keyDown)
onClipEvent(keyUp)
• Comme on pourrait s'y attendre, keyDown s'exécute quand on appuie sur une
touche, et keyUp quand on relâche la touche.
• Si on laisse le doigt appuyé sur une touche (entre load et), plusieurs keyDown
seront affichés, mais il y a toujours un seul keyUp (a moins qu'on relâche la
touche après le unLoad)
onClipEvent(keyDown)
{
_root.TXTResultat = _root.TXTResultat + "keyDown" + chr(13);
}
onClipEvent(keyUp)
{
_root.TXTResultat = _root.TXTResultat + "keyUp" + chr(13);
}
• Toutes les touches provoquent à la fois l'événement keyDown et keyUp, SAUF la
touche ESC qui ne provoque que keyUp.
Maha Charfeddine Hamza 86
Actions scriptLes événements de clip (clavier)
• Il est possible ainsi de récupérer le code ASCII de la touche ainsi enfoncée (par
exemple, a est égal au code 97), ou même le caractère correspondant, comme ceci :
onClipEvent(keyUp)
{
// Le code ASCII :
_root.TXTResultat = _root.TXTResultat + "ASCII : " + Key.getAscii() + chr(13);
// Le caractère correspondant :
_root.TXTResultat = _root.TXTResultat + "Caractere : " + chr(Key.getAscii()) +
chr(13);
}
Attention : si vous essayez d'appuyer sur un caractère non imprimable, tel que
Flèche gauche, Flèche droite, CTRl, F5, etc. Le code ASCII renvoyé est
systématiquement 0. SI vous avez besoin de récupérer la valeur ASCII d'un de ces
caractères, mieux vaut utiliser key.getCode
Maha Charfeddine Hamza 87
Actions scriptLes variables
• Essayez d'écrire ce code dans une nouvelle animation, dans l'unique image-clé du seul calque existant puis testez :
Truc = 44trace (Truc)
• Le résultat est l'affichage de :
44
Mélange de types
• Attention au mélange de types de données. Testez avec ce nouveau code
Truc = 5Machin = 6Bidule = "HA HA HA"trace (Truc + Machin)trace(Truc + Machin + Bidule)trace(Bidule + Truc + Machin)
• Le résultat est l'affichage de :
11
11HA HA HAHA HA HA56
Maha Charfeddine Hamza 88
Actions scriptLes variables
Ordre de lecture de l'animation
• Les variables sont traitées du haut vers le bas et de la gauche vers la droite.
Admettons deux calques l'un au dessus de l'autre, et dans le calque du haut :
Truc = 5
et dans le calque du bas
trace (Truc)
Puis testez
• Inversez l'ordre des calques et testez
Maha Charfeddine Hamza 89
Actions scriptLes variables
• Admettons maintenant que vous créez un clip dans un autre calque (CLICercle)
• Dans le calque Calque 1, vous avez toujours Truc = 5.
• Et maintenant, dans le clip, vous avez le code suivant :
onClipEvent(mouseUp){trace (Truc)}
• Comme Truc existe dans le scénario lui-même et pas dans le clip, en d'autre mots, "à un niveau plus élevé", c'est à dire à la "racine" de l'animation, et en anglais racine se dit root, le résultat est ... undefined !
• Essayez le code suivant à la place :
onClipEvent(mouseUp){trace (_root.Truc)}
Cette fois, le résultat est 5.
Maha Charfeddine Hamza 90
Actions scriptLes variables
• Maintenant, donnons un nom à notre occurrence de CLICercle : OCCCercle (Avec le
panneau des propriétés) :
• Afin qu'une variable soit immédiatement initialisée dans ce OCCCercle, placez le
code suivant :
onClipEvent(load)
{
Machin = 8
Trace (Machin)
}
Il va bien sûr afficher 8.
Maha Charfeddine Hamza 91
Actions scriptLes variables
• Mais maintenant, insérez une image clé en 2ème image de ce calque qui contient
déjà le clip :
• Le résultat va être :
8
undefined
undefined
undefined
undefined
...
• La première fois, c'est bien 8, car c'est au chargement du clip, et ensuite undefined,
car on ne peut pas accéder comme ça à Machin : c'est une variable du clip. Il fait
plusieurs fois undefined, simplement, parce qu'il boucle automatiquement sur les
deux images.
• Par contre, on peut y accéder comme ceci :
trace (OCCCercle.Machin)
Et là, il va bien donner toujours 8.
Maha Charfeddine Hamza 92
Actions scriptLes variables
Déclaration des variables
• Bien que ce ne soit pas obligatoire, c'est tout de même plus propre. Le mot-clé var
pourvoit à cette utilité. Ecrivons dans la première et unique image-clé de notre seul
et unique calque d'une nouvelle animation :
var Machin = 4
trace(Machin)
Affiche 4.
• Mais si maintenant, on crée un clip sur cette même image, dans lequel on insère ce
code :
onClipEvent(load)
{
trace (Machin)
}
Le résultat est undefined car la portée de la variable ne va pas jusque dans les
clips.
Maha Charfeddine Hamza 93
Actions scriptLes variables
• Pour que la variable soit disponible jusque dans les clips, il faut utiliser _global.
Essayez ceci :
• Code de la première image de l'animation :
_global.Truc = 9
var Machin = 4
trace("Image 1, Truc : " + Truc)
trace("Image 1, Machin : " + Machin)
et dans le clip :
onClipEvent(load)
{
trace ("Clip, Truc : " + Truc)
trace ("Clip, Machin : " + Machin)
}
• L'affichage sera :
Image 1, Truc : 9
Image 1, Machin : 4
Clip, Truc : 9
Clip, Machin :
Maha Charfeddine Hamza 94