Tutoriel 4 - FLASH version 5.0

Menu interactif

Créer un menu

Créer un nouveau fichier

1. Créez un nouveau fichier dans Flash.
2. Insérez une grille Vue/Grille/Montrer la grille [View / Grid / Show Grid].
3. Choisissez Movie dans le menu Modifier [Modify]

1. Fixez les dimensions à 120 par 400 et cliquez sur OK

Définir ses objets

1. Le premier objet dont nous aurons besoin est un rectangle dans lequel nous inscrirons les éléments de notre menu.
   1. Choisissez l'outil Rectangle.
   2. Choisissez une couleur pâle.
   3. Tracez un rectangle d'environ 4 cm de largeur sur 1 cm de hauteur
   4. Vous pouvez modifier légèrement son apparence pour lui donner un peu plus de style selon votre goût.
   5. Cliquez deux fois sur ce rectangle, avec l'outil flèche, pour le sélectionner avec sa bordure.
   6. Choisissez Convertir en symbole [Convert to Symbol] dans le menu Insère [Insert]. Appelez-le rectangle et définissez-le comme Graphique [Graphic.
      
      
   7. Effacez le rectangle de la scène.

    

   Les objets suivants seront tous des boutons textuels.

   

   1. Cliquez sur l'outil texte. Note: Si la palette de texte n'apparaît pas comme ci-dessus, vous pouvez l'afficher en choisissant au menu, Fenêtre/Panneau/Caractère [Window / Panels / Character] ou en utilisant le raccourci CTRL-T.
   2. Choisissez la police Verdana, la taille 10 points, la couleur noire.
   3. Cliquez dans la scène et inscrivez à l'aide de l'outil Texte "Sous-menu 1".
   4. Reprenez l'outil Flèche.
   5. Cliquez sur "Sous-menu 1" et choisissez Convertir en symbole dans le menu Insère [Insert/Convert to symbol].
   6. Appelez-le SM1 et donnez-lui le Comportement Bouton [Behavior Button]. Cliquez sur OK.
   7. Affichez la bibliothèque Fenêtre/Bibliothèque [Window-Library] ou CTRL-L.
   8. Faites un double-clic sur SM1 dans le panneau de la Bibliothèque. La ligne du temps changera.
      
      
   9. Cliquez dans la case sous le mot Over et appuyez sur la touche F6 pour ajouter une image-clé (keyframe).
   10. Sélectionnez le texte avec l'outil Texte A et changez sa couleur.
   11. Cliquez dans la case sous le mot Down et appuyez sur la touche F6 pour y ajouter une image-clé (keyframe).
   12. Sélectionnez le texte et changez sa taille à12 points.
   13. Cliquez dans la case sous le mot Hit et appuyez sur la touche F6.
   14. Tracez un rectangle qui couvrira les mots entiers pour établir la zone où le bouton sera actif. Ce rectangle sera invisible.
   15. Revenez à la scène en cliquant sur le mot Scène 1 dans le coin supérieur gauche de l'écran. S'il n'apparaît pas à gauche, tout près du symbole, cliquez sur l'icône à cet effet dans le coin supérieur droit de l'écran pour sélectionner la scène 1 .

Répétez les opérations précédentes pour créer deux autres boutons ayant les mêmes caractéristiques avec les textes Sous-menu 2 et Sous-menu 3. Nommez ces boutons SM2 et SM3.

Note: Dans le panneau Bibliothèque, vous pouvez dupliquer le premier bouton en vous servant du menu contextuel, mais n'oubliez pas de cliquer sur chaque symbole résultant de la copie et d'en modifier le texte pour chaque option du bouton (Up, Over, Down, Hit).

Effacez les boutons de la scène.

La dernière série de boutons sera textuelle aussi mais aura des caractéristiques différentes.

Cliquez sur l'outil texte. Choisissez la police Verdana, la taille 10 points, la couleur noire. Cliquez dans la scène et inscrivez "Item 1". Reprenez l'outil Flèche. Cliquez sur Item 1 et choisissez Convert to Symbol dans le menu Insert. Appelez-le IT1 et donnez-lui le comportement (Behavior) Button. Cliquez sur OK. Affichez la bibliothèque (Window-Library) Faites un double-clic sur IT1. Cliquez dans la case sous le mot Over et appuyez sur la touche F6 pour ajouter une image-clé (keyframe). Choisissez l'outil rectangle et la même couleur pâle que vous avez utilisée pour le premier rectangle Tracez un rectangle, assez serré, autour de Item 1. Comme ceci : Cliquez dans la case sous le mot Hit et insérez une image-clé en utilisant F6. Tracez un rectangle qui couvrira les mots entiers pour établir la zone où le bouton sera actif. Ce rectangle sera invisible. Revenez à la scène en cliquant sur le mot Scène 1 à gauche de l'écran. S'il n'apparaît pas à gauche, tout près du symbole, cliquez sur l'icône à cet effet dans le coin supérieur droit de l'écran pour sélectionner la scène 1 . Répétez ces dernières opérations pour obtenir 12 boutons Item numérotés de 1 à 12. Note: Vous pouvez à partir de la bibliothèque dupliquer le premier bouton Item1 douze fois à condition que vous modifiez le texte pour chaque numéro et pour chaque position du bouton. Votre bibliothèque devrait ressembler à celle présentée à gauche. Effacez les boutons de la scène. Cette dernière devrait être complètement vide.

Mettre les éléments en place

Nous aurons besoin de trois calques [layers] pour réaliser notre projet.

Premier calque (images)

1. Remplacez Calque 1 [Layer 1] à gauche de la ligne du temps par Graphiques.
2. Placez-y une occurence du rectangle. Pour ce faire, cliquez sur rectangle dans la bibliothèque et faites simplement glisser l'image qui apparaît dans le haut de votre scène.
3. Placez une seconde occurence du rectangle en dessous de la première. Laissez un court espace entre les deux.
4. Cliquez sur le second rectangle avec le bouton droit de la souris et choisissez Redimensionner [Scale] dans le menu contextuel.
5. Réduisez la taille de ce rectangle à environ 90% de l'original.
6. Cliquez sur ce nouveau rectangle et choisissez Dupliquer [Duplicate] dans le menu Éditer [Edit].
7. Placez ce nouveau rectangle en dessous du précédent et faites-en un autre de la même façon. Vous devriez obtenir trois petits rectangles et un grand.
8. Sélectionnez les trois petits rectangles en cliquant sur chacun tout en maintenant la touche majuscule enfoncée.
9. Alignez vos rectangles en utilisant la palette Alignement [Align]du menu Fenêtre [Window].
10. Cliquez sur l'icône centrer dans la section Horizontal
    

1. Vous devriez obtenir une scène que ressemble à ceci :
   

Deuxième calque (boutons et textes)

1. Dans la ligne du temps, cliquez sur le bouton Nouveau calque (new Layer) ou choisissez Layer dans le menu Insère [Insert].
2. Nommez ce calque Textes. Assurez-vous que ce calque reste sélectionné tout au long des opérations suivantes.
3. Avec l'outil texte, inscrivez Menu principal dans le grand rectangle.
4. Placez ensuite une occurence des boutons Sous-menu 1 dans le premier petit rectangle, Sous-menu 2 dans le second et Sous-menu 3 dans le dernier.
5. Vous obtiendrez ceci :
   

Créer les sous-menus

1. Cliquez dans la case 5 du calque Graphiques et appuyez sur F6 pour y ajouter une image-clé (keyframe).
2. Faites de même pour le calque textes.
3. Répétez ces deux opérations à la case 10 et à la case 15.
4. Cliquez dans le calque textes à la case 5.
5. Avec l'outil flèche, tracez un rectangle autour des objets Sous-menu 2 et Sous-menu 3. Cela sélectionnera à la fois les boutons textes et les graphiques.
6. Faites glisser ces objets vers le bas de façon à libérer de l'espace pour y insérer les quatre premiers items.
7. Assurez-vous que le calque texte est sélectionné et insérez les boutons Item 1, 2, 3 et 4 dans l'espace libéré.
8. Vous devriez obtenir ceci :
   
   
   
9. Cliquez dans la case 10 du calque Texte.
10. Avec la flèche, tracez un rectangle pour sélectionner le bouton Sous-menu 3 et le rectangle qui l'accompagne.
11. Déplacez-les vers le bas pour libérer de l'espace pour les quatre items suivants.
12. Insérez les Items 5 à 8.
13. Vous aurez ceci à la case 10 :
    
    
    
14. Cliquez dans la case 15.
15. Placez les Items 9 à 12 en dessous de Sous-menu 3.
16. Vous aurez ceci :
    

Définir les actions

Pour définir les actions, nous utiliserons un autre calque. Il est possible de mettre les actions dans un des calques existants. L'usage d'un calque séparé vise simplement à clarifier la programmation.

1. Cliquez sur le calque Texte et choisissez Calque [Layer] dans le menu Insère [Insère]. Un nouveau calque s'ajoutera au premier plan (le premier de la liste). Nommez-le Action.
2. Cliquez dans la première case de ce calque avec le côté droit de la souris et dans le menu contextuel, choisissez le Panneau / Image [Panels / Frame].
3. Une nouvelle palette s'ouvrira dans laquelle vous inscrirez Début dans la case Étiquette [Label] de l'onglet Image [Frame].
4. Si votre panneau Actions n'est pas déjà ouvert, cliquez à nouveau dans la première case du calque avec le côté droit de la souris et choisissez Actions dans le menu contextuel
5. Cliquez ensuite sur l'onglet +.
6. Choisissez Action, puis stop.
   
7. Cliquez dans la case 5 du calque Action et appuyez sur la touche F6 pour ajouter une image-clé.
8. Activez le panneau Image [Frame] ou pour qu'il apparaisse s'il est fermé, choisissez dans le menu, Fenêtre/Panneau/Image [Window/Panels/Frame].
9. Inscrivez SM1 dans la case Label de l'onglet Frame.
10. Dans la cinquième case du calque Action, avec le menu contextuel choisissez Action si cette fenêtre n'est pas visible.
11. Cliquez ensuite sur l'onglet +.
12. Choisissez Action, puis stop.
13. Répétez ces opérations pour les cases 10 et 15 en donnant l'étiquette SM2 à la case 10 et SM 3 à la case 15. L'action Stop devra être ajoutée à chacune.

Programmer les boutons

1. Cliquez dans la case 1 du calque texte.
2. Sélectionnez le bouton Sous-menu 1 seulement et assurez-vous que le panneau Actions est ouvert..
3. Cliquez sur le signe + et choisissez Action/Go To.
4. En-dessous, (si la fenêtre n'est pas déployée, cliquez sur le + du côté inférieur droit) dans la case Type, indiquez Étiquette [Frame Label] et inscrivez SM1 dans la case suivante (Frame). Note: Vous pourriez, si vous ne vous servez pas d'étiquettes, indiquer le passage à l'image 5 et modifier le type en conséquence.
   
5. Cliquez sur le bouton Sous-menu 2.
6. + - Action/Go To - Frame Label - SM2.
7. Faites un double-clic sur le bouton Sous-menu 3.
8. + - Action/Go To - Frame Label - SM3.

Répétez ces mêmes opérations dans les cases 5, 10 et 15.

1. Cliquez dans la case 5 du calque texte.
2. Dans la palette, + - Action/Get Url .
3. Inscrivez l'adresse complète d'un site ou entrez le chemin d'accès d'une page de votre site. (L'option Blank signifie ici qu'une nouvelle fenêtre du navigateur sera ouverte à cette adresse. Si vous désirez conserver la même fenêtre, vous n'avez qu'à ne rien modifier.)
4. Répétez pour les autres boutons Item.
   

Bravo! Il ne reste qu'à publier votre menu et à le placer dans une page Web.

Le résultat :