Vous n'êtes pas connecté - 0 membre connecté
Tutoriaux
Flash
Ultimate flas...
Ultimate flash button (AS2)
Auteur : Neoblue
Posté le 06 06 2009 à 19h46
Vu 17140 fois
After + Flash...
After + Flash partie 2/2
Auteur : Neoblue
Posté le 21 07 2006 à 16h06
Vu 13979 fois
Détail du tutorial
Flash > Ultimate flash button (AS2)
Difficulté : facile
Tutorial en 5 étapes
Posté le 06 06 2009 à 19h46

Dans ce tuto nous allons voir comment utiliser un symbole de type movle-clip pour créer un bouton propre avec un bel effet de rollOver ET de rollOut avec un état cliqué une fois le bouton cliqué.

Exemple en ligne ici : bluegraph.com
Neoblue - Modérateur - www
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.

Commentaires
Nikel ce tuto pour les quiches en flash comme moi :p
Commentaire Posté le 07 06 2009 à 13h56
benzor - Administrateur - www
les mouvieclippe ya k'ça dvrai :p
Commentaire Posté le 02 07 2009 à 00h46
Neovea - Membre
Partenaires

Catégories
After Effects
1 Tutorial
Flash
2 Tutoriaux
Lightwave
1 Tutorial
Divers
1 Tutorial
Photoshop
15 Tutoriaux
Illustrator
4 Tutoriaux
Indesign
2 Tutoriaux
PHP
3 Tutoriaux
Blender
1 Tutorial
Mentions légales   -   Crédits   -   Nous contacter   -   © Benzor 2006