Flash MX – Séance 2 Interactions & ActionScript David Rapin Si28 P06

Avant de commencer Téléchargez la « boîte à outils » du TD Décompressez le fichier dans un dossier de votre disque Z: Mettez les.fla créés ci-après dans ce même dossier

Points abordés ActionScript : introduction Zones de texte Boutons Son Déplacement intra et inter animations Passage de variables Drag, Drag and Drop

ActionScript : généralités (1) Pour quoi faire ? –Définir le comportement d’objets –Modifier des objets –Se déplacer entre des images (frames), Scènes, Fichiers. SWF –Ecrire des fonctions faisant un peu de tout ça Comment ? –Langage Objet (basé sur Java) : classes, instances.. Où ? –Dans les images (frames) et les instances de symboles –Généralement, les symboles ne contiennent que le code définissant leur comportement, le reste est dans les images

ActionScript : généralités (2) La structure du document flash :

ActionScript : généralités (3) Noms des objets –Le nom d’une instance de symbole est visible dans ses propriétés ( ctrl + F3 ) Comment référencer les différents éléments –De manière absolue ( _root.obj3.objA ) –De manière relative a l’aide des mots-clés this ou _parent Exemple: un code de l’objet obj2 qui voudrait mettre l’opacité de l’objet objA à 0 Relatif: this._parent.obj3.objA._alpha = 0; Absolu: _root.obj3.objA._alpha = 0;

ActionScript : généralités (4) Variables –Variables globales : connues à tous les niveaux de l’application –Variables locales : connues seulement dans le contexte où elles ont été déclarées (objet, fonction) Déclaration –var maVarLocale = 1; –_global.maVarGlobale = 2; Remarque: le mot-clé var ne sert qu’à la déclaration

ActionScript : généralités (5) Instructions habituelles –if (a > b) { … } else { … } –switch (a) { case 1: …; break; } Définition de fonctions function mafonction(param1, param2) { … return valeur; }

ActionScript : généralités (6) Événements –La lecture du clip flash et les interactions des utilisateurs provoquent des évènements. –On peut les détecter pour effectuer des actions particulières lorsqu’ils ont lieu. Événement courants : – press, release, enterFrame, load Exemple de syntaxe : –Bouton: on(relase) { …; } –Frame: this.onEnterFrame = function() { …; }

Zones de texte scrollables (1) Créer une nouveau fichier flash (ctrl+S) Sauvegarder le ficher (ctrl + S) Sélectionner l’outil texte ( ou T ) Dessiner une zone de texte Modifier ses propriétés ( ctrl + F3 ) –Texte dynamique –Nom d’instance (lui donner une nom) –Champ multi ligne Ajuster la taille de la zone de texte

Zones de texte scrollables (2) Afficher la liste des composants ( F11 ) Glisser-déposer une élément Scrollbar sur le champ de texte (à droite) Dans la première Frame, écrire un programme ( F9 ) qui importe dynamiquement du texte dans le champ en s’inspirant du code fourni dans 1_LoadText.txt Tester l’animation

Symboles boutons (1) Pour quoi faire ? –Renvoyer vers une page Web ( getURL() ) –Déclancher un évènement (appeler une fonction, modifier des variables) Usage ? –Bouton d’un menu –Image réactive

Symboles boutons (2) Création d’un bouton –création d’un symbole (sélectionner, F8 ) –Une bouton est un symbole particulier Édition d’un bouton

Symboles boutons (3) : exemple A partir du fichier button.fla et des symboles disponibles dans sa librairie ( F11 ) créez : –1 bouton « rotation horaire » –1 bouton « rotation anti-horaire » –1 bouton « explosion »

Symboles boutons (4) : exemple Programmez le comportement de ces boutons en utilisant le code fourni dans les fichiers –2_BoutonRotation.txt –3_BoutonExplosion.txt –4_BoutonFleur.txt

Son (1) Toujours des fichiers MP3 3 méthode pour jouer du son : –Lire un fichier externe avec streaming –Lire un fichier externe sans streaming –Lire une fichier présent dans la librairie ( F11 ) Pour tous : var s = new Sound(); s.start([debut, [nombre_de_boucles]]); s.stop();

Son (2) Fichier externe (avec streaming) var s = new Sound(); // la lecture commence immédiatement s.loadSound("chemin/monfichier.mp3", true);

Son (3) Fichier externe (sans streaming) var s = new Sound(); // on défini l’évènement de fin de chargement s.onLoad(ok) { if (ok) { s.start(); } else { trace("erreur de chargement du son« ); } } // la lecture commencera quand le chargement sera fini s.loadSound("chemin/monfichier.mp3", false);

Son (4) Fichier présent dans la librairie ( F11 ) –Importer (fichier->importer->importer dans la librairie) –Donner un identifiant au son (clic droit sur le son, liens -> identifiant) var s = new Sound(); s.attachSound("monIdentifiant"); //lecture s.start();

Se déplacer entre animations 3 moyens de déplacement –Sur la ligne de temps (d’une Frame à l’autre) –Sur la ligne de temps d’une autre Scène –Dans un autre fichier.SWF Arrêter la lecture: stop(); Aller à (dans un même.SWF ): gotoAndPlay([scene],[frame]); Aller à (dans une autre.SWF ): _root.loadMovie("chemin/monfichier.swf");

Drag, Drag and Drop Permet de remplacer le pointeur par un clip ou de glisser-déposer des objets. Remplacer le pointeur par l’objet « anim » : Mouse.hide(); this.anim.startDrag(true); Glisser-déposer un symbole : (code à mettre dans l’occurrence du symbole) : on(press) { this.startDrag(false); } on(release) { this.stopDrag(); }