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

PARTIE I :

FLASH MX

2Maha Charfeddine Hamza

Plan PARTIE I

• Présentation de l’application flash

• Interpolation

• Notions de comportement

• Actions script



• Interpolation


• 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).


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.



Interface



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.



Interface : Barre d’outils


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.



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.


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.




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.



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




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é.



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.



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.



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é



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.



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.


Remarque : Pour sélectionner une forme remplie et ses contours

hachurés, sélectionnez l'outil Flèche et double-cliquez sur le

remplissage.


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.



InterfaceVous avez accès à toutes les fenêtres par le menu Window (fenêtre)


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.



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).



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.



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.


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.


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.



• Interpolation


• Actions script


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é.


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.


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é.


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.


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.


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.


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:


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


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


Interpolation

GUIDE DE MOUVEMENT


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 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.



• Interpolation


• Actions script


Notions de comportement

Faites un exemple de combinaison

d’interpolation de mouvement de couleur

suivi d’une interpolation de forme.



• 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.



• 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


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.



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



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



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


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.



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);



Bouton

• Dessinez votre bouton



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 "



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


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


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



Exercice : faites l’animation d’une

personne qui marche en utilisant

un clip



• Interpolation


• Actions script


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.


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.



• 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



• 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



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" :



• 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


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


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 :


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 :


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


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);

}


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


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



•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 :



•Effacez votre ovale du scénario

•Dans la même première image du calque "Le Clip", allez dans le menu

Insertion/Nouveau Symbole :



•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


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 :


Actions script


• Maintenant, nous allons installer dans un calque "Bouton effacer",

un bouton qui va permettre de remettre à vide la zone TXTResultat :


Actions script


• 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.


Actions script


• 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


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


http://www.info-3000.com/flash/evenementclip/index.php



















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



•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



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



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



•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)


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.



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)



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.



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.


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.


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


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



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



• 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.



• 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.



• 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.



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.



• 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 :


Exercice I








Exercice II






Documents

flash partie4