Freegaia.comHébergement PRO !Hébergement discountLe forum de discussion Tous les kits graphiques ! Création de bannières Flash en ligne : c'est ici ! iwebMoteur UndergroundQuitter Freegaia

le
La boutique de Freegaia






Accueil / Ateliers & Dossiers / Multimédia / Flash /

Réaliser un menu déroulant
Avant-propos

Ce tutorial a été réalisé pour Flash5. Il s'agit de créer un menu déroulant visible en bas de cette page.

Ce tutorial est un bon début pour apprendre à utiliser la time line.
Informations

Logiciel : Flash 5.0

Niveau : Initié

Auteur : Alexandre SABBAH 

Les étapes


[1. Créer un bouton]

[Etape 1]
Tracez la forme qui représentera votre bouton, un rectangle dans notre exemple.

[Etape 2]
Sélectionnez le. Dans le menu "insertion", cliquez sur "convertir en symbole"(F8) et choisissez le type "bouton".

[Etape 3]
Double-cliquez sur le bouton pour le modifier. Sélectionnez l'étape "dessus" et créez une image clé (F6); vous pouvez modifier la couleur du bouton à votre guise.

[Etape 4]
Retournez à la scène principale en cliquant sur "Scène 1" à gauche au dessus de la timeline.




[2. Créer le menu]

[Etape 1]
Sélectionnez le bouton. Dans le menu "insertion", cliquez sur "convertir en symbole"(F8) et choisissez le type "Clip".

[Etape 2]
Double-cliquez sur le clip (le bouton) pour le modifier.

[Etape 3]
Sélectionnez l'image 1 de la timeline. Dans la fenêtre"action", insérer "stop".

[Etape 4]
Sélectionnez le bouton, cliquez sur le bouton droit et sélectionnez "Action" (Mode normale). Dans la fenêtre ouverte, double-cliquez sur "Go To". Le code suivant apparaît: "On (press) { gotoAndPlay (1); }". En cliquant sur "gotoandplay", un certain nombre d'options apparaît en dessous du code. Remplacer 1 par 2 dans "image" et décochez"atteindre et lire" ("gotoandplay" se change en "gotoandstop"). Cliquez sur "on (press)", plusieurs options s'ouvrent également. Décochez "relâcher" et cochez "survoler" ("on (press)" devient "on (rollover)")

[Etape 5]
Copiez le bouton. Collez autant de boutons qui doivent se dérouler dans votre menu. (Dans notre exemple il y a trois boutons: avatars, smileys, icônes)

[Etape 6]
Sur chaque bouton, placez le texte qui lui correspond( A dans la barre d'outil )

[Etape 7]
Allez sur l'image 2 de la timeline du clip et appuyez sur F6 (création d'une image clé), faites de même sur l'image 3, puis sur l'image 4.

[Etape 8]
Il est important de comprendre que dans la timeline du clip, chaque image qui suit l'image 1 représente le déroulement d'un bouton. Ainsi l'image 2 représente le déroulement du premier bouton, l'image 3 celui du deuxième et l'image 4 celui du troisième. (Dans notre exemple l'image 2 représente donc le déroulement du bouton "avatars")

 


[Etape 9]
Lorsque vous avez copier-coller les boutons lors du 5., vous avez également reproduit le script du bouton copié. Il faut donc changer ce script sur les boutons collés. Sélectionnez le deuxième bouton et remplacer 2 par 3 dans "image" du menu "actions". sélectionnez le troisième bouton et remplacer 2 par 4 dans image.

[Etape 10]
Nous allons maintenant créer le déroulement du bouton. Sélectionnez l'image 2 de la time line pour créer le déroulement du premier bouton. Ajoutez le nombre de boutons que vous désirez lors du déroulement. Pour cela ouvrez la bibliothèque (Menu "fenêtre"), cliquez sur le bouton (sélectionnez bien le bouton et pas le clip), et faîtes le glisser sur la scène.

[Etape 11]
Faîtes de même sur l'image 3 de la timeline pour le deuxième bouton et l'image 4 de la timeline pour le troisième.

[Etape 12] (Non obligatoire)
Si vous voulez que votre menu se réinitialise après un clic sur un bouton, vous devrez ajouter à chaque bouton le code suivant: On (press) {GotoAndStop(1);}, afin de se replacer sur l'image 1 de la timeline du clip, où le menu n'est pas dérouler.
Pour aller plus vite, faîtes le sur un bouton et copier-coller le. En effet comme on l'a vu précédemment, le script du bouton est également copié-collé .

[Etape 13]
Placez sur chaque bouton le texte qui correspond.




[3. Attribuer un lien aux boutons ]

[Etape 1]
Sélectionnez le bouton, et faites un clic droit dessus, puis sélectionnez Actions.

[Etape 2]
Sans rien sélectionner, double-cliquez maintenant sur Get URL.

[Etape 3]
Comme précédemment, un certain nombre d'options s'ouvrent en bas du panneau.
Dans le champ "URL", entrez l'URL à laquelle vous voulez lier votre bouton.
Dans le champ "Window", laissez-le tel quel si vous voulez que la page appelée se charge dans la fenêtre où se trouve votre bouton. Sinon, sélectionnez "_blank" pour charger la page dans une nouvelle fenêtre.
Enfin, dans le champ "Variables", laissez-le tel quel.

[Etape 4]
Faîtes de même pour chaque bouton.

[Etape 5 et fin]
Votre menu déroulant est fini, vous pouvez y ajouter des fonctionnalités, comme l'heure, ou des sous catégories.

Le projet au complet est a télécharger ici, au format " .fla "


 


 cliquez ici pour imprimer la page





cliquez ici pour découvrir l'offre hebergement de Freegaia
cliquez ici <