Introduction

Le modèle événementiel a beaucoup évolué entre l’ActionScript 1 et 3 voici plusieurs exemples de code dans ces différents langages, nous expliquerons par la suite quels sont les différences, les principes et pour finir juste pour notre culture G, je parlerai un peu du modèle événementiel en C# 3.

1. AS1 & AS2 :

1. Au tout départ de Flash en 1978 donc… à l’époque de « Born to be Alive(Patrick Hernandez) »
   
   
   

   , on écrivait des événements dit statiques, c’est à dire qu’on déposait le code suivant sur des occurences(exemplaires) boutons :

   ^?View Code ACTIONSCRIPT

   1 2 3 4

   on(release) { trace("waaaaa ça fonctionne"); }

   Puis avec l’arrivée de Flash MX, nous avons eu l’immense joie d’accueillir les événements dynamiques qui ont apporté avec eux la notion de modèle événementiel. Le code dans ce cas est positionné directement sur la première image de la scène. Les évènements dynamiques permettent donc :

• -à tout moment de modifier la façon dont réagit un objet à un évènement.

• -de contrôler le comportement de n’importe quel objet depuis le scénario principal, sans avoir à éditer ces objets ou à vous plonger dans une arborescence complexe. Tout le code peut donc se retrouver au même endroit, ce qui facilite grandement le déboguage, la maintenance, la mise-à-jour et le travail en équipe.

Pour faire réagir un objet à un évènement, il faudra définir une fonction dite « anonyme » à exécuter quand l’évènement en question sera diffusé, et affecter cette fonction à un gestionnaire d’évènement.

1
2
3
4
5
6
7
8

// le gestionnaire d'événement <strong>onMouseDown </strong>de <strong>monClip </strong>
// qui signifie "Souris Appuyée".
// est affecté (avec l'opérateur "=") d'une fonction anonyme
// on définit, entre les accolades de la fonction, les instructions
monClip.onMouseDown = function()
{
trace ("souris enfoncée!");
}

En ActionScript 1 et 2, nous n’avons pas réellement à faire  à un modèle événementiel car l’idée était à la base de simplifier le code pour les non-développeurs.

Mise en Application

Maintenant que nous venons de voir les bases, puisqu’un exemple s’avère toujours plus efficace que 10 pages de théorie, je vous propose d’étudier la réalisation d’une mini-application de dessin, qui illustre très bien cette notion d’évènements dynamiques.

Que se passe-t’il dans cette application en termes d’évènements?

Quand la souris est appuyée -> Quand elle se déplace -> on dessine.
Quand la souris est relâchée -> Quand elle se déplace -> on ne fait rien.

Autrement dit, quand on relâche le bouton de la souris, il faut arrêter de dessiner, c’est-à-dire annuler l’action qui a lieu sur le déplacement de la souris.
On a bien une notion d’évènement dynamique, puisque pour un même évènement (Souris Déplacée) on va avoir 2 comportements bien différents (dessiner ou ne rien faire).

Comment cela se traduit en ActionScript 1 ou 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// 1. Mise en place
// Création d'un clip "toile_mc" sur la scène
 
this.createEmptyMovieClip("toile_mc",1);
// 2. Événements de la scène:
// ------------------------
// Quand on appuie sur la souris, il faut:
// * déplacer la mine du crayon virtuel sur toile_mc là où se trouve la souris (moveTo())
// * définir le style du trait (épaisseur,couleur,alpha) (lineStyle())
// * définir une fonction pour dessiner quand on déplace la souris (onMouseMove    = fonction) 
 
this.onMouseDown = function()
{
//on déplace la mine du crayon virtuel
toile_mc.moveTo(this._xmouse,this._ymouse);
//on demande tracer une ligne vers les nouvelles coordonées
toile_mc.lineStyle(5,0xFF3333,100);
 
this.onMouseMove = function()
{
toile_mc.lineTo(this._xmouse,this._ymouse);
updateAfterEvent();
//la fonction globale updateAfterEvent() permet de raffraichir le visuel
//sans tenir compte de la cadence, util uniquement pour setInterval et onMouseMove
}
}
 
// Quand on relâche la souris, il faut:
// annuler la fonction anonyme qui s'exécutait quand la souris était déplacée:
this.onMouseUp = function()
{
//this.onMouseMove = null;
//une meilleure écriture serait la suivante avec le mot clef delete
delete this.onMouseMove;
}

2. Principe du modèle événementiel AS3, javascript ou C#

Un nouveau modèle événementiel voit le jour en AS3, cependant ce modèle existait depuis longtemps en javascript, c# ou dans d’autres langages, Flash n’invente rien mais adapte les modèles existants à un contexte orienté visuel ce qui n’est pas plus mal.

Dans un modèle évenementiel évolué il existe 3 composants :

-le diffuseur de l’événement
-l’écouteur de l’événement
-l’événement lui-même

Voici un exemple de la vie courante qui illustre ce modèle :

* Vous décidez de prendre un abonnement à un site Web d’annonces immobilières, le fait de vous abonner fait de vous un écouteur.

* En effet, à chaque nouvelle annonce, vous recevrez un email d’information concernant le bien immobilier. Vous écoutez le site Web qui agit en tant que diffuseur de l’évènement « nouvelle annonce mise en ligne ».

* A chaque nouvelle annonce reçue vous décidez ou non de visiter le bien. Ce qui correspond bien à une action en retour.

* Souvent oubliée cette phase est pourtant très importante : lorsque vous avez trouvé le bien le plus approprié vous décidez d’arrêter la souscription à ce site, dès lors vous ne recevrez plus d’email. Autrement dit vous supprimez l’écouteur
Le grand avantage de ce modèle est que nous pouvons souscrire plusieurs écouteurs, en effet dans la vie de tous les jours des millions d’événements « nouvelle annonce immobilière » sont diffusés par des milliers d’agences et ces événements sont écoutés par des millions de particuliers. Chaque particulier peut réagir différemment lorsqu’une annonce est diffusée.

3. L’écriture en AS3

Dès lors voici comment s’écrit l’écoute du clique d’un bouton:

1
2
3
4
5
6
7

diffuseur.addEventListener("evenement", ecouteur);
monBouton.addEventListener ( "click", clicBouton );
function clicBouton ( pEvt:MouseEvent ):void
{
// affiche : événement diffusé
trace("événement diffusé");
};

Cependant la chaine de caractère « click » n’est pas très ergonomique pour un développeur, car il faudra retenir la casse de l’événement par coeur, nous utiliserons plutôt la classe MouseEvent qui stocke des propriétés statiques. Grâce à L’IntelliSense, plus besoin de se souvenir par coeur des noms des événements :

1
2
3
4
5
6
7
8

diffuseur.addEventListener("evenement", ecouteur);
monBouton.addEventListener ( MouseEvent.CLICK, clicBouton );
function clicBouton ( pEvt:MouseEvent ):void
{
// affiche : événement diffusé
trace("événement diffusé");
}
;

4. L’écriture en C#

je ne m’étendrai pas, mais sachez qu’en C# on récupère une référence faible du diffuseur via le sender, et que les propriétés propres à l’événement sont contenues sans RoutedEventArgs. Pour récupérer le container d’un objet diffuseur, il faudra cibler la propriété OriginalSource de l’objet événement reçu. Pour finir,  il suffit juste d’admirer la plus belle écriture qui soit, pour les amateurs, créer des événements personnalisés en c# est tellement simple que l’AS3 passe pour du lingo :

1
2
3
4
5
6
7
8
9

bouton1.Click += clicBouton;
//ou encore
bouton2.Click += new RoutedEventArgs(clicBouton); 
 
void clicBouton ( object sender, RoutedEventArgs e)
{
// affiche : événement diffusé
System.Diagnostics.Debug.WriteLine("nom du diffuseur :: {0}",(sender as Button).name);
};

Pour finir, je vous conseille vivement la lecture des chapitres liés au modèle événementiel du livre de Thibault Imbert que vous trouverez ici.