flash partie3

Cours développement multimédia

Assuré par : Mme MAHA Charfeddine Hamza

2009/2010

REPUBLIQUE TUNISIENNEMINISTERE DE L’ENSEIGNEMENT SUPERIEUR ET DE LA RECHERCHE SCIENTIFIQUE

UNIVERSITE DE SFAXECOLE NATIONALE D’INGENIEURS

DE SFAX

PARTIE I : FLASH MX

31/03/2010 2Maha Charfeddine Hamza

Plan PARTIE I• Présentation de l’application flash• Interpolation• Notions de comportement• Actions script


• Présentation de l’application flash• Interpolation• Notions de comportement• Actions script

31/03/2010 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 flashIntroduction

• Flash interpole des mouvements dans le temps :– il crée des hyperliens entre les éléments de la

scène– son langage Action Script, permet de concevoir des

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


Présentation de l’application flashInterface



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


Présentation de l’application flashInterface : Barre d’outils


Barre d’outils (drawing toolbar):Les différents icônes de la barred'outils sont similaires auxlogiciels de dessins Bitmap ouvectoriels, 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 proprescouleurs.

– Vous ferez des formes droites et proportionnelleslorsque vous appuierez sur Shift en les créant, en lestransformant ou en les déplaçant.



Comprendre les fonctions dessin et peinture de Flash :Lorsque vous tracez une ligne qui croise une autre ligne ou une formepeinte, la ligne que vous dessinez agit comme un couteau et divise laligne ou la forme qu'elle croise en différents segments.La ligne tracée est elle-même divisée en segments. Vous pouvezsélectionner, déplacer et modifier individuellement la forme de chaquesegment.



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



EffacerL'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'effacementChoisissez une forme de gomme et vérifiez que le modificateur Robinetn'est pas sélectionné.



Utiliser l'outil Remplissage

L'outil Remplissage remplit de couleur les zones fermées. Il remplit leszones vides et modifie la couleur de la peinture existante.

Vous pouvez également utiliser l'outil Remplissage pour ajuster ladimension, la direction et le centre des remplissages dégradés etbitmaps.



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 fermeautomatiquement 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 EncrierSé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 PipetteSé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 contourshachurés, sélectionnez l'outil Flèche et double-cliquez sur leremplissage.


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 avezcommencé, ou laissez Flash fermer automatiquement la boucle parune ligne droite.

Pour sélectionner des objets en dessinant une zone de sélectionpolygonale :Sélectionnez l'outil Lasso et sélectionnez le modificateur Lassopolygonal.Cliquez pour définir le point de départ.Positionnez le pointeur à l'endroit où vous voulez arrêter la premièreligne, et cliquez. Continuez de définir les points d'arrêt pour lessegments de ligne supplémentaires.Pour fermer la zone de sélection, double-cliquez.



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



Panneau de contrôle (Controller)

Gère le déroulement du film, avec les fonctionnalités habituelles d'unvisionnement d'un film (Play, revient au début ou de un, avance de unou à 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 lacommande Ctrl + Enter pour voir l'interaction dans le film.



Propriétés (Properties) : Vous pourrez ajuster les propriétés de basede 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 actionssur des objets positionnés sur la scène ou à une image clé précisedans le scénario.



Scénario (Timeline) : la barre avec plusieurs petites casesnumérotées, représente le scénario dans le temps de l’animation.Ces cases sont des marques dans le temps des différentesinterventions qui sont effectuées.L'accès au menu contextuel (clic du bouton droit de la souris sur unobjet, une image clé) est très utile pour ajuster les propriétés demouvement (Tweening), de transformation, d'inscription de, pour savoiroù 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 sontnumé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 avezQuicktime 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 filmsde type .mov, .avi, .swf.


Présentation de l’application flashExportation

Les fichiers Flash (.fla) sont enregistrés et ne peuvent être lus que parl'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

Pour créer une animation, vous devez modifier le contenu d'unesuccession d'images.

Vous pouvez déplacer un objet sur la scène, augmenter ou diminuersa taille, le faire pivoter, changer sa couleur, ou modifier sa forme.

Pour créer une séquence d'animation dans Flash, vous créez lesimages de début et de fin et laissez ensuite à Flash le soin de créer lesimages intermédiaires.

Chaque image dont un élément change sur la scène est uneimage-clé


InterpolationUne image-clé est une image où vous définissez les modificationsdans l'animation.Dans l'animation interpolée, vous définissez les images-clés auxpoints importants dans l'animation et laissez Flash créer le contenudes 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.


InterpolationLes 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 uneimage-clé.Le contenu d'une image clé apparaît dans de nouvelles images que vousajoutez à un calque.

Pour créer une image-clé :Sélectionnez une image et cliquez sur Insérer > Image-clé ou Choisir lemenu insertion puis cliquez sur image-clé.


Interpolation

Distinction des animations dans le scénarioDans le scénario, Flash distingue l'animation interpolée de la façonsuivante :Les images-clés en interpolation de mouvement sont signalées par unpoint noir alors que les images interpolées intermédiaires sontdé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 pointnoir alors que les images intermédiaires sont désignées par une flèchenoire 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 clairplacées avec une image-clé unique présentent le même contenu sansmodification.


InterpolationAnimer à l'aide de calques :• Chaque scène d'une animation Flash peut comprendre un nombrequelconque de calques.• Lorsque vous effectuez une animation, utilisez des calques pourorganiser les composants d'une séquence d'animation et séparer lesobjets animés de façon à éviter tout problème d'effacement, deconnexion ou de segmentation entre eux.• Si vous voulez que Flash interpole le mouvement de plusieursgroupes ou symboles à la fois, placez chacun d'eux sur un calqueséparé.• En principe, le calque d'arrière plan contient des graphismesstatiques. Les calques supplémentaires contiennent chacun un objetanimé distinct.


InterpolationMouvement

Flash peut interpoler la position, la taille, la rotation, la couleur.Pour opérer une interpolation de mouvement :Choisir la forme carré et glisser la sur la scèneSélectionner la première cellule (frame) dans le calque (layer) de l'objetà déplacerBouton droit de la souris, créer une interpolation de mouvementSélectionner une cellule plus loin dans le temps (scénario : timeline)Sélectionner Insérer une image-cléModifier la position de l'objet dans le deuxième temps

• Faire une interpolation de mouvement de rotation puisd’agrandissement puis de modification de couleur.• Combiner tous ces mouvements sur l’objet choisi dans unmême calque31/03/2010 35Maha Charfeddine Hamza

InterpolationForme

Pour opérer une interpolation de forme:Choisir la forme carré et glisser la sur la scèneSélectionner la première cellule (frame) dans le calque (layer) de l'objetà transformerSélectionner forme dans l’onglet interpolation de la fenêtre propriétésSélectionner une cellule plus loin dans le temps (scénario : timeline)Modifier la forme de l'objet dans le deuxième temps (utiliser la flècheblanche ou supprimer la forme et la changer avec une autre ousupprimer la forme et dessiner une autre avec l’outil crayon)

Combiner 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

Choisir la forme carré et glisser la sur la scèneSélectionner la première cellule (frame) dans le calque (layer) de l'objetBouton droit de la souris, créer une interpolation de mouvementSélectionner une cellule plus loin dans le temps (scénario : timeline)Sélectionner Insérer une image-cléBouton droit de la souris sur le calque, ajouter un guide de mouvement.Tracer le guide souhaité à partir du centre de l’objet avec l’outil crayonDans la frame de fin, déplacer votre objet à la fin du guide à suivreavec la souris

Exercice du guide - Créez une balle qui rebondit.


Notions de comportement

Faites un exemple de combinaisond’interpolation de mouvement de couleursuivi d’une interpolation de forme.


Notions de comportement•Un symbole est une image, une animation ou un boutonréutilisable.•Une occurrence est une instance d'un symbole sur la scèneou d'un symbole imbriqué dans un autre symbole• Les symboles simplifient la modification d'une animationdans la mesure où il suffit d'effectuer les modifications dans lesymbole des éléments qui se répètent pour que Flash mette àjour toutes leurs occurrences.•L'utilisation de symboles dans les animations réduitsensiblement la taille du fichier ; l'enregistrement de plusieursréférences à un symbole exige, en effet, moins d'espacedisque que l'enregistrement d'une description complète del'élément de chaque occurrence.


Notions de comportement• L'utilisation de symboles peut également accélérer la

lecture 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 unsymbole, vous devez déterminer comment vous voulez l'utiliser dans l'animation.

• Utilisez des symboles graphiques pour les images statiques et pour créer dansune animation des éléments réutilisables qui sont liés au scénario de la principaleanimation. Les sons et les contrôles interactifs ne fonctionnent pas dans laséquence d'animation d'un symbole graphique.

• Utilisez des symboles clips d'animation pour créer les éléments réutilisablesd'une animation qui s'exécute indépendamment du scénario de l'animationprincipale. Les clips sont des mini-animations qui s'exécutent au sein d'uneanimation principale pouvant contenir des contrôles interactifs, des sons et mêmed'autres occurrences de clips. Vous pouvez également placer des occurrences declips 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 interactifsqui réagissent à des événements standard de la souris (tels que les clics et lesboutons). Définissez les graphiques associés à divers états du bouton, puisaffectez des actions à une occurrence du symbole bouton.


Notions de comportementGraphique, 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, choisir comme comportement «graphique » et nommé le symbole « saladeG1 »•Double click sur saladeG1•Nous allons animer dans ce symbole. On crée trois calques pour lestrois images importés et on fait plusieurs interpolations de mouvementdans chaque calque. Appuyez sur entrée•On retourne à la séquence et on fait ctrl entrée Pas d’animation car c’est un symbole de type Graphique•On utilise l’outil texte pour écrire au dessous le mot graphique31/03/2010 Maha Charfeddine Hamza 43


•Dans la scène (de séquence), faites glisser une occurrence de« saladeG1 »•Dans propriétés, remplacer graphique par « clip »•Double click sur « saladeG1 »• Animation car c’est un symbole de type Clip•On utilise l’outil texte pour écrire au dessous le mot Clip



• Faites glisser une occurrence d’une image dans la scène.redimensionner cette occurrence.•Bouton droite, convertir en symbole, choisir comme comportement« bouton» et nommé le symbole « saladeBTN »•Dans l’image « haut », bouton droite, convertir en symbole, choisircomme comportement « graphique» et nommé le symbole «btn_grah1»•Insérer une image clé dans l’image « dessus » et dans propriétés agirsur la teinte (choisir une teinte bleu de 50%)•Insérer une image clé dans l’image « abaissé» et dans propriétés agirsur la teinte (choisir une teinte rouge de 50%)•Insérer une image clé dans l’image « Cliqué». Il n'est pas nécessairede la modifier•On retourne à la séquence et on fait ctrl entrée Animation car c’est un symbole de type Bouton•On utilise l’outil texte pour écrire au dessous le mot Bouton


Notions de comportementBouton

Création de boutonsUn 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.



Bouton simplePour créer un bouton simple, suivez les instructionssuivantes :• Cliquez Insertion > Nouveau symbole (ou Ctrl+F8).

Dans la boîte de dialogue, donnez un nom à votre bouton et choisissez son comportement (bouton);



• Dessinez votre 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'animationExercice : Créer un bouton " rollover "



Ajouter 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 on

fait bouton droit, créer une interpolation de mouvement.• Plus loin, dans les images 100 des trois calques, on insère des

images 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 rotationsInconvé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


Notions de comportement

Exercice : faites l’animation d’unepersonne qui marche en utilisantun clip


Actions script• Pour créer des animations interactives, vous devez définir des actions : desjeux 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 latête de lecture atteint une image, soit quand l'utilisateur clique sur un bouton ouappuie sur des touches du clavier.

• Vous créez des instructions qui indiquent à Flash l'action à exécuter lorsquel'é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êtde 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, puisretour à 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 lapremière image, on s'arrête dessus ! Ce qui fera évidemment qu'il n'y auraplus 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 lapremiè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 dequelque chose. Ecrivez y "Nous sommes sur l'image 2" :



• Nous allons revenir au carré de l'image 1. Sélectionnez-le et transformez ensymbole 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é del'unique calque, dessinez un cercle

• Sélectionnez-le, et avec le bouton droit de la souris, choisissez "Convertiren symbole", sélectionnez comme comportement bouton et choisissezcomme 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 ladroite


Actions scriptLes événements de bouton

• Lorsque vous créez un bouton, il est possible d'assigner du codeActionScript à celui-ci. Mais on peut jouer très finement avec ces boutons :il est possible de déclencher une action lorsqu'on clique sur lebouton, mais également lorsque la souris passe par dessus le boutonou 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 pleind'événements, et "Effacer", qui remet la zone bleue à vide.

• Tous les tests que nous allons effectuer vont renvoyer un texte explicitedans la zone bleue. Il s'agit d'une zone de texte dynamique créée sur lecalque Résultat, derrière laquelle on a mis un fond bleu

• Dans la première image, comme action(le calque actions) on initialise lazone 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 enbleue) 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 codeASCII 13).


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, leon(releaseOutside) va s'afficher

• on(rollOver) : cette fois, le simple fait de survoler le bouton sans même cliquerva exécuter cet événement.

• on(rollOut) : cette fois, c'est une fois que la souris a survolé le bouton maisqu'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 faireglisser ailleurs, dès que la souris va se trouver en dehors du bouton, mais quevous 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 clavierLeftRightUpDownHomeEndInsert*Delete*Backspace*EnterPageUpPageDown*TabEscape (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 nousavons vu dans les événements de boutons. On supprime seulement lescalques correspondant aux boutons "Testez-moi" et "Effacer".•Le calque "Actions" contient simplement une instruction de mise à vide dela zone de texte dynamique TXT Résultat. Changerz en :TXTResultat = "Début animation";• Le calque résultat contient une zone de texte dynamique nomméeTXTResultat, 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 menuInsertion/Nouveau Symbole :



•Dans ce clip, dans la première et seule image, faites glisser votreGRAOvale :

•Demandez une nouvelle image-clé en image 10, et une interpolation demouvement :

•Dans l'image 10, descendez un peu l'ovale



• Et enfin, dans le scénario principal, dans l'image 1 du calque "Leclip", faites glisser CLIOvale :



• Maintenant, nous allons installer dans un calque "Bouton effacer",un bouton qui va permettre de remettre à vide la zone TXTResultat :



• 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 uneautre en image 20 :

• L'idée est d'avoir cette petite animation de 10 images (celle de l’ovale) quia le temps de s'animer une fois et demi (jusqu'à l'image 14), et ensuitedisparait. A la 20ème image, ça boucle sur la première image, et c'estreparti pour un tour.



• Mettez maintenant une image clé normale (pas vide) en image 20 descalques Bouton Effacer et Resultat, pour laisser les autres élémentsvisibles :

• Allez dans le menu Modification/document, et demandez une cadence de3 images par secondes à la place de 12, pour qu'on puisse bien se rendrecompte des différents instants de l'exécution des événements et testezvotre animation


Actions scriptLes événements de clip

Les événements de clip ressemblent beaucoup aux événements deboutons 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 enprésence d'un clip visible dans l'animation

• Les événements de clavier : dès que l'utilisateur presse une touchequelconque de son clavier en présence d'un clip visible dans l'animation


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 comptede 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(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 imaged'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 touteambigüité.enterFrame va s'exécuter très exactement 7 fois : sur les images 8,9,10,11,12,13et 14. mais pas sur la 7.La première image ou apparait le clip ne déclenche par enterFrame contretoute 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énementsonClipEvent(load){_root.TXTResultat = _root.TXTResultat + "load" + chr(13);}


et enlevons enterFrame qui s'exécute trop souvent, et empêche une bonnecompré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 vousdéplacez la souris juste d'un demi centimètre sur l'animation, mouseMove a letemps de s'afficher déjà une dizaine de foisc'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(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 keyDownseront 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 :1111HA 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 = 5et 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 = 8Trace (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 :8undefinedundefinedundefinedundefined...

• 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 = 4trace(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 = 9var Machin = 4trace("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 : 9Image 1, Machin : 4Clip, Truc : 9Clip, Machin :


flash partie3

Documents

logiciel flash

flash mx31032010

peinture de flash

ligne trace

style dela ligne

loutil crayon

diffrents segments

logiciel de design vectoriel