Interaction entre Flash
et ActionScript
Où placer le code ?
* Un document Flash n'est pas un fichier texte
* Il faut utiliser l'interface pour placer du code
* Possibilité d'associer du code à une image clé d'un symbole
* Sélectionner une image clé du scénario
* Bouton droit ? Actions
* Attention: code associé au symbole
* Toutes les instances bénéficient du code
* this = une occurrence du symbole sélectionné
* Possibilité de créer une classe
* Créer un fichier ActionScript avec le même nom que la classe
* Extension ".as", mais fichier texte
* Possibilité d'associer une classe à un symbole
* Association d'un visuel et d'un code
Principe des événements
* Quelque chose se produit ==> "événement"
* Evénement toujours rattaché à un objet: le "sujet"
* Possibilité d'associer une action à un événement
* Un événement se produit ==> exécution d'une méthode
* La méthode est appelée "écouteur" ("listener" en anglais)
* L'écouteur reçoit des renseignements sur l'événement
* Association d'un écouteur à un événement
* sujet.addEventListener(événement,écouteur);
Gérer un événement dans un symbole
* Exemple: capter le clic de la souris sur un clip
* Clic sur un carré ==> changement de position
* Code placé sur la 1ère image du clip
* L'événement: MouseEvent.CLICK
* L'écouteur: une méthode recevant l'événement
function bouger(e:MouseEvent) {
this.x = Math.random()*300;
this.y = Math.random()*300;
}
* Association de l'événement à l'écouteur
* this.addEventListener(MouseEvent.CLICK,this.bouger);
Evénement au niveau de l'application
* Un clip ne peut capter que les événements qui le concerne
* c.addEventListener(MouseEvent.MOUSE_MOVE,...);
* Le mouvement de la souris est détecté uniquement s'il survient sur c
* Un événement peut être capté au niveau de l'application
* "stage" est un attribut qui représente l'application
* Accessible à partir de n'importe quel clip: clip.stage
* stage.addEventListener(MouseEvent.MOUSE_MOVE,...);
* Le mouvement de la souris est détecté n'importe où dans l'application
* Exemple: savoir qui est touché par un clic de souris
function toucher(e:MouseEvent) {
if (carre1.hitTestPoint(this.mouseX,this.mouseY))
{ trace("Carré 1 touché"); }
else if (carre2.hitTestPoint(this.mouseX,this.mouseY))
{ trace("Carré 2 touché"); }
}
stage.addEventListener(MouseEvent.CLICK,this.toucher);
Associer une classe à un symbole
* Préciser le nom de la classe associée au symbole
* Propriétés ? Exporter pour ActionScript
* Ecrire la classe dans un fichier ActionScript
* Fichier avec le même nom que la classe
* Hérite de la classe du symbole
* "MovieClip" pour un clip
* package nom_package {
import flash.display.*;
public class nom_classe extends MovieClip {
...
}
}
Gérer un événement dans une classe
* Création d'une classe "Carre" associée au symbole "Carre"
import flash.events.*;
public class Carre extends MovieClip {
public function Carre() { ... }
public function bouger(e:MouseEvent) { ... }
}
* L'écouteur est une méthode de la classe
* public function bouger(e:MouseEvent) {
this.x = Math.random()*300;
this.y = Math.random()*300;
}
* L'association événement / écouteur établie dans le constructeur
* public function Carre()
{ this.addEventListener(MouseEvent.CLICK,this.bouger); }
* L'association peut aussi être établie sur la scène
* carre1.addEventListener(MouseEvent.CLICK,carre1.bouger);
* Mais dans ce cas, seul "carre1" est concerné
Evénements souris
* Principaux événements
* MouseEvent.CLICK: clic de souris sur le composant
* MouseEvent.MOUSE_DOWN: bouton souris enfoncé sur le composant
* MouseEvent.MOUSE_UP: bouton souris relâché sur le composant
* MouseEvent.MOUSE_MOVE: déplacement souris sur le composant
* MouseEvent.MOUSE_OVER: souris arrive sur le composant
* MouseEvent.MOUSE_OUT: souris sort du composant
* Connaître les coordonnées de la souris
* Coordonnées dans le repère d'un clip
* var x = clip.mouseX;
var y = clip.mouseY;
* Coordonnées dans le repère du parent d'un clip
* var x = clip.parent.mouseX;
var y = clip.parent.mouseY;
* Coordonnées dans le repère de l'application
* var x = stage.mouseX;
var y = stage.mouseY;
Exemple: "drag and drop" (1/2)
* Détecter l'appui d'un bouton sur le clip
* Passage en mode déplacement
* clip.addEventListener(MouseEvent.MOUSE_DOWN,
clip.coller);
* Détecter le relâchement d'un bouton sur le clip
* Arrêt du mode déplacement
* clip.addEventListener(MouseEvent.MOUSE_UP,
clip.decoller);
* Détecter le déplacement de la souris dans l'application
* Si mode déplacement ==> déplacement du clip
* stage.addEventListener(MouseEvent.MOUSE_MOVE,
clip.bouger);
Exemple: "drag and drop" (2/2)
* Code de la classe du clip à déplacer
public class Carre extends MovieClip {
public var bouge : Boolean
public function Carre() {
this.bouge = false;
this.addEventListener(MouseEvent.MOUSE_DOWN,this.coller);
this.addEventListener(MouseEvent.MOUSE_UP,this.decoller);
stage.addEventListener(MouseEvent.MOUSE_MOVE,this.bouger);
}
public function coller(e:MouseEvent) { this.bouge = true; }
public function decoller(e:MouseEvent) { this.bouge = false; }
public function bouger(e:MouseEvent) {
if (this.bouge) {
this.x = this.parent.mouseX;
this.y = this.parent.mouseY;
}
}
}
Evénements clavier
* Principaux événements
* KeyboardEvent.KEY_DOWN: touche enfoncée
* KeyboardEvent.KEY_UP: touche relâchée
* Par défaut, détection au niveau de l'application
function evt_clavier(e:KeyboardEvent) {
trace("Code touche: " + e.keyCode);
trace("Code ASCII: " + e.charCode);
}
stage.addEventListener(KeyboardEvent.KEY_DOWN,
this.evt_clavier);
* keyCode = code de la touche
* Pas de problème de caractères spéciaux ou de casse
* charCode = code ASCII du caractère associé à la touche
* Détection au niveau d'un clip
* Pour recevoir l'événement, le clip doit avoir le focus
* stage.focus = clip;
Evénements d'animation
* Event.ENTER_FRAME
* Déclenché à chaque affichage d'une image du scénario
* Si l'animation est arrêtée, même image rechargée en boucle
* Exécuté à la fréquence de rafraîchissement
* Exemple
function evt_image(e:Event)
{ trace("Image no" + this.currentFrame); }
this.addEventListener(Event.ENTER_FRAME,
this.evt_image);
Créer un clip à partir d'un symbole (1/2)
* Un symbole doit avoir un identifiant pour être utilisé avec AS
* Propriétés ? Exporter pour ActionScript
* Création d'une occurrence à partir d'un symbole
* var clip : nom_symbole = new nom_symbole();
* Placement de l'occurrence dans une scène
* scène.addChild(clip);
* Suppression d'un clip
* scène.removeChild(clip);
* clip.parent.removeChild(clip);
* Exemple: un bouton sur la scène
* Clic sur le bouton ==> affichage d'un cercle
* Clic sur un cercle ==> disparition du cercle
* Un symbole "Cercle" a été défini
Créer un clip à partir d'un symbole (2/2)
* Code sur la scène
function creerCercle(e:MouseEvent) {
var cercle : Cercle = new Cercle();
cercle.x = Math.random()*300;
cercle.y = Math.random()*300;
this.addChild(cercle);
}
bouton.addEventListener(MouseEvent.MOUSE_DOWN,this.creerCercle);
* Classe "Cercle"
public class Cercle extends MovieClip {
public function Cercle() {
this.addEventListener(MouseEvent.CLICK,this.detruire);
}

public function detruire(e:MouseEvent) {
this.parent.removeChild(this);
}
}