32
Créer un menu en Flash
Voici comment créer un menu en flash en reprenant, pour exemple, ces graphismes : http://www.wks.fr/Creer-un-menu-black-gloss-decoupe.html
J’aurai besoin de l’ensemble des images qui forment le menu : les extrémités simples, les boutons noirs et oranges. Ce n’est pas la meilleure façon de faire un menu sous Flash mais vous pourrez voir l’utilisation du symbole bouton ainsi qu’un bout de code Action-Script.
Etape 1 :
1. Je crée un nouveau document, et je lui donne une nouvelle dimension dans le panneau des propriétés ( je prends en compte la hauteur et la largeur de l’ensemble de mon menu), dans mon cas j’obtiens 473x70.
2. Puis j’ouvre la bibliothèque de mon document : Menu Fenêtre > Bibliothèque (ou raccourci clavier Ctrl +L)
3. Ainsi je peux importer l’ensemble des images qui forment mon menu dans ma bibliothèque : Menu Fichier > Importer > Importer dans la bibliothèque. Elles apparaissent dans le panneau bibliothèque.
4. J’ouvre un autre panneau qui sera utile : Menu fenêtre > Panneau de conception graphique > Aligner (raccourci clavier Ctrl +K) .
Etape 2 :
1. Dans le panneau bibliothèque, je choisis l’embout gauche de mon menu que je fais glisser - déplacer vers mon document. Grâce au panneau Aligner, je le positionne parfaitement en choisissant aligner les bords gauches et verticalement par rapport au centre. Je fais la même chose avec l’embout de droite que je fais glisser - déplacer vers mon document. Je le positionne parfaitement en choisissant aligner les bords droits et verticalement par rapport au centre.
2. Puis, je choisis l’image de mon 1er bouton noir que je fais glisser - déplacer vers mon document. Toujours grâce au panneau Aligner, je le positionne verticalement par rapport au centre ensuite je le déplace vers l’image de l’embout de gauche jusqu’à voir apparaître des pointillés verticalement et horizontalement, ainsi mon image est parfaitement positionnée.
3. Voila, je fais la même chose, pour l’ensemble de mes images des boutons noirs. Si j’ai bien dimensionné mon document, tout rentre et rien ne dépasse 
Etape 3 :
1. Avec l’outil de sélection (raccourci clavier : V), je sélectionne mon 1er bouton sur le document, puis je vais le convertir en symbole : Clic droit > convertir en symbole … (raccourci clavier F8)
2. La fenêtre convertir en symbole apparaît : je lui donne un nom (par exemple : accueil) et un comportement, dans notre cas c’est Bouton, puis je clique sur OK. Le symbole du bouton accueil fait son apparition dans le panneau bibliothèque.
Etape 4 :
1. Maintenant, je fais un double-clic sur mon symbole accueil. La TimeLine a légèrement changé. Dans la zone A, je peux voir les 4 états de mon bouton :
- Haut : La souris n’est pas sur le bouton
- Dessus : La souris est sur le bouton
- Abaissé : La souris clique sur le bouton
- Cliquable : La zone sur laquelle réagit le bouton lorsque la souris passe dessus
Je vais sélectionner l’image qui est sous l’état « Dessus », faire un clic-droit et Insérer une image-clé, j’ai créé une nouvelle image identique à la précédente, nous allons voir comment la changer.
2. Tout en restant sur l’état « Dessus », je sélectionne l’image de mon bouton. Apparaît dans le panneau des propriétés, l’option Permuter qui me permet d’échanger avec l’image dans la bibliothèque du bouton orange pour créer l’effet de RollOver au passage de la souris.
3. Je retourne à la séquence de mon menu grâce au bouton précédent, et je test mon animation (raccourci clavier Ctrl + Entrée) et j’admire le travail (enfin normalement)
Etape 5 :
1. Je vais attacher une adresse Internet à mon bouton, pour cela, je sélectionne mon bouton et j’ouvre le panneau d’action-script pour y rajouter ce code (attention n’oubliez rien, ni ; ni parenthèses, ni guillemets ) :
Le code n’est pas dur à comprendre, lorsque je clique sur le bouton -on(release)- aller à l’adresse –getURL- « index.html » sans ouvrir de nouvelle page -« _self »- (si j’avais voulu ouvrir une nouvelle page, je l’aurais remplacée par « _blank »)
2. Je teste à nouveau mon animation pour voir le résultat, voir si tout fonctionne, je fais la même chose avec les boutons restants, en repartant de l’étape 3.
Conclusion :
J’espère que vous aurez maintenant compris comment utiliser un bouton sous Flash, le site ne manque pas d’exemples de menu HTML à reconvertir en Flash 
Post-Scriptum : Ce tutorial a été effectué sous Flash MX 2004, certains menus ou fenêtres peuvent être différents de la version Flash 8, mais rien de dramatique, les raccourcis clavier et le fonctionnement des boutons restent inchangés.
Article publié par MØG
Vous aimez cet article? Partagez le !
Adepte de Photoshop et Flash depuis de nombreuses années. J’aime faire partager mes connaissances avec le plus grand nombre.
Pour en savoir plus : 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 57 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 juin 2008 13:39, par Lee
Bonjour, Je viens régulièrement consulter le site et j’en suis satisfait à chaque fois.
Je me demandais quand nous allions avoir du flash mais là vous avez comblé mes attentes.
Merçi à vous,
Répondre -
2 juin 2008 19:33, par TotoDesign
Merci pour ces tutos qui servent pour un debutant comme moi !
Serait il possible d’en avoir un sur l’explication des actions scripts car je nage ... glou glou glou ... :d ^^
Répondre-
3 juin 2008 10:07, par MØG
Tu veux plus de détail pour ce tutorial ou en général ? Pour le tutorial, je ne peux pas faire plus simple ... sinon l’ActionScript est le langage de programmation utilisé par Flash, Ce langage permet d’ajouter de l’interactivité aux animations Flash, en répondant aux actions de l’utilisateur, et en pilotant les movie clip, et les différents objets multimédias (images, son, vidéo, ...) la suite : Wikipedia
Voir en ligne : http://mog007.free.fr
Répondre-
11 juin 2008 15:39, par Tarkna
Bonjour, je suis bien arriver a suivre ton tutoriel jusqu’où il faut mettre l’action scipt, je dispose de Flash CS3, et il me dit qu’il y a des erreurs...
Merci pour ton aide !
Répondre-
-
-
11 juin 2008 18:02, par Tarkna
marche pas,s bah tu vois, a la fin, a ala 3eme ligne, bah des que je les enleves, il n’y a plus d’erreurs.
Répondre-
11 juin 2008 18:10, par Tarkna
Voila exactement la description : 1087 : Erreur de syntaxe : caractères excédentaires détectés après la fin du programme.
Répondre-
11 juin 2008 18:37, par MØG
Je suis en train de me renseigner sur L’action-Script 3, on ne peut plus placer les scripts sur un Clip, il faut forcément le faire dans une frame sur la timeline.
plus d’info : Forum Adobe MédiaBox Flash
Répondre-
11 juin 2008 19:26, par Tarkna
Salut, j’ai regarder sur ton forum, mais je ne comprend pas tout, je ne connais pas du tout le Flash, donc je n’y arrive toujours pas, même avec l’aide du forum . . . Si ta une idée :D
Répondre-
13 juin 2008 00:07, par MØG
Bien dés que j’ai le temps je trouve une version demo de Flash CS 3 et met une explication avec plus de détails dans les commentaires.
Répondre
-
-
-
-
-
-
-
-
-
15 juin 2008 17:22, par Anto
Bonjour, serait-il possible de savoir qu’elle est la police d’écriture utilisé dans chaque titre de se menu en flash ? Je n’ai pas la police d’écriture et je souhaiterai rajouter d’autre onglet.
Répondre-
15 juin 2008 19:09, par MØG
Il faut poser la question dans les commentaires de la création de ce menu avec Photoshop : Créer un Menu black Gloss + decoupe Mais tu n’as qu’a prendre une police qui s’en rapproche.
Voir en ligne : http://mog007.free.fr
Répondre -
15 juin 2008 22:18, par Anto
Non c’est bon, j’ai trouver grace à photoshop, par contre sa m’interresserai également d’avoir la méthode pour flash CS3
Répondre Merci d’avance
-
-
15 juin 2008 23:55, par Anto
Désolé du double post mais je ne peut pas éditer mon commentaire, j’ai le même problème que d’autre avec Flash CS3 c’est à dire que je ne peut pas faire l’étape 5, à savoir attacher une adresse Internet à un bouton. C’est donc pour cela qu’un tuto pour cet étape m’interresserai
.Mais j’aurais voulu savoir si il serait possible de faire un effet de fondu lorsqu’on passe la souri sur le bouton et lorsque l’on sort de la zone du bouton
Répondre ce qui serai très joli. Merci-
16 juin 2008 10:18, par Wonka
Je pense qu’il faut pas attacher une url à un bouton mais lui attacher une ligne d’action script. menu fenètre > action script et lui ajouter un geturl ! Se doit être quelque chose comme cela !
Répondre-
16 juin 2008 13:34, par Anto
Merci de ton aide mais je ne trouve pas la ligne d’action script sur CS3 qu’il faut et vu que je débute c’est encore moin évidant. Je ne sait pas comment ajouter un get url =(
Répondre-
16 juin 2008 17:42, par Wonka
En fait faut tapper le code dans une fenètre dans flash, pour le code exact tappe geturl flash as dans google
Répondre
tu trouverais plein de chose !
-
-
-
16 juin 2008 18:50, par MØG
Pour répondre à la question sur l’effet de fondu lors du passage de la souris. C’est possible mais pas sur ce tutorial puisqu’il reprend des créations faites sous Photoshop.
Pour le faire il faut intégrer un MovieClip sur le bouton et programmer avec l’Action-Script son comportement avec un RollOver() et un RollOut().
Peut être un prochain Tuto
Répondre
-
-
16 juin 2008 18:32, par MØG
J’ai trouvé une solution
L’étape 5 de ce tutorial pose problème aux possesseurs de Flash Cs3 a cause du changement de syntaxe de l’AS 3.0 (AS = Action Script) qui ne prend pas en compte la fct GetURL(). Pour cela lors que la création d’un document Flash on a le choix entre créer un Fichier Flash (AS 3.0) ou un Fichier Flash (AS 2.0). Il faut donc choisir de créer un Fichier Flash (AS 2.0) qui prendra en compte la fonction GetURl().
Je vais aussi donner plus de détail sur l’étape 5 : Il faut sélectionner le bouton puis ouvrir le panneau Action (raccourci clavier : F9), c’est dans se panneau que l’on tape le code Action-Script comme indiqué.
Voila désolé de ne pas avoir pensé à Flash CS3 et je vais chercher une méthode pour le code AS 3.0
Répondre-
16 juin 2008 21:51, par Anto
D’accord merci beaucoup pour ta recherche =D et merci de m’avoir répondu au sujet du fondu
Je réserverai sa pour plus tard et je vais recommencer avec AS 2.0 !Et sa ne fais rien
Répondre tu ne pouvais pas savoir que c’était différent !-
16 juin 2008 22:20, par Anto
Voila tout marche en AS 2.0 =D
Merci beaucoup pour ce superbe tuto,
J’espère qu’un petit tuto sur les effets de fondu pourra voir le jour un jour =P lol
Répondre-
17 juin 2008 10:04, par MØG
Super
Montre nous ta création quant tu pourras
Voir en ligne : http://mog007.free.fr
Répondre-
17 juin 2008 14:19, par Anto
J’aurais bien aimé mettre ma création mais il y a une erreur : your picture must be with an jpeg extension ! Pourtant mon image est en JPEG et elle fait 22ko.
Décidément :$
Répondre-
17 juin 2008 15:16, par Anto
A propos de l’AS3, j’ai demander une petite aide au départ sur un forum et la personne m’a bien détaillée les explications pour l’AS3 également :
http://flashaddict.rabou.eu/viewtopic.php ?f=16&t=184&p=971#p971
Voila
Répondre-
17 juin 2008 16:18, par Anto
Désolé pour le lien qui ne fonctionne pas voici le bon :
http://flashaddict.rabou.eu/viewtopic.php ?f=16&t=184
Répondre
-
-
-
-
-
-
-
18 juin 2008 14:15, par MØG
Voila enfin ma méthode pour attacher une adresse Internet à un bouton avec FLASH CS3 en AS 3.0 :
1. Sélectionner le bouton pour lui donner un Nom d’occurrence, le nom d’occurrence permet d’identifier le Bouton dans l’AS.
2. Créer un nouveau calque, que j’ai nommer Script.
3.Dans ce même calque, j’ouvre le panneau Action (raccourci clavier : F9) et j’y tape mon code :
En gros lors que je clic sur mon Bouton Accueil (avec comme nom d’occurrence accueil) je lance la fonction boutonAccueil. Vous faite de même avec les autres boutons en changeant bien sur les noms d’occurrence et de fonction.
Encore désolé pour les problèmes lier à l’AS et désolé a Wonka pour se 1er tuto incomplet (faudrait faire une mise à jour puis supprimer les commentaires inutile)
Répondre-
-
19 juin 2008 20:35, par Anto
Merci beaucoup, je confirme que sa marche maintenant en AS3 quand je fait ctrl+entrée.
Par contre j’ai un autre souci pour quelque soit la version (AS2 ou AS3) : une fois que je met la barre sur mon site, l’animation marche, mais pas les liens =S.
Quelqu’un à t-il le même problème ? Est-ce que sa pourrait provenir de mon code ?
Voir en ligne : http://pris0nbreak.fr
Répondre-
21 juin 2008 20:59, par Anto
Problème résolu après 3 jour de recherche lOol
Merci encore pour tout et j’adore vos tutoriel
Si vous voulez voir le résultat, cliquez ci dessous
Voir en ligne : http://pris0nbreak.fr
Répondre
-
-
-
2 juillet 2008 17:20, par Anto
Coucou à tous,
Mon menu flash marche super, seul soucis c’est lorsqu’on clique sur un bouton, il ouvre une nouvelle page alors que pourtant j’ai mis _self, est-ce que d’autre personne on se problème ?
Voir en ligne : http://pris0nbreak.fr
Répondre -
21 mars 2011 10:01, par Breizher_penn_marv
Grand merci à vous tous, voila 2 jours et demi que je me prenais la tête à essayer de mettre mes liens dans ces foutus boutons avec toujours des erreurs de syntaxes
et la, la situation s’est débloqué d’un seul coup (trop cool)
Répondre
-
-
24 juin 2008 18:33
Bonjour j’ai un probleme dans la fenêtre A j’ai pas les différentes catégories dessus cliquable..
merci de bien vouloir m’aidez
Répondre-
24 juin 2008 18:39, par MØG
Salut, Tu as bien convertie ton image en symbole Bouton ? puis tu as bien fais un Double-Clic sur se même symbole nouvellement créer ?
Répondre-
24 juin 2008 20:47
oui j’ai effectuer sa et toujours rien Quelqu’un aurai un fichier source a m’envoyer ? team-centox@hotmail.fr
merci
Répondre-
30 juin 2008 19:47
jolie tuto vous avez montrez comment lier le bouton du menu a un url
comment lier un movieclip a un bouton du menu pour qu’il apparaisse quand on click un moviclip texte et image pas un .swf
merci
Répondre-
4 juillet 2008 00:16, par Anto
Coucou à tous,
Mon menu flash marche super, seul soucis c’est lorsqu’on clique sur un bouton, il ouvre une nouvelle page alors que pourtant j’ai mis _self, est-ce que d’autre personne on se problème ?
Voir en ligne : http://pris0nbreak.fr
Répondre -
5 juillet 2008 18:09, par MØG
Vu la demande je vais surement faire un autre tuto sur la création d’un menu Flash plus avancé. Je cherche juste un sujet simple et plus aboutie :D
Répondre
-
-
-
-
-
29 mai 2009 12:56, par Clé33470
Avec Flash CS4, Je ne trouve pas le cadre TimeLine. OU est-il ?? Merci de me répondre
Répondre -
8 juin 2009 18:13, par tonyllusion
merci mille fois à MØG pour cet article car sans lui je crois que j’aurai encore galéré longtemps.
Répondre -
20 juillet 2009 19:00, par elo333
Bonjour, c’est la première fois que je viens sur ce site et les indications pour la création du menu flash me semblent complètes et très satisfaisantes ! est-ce que quelqu’un pourrait juste m’expliquer comment faire pou créer un « menu flottant » avec flash ? je m’explique, je souhaite créer un menu (une sorte de barre avec boutons) que l’utilisateur puisse bouger sur la page quand il arrivera sur le site... merci vraiment de m’aider !
Répondre-
21 juillet 2009 23:56, par MØG
Salut elo333,
La technique pour déplacer un élément n’importe où sur ta page se nomme le « Drag and Drop » et voici quelques liens :- http://flash.mediabox.fr/index.php ?showtopic=84771
- http://art.flashie.free.fr/tutoriels/index.php ?n=6
- http://www.flashkod.com/code.aspx ?ID=20123
Bonne chance
Voir en ligne : MØG Folio
Répondre - http://flash.mediabox.fr/index.php ?showtopic=84771
-
-
26 juillet 2009 11:20, par Rafa
Bonjour, je vien de creer deux pages en flash et je voulais savoir comment faire pour placer un lien qui mene de la page 1 a la page 2, si qq peut m’aider svp , merci d’avance
Répondre -
20 mars 2010 21:18, par Triumph
Salut, moi j’ai un problème avec ce superbe tutoriel, j’utilise flash pro 8 sous mac, et quand je tape le code donné dans la fenêtre des actions, eh ben ça me dit qu’une commande est pas valide... Pourriez-vous m’éclairer dans mon brouillard ? Merci d’avance.
Répondre-
24 mars 2010 12:21, par MØG
Salut,
Lors que la création d’un document Flash on a le choix entre créer un Fichier Flash (AS 3.0) ou un Fichier Flash (AS 2.0). Il faut donc choisir de créer un Fichier Flash (AS 2.0) qui prendra en compte la fonction GetURl().
Si le problème ne vient pas de là. Donne le résultat du Debug Mode.Voir en ligne : MØG Folio
Répondre
-
-
9 avril 2010 00:39, par booobooob
Salut à tous, j ai un petit soucis hum hum ! j ai crée des menus a l aide de ce superbe tuto, 3 exactement ! Le truc est que je me retrouve avec trois swf ou fla, que je dois insèrer par exemple sur une bannière d entete de blog, donc au même emplacement. Ma question est comment combiner 3 fla ou 3 swf, tous multi-cliquables sur une seule et même bannière ? Merci à tous pour votre aide et bonne continuation sur ce site ! booobooob
Répondre -
9 avril 2010 18:23, par MØG
Salut booobooob
Répondre
Je sais que l’on peut importer des fichiers swf dans un projet flash :
Menu Fichier > Importer > Importer dans la bibliothèque.
Mais s’est pas pratique, le plus simple reste de refaire t’es menus dans un seul projet flash puisque tu dis avoir les fichiers sources .fla -
17 octobre 2010 18:20, par Eric
Bonjour, Merci pour ce tuto. C’est très bien fait et facile à réaliser.
J’aimerais savoir s’il serait possible que lorsque l’on clique sur le bouton accueil par exemple, que le bouton reste orange tant que la personne n’a pas cliqué sur un autre bouton ? Ça pourrait indiquer la page active.
Merci pour votre aide.
Répondre -
18 mai 2011 18:55, par Otsü
Bonjour, J’ai un petit soucis, nan en fait trois :
Répondre
Mon menu clignote, j’ai dans l’idée que c’est la cadence qui est en cause mais je n’arrive pas à trouver quel valeur mettre.
Mes séparations disparaissent, et pourtant elle sont présente sous flash MX
Et j’ai une perte de qualité sur la tipo des boutons. Voila si déjà je peux avoir une réponse pour l’un de ces problèmes ça serai cool. Merci d’avance et un GRAND merci pour tous ces tutos :D -
7 septembre 2011 20:02, par glisda
bonjour, voilà, j’ai réalisé mon menu, merci beaucoup pour cette explication assez claire et très simple. J’ai même ajouté un troisième bouton (haut, dessus et abaissé). Cependant lors de l’assemblage des différents boutons, tout se passe bien, mais c’est au niveau du script, je l’ai recopié sans erreur le voici tel qu’il est sur mon doc :
1 on (release) #crochet ouvert# 2 getURL (« http://www.monsite.com/accueil.html », « _self ») ; 3 #crochet fermé#
et le message de la console d’erreur est : 1087 : Erreur de syntaxe : caractères excédentaires détectés après la fin du programme.
Si vous avez une idée ???? Sinon, merci encore pour ce tuto bien sympathique qui permet ensuite de partir dans tout un style de variantes. PS : Pendant que j’y suis, une autre question, peut-on ajouter des sous menu sur des onglets dans ce type de menu ? A bientôtt
Répondre
