Création du bouton
Nous allons d'abord créer un symbole movie-clip, attention ne choisissez pas bouton !!
Animation
Maintenant nous allons animer l'effet de rollOver, qui sera également notre effet de rollOut joué à l'envers, ce qui permettra d'avoir un effet fluide au survol de la souris
Etat Cliqué
J'ai rajouté un calque Code (que je vais vous détailler)
sur ce calque code vous pouvez voir une étiquette "cliqued" qui indique mon état fixe du bouton une fois cliqué, pour montrer l'état activé.
Le code
Passons au code maintenant, sur la dernière image de ma timeline, se trouve un stop(); idem sur l'image 9 qui indique la fin de mon animation de rollOver.
ce qui nous intéresse se trouve donc sur l'image 1. Le principe est, au passage de la souris, lire la timeline, et au retrait de la souris du clip relire la timeline à l'envers, non pas depuis la fin de l'anim de rollOver, mais du moment précis ou j'enlève ma souris du bouton, pour ne pas avoir de coupure dans l'animation.
Je teste donc une variable pour savoir si le bouton à déjà été cliqué ou non, afin de ne pas rejouer les animations de rollOver et rollOut si le bouton est déjà activé.
Je vous livre le code donc, il est assez simple et légèrement commenté :
stop();
// initialise l'état du bouton
actif = false;
// "this" peut-être remplacépar un nom d'occurence si la zone de click est différente du clip.
this.onRelease = function() {
if (actif == false) {
gotoAndPlay("cliqued");
actif = true;
trace("actif = "+actif);
}
};
this.onRollOver = function() {
if (actif == false) {
delete (this.onEnterFrame);
play();
}
};
this.onRollOut = function() {
if (actif == false) {
this.onEnterFrame = function() {
if (_currentframe != 1) {
prevFrame();
} else {
delete (this.onEnterFrame);
}
};
}
};
et voilà
Vous devez maintenant avoir un bouton qui fonctionne parfaitement.
Si vous devez ajouter plusieurs bouton, je vous recommande de distinguer les variable "actif" sur le _root de votre fichier afin de savoir exactement quel bouton est cliqué, puis de désactiver le bouton et de lire sa timeline à l'envers quand on clique sur un autre bouton. Vous pourrez donc créer un sytème de navigation fluide.
