Créer un bouton grossissant à son survol en utilisant Flash
Voici un tutoriel Flash pour créer un effet de zoom sur un bouton.
Regardez ci-dessous l’effet que vous devriez obtenir à la fin de ce tutoriel ! Vous pouvez bien entendu l’appliquer sur tous types de boutons.
Etape 1 : Préparation
Créez votre bouton, de préférence avec Flash, car l’importation d’image externe réduit énormément la qualité de l’image. Pour cela, jouez avec les calques, la couleur, l’alpha …
Etape 2 : Création des symboles
Maintenant, sélectionnez le bouton puis faites Clic droit > convertir en symbole (raccourci : F8).
Sélectionnez comme type « bouton » (extrêmement important pour les actions avec la souris) et comme nom « bouton » (ce n’est pas important mais cela permet de mieux s’y retrouver dans la bibliothèque).Cliquez sur OK.
Re-sélectionnez ensuite votre symbole « bouton » et répétez cette action mais choisissez comme type « clip » et nommez le « mc_bouton ». Cela permet d’avoir un bouton (qui permettra donc d’utiliser des actions de souris) dans un clip (qui permettra de créer un changement à notre bouton).
Etape 3 : animation du bouton
Allez dans votre clip « mc_bouton ». Normalement, vous retrouvez ici une occurrence (un exemplaire) de votre bouton.
Créez aux alentours de l’image 5 une image clé (clic droit > insérer une image-clé). Ici, vous agrandirez votre bouton de la grandeur de votre choix et créerez une interpolation. (Vous pourrez adapter la longueur de votre animation à la fin). Vous avez maintenant l’animation du bouton lorsque l’on passera au dessus.
Etape 4 : création du code
1. Image 1
Si vous n’êtes pas déjà dans votre clip « mc_bouton », allez-y.
Dans ce clip, allez à l’image 1 et ouvrer la fenêtre des actions (fenêtre > action) (raccourci : F9). Vérifiez bien qu’en haut à gauche de la fenêtre action, soit marqué « ACTIONS – IMAGE ». Si tel n’est pas le cas, cliquez n’importe où dans la scène, sauf sur notre bouton.
Rentrez ensuite dans cette fenêtre le code suivant :
stop(); // arête l’animation à l’image 1
this.onEnterFrame = function(){
if(rewind == true){ // si “rewind” est actif ,
prevFrame(); // aller à l’image précédente
}
}
this.onRollOver = function(){ //lorsque la souris est au dessus du bouton,
rewind = false; // “rewind” n’est pas actif
play(); // on joue tout simplement l’animation
}
this.onRollOut = function(){ //lorsque la souris sors du bouton
rewind = true; //”rewind” est actif
}
this.onRelease = function(){ //lorsque l’on clic sur le bouton,
getURL("http://www.wks.fr");//aller à l’adresse du site wks.fr
}2. Image 5
puis le code :
stop();
Dans la fenêtre d’action de l’image 5 cette fois-ci.
Conclusion :
Voila, vous venez de réaliser un bouton qui grossira et rétrécira en fonction du positionnement de la souris. Si vous avez des questions sur la création de cette animation, n’hésitez pas à les poser.
INSCRIVEZ VOUS AU FLUX RSS WONKASTUDIO
|
Le bouton c’est un peu simple comme technique mais pour les dèbutants je pense que se doit être bien. Merci au nouveau rédacteur :p
