Vous n'êtes pas connecté - 0 membre connecté
Tutoriaux
Les 10 derniers tutoriaux
Créer un logo...
Créer un logo rétro
Auteur : doss
Posté le 29 01 2010 à 11h32
Vu 97860 fois
Scanner comme...
Scanner comme les pros !
Auteur : Amo
Posté le 01 07 2009 à 19h07
Vu 26036 fois
Ultimate flas...
Ultimate flash button (AS2)
Auteur : Neoblue
Posté le 06 06 2009 à 19h46
Vu 16877 fois
Boîte à photo...
Boîte à photos pliable
Auteur : Neoblue
Posté le 10 01 2009 à 19h53
Vu 22238 fois
Peinture à pa...
Peinture à partir d'une photo
Auteur : Nounet
Posté le 30 12 2008 à 15h01
Vu 13201 fois
Portrait Pop-...
Portrait Pop-Art
Auteur : Nounet
Posté le 23 09 2008 à 01h43
Vu 28472 fois
Une jaquette ...
Une jaquette de CD "Grunge"
Auteur : Neovea
Posté le 05 04 2008 à 18h45
Vu 32202 fois
Trainées lumi...
Trainées lumineuses TOS (technique orientée souris)
Auteur : Neoblue
Posté le 31 01 2008 à 08h47
Vu 38948 fois
Dégradé coule...
Dégradé couleur -> transparent
Auteur : PiKa
Posté le 27 01 2008 à 00h37
Vu 43062 fois
Formulaire co...
Formulaire contact
Auteur : Geoffroy
Posté le 03 05 2007 à 00h28
Vu 47341 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