Séance Flash 2 TD SI28 du 16/04/07 Nadel Ben Ghmiss Bruno Prémartin.

Présentation au sujet: "Séance Flash 2 TD SI28 du 16/04/07 Nadel Ben Ghmiss Bruno Prémartin."— Transcription de la présentation:

1 Séance Flash 2 TD SI28 du 16/04/07 Nadel Ben Ghmiss Bruno Prémartin

2 Interactivité, ActionScript Flash permet, à terme, de créer une interface (web, par exemple) « évoluée » mais également des jeux ! Il nous donne ainsi l’occasion d’apporter de l’interactivité. Qu’est-ce que l’ActionScript ? – C’est est un langage de programmation qui joue un rôle essentiel pour la dynamique de l’animation. A quoi sert l’ActionScript ? – Gérer des actions, des animations des objets (clips) et de la scène – Contrôler la tête de lecture (timeline) – Lire des sons ou des vidéos – Gérer les événements souris et clavier.

3 Plan Premiers pas avec l’ActionScript : – Où placer le code ActionScript? – Nommer ses occurrences Commencer à coder : – Gestionnaire d’événements – Hiérarchie des objets – Navigation – Déclaration des variables – Types de textes Faire des codes plus complexes : – Structure conditionnelle – Structure itérative (les boucles) – Principaux opérateurs – Paramètres d’un clip – Les sons

4 Où placer le code ActionScript ?

5 Sur l’occurrence d’un clip : onClipEvent (onEnterFrame) { ligne(s) d'instruction(s); } Sur l’occurrence d’un bouton : on(press) (on(release)) { ligne(s) d'instruction(s); } Sur une image clé : Une méthode fréquemment utilisée consiste à placer le code sur un calque prévu à cet effet. Il faut alors nommer les occurrences afin de pouvoir les appeler dans ce script.

6 Nommer ses occurrences ! On peut, après cela, appeler nos occurrences dans un script que l’on placera dans un calque à part : gauche.onPress=function(){ ligne(s) d’instruction(s); };

7 Gestionnaire d’événements Sur l’occurrence d’un clip : onClipEvent (onLoad) { Actions réalisées au simple chargement du clip; } onClipEvent (onEnterFrame) { Actions réalisées à chaque image du clip; } Sur l’occurrence d’un bouton : on (press){ Actions réalisées si le bouton est cliqué; } on (release){ Actions réalisées si le bouton est relâché; } on (rollOver){ Actions réalisées si le pointeur passe sur le bouton; }

8 Exemple1 : Manipulation d’un clip « Drag and Drop » – Créer 2 calques (1 pour le clip et 1 pour le code) – Créer un clip « disque » par exemple dans le calque clip – Saisir le script suivant dans le calque code : disque.onPress=function(){ disque.startDrag(); } disque.onRelease=function(){ stopDrag(); } Scripts équivalents : disque.onPress=function(){ this.startDrag(); } disque.onRelease=function(){ stopDrag(); } disque.onPress=function(){ startDrag("disque"); } disque.onRelease=function(){ stopDrag(); }

9 Hiérarchie des objets _root clip1clip3clip2 clip21clip31 >scène principale >clips imbriqués dans la scène >clips imbriqués dans d’autres clips

10 Hiérarchie des objets On peut désigner les objets selon leur chemin relatif ou absolu : _root.clip1._x désignera l’abscisse du clip1, peu importe où se trouve le code. Il s’agit d’un chemin absolu. this._x désignera l’abscisse de l’objet dans lequel le code est écrit. C’est donc un chemin relatif. _parent._x désignera l’abscisse de l’objet parent à l’objet dans lequel le code est écrit. C’est donc un chemin relatif. Exemple : dans le schéma précédent, _parent._x écrit dans le code du clip31 désignera l’abscisse du clip3 !

11 Navigation Se déplacer dans la timeline – play(); jouer la séquence – stop(); stopper la séquence – gotoAndPlay (x); aller à l’image x et jouer la suite – gotoAndStop (x); aller à l’image x et stopper la séquence Se déplacer entre les séquences gotoAndPlay (s,x); Aller à la frame x de la séquence s et jouer la suite.

12 Exemple 2 Gérer la tête de lecture : – Créer dans un calque une interpolation de mouvement (sur 40 frames) sur un disque par exemple. – Créer un calque « bouton » et créer un symbole bouton « jouer » dont vous nommerez l’occurrence. – Créer un calque « code » dans lequel vous placerez successivement ces scripts : stop(); jouer.onPress=function(){ play(); } stop(); jouer.onPress=function(){ gotoAndPlay(20); } stop(); jouer.onPress=function(){ gotoAndPlay(20); } jb.onPress=function(){ gotoAndStop("jeanbaptist e",1); }

13 Déclaration des variables Variables locales : Déclarées dans une fonction par exemple var age=21; Variables globales : Déclarées pour toute l’application _global.age=21;

14 3 types de texte ! Texte statique Texte de saisie exemple : champ pour un formulaire Texte dynamique – il peut prendre plusieurs valeurs – Il peut être déplacé comme un générique par exemple Définir l’occurrence et la variable !

15 Exemple 3 Recopier un nom entré par un joueur – Créer un champ de texte de saisie (texte1), un champ de texte dynamique (texte2). – Nommer les occurrences et les variables (a et b). – Créer un bouton « ok ». – Saisir le code suivant dans un calque « code » : ok.onPress=function(){ b = a; } – Amélioration : texte1.onSetFocus=function(){ a=""; }

16 Structure conditionnelle if (condition à tester) { ligne(s) d’instruction(s); } else {ligne(s) d’instruction(s); } switch (variable) { case "valeur1delacondition " : // instructions; break; case "valeur2delacondition" : // instructions; break; case "valeur3delacondition" : // instructions; break; default : // instructions; break; }

17 Structure itérative (les boucles) for(i=0; i<x; i++){ ligne(s) d’instruction(s); } Effectue x fois les instructions while (i<x){ ligne(s) d’instruction(s); } Effectue les instructions tant que la condition est vraie.

18 Principaux opérateurs a++Incrémentation a-- Décrémentation a && bAND logique a || bOR logique 2 * 4Multiplication 6 / 2Division 2 < 3Inférieur à 3 <= 3Inférieur ou égal à a = 4Affectation (pour une variable ou dans une instruction) a == 4Égalité (teste l’égalité. On l’utilise pour if par exemple) 3 != AInégalité Autres opérateurs : http://wiki.media-box.net/documentation/flash/operateurs

19 Exemple 4 Section privée – Créer 2 calques (1 pour les objets et 1 pour le code). – Créer 2 zones de texte dans le calque objets, texte1 de saisie (variable « mdp ») et texte2 dynamique (variable « reponse »). – Créer un bouton ayant pour occurrence « ok ». – Placer à la frame 2 un message de bienvenue par exemple. – Saisir sur le calque code le script suivant : stop(); texte1.onSetFocus=function() { mdp=""; } ok.onPress=function() { if (mdp=="si28") { gotoAndStop(2); reponse=""; } else { reponse = "mot de passe erroné"; } }

20 Paramètres d’un clip Quelques paramètres : – MonClip._x; Permet de gérer la coordonnée x d'une occurrence de clip (en pixels) – MonClip._y; Permet de gérer la coordonnée y d'une occurrence de clip (en pixels) – MonClip._width; Renvoie la largeur d'une occurrence de clip (en pixels) – MonClip._height; Renvoie la hauteur d'une occurrence de clip (en pixels) – MonClip._xscale; Permet d’élargir l’occurrence d’un clip suivant la coordonnée x (en %) – MonClip._alpha; Permet de gérer l’opacité de l’occurrence d’un clip (en %) – MonClip._visible; Détermine si l'occurrence du clip est masquée ou visible (valeur booléenne : 0 ou 1) – MonClip._rotation; Permet de gérer le degré de rotation d'une occurrence de clip (-180° à +180°).

21 Exemple 5 Gérer la collision – Créer 2 calques (1 pour le code, 1 pour les objets). – Créer 2 disques dans le calque « objets » à la même hauteur. – Convertissez les en clip, d’occurrence « gauche » et « droite » – Créer un texte dynamique « Boom ! » d’occurrence boom. – Saisir le script suivant dans le calque « code » : stop(); _root.onEnterFrame=function(){ gauche._x++; droite._x--; if (gauche.hitTest(droite)) { delete _root.onEnterFrame; boom._visible=true; } else { boom._visible=false; } }

22 Les sons Pour exploiter un son, il faut tout d’abord créer une variable de type Sound: myson = new Sound(); Il faut ensuite associer notre nouveau son à un symbole de type son stocké dans la bibliothèque: myson.attachSound("son_de_la_bibliothèque"); (sans oublier de lier le son dans la bibliotheque a l’actionscript!!) Ou associer notre son à un fichier externe en spécifiant un chemin absolu (sur internet par exemple avec une URL): myson.loadSound(http://www.monsite.com/son.mp3); On peut enfin démarrer la lecture: myson.start(); >peut être utilisé avec un nombre différent de paramètres … Pour stopper la lecture: myson.stop();

23 Exemple 6 (1/2) Gérer la son – Créer 2 calques (1 pour le code « script », 1 pour les objets). – Créer 4 boutons dans le calque « objets » ayant pour occurrences : btnJouer, btnPause, btnArreter, btnRetour. – Importer un son dans la bibliothèque. (Par exemple à partir de : http://www.dinosoria.com/bruitages.htm)http://www.dinosoria.com/bruitages.htm – Clique droit sur le son, « liaison », cocher « exporter pour actionscript » et lui donner « JT » comme indicateur. – Saisir le code actionscript du prochain slide dans le calque « script ».

24 Exemple 6 (2/2) son = new Sound(); son.attachSound("JT"); son.stop(); tototime=0; btnJouer.onRelease = function() { if (tototime==0) { son.start(); } else { son.start(tototime); } startMusiquetime=getTimer(); tototime=0; }; btnArreter.onRelease = function() { son.stop(); tototime=o; }; btnPause.onRelease = function() { son.stop(); tototime=(getTimer()-startMusiquetime)/1000; }; btnRetour.onRelease = function() { son.stop(); son.start(); }; Copiez le code actionscript suivant dans le calque « script » :

25 Pour aller plus loin Découvrir d’autres applications concrètes pour flash : http://www.yazo.net http://www.zoneflash.net/ http://www.flash-france.com/