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.
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
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...
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.
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 à ce message
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 à ce message
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 à ce message
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.
Non c’est bon, j’ai trouver grace à photoshop, par contre sa m’interresserai également d’avoir la méthode pour flash CS3 Merci d’avance
Répondre à ce message
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 ce qui serai très joli. Merci
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 à ce message
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 à ce message
En fait faut tapper le code dans une fenètre dans flash, pour le code exact tappe geturl flash as dans google tu trouverais plein de chose !
Répondre à ce message
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().
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
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 tu ne pouvais pas savoir que c’était différent !
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.
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)
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 ?
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 ?
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 à ce message
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 ?
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 à ce message
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 à ce message
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 à ce message
Salut Rafa,
Tu n’as qu’a créer un bouton avec la fonction GetURL(nom de la page.html, _self) ; comme dans l’étape 5 pour pouvoir faire la transition entre t’es 2 pages.
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 à ce message
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.
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
Salut booobooob
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
Découvrez le premier livre écrit par WonkaStudio qui vous apprendra toutes les ficelles pour créer des montages 3d et 2d réalistes et des effets spéciaux grâce à votre logiciel Photoshop! Cliquez ici pour visiter la fiche du livre sur la boutique amazon.com
(Cela fait longtemps que je ne me suis plus adressé à vous par le biais de ce système de news sur wks.fr, peut être parce qu’aujourd’hui il est plus simple de « twitter » que d’écrire une nouvelle plus complète et surtout plus gourmande en temps pour moi (écriture) et pour vous (...))
