Issuu on Google+

REPUBLIQUE TUNISIENNE MINISTERE DE L’ENSEIGNEMENT SUPERIEUR ET DE LA RECHERCHE SCIENTIFIQUE UNIVERSITE DE SFAX ECOLE NATIONALE D’INGENIEURS DE SFAX

Cours développement multimédia Assuré par : Mme MAHA Charfeddine Hamza 2009/2010


PARTIE I : FLASH MX Maha Charfeddine Hamza

2


Plan PARTIE I • • • •

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

Maha Charfeddine Hamza

3


• • • •

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

Maha Charfeddine Hamza

4


Présentation de l’application flash Introduction • Flash est un logiciel qui sert à créer des animations adapté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 permet l'incorporation des images, de sons,... • Le logiciel Flash est un outil puissant permettant la création facile des interfaces de haut niveau (interaction et esthétique). Maha Charfeddine Hamza

5


Présentation de l’application flash Introduction • 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 et professionnels dans un scénario linéaire. • Plusieurs designers d'interface préconisent maintenant l'utilisation de Flash dans leurs sites Web, pour leurs présentations, la publicité, etc. Maha Charfeddine Hamza

6


Présentation de l’application flash Interface

Maha Charfeddine Hamza

7


Présentation de l’application flash Interface 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 travailler et de disposer les objets (clips, graphiques ou boutons) pour une animation.

Maha Charfeddine Hamza

8


Présentation de l’application flash 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.

Maha Charfeddine Hamza

9


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. Maha Charfeddine Hamza

10


Présentation de l’application flash Interface : 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.

Maha Charfeddine Hamza

11


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 tracer facilement des formes. Les outils Ovale et Rectangle vous permettent de tracer et de remplir la forme lors de son dessin. L'outil Rectangle vous permet de dessiner des rectangles avec des coins droits ou arrondis. Pour l'outil Rectangle, indiquez des coins droits en cliquant sur le modificateur Rayon de rectangle arrondi et entrez une valeur pour définir son rayon. La valeur zéro crée des coins droits. Maha Charfeddine Hamza

12


Présentation de l’application flash Interface : 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 :

Image originale, Peint normalement, Peint derrière, Remplissage, Peint la sélection, et Peint à l'intérieur

• Choisissez une taille de pinceau, une forme de pinceau et une couleur de peinture dans les modificateurs de l'outil Pinceau.

Maha Charfeddine Hamza

13


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

Maha Charfeddine Hamza

14


Présentation de l’application flash Interface : 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.

Maha Charfeddine Hamza

15


Présentation de l’application flash Interface : 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 automatiquement les espaces.

pour

que

Flash

ferme

Cliquez sur la zone à remplir.

Maha Charfeddine Hamza

16


Présentation de l’application flash Interface : 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é

Maha Charfeddine Hamza

17


Présentation de l’application flash Interface : 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.

Maha Charfeddine Hamza

18


Présentation de l’application flash Interface : 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.

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

hachurés, sélectionnez l'outil Flèche et double-cliquez sur le remplissage. Maha Charfeddine Hamza

19


Présentation de l’application flash Interface : 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. Maha Charfeddine Hamza

20


Présentation de l’application flash Interface Vous avez accès à toutes les fenêtres par le menu Window (fenêtre)

Maha Charfeddine Hamza

21


Présentation de l’application flash Interface 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.

Maha Charfeddine Hamza

22


Présentation de l’application flash Interface 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).

Maha Charfeddine Hamza

23


Présentation de l’application flash Interface 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.

Maha Charfeddine Hamza

24


Présentation de l’application flash Interface 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.

Maha Charfeddine Hamza

25


Présentation de l’application flash Importation 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.

Maha Charfeddine Hamza

26


Présentation de l’application flash Exportation 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.

Maha Charfeddine Hamza

27


• • • •

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

Maha Charfeddine Hamza

29


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.

Maha Charfeddine Hamza

30


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é. Maha Charfeddine Hamza

31


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.

Maha Charfeddine Hamza

32


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.

Maha Charfeddine Hamza

33


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.

Maha Charfeddine Hamza

34


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 calque Maha Charfeddine Hamza

35


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ême calque Faites un exemple de combinaison d’interpolation de mouvement de déplacement suivi d’une interpolation de forme dans un même calque Maha Charfeddine Hamza

36


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) de l'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 de mouvement. 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 à suivre avec la souris Exercice du guide - Créez une balle qui rebondit.

Maha Charfeddine Hamza

37


• • • •

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'un symbole imbriqué dans un autre symbole • Les symboles simplifient la modification d'une animation dans la mesure où il suffit d'effectuer les modifications dans le symbole des éléments qui se répètent pour que Flash mette à jour toutes leurs occurrences.

• L'utilisation de symboles dans les animations réduit sensiblement la taille du fichier ; l'enregistrement de plusieurs références à un symbole exige, en effet, moins d'espace disque que l'enregistrement d'une description 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 la lecture des animations dans la mesure où un symbole n'a besoin d'être téléchargé qu'une seule fois vers le navigateur. Pour une introduction interactive à l'utilisation des symboles et des occurrences, cliquez sur Aide > Leçons > Création et manipulations de symboles

Maha Charfeddine Hamza

41


Notions de comportement Dé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 Bouton Maha Charfeddine Hamza

45


Notions de comportement Bouton Création de boutons Un bouton vous permet d'ajouter de l'interaction dans vos pages Internet. Chaque image dans le scénario d'un symbole bouton possède une 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 Bouton Bouton 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 • Dessinez votre bouton

Maha Charfeddine Hamza

48


Notions de comportement Bouton •Cliquez Insertion > Image clé (ou F6) pour insérer une image clé 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 modifier l'image « cliqué » •Une fois terminé, cliquez Édition > Modifier le document pour revenir à l'animation; •Ouvrez la bibliothèque pour voir le bouton et le faire glisser sur la surface de travail •Pour le tester, dans le menu Contrôle, cliquez sur Activer un bouton 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 Bouton 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

Maha Charfeddine Hamza

50


Notions de comportement Exemple 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 10 images des images clés et on fait des rotations Inconvénient : C’est ennuyeux de le faire plusieurs fois pour chaque roue Maha Charfeddine Hamza

51


Notions de comportement Exemple 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 script Petite 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 script Petite 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 script Petite 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 script Petite 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 script Petite 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 script Avancer 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 script Les é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 petite animation comme suit :

Maha Charfeddine Hamza

62


Actions script Les é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 script Les é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 script Les é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 script Les é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 script Les é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 script Pré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 script Pré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 script Pré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 script Pré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 script Les é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 script Les é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 script Les é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 script Les é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 script Les é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 script Les é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 script Les é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 script Les événements de clip (souris) onClipEvent(mouseDown) • Comme on pourrait s'y attendre, cet événement s'exécute à l'instant où l'utilisateur appuie sur le bouton de sa souris. • A l'inverse des événements de boutons, l'utilisateur peut cliquer n'importe ou dans l'animation, du moment que c'est lorsque l'animation est apparente (donc entre load et 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 se passe • Si vous cliquez dans l'animation quand le clip est présent, que ce soit sur le clip ou ailleurs, mouseDown apparait dans la liste autrant de fois que vous cliquez • Si vous cliquez sur le bouton Effacer, mouseDown apparait dans la liste, mais, un millième de seconde plus tard, la liste est effacée, ce qui fait que vous n'aurez pas le temps de voir le dernier affichage • Si vous cliquez très très vite plusieurs fois, vous pourrez faire apparaître plus de fois mouseDown qu'il n'y a d'images dans le clip (plus de 7 fois donc) Maha Charfeddine Hamza

83


Actions script Les é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 script Les événements de clip (souris) onClipEvent(mouseUp) •

• •

L'utilisation de mouseUp est la même que mouseDown, sauf que cette fois, c'est quand le bouton de la souris est relâché que cet événement est exécuté. Pour mieux comprendre, nous allons 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 seront FORCEMENT exécutés. Cliquez dans l'animation entre load et unload, et attendre avec la souris appuyée que unload apparaisse dans la liste, puis alors seulement relâcher. Là, il n'y aura pas de mouseUp. Maha Charfeddine Hamza

85


Actions script Les é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 script Les é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 script •

Les variables

Essayez d'écrire ce code dans une nouvelle animation, dans l'unique image-clé du seul calque existant puis testez : Truc = 44 trace (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 = 5 Machin = 6 Bidule = "HA HA HA" trace (Truc + Machin) trace(Truc + Machin + Bidule) trace(Bidule + Truc + Machin)

Le résultat est l'affichage de : 11 11HA HA HA HA HA HA56 Maha Charfeddine Hamza

88


Actions script Les 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 script Les 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 script •

Les 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 script • •

Les 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 script Les 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 script Les 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


Exercice I

Maha Charfeddine Hamza

95


Maha Charfeddine Hamza

96


Maha Charfeddine Hamza

97


Maha Charfeddine Hamza

98


Maha Charfeddine Hamza

99


Maha Charfeddine Hamza

100


Exercice II

Maha Charfeddine Hamza

101


Maha Charfeddine Hamza

102


Maha Charfeddine Hamza

103


Maha Charfeddine Hamza

104


Maha Charfeddine Hamza

105


Maha Charfeddine Hamza

106


flash partie4