Nous allons réaliser ensemble un petit menu en FLASH. Ce menu permettant d'appeler 3 pages html distinctes. Il sera inséré dans chacune des pages.
Le gros avantage d'un tel menu est l'indépendance. En effet étant intégré dans chacune des pages de votre site si vous devez par exemple le modifier (pour ajouter une nouvelle page) il suffit de faire la modification au sein du FLASH lui-même et de reposter le swf obtenu sur votre site .... et le menu est changé dans toutes vos pages !
Voir l'animation

1- Commencer par réaliser trois pages (avec votre éditeur html habituel) que vous nommez page1.htm, page2.htm, page3.htm... ces pages peuvent ne contenir qu'un tire !

2- Lancer FLASH (4 ou 5) et faire Modification - Animation... Choisir une dimention de 120 sur 200 pour le menu que nous allons réaliser.

3- Cliquer sur le signe + pour obtenir un second calque.

Nommer le calque du haut "fond" par un double clic sur calque 1

Nommer l'autre calque "boutons"

Par principe, lorsque l'on travaille sur un calque on doit verrouiller tous les autres ! C'est une règle de base à respecter quand on développe un Flash !

4- Nous allons dans un premier temps travailler sur le calque du fond (il faut donc verouiller l'autre calque). Se Placer sur le calque du fond et choisir l'outil rectangle. Choisir la couleur noire pour le tour et vide pour l'intérieur (comme sur l'image ci-contre). On peut éventuellement demander des coins arrondis pour cet entourage du menu. Tirer alors le rectangle sur toute la surface du flash.

Voir l'animation

5- Verouiller alors le calque du fond et déverouiller l'autre pour s'y placer : nous allons créer le premier bouton du menu. Choisir l'outil texte avec une police et une couleur de votre choix (et une taille adaptée au menu que nous sommes en train de réaliser). Il est conseillé de cocher l'option 'Utiliser les polices de périphérique'. Taper 'PAGE 1'. Revener en mode sélection; Sélectionner le texte que l'on vient de taper : 'page 1' et appuyer sur F8. Cocher 'Bouton' .... Le texte est devenu un bouton. C'est aussi simple que ça !

6- Avec le bouton droit de la souris cliquer sur le bouton 'Page 1'. Dans le menu contextuel choisir 'Modifier' . Il s'agit maintenant de finaliser le bouton. Appuyer 3 fois sur F6 pour créer les images-clés : dessus, abaissé, cliqué.
Se positionner sur l'image-clé 'cliqué' et tirer un rectangle (de n'importe quelle couleur) par dessus le texte... c'est ce rectangle qui va servir de zone de clic sinon le clic doit être fait sur le tracé des lettres elles-mêmes ce qui est assez pénible !
Se positionner sur l'image-clé 'dessus' dessiner une petite flêche à côté du mot page 1 (voir ci-contre).
Se positionner sur l'image-clé 'Abaissé', sélectionner le texte 'page 1' et le mettre en rouge. Revenir alors à la scène 1.

7- Deux choses importantes à ce stade : enregistrer votre travail (Fichiers- enregsitrer sous : mon_menu_01 ) qui va générer le fichier mon_menu_01.fla avec lequel on travaille (c'est le code source, il reste en votre possession). Seconde chose : vous pouvez faire un essai en appuyant sur les touches [Ctrl] + [Entrée]...

8- Nous allons maintenant créer les deux autres boutons par duplication. Nous ajouterons les scripts à l'intérieur des boutons dans la prochaîne étape.
Ouvrir la bibliothèque qui se trouve dans le menu Fenêtres. Il y apparaît le bouton que l'on vient de créer : 'Symbole 1'. Cliquer dessus avec le bouton droit de la souris et le dupliquer en tant que bouton. Glisser la copie sur le calque. Recommencer une seconde fois. Nous avons alors trois boutons sur le calque 'boutons'. Refermer la fenêtre bibliothèque.

9- Répartir et aligner à gauche les trois boutons. Modifier le second bouton (menu contextuel) en changeant le 1 pour un 2 dans les textes des trois états 'haut' 'dessus' 'abaissé'. En faire autant pour le troisème bouton.

Penser à enregistrer votre travail.

Il ne reste plus qu'à ajouter un script sous chacun des boutons pour les rendre actifs ! Nous allons utiliser la fonction 'getURL( ) ' qui permet d'appeler une URL (adresse ou page) directement sous flash !
Voir l'animation

10- Avec le menu contextuel du bouton 'page 1' (bouton droit de la souris) demander les Propriétés et activer l'onglet Actions sous Flash 4 et directement Actions sous Flash5. Cliquer sur le signe + pour choisir l'action getURL et taper comme argument de la fonction 'page1.htm' (il s'agit d'appeler la page1 que nous avons fabriquée au début de l'activité). Un clic sur le bouton provoquera donc appel à la page1 qui elle même contient le menu. On a ainsi une navigation hyper-fluide.
Pour appeler une page qui se trouve dans un autre cadre (assez classique avec un menu !) il suffit de mettre getURL("page1.htm TARGET="M") si M est le nom du cadre dans lequel vous appelez la nouvelle page.
Voir l'animation

11- Vous pouvez alors finir les deux autres boutons et essayer votre flash. Pour l'essayer cette fois il faudra passer en mode html pour pouvoir appeler les pages page1.htm, page2.htm et page3.htm.
Essayer en faisant Fichier- Aperçu avant publication- Html

12- Si tout fonctionne comme vous le désirez faites Fichier- Publier ce qui va générer un mon_menu_01.swf. Reprenez alors vos pages page1.htm, page2.htm et page3.htm avec votre éditeur html et introduisez mon_menu_01.swf dans chacune des pages.... Pour faire des modifications dans le menu il suffit de lancer FLASH, d'ouvrir le fichier mon_menu_01.fla, de la modifier et de le publier. Le menu sera alors modifié pour les trois pages.