32
Créer un bouton grossissant à son survol en utilisant Flash
Nous allons créer un bouton qui, au survol de la souris, grossira et lorsque la souris quittera celui-ci, il rétrécira. Pour cela, nous avons besoin d’un bouton (simple ou complexe) et de quelques lignes d’action script (codes).
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.
Téléchargement des fichiers sources liés à ce tutorial
Veuillez vous connecter pour télécharger les fichiers sources
Article publié par thomeuxe
Vous aimez cet article? Partagez le !
WebDesigner, développeur et Webmestre. J’ai découvert le logiciel Flash en 2008 et j’ai rapidement compris les innombrables possibilités que nous offrait le logiciel. Aujourd’hui, je n’utilise plus énormement Flash mais je conçois des sites Internet. Vous pouvez voir toutes mes créations dans mon PORTFOLIO.
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 26 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
2 mai 2009 19:13, par Naruto-le-hokage
Wow wonka super tuto !! comme a ton habitude ; vraiment super, juste une question, peut on le faire avec photoshop ; parceque j’hésitz a le télecharger, d’autant plus qu’il ya pas de nombreux tuto sur ce logiciel....
Répondre-
3 mai 2009 09:27, par thomeuxe
Tu peux le faire avec Photoshop ton bouton mais le problème, c’est que lors de l’importation du bouton dans flash (peut importe son format), il sera de mauvaise qualité. Mais bon tu peux toujours essayer de trouver une solution a ce problème.
Répondre -
19 mai 2009 10:15, par chronos58
Salut, étonnant que tu ne trouves pas bcp de tutos sur Photoshop, le net en est blindé, et le + souvent en français si tu n’es pas trop anglo. Tape « tutoriels photoshop » dans un moteur de recherche et tu vas voir la cascade ! Ensuite réside le choix. Bonne recherche.
Voir en ligne : Titre de votre site Internet
Répondre
-
-
2 mai 2009 20:51, par Asti
Ehh ce n’est pas Wonka mais thomeux qu’il faut féliciter pour ce tuto !! Bravo !!
Répondre -
3 mai 2009 11:19, par Clems
Merci pour ce tuto flash car il est vrai qu’il en manque un peu sur wks.fr
Répondre
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 -
4 mai 2009 13:13, par MØG
Hourra, un nouveau rédacteur Flash sur WKS \o/
Répondre
Jolie bouton, l’étape 1 aurait méritée plus de détail sur la création du bouton mais sinon rien à redire-
4 mai 2009 15:24, par Wonka
En ce moment nous avons de l’aide de la part de rédacteur motivé, et j’en suis bien ravi ... Et toi mog c’est quand le prochain tuto :p
Répondre -
13 mai 2009 12:54, par MØG
J’ai eu un problème avec ton fichier que l’on peux télécharger sur le site. Lors de l’ouverture avec Flash CS3, le message « Format de fichier inattendu » apparait.
Voir en ligne : MØG Folio
Répondre-
13 mai 2009 13:18, par Votre pseudonyme
je remet un fichier au plus vite.Il était au format CS4 desolé
Répondre
-
-
-
29 mai 2009 14:55, par pilou62
Oui moi aussi j’ai eu un soucis avec le fichier téléchargé... De plus en suivant le tuto je n’ai pas le même effet avec flash CS3.. :S Cependant, merci beaucoup de votre travail !!
Répondre -
14 juin 2009 11:02, par GB
Tuto qui m’interesse, mais le fla doit toujours être en cs4, ce qui est dommage.
Répondre -
10 juillet 2009 16:24, par K.Lyud
Salut :D Je possède adobe flash CS4 et quand il faut rentrer le code fourni je n’y arrive pas, on ne me propose pas de rentrer du texte. Comment dois-je faire ? merci d’avance :D
Répondre -
30 juillet 2009 17:53, par qirrip
Je n’y arrive vraiment pas... Je comprends pas... ça serait cool de mettre le bon fichier. merci
Répondre
-
31 juillet 2009 10:35, par Thomeuxe
As-tu bien créé le bon type de symbole (bouton ou clip) et bien créé les interpolations dans le bon symbole.
Je met le fichier au plus vite
A+ thomeuxe
Répondre -
5 août 2009 00:05, par Anjinho973
Bonjour, je suis une grande débutante sur flash..le tuto m’a paru assez simple et facile de comprendre..en plus je veux faire un truc qui a besoin d’agrandissement donc merci c’est cool d’avoir de l’aide. Mais j’ai un soucis... mon image clignote lors du test (Ctr+Entrée)...et dans les erreurs on me parle de problème de migration. Je suis sous CS4. J’ai trois erreurs 1120 qui commence au If(rewind==true...) Une 1180 sur get URL(site..) -> appel à la méthode. Puis Warnings 1190 et 1160 qui parle de problème de migration. Merci par avance d’un petit coup de pouce. à bientôt Rosy
Répondre-
1er décembre 2009 19:11, par Votre pseudonyme
Bonjour, j’ai eu le même problème que toi, et je l’ai résolu en modifiant la version d’Action Script et en prenant une version antérieure. En effet, Action Script 3 est saisi par défaut, et ne comprend pas le code.
Répondre
-
-
19 août 2009 12:26, par flasheur
slt...j’ai fais tt les etap mais ça march po...es que vous pouvez m’aide svp merci
Répondre-
26 août 2009 13:54, par thomeuxe
j’aimerais bien t’aider mais je peut pas voir ce que tu as fait alors connecte toi sur MSN et rentre mon adresse (thomas74940@hotmail.fr) et on règle ça ^^. a+
Répondre
-
-
18 février 2010 15:27, par Charly
Merci pour ce tuto, il est super (comme les autres d’ailleurs). Par contre j’aurais voulu savoir comment intégrer un lien (relatif) à ce bouton lors du clic. Merci d’avance. PS : je suis dans mes débuts aussi sur flash
Répondre -
20 février 2010 14:37, par jessy
j’ai un ptit soucis je ne sais pas si ça vient de moi ou quoi mais quand je modifie la fin du code AS
getURL(« http://www.wks.fr ») ;//aller à l’adresse du site wks.fr en gotoAndPlay(100) ; ca ne fonctionne pas, rien ne se passe que puis je faire.. ?
Répondre -
22 mars 2010 19:06, par gazul
Merci énormément ! Je galérais en cherchant le moyen de revenir en arrière sur une anim en roll-over puis en roll-out, ton tuto à tout clarifié : ça marche maintenant…
Répondre -
29 mars 2010 16:38, par aquila
salut ! merci pour le tuto ! mais j’y arrive pas :’( je comprends pas pourquoi, il ne grossit pas...
Répondre -
27 octobre 2010 09:42, par Antonin
Génial, merci pour le tuto ! J’ai juste eu à faire quelques modifications pour l’adapter en AS3.
Répondre-
7 décembre 2010 16:24, par G’Kar
Pour ceux, qui veulent réaliser ce bouton en AS3. Voilà le code.
Répondrestop();
var rewind:Boolean = true;
bouton_mc.addEventListener(MouseEvent.MOUSE_OVER, over);
bouton_mc.addEventListener(MouseEvent.MOUSE_OUT, out);
bouton_mc.addEventListener(Event.ENTER_FRAME, retour);
bouton_mc.addEventListener(MouseEvent.CLICK, clique);
function retour (e:Event)
{
if (rewind == true)
{
prevFrame();
}
}
function over (e:MouseEvent)
{
rewind = false;
play();
}
function out (e:MouseEvent)
{
rewind = true;
}
function clique (e:MouseEvent)
{
var requete:URLRequest = new URLRequest ("http://www.wks.fr/");
navigateToURL (requete, "_blank");
}
-
