Aller au menu - Aller au contenu

Icône Les Evénements

Par Avatar SuprazZz
Mise à jour : 08/07/2010
4 613 visites depuis 7 jours, dont 88 sur ce chapitre classé 39/786
Dans tout ce qu'on a vu jusque maintenant, vous ne trouverez aucun moyen d'ajouter de l'interactivité à votre animation.
C'est normal, c'est grâce aux événements que nous allons donner la possibilité à l'utilisateur d'interagir avec l'application.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Vous avez dit "événement" ?

Les événements sont des actions, tel un clic de souris de l'utilisateur ou la pression d'une touche du clavier, qui se produisent dans votre animation.
Quand l'utilisateur fera telle ou telle action, l'événement correspondant sera appelé et le code associé sera exécuté.

Dans ce chapitre je vais uniquement traiter des événements spécifiques au movieclips.
Pourquoi seulement ceux-là ? Parce que ces événements sont commun à de nombreuses classes d'objets dans Flash.
Pour des raisons de commodité, ce chapitre ne traitera que des événements courants qu'on utilisera lors du fil rouge de fin de chapitre.

Nous verrons dans les prochains chapitres des événements plus "poussés" utilisés par exemple dans la gestion des requêtes pour le transfert de variables entre Flash et un serveur.
De même nous ne verrons pas les événements en rapport avec la gestion des touches du clavier, ces derniers ne nous serviront en effet à rien pour l'instant. Nous les retrouverons plus tard dans ce chapitre pour l'élaboration d'un mini-jeu. :p

Voici la structure commune à tous les événements pour les Clips.

Version longue :
Code : Actionscript
1
2
3
4
mafonction = function () {
     trace ("événement appelé");
}
monclip.monevenement = mafonction;


Version semi-longue :D :
Code : Actionscript
1
2
3
4
function mafonction() {
     trace ("événement appelé");
}
monclip.monevenement = mafonction;


Version courte :
Code : Actionscript
1
2
3
monclip.monevenement = function () {
     trace ("événement appelé");
}



A l'intérieur de l'événement, c'est comme si on écrivait le code dans le clip concerné.
C'est assez déroutant au début, mais il faut comprendre que l'événement appartient au clip.
Donc dans le bloc d'instructions à l'intérieur d'un événement appartenant à monclip, si on veut accéder à une propriété de monclip, il faudra écrire : this._propriete et non pas monclip.propriete. Car dans ce dernier cas, Flash chercherait le clip : monclip.monclip qui n'existe pas.

Vous remarquerez au long de ce chapitre que tous les noms d'événements commencent par "on" (qui pourrait se traduire approximativement par "lorsque").
C'est un bon moyen de les repérer dans l'aide de Flash.

Pour faciliter la compréhension, j'ai décidé de séparer en deux groupes les événements liés à la souris. Cela dit, ce regroupement est fait de façon arbitraire et personnelle. Ne parlez jamais à un Flasheur d'événements souris localisés et d'événements souris globaux. Il comprendra peut-être, mais ce n'est pas le vocabulaire "officiel".
Retour en haut

Evénements souris localisés

Commençons par les événements qui découlent de l'utilisation localisée de la souris.
C'est-à-dire les événements qui concernent les relations entre un clip (ou bouton) particulier et la souris.
Le clip associé à ces événements agira comme un bouton, et lorsque l'utilisateur passera la souris dessus, le curseur se transformera en petite main :p .

Nous ne verrons que les plus utiles :
  • 1. onPress
  • 2. onRelease
  • 3. onReleaseOutside
  • 4. onRollOver
  • 5. onRollOut

1. onPress



Cet événement se déclenche lors du clic de la souris sur le clip.

L'action se déclenche dès que le bouton gauche de la souris est baissé.

Voilà la structure du code :
Code : Actionscript
1
2
3
monclip.onPress = function () {
     trace ("Vous avez cliqué sur 'monclip' ");
}


2. onRelease



Plus courant que onPress, voici onRelease.
onRelease se déclenche lorsque que l'on relâche le bouton de la souris sur un clip. On peut le considérer comme l'inverse de onPress.
Il est préférable de l'utiliser, en effet lorsqu'un utilisateur clique sur un bouton, il faut lui laisser la possibilité d'annuler son choix, tout simplement en gardant le bouton appuyé et en relâchant ailleurs. D'ailleurs, vous remarquerez peut-être que l'immense majorité des boutons que vous utilisez ne s'activent pas lorsque vous cliquez dessus, mais quand vous relâchez le clic. ;)

Code : Actionscript
1
2
3
monclip.onRelease = function () {
     trace ("Vous avez relâché le bouton de la souris sur le clip");
}


3. onReleaseOutside



Même chose que onRelease, mais n'est appelé que si le bouton de la souris est enfoncé sur le clip et relâché en dehors du clip.
C'est un événement peu utilisé.

4. onRollOver



Très utile celui là, il est appelé lors du passage de la souris sur le clip.
Il permet de changer l'aspect du clip quand on passe la souris dessus, par exemple ici :

Code : Actionscript
1
2
3
monclip.onRollOver = function () {
     this._alpha=50; // Lors du passage de la souris, le clip se retrouve à moitié transparent
}


Vous remarquerez en testant cet exemple, qu'en sortant la souris du clip, ce dernier reste à moitié transparent... D'où l'utilité de l'événement suivant.

5. onRollOut



C'est l'inverse, cet événement se déclenche quand la souris sort du clip. Donc, pour compléter le code précédent, il faudrait écrire :

Code : Actionscript
1
2
3
4
5
6
monclip.onRollOver = function () {
    this._alpha=50; // Lors du passage de la souris, le clip se retrouve à moitié transparent
}
monclip.onRollOut = function () {
    this._alpha=100; // Lors de la sortie de la souris, on remet le clip opaque
}


Voilà qui permet déjà un effet sympathique pour votre bouton.


Premier exemple avec les événements de souris localisés



Utilisons maintenant tout ce qu'on a vu jusque maintenant à propos des propriétés des Clips et des événements.
Reprenons le code précédent pour la transparence qui change au passage de la souris et, rajoutons-y un petit effet sans prétention quand on clique dessus avec la souris :

Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
monclip.onRollOver = function () {
    this._alpha=50;
}
monclip.onRollOut = function () {
    this._alpha=100;
}
monclip.onPress = function () {
    this._xscale=125;
    this._yscale=125;
    this._rotation = 10;
}



Mais il y a un problème : une fois cliqué, le clip reste dans la position fixée...

Il suffit d'utiliser l'événement onrelease :

Code : Actionscript
1
2
3
4
5
monclip.onRelease = function () {
    this._xscale=100;
    this._yscale=100;
    this._rotation = 0;
}


Mais là encore, il y a un problème. :D Si vous cliquez sur le clip, et que vous sortez du clip avant de relâcher, celui-là reste bloqué dans sa position "acrobatique".
Pour y remédier, il suffit de reprendre le code du onRelease et de l'adapter au onreleaseoutside. Comme ça, les deux cas seront couverts !
Hop, rajoutez ça à votre code :
Code : Actionscript
1
2
3
4
5
monclip.onReleaseOutside = function () {
    this._xscale=100;
    this._yscale=100;
    this._rotation = 0;
}


Et pour illustrer le tout : animation flash d'exemple.
Retour en haut

Evénements souris globaux

L'autre face de la lune. :D
Au nombre de 3, ces événements ne sont pas restreints au clip qui les porte, mais à toute la scène. Il n'y aura donc pas de petite main qui apparaîtra.
Nous allons voir :
  • 1. onmousedown
  • 2. onmouseup
  • 3. onmousemove

1. onMouseDown



Il s'agit de l'équivalent global de onpress. Où que vous cliquiez dans la scène, cet événement sera appelé.

Code : Actionscript
1
2
3
monclip.onMouseDown = function () {
     trace ("Bouton de la souris enfoncé");
}


Mais alors, quel est l'intérêt de le faire porter par un clip précis ? Et pas tout simplement le mettre pour _root ?

Aucun. :D Sauf peut-être pour la clarté du code quelques fois.
Taper cela revient exactement au même :
Code : Actionscript
1
2
3
_root.onMouseDown = function () {
     trace ("Bouton de la souris enfoncé");
}


Et si je fais porter cet événement à deux clips à la fois ?

Il suffit de tester :
Code : Actionscript
1
2
3
4
5
6
monclip.onMouseDown = function () {
     trace ("onMouseDown appartenant à monclip");
}
_root.onMouseDown = function () {
     trace ("onMouseDown appartenant à _root");
}


Et vous pourrez constater que la fenêtre de sortie affichera les deux. Les deux sont donc appelés. Évitez tout de même ce genre de code...

2. onMouseUp



onMouseUp est l'équivalent de onRelease. Il est exécuté lorsque le bouton de la souris est relâché.
Il n'existe pas d'équivalent à onReleaseOutside pour les événements globaux, dans la mesure où vous pouvez relâcher le bouton de la souris où vous voulez sur scène, ça sera toujours sur scène. Donc onRelease sera appelé.

3. onMouseMove



En voilà un très intéressant. :p
Il se déclenche dès que la souris est déplacée ! Même si la souris se déplace seulement de 1 pixel, l'événement sera exécuté ! Donc, de façon presque continue quand on bouge la souris.

Et là, on va pouvoir enfin utiliser un code que je vous avais montré dans les propriétés des clips et qui n'avait qu'une utilité limitée : le code permettant de faire tourner un clip sur lui même de façon à ce qu'il suive un clip.
Changez le clip en souris et vous avez un code qui fait tourner un clip en fonction de la souris.

A savoir : les coordonnées de la souris sur la scène sont données par _xmouse pour l'axe des abscisses et _ymouse pour l'axe des ordonnées.


Le code était :

Code : Actionscript
1
_root.monclip._rotation = Math.atan2(_root.cible._y-_root.monclip._y, _root.cible._x-_root.monclip._x)/(Math.PI/180);


Maintenant, remplaçons les coordonnées du clip cible par les coordonnées de la souris, ce qui nous donne (en supprimant les _root qui ne servent à rien puisqu'on sait qu'on est sur la scène principale) :

Code : Actionscript
1
monclip._rotation = Math.atan2(_ymouse-monclip._y, _xmouse-monclip._x)/(Math.PI/180);


Et maintenant mettons ce code dans un événement onMouseMove qui va être porté par _root :

Code : Actionscript
1
2
3
_root.onMouseMove = function() {
monclip._rotation = Math.atan2(_ymouse-monclip._y, _xmouse-monclip._x)/(Math.PI/180);
}


Et là, miracle, ça marche. :D

Maintenant, petit exercice de style (vous savez que je les aime bien :p ).
Je veux faire la même chose, mais que l'événement onMouseMove soit porté par le clip monclip.
Voyez-vous les changements que cela va induire ?
Si vous n'avez pas trouvé, regardez la réponse :

Secret (cliquez pour afficher)
Code : Actionscript
1
2
3
monclip.onMouseMove = function() {
this._rotation = Math.atan2(_root._ymouse-this._y, _root._xmouse-this._x)/(Math.PI/180);
}


Eh oui, puisque qu'on se place dans le clip monclip, on change de référentiel.
On remplace donc monclip par this, quant aux coordonnées de la souris, il est conseillé de préciser qu'il s'agit des coordonnées par rapport à la scène _root, même si cela reste facultatif. En effet, si on ne précise pas à qui appartient un objet, Flash va supposer qu'il appartient non pas au clip qui porte le code, mais au clip dans lequel on a écrit le code.

Et encore une fois pour votre plaisir : EXEMPLE FLASH.
Retour en haut

Evénements à tout faire !

Dans cette dernière partie je traiterai des deux événements à tout faire :D :
  • 1. onload
  • 2. onenterframe

1. onLoad



onLoad s'exécute dès que le clip est chargé. C'est-à-dire, de façon plus ou moins instantanée au démarrage.
Cela dit, j'utiliserai cet événement très rarement, car ces deux blocs de code reviennent au même :

Code : Actionscript
1
monclip.variable = "variable quelconque";

Code : Actionscript
1
2
3
monclip.onLoad = function() {
this.variable = "variable quelconque";
}


En effet, la variable sera initialisée au démarrage, que le code soit dans un onLoad ou pas...

En fait, onLoad sert principalement dans le cas où on place le code sur un script. Chose abominable que nous ne ferons jamais tout au fil de ce tuto, mais pour votre culture et compréhension de sources Flash de codeurs moins propres, je me devais de vous le montrer. ;)

2. onEnterFrame



Voilà un événement que nous utiliserons par contre très souvent. Surtout dans l'élaboration de jeux par exemple. :p
Cet événement se déclenche de façon constante et continue. :D Sa fréquence d'exécution correspond au nombre d'images par seconde de votre animation.

Plus vous avez un nombre d'images par seconde élevé, plus souvent sera appelé cet événement.

Exercice 1


Et pour illustrer mes propos, reprenons l'exemple précédent avec le clip qui tourne en suivant la souris.

Changeons le onMouseMove en onEnterFrame

Code : Actionscript
1
2
3
_root.onEnterFrame = function() {
monclip._rotation = Math.atan2(_ymouse-monclip._y, _xmouse-monclip._x)/(Math.PI/180);
}


Ce qui conduira exactement au même effet !
En effet, que vous bougiez la souris ou pas, le code sera effectué.

Exercice 2


Maintenant, petit exercice facile. Comment faire pour que le clip suive la souris, non pas en se tournant sur lui-même, mais en bougeant ? En clair comment faire pour que le clip ait les mêmes coordonnées que la souris, et cela de façon continue ? ;)

Trouvé ? Voilà la réponse :

Secret (cliquez pour afficher)
Code : Actionscript
1
2
3
4
monclip.onEnterFrame = function() {
        this._x = _root._xmouse;
        this._y = _root._ymouse;
}


Vous remarquerez qu'en utilisant l'événement onMouseMove on aurait eu exactement le même résultat !

Exercice 3


Maintenant, un peu de code qui ne nécessite pas la souris.
Faites-moi tourner un clip sur lui même de 1 degré à chaque image !

Hop, résultat ci-dessous :

Code : Actionscript
1
2
3
monclip.onEnterFrame = function() {
this._rotation ++;
}


Complexifions la chose. Je veux que la vitesse de rotation accélère à chaque fois que je clique sur le clip. :D
Aide : il va falloir utiliser une variable vitesse.

Correction :

Secret (cliquez pour afficher)
Code : Actionscript
1
2
3
4
5
6
7
var vitesse:Number = 1; // Déclaration de la variable vitesse
monclip.onEnterFrame = function() { // A chaque image
this._rotation += _root.vitesse; // On tourne de plus une fois la vitesse
}
monclip.onRelease = function() { // Quand on clique sur le clip
        _root.vitesse ++; // On augmente la vitesse de 1
}


Vous aviez trouvé ?... Pourtant c'était facile. :p

Et bien entendu, l'exemple pour illustrer le tout.
Retour en haut

Récapitulatif

ÉvénementAppelé si
onPress l'utilisateur appuie sur le bouton gauche de la souris sur le clip portant l'événement
onRelease l'utilisateur relâche le bouton gauche de la souris dans le clip en ayant précédemment cliqué sur le clip portant l'événement (toujours appelé après l'événement onPress)
onReleaseOutside l'utilisateur relâche le bouton gauche de la souris en dehors du clip en ayant précédemment cliqué sur le clip portant l'événement (toujours appelé après l'événement onPress)
onrollover l'utilisateur passe la souris sur le clip portant l'événement
onRollOut
 l'utilisateur sort la souris du clip portant l'événement (toujours appelé après l'événement onRollOver)
onMouseDown l'utilisateur appuie sur le bouton gauche de la souris n'importe où sur la scène
onMouseUp l'utilisateur relâche le bouton gauche de la souris n'importe où sur la scène (toujours appelé après l'événement onMouseDown)
onMouseMove l'utilisateur bouge la souris sur la scène
onLoad le clip est chargé (appelé une seule fois)
onEnterFrame appelé à chaque image (c'est à dire 12 par seconde pour une animation Flash normale)
Retour en haut

Q.C.M.

Allez on va commencer fort avec une imbrication d'événements. :D
Soit le clip monclip sur la scène :

Code : Actionscript
1
2
3
4
5
monclip.onPress = function() {
        monclip.onEnterFrame = function() {
                this._rotation ++;
        }
}


Que se passe-t-il d'après vous ? ;)
Soit un clip monclip sur la scène principale.
Que va faire ce code ?

Code : Actionscript
1
2
3
4
5
mafonction = function() {
        this._xscale ++;
        this._yscale --;
};
monclip.onEnterFrame = mafonction;
Et cela ?

Code : Autre
1
2
3
4

mafonction = function() {
        this._alpha --;
};
monclip.onEnterFrame = mafonction();
Et une petite dernière pour la route. :D
Soit un clip monclip sur la scène principale :

Code : Actionscript
1
2
3
4
5
6
_root.onLoad = function() {
        monclip.onMouseMove = function() {
                this._x = _xmouse;
                this._y = _ymouse;
        };
};


Que va faire ce code ? ;)

Statistiques de réponses au QCM

Retour en haut
Voilà un chapitre fort important que je vous conseille de relire souvent. :p

Si vous maîtrisez les propriétés des clips, les événements et la structure du langage comme les conditions et boucles, alors vous êtes déjà un champion. :D

Et parce que vous êtes champion, le prochain chapitre sera le dernier de cette partie et vous permettra de réaliser un beau logo pour le SDZ. ;)
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
12 commentaires pour "Les Evénements"
Note moyenne : 3.24 / 4 (137 votes)
Pseudo Commentaire
Hors ligne Belmont1 # Posté le 28/11/2009 à 11:40:42

Bon vu que j'ai du un p'tit peu chercher quand même pour arriver à refaire marcher les exemples en passant à AS3, voilà les codes pour le clip qui suit la souris et le clip qui tourne sur lui même (pour celui là, oubliez pas en créant le symbole de mettre l'alignement au centre pour qu'il tourne sur lui même)

Code : Actionscript
1
2
3
4
5
6
function test(event:Event) {
monclip.x=this.mouseX;
monclip.y=this.mouseY;
}

root.addEventListener(Event.ENTER_FRAME, test);


Code : Actionscript
1
2
3
4
5
6
7
monclip.x=stage.stageWidth/2;
monclip.y=stage.stageHeight/2;
function test(event:Event) {
monclip.rotation++;
}

root.addEventListener(Event.ENTER_FRAME, test);


Si vous voulez faire un mix, le clip qui suit la souris en tournant sur lui-même
Code : Actionscript
1
2
3
4
5
6
7
function test(event:Event) {
monclip.rotation++;
monclip.x=this.mouseX;
monclip.y=this.mouseY;
}

root.addEventListener(Event.ENTER_FRAME, test);
Hors ligne TaxiCeOuf # Posté le 16/04/2010 à 18:05:31

Pourquoi est-il écris parfois

monclip.onPress = function() {
monclip.onEnterFrame = function() {
this._rotation ++;
}
}

et d'autres fois

monclip.onPress = function() {
monclip.onEnterFrame = function() {
this._rotation ++;
};
};

???
Hors ligne RuRu # Posté le 18/05/2011 à 10:22:27
Avatar

 Un petit grand merci pour ce tuto, je devenais dingue
Hors ligne toto_toto69 # Posté le 13/03/2012 à 18:54:21

Avis : Très bon

A propos d'une utilisation ratée de Flash : Spiral Connect http://spiralconnect.univ-lyon1.fr/
Ce site est l'exemple typique de ce qu'il ne faut pas faire. Ca rame et c'est moche, l'Université Lyon1 a payé très cher pour un boulet inutilisable.
Hors ligne albert_albert69 # Posté le 26/03/2012 à 15:51:56

Avis : Très bon

Je ne sais pas si le lieu est approprié mais je confirme que c'est un site très moche

Voir tous les commentaires