Dans ce tutoriel je vais vous montrer comment créer un menu avec
sous-menu déroulant en AS2, comme dans l'exemple ci-dessous.






1 : tout d'abord, commencer par créer votre bouton principal, pour ceci prendre l'outil rectangle par
exemple et tracer un rectangle remplis d'une couleur.

Convertissez ensuite ce rectangle en bouton .

Pour ceci clic droit sur votre rectangle, convertir en symbole et sélectionner "bouton",
nommer le "bouton" par exemple.



2 : ensuite une fois que votre bouton est créé, nous allons créé l'état de survol, pour ceci double cliquer sur votre bouton (vous vous trouver donc à l'intérieur de votre bouton) et insérer une image clé à l'état dessus
(onglet insertion, puis scénario puis image clé ou cliquer sur le raccourcis Touche F6).



et remplisser votre rectangle avec le "pot de peinture" d'une nouvelle couleur



3 : voilà votre bouton est créé, retourner sur la scène principal en cliquant sur "séquence 1"

supprimer l'occurrence de votre bouton en le sélectionnant puis en
cliquant sur la touche "suppr" de votre clavier.


4 : Cliquer ensuite sur l'onglet "insertion", puis nouveau "symbole", une fenêtre s'ouvre alors, cocher "clip" et donner lui le nom "menu déroulant" par exemple, puis cliquer sur ok, (vous vous retrouvez dans la fenêtre
édition de votre menu déroulant).

5 : faites glisser une occurrence de votre bouton sur la scène puis sélectionner ensuite l'outil texte et
insérer un texte sur votre bouton principal.


 
6 : Nous allons maintenant créer l'état cliqué du bouton.

Pour ceci sélectionner insérer une image clé (onglet insertion, puis scénario puis image clé ou cliquer
sur le raccourcis Touche F6).

Puis positionner vous sur la 2ème image clé et changer la couleur du texte.



7 : Insérer ensuite autant de calque que vous souhaitez mettre de bouton dans votre menu déroulant et insérer
y des occurrences de boutons sur la 2ème image clé de chaque calque (renommer ces calques au
nom de vos boutons pour vous y retrouver plus facilement).



8 : Insérer ensuite des textes sur chacun de ces boutons puis sélectionner
pour chaque bouton le texte + le bouton



Puis convertissez le de nouveau en bouton en cliquant sur le raccourcis F8 ou
en cliquant droit sur la sélection, puis convertir en symbole.



Sélectionner bouton et donner leur le nom qui se trouve sur le texte de votre bouton puis cliquer sur ok.



vous verrez alors les nouveaux boutons s'insérer dans la bibliothèque



Renouveler l'opération pour chacun des boutons de votre menu déroulant

* Si vous souhaiter que les boutons apparaissent tous en même temps rendez vous à l'étape 9

* Si vous souhaiter que les boutons apparaissent avec des mouvements plus ou moins décalés, continuer ci-dessous.

Positionner vous sur l'image clé n°2 de chaque bouton et cliquer droit
"créer une interpolation de mouvement" puis cliquer sur ok.

(vous verrez les images clés se bleuir)




Positionner vous ensuite par exemple sur l'image clé 16 de votre 1er sous bouton

et cliquer sur le raccourcis F6 (ou insertion, puis scénario, image clé).




Sélectionner ensuite l'image clé 2 de votre 2ème sous bouton et déplacer la par exemple sur l'image clé n°7 et positionner vous ensuite par exemple sur l'image clé n°21 (garder la même durée que pour le sous bouton précédent).

Sélectionner ensuite l'image clé 2 de votre 3ème sous bouton et déplacer la par exemple sur l'image clé n°11 et positionner vous ensuite par exemple sur l'image clé n°25 (garder la même durée que pour le sous bouton précédent).



Insérer ensuite pour les 3 calques du bas des images clé allant jusqu'à la fin du dernier sous bouton
(c'est à dire ici jusqu'à l'image clé 25).



Pour que ce mouvement des boutons décalés soit vraiment réaliste, il vous faut
leur insérer une couleur alpha sur la première image clé de chaque bouton.

Pour insérer cette couleur alpha il faut sélectionner le sous bouton sur sa 1ère image clé et cliquer sur "couleur"
puis "alpha" dans propriété, et affecter lui une couleur alpha de 0%, vous verrez votre bouton disparaitre
(la dernière image clé de chaque bouton devra quand à elle se trouver à 100%).



Renouveler cette opération pour les autres boutons

9 : Nous allons maintenant appliquer les actions à nos boutons, un clic sur le bouton principal déroulera les
autres boutons et un clic sur les autres boutons renverra sur une page web.

Commençons donc par faire apparaitre les boutons en cliquant sur le bouton principal.

positionner vous sur le calque de votre bouton à l'image clé 1 et sélectionner votre bouton principal (ici BKB), puis cliquer sur la touche F9, une fenêtre ou vous pourrez écrire vos actions à appliquer va alors s'ouvrir.



Copiez y le code suivant :

Code: Tout sélectionner

On (release){
gotoAndPlay(2);
}


explication du code = l'animation sera jouée en boucle jusqu'à ce que l'utilisateur clique sur le bouton).



Fermer la fenêtre action en cliquant de nouveau sur F9

Insérer ensuite un nouveau calque en cliquant sur "nouveau calque" que vous nommerez "actions".
Positionner vous sur l'image clé 1 et cliquer sur F9 et insérer y le code suivant.

Copiez y le code suivant :

Code: Tout sélectionner

Stop();


explication du code = Pour éviter que votre bouton se joue automatiquement.



Insérer également le même code à l'image clé 25 pour que celle -ci se stop tant
que vous survoler le bouton, nécessaire dans la partie suivante).

fermer la fenêtre action en cliquant de nouveau sur F9

10 : Nous allons maintenant mettre les actions sur les sous boutons du menu déroulant.

double cliquer sur l'un des sous bouton depuis la bibliothèque (vous entrer dans le menu édition du bouton)



Sélectionner le bouton et cliquer sur F9, la fenêtre action s'ouvre et coller y

le code suivant :

Code: Tout sélectionner

On (release){
getURL("http://www.votre-lien");
}


explication du code = Pour atteindre l'adresse url au clic sur le bouton



l'adresse url est un exemple, vous pouvez bien sur insérer celle que vous voulez.

Si vous souhaiter vous pouvez également insérer parmi les actions l'insertion ou l'arrêt d'un son par exemple.

Faites de même pour les autres boutons en changeant juste l'adresse url comprise ente les "").

Notre menu déroulant est presque terminé, il nous reste juste à créer une zone qui permettra de refermer
le bouton une fois que vous survoler plus le sous-menu.

Pour cela insérer un nouveau calque que vous placerez tout en bas et que vous nommerez fond.

Placer vous sur ce claque et Insérer une image clé sur la 2eme image, sélectionner ensuite l'outil rectangle
et tracer une zone autour de vos boutons.

Convertissez cette zone en bouton avec l'aide du raccourcis F8 que vous nommerez fond et appliquer lui une couleur alpha de 0%.



double cliquer sur ce bouton fond, vous vous retrouver dans le menu édition de ce bouton.

Cliquer sur F8, qui vous ouvre la fenêtre action et coller y le code suivant :

Code: Tout sélectionner

On (rollOver){
gotoAndPlay(1);
}


explication du code = au survol de la zone, retour à l'image clé 1.



voilà votre menu avec sous menu déroulant est terminé, il ne vous reste plus qu'à le tester en cliquant sur
les touches "ctrl" + entrée" de votre clavier.


Pour réaliser un menu plus complet, c'est à dire avec plusieurs boutons qui se déroulent comme celui-ci,
il vous suffis de faire la même chose avec des boutons séparés et de tous les insérer aprés un
par un dans un clip final.




Télécharger le tutoriel au format pdf

voir tous mes autres tutoriels ici