WebNioub

Dans cette troisième partie, nous allons voir comment améliorer le comportement de notre bouton flash.

Nous allons nous servir du bouton flash développé dans l’étape deux.

Nous pouvons remarquer que lorsqu’on survole notre bouton et que nous retirons tout de suite la souris de dessus, l’animation de sortie de survol se déclenche tout de suite sans laisser l’animation de survol se finir. La transition étant tronquée, l’effet d’animation perd en fluidité.

Le but de ce tutoriel va être de faire que l’animation de survol se finisse avant d’enchaîner avec l’animation de sortie de survol si la souris n’est plus présente sur le bouton flash.

Pour se faire, on va utiliser une variable drapeau, flag en anglais.

Le but de cette variable va être de changer d’état selon l’état du bouton, et en testant sa valeur, on pourra déterminer quelles seront les instructions à suivre.
Par exemple, imaginons un interrupteur. Lorsque l’on appuie dessus, la lumière s’allume et si on appuie de nouveau, la lumière s’éteint.

On peut imaginer qu’une variable nommée flag, de type boolean (false/true), définisse l’état de l’interrupteur. Lorsque la lumière est allumée, la variable flag a comme valeur true, lorsque la lumière est éteinte, sa valeur passe sur false.

On peut traduire ça de cette façon :

• je définie ma variable flag par défaut sur false : la lumière est par défaut éteinte
• si j’appuie sur le bouton, la variable flag prend comme valeur true et la lumière s’allume
• si j’appuie de nouveau sur le bouton, la variable flag prend comme valeur false et la lumière s’éteint

Traduit en code ça donne :

var flag:Boolean = false;
bt_interrupteur.onRelease = function():Void{
if(flag){
// la lumière s'éteind
flag = false;
}else{
// la lumière s'allume
flag = true;
}
};

Dans notre cas, il s’agit d’adapter ce principe aux évènements onRollOver et onRollOut.

Une variable drapeau va servir à déterminer si la souris est sortie de dessus du bouton pendant l’animation de survol du bouton flash.

Mais afin de mettre à jour notre flag, il faut déterminer si nous sommes en train d’afficher l’animation de survol ou celle de sortie de survol. En effet, pour que le gestionnaire de sortie de survol puisse ne pas se déclencher lorsqu’il est appelé pendant l’animation de survol MAIS qu’il se lance lorsque cette animation est finie, il faut créer une seconde variable drapeau qui testera si l’animation de survol est en cours ou pas.

Traduit en code :

// référence au bouton
var bouton:MovieClip = this.bt_exemple;
// détermine si on est sorti du survol du bouton pendant l'animation de survol
bouton.sortie = false;
// détermine si une animation de survol est en cours
bouton.anim = false;
// gestion du survol
bouton.onRollOver = function():Void {
// lance l'animation de survol
this.gotoAndPlay("ON");
// réinitialise la variable drapeau
this.sortie = false;
// déclare l'animation de survol en cours
this.anim = true;
};
// gestion de la sortie du survol
bouton.onRollOut = function():Void {
// si la souris n'est pas sortie du bouton pendant l'animation de survol ET que l'animation de survol n'est plus en cours
if ((!this.sortie) && (!this.anim)) {
// lance l'animation de sortie de survol
this.gotoAndPlay("OFF");
} else if (this.anim) {
// si l'animation de survol est en cours, on déclare que l'animation de survol doit directement enchaîner avec celle de sortie de survol
this.sortie = true;
}
};
// gestion du clic (déclenchement au relâché)
bouton.onRelease = function():Void {
// ouvre dans une nouvelle page le lien renseigné
getURL("index.htm", "_self");
};

Et voilà le résultat !