Créer un menu favoris

 

Ce tutoriel est écrit avec Flash CS 6.

 

Outils utilisés :

Texte

Outil d’écriture qui se paramètre dans les Options. On peut écrire du texte statique ou non statique.

Rectangle

Permet de tracer un rectangle seul ou un contour seul ou les deux à la fois, selon que les options de couleur ou de contour sont activées. On peut remplir un ton uni ou dégradé. La touche Alt permet d’effectuer le tracé à partir du centre. Avec la touche Maj, le tracé est contraint à un cercle parfait ou un carré parfait.

Transformation de dégradé

Permet d’effectuer des modifications d’échelle, de rotations, de biseau qui s’appliquent uniquement à un ou à des dégradés (remplissages).

 

Créer un menu favoris :

Nouveau document :

créer un nouveau document par le menu Fichier / Nouveau ou les touches Ctrl + N

Dans la fenêtre Nouveau document :

Nouveau document
survoler l’image pour la voir en grand

cocher ActionScript 2.0, le langage de programmation de Flash
puis dans la partie droite de la fenêtre, entrer Largeur 800 px et Hauteur 600 px, Unité de la règle Pixels et mettre la cadence d’image à 25,00 ips
si vous voulez, vous pouvez cocher la case Etablir comme valeur par défaut, de façon à mémoriser ces dimensions
valider la fenêtre par OK

Une fois le document créé, vous pouvez encore modifier vos choix, dans le panneau Propriétés à droite de l’interface
il suffit de cliquer sur l’icône en forme de clé, pour afficher à nouveau la fenêtre

Modifier le document
survoler l’image pour la voir en grand

Pour afficher le panneau Propriétés s’il n’est pas ouvert,
utiliser le menu Fenêtre / Propriétés ou les touches Ctrl + F3

Dessiner le menu :

Dans le document, nous allons créer un menu où nous placerons différents liens hypertextes vers nos sites préférés sur Internet, par exemple

Avant de créer ces liens hypertextes, nous allons dessiner un menu avec l’outil Rectangle.

prendre l’outil Rectangle ou touche R

Outil Rectangle

afficher le panneau Couleur, soit en cliquant sur son icône dans le panneau des Outils, soit par le menu Fenêtre / Couleur ou les touches Alt + Maj + F9
dans le panneau sélectionner Dégradé linéaire dans le menu déroulant en haut à droite

Panneau Couleur

dans le document, tracer le rectangle pour créer le menu

Tracer le rectangle

Modifier le menu :

Nous allons maintenant modifier le rectangle de façon à ce que le dégradé soit vertical, et non horizontal (par défaut).

prendre l’outil Transformation de dégradé ou touche F

Outil Transformation de dégradé

avec l’outil cliquer une fois sur la forme du rectangle pour la sélectionner puis
placer l’outil sur le coin en droite, le curseur se transforme en flèches rotatives

maintenir le bouton de la souris et faire pivoter la forme pour changer le sens du dégradé

Rotation pour changer le sens du dégradé

Si vous voulez modifier les dimensions du menu, il faut utiliser l’autre outil, l’outil Transformation libre ou touche Q.

Modifier les couleurs du dégradé :

Pour modifier les couleurs du dégradé :
avec l’outil Transformation de dégradé, cliquer sur la forme du menu dans le document

afficher à nouveau le panneau Couleur

En bas de l’aperçu du dégradé vous avez 2 étapes de dégradé, celle de gauche est noire et celle de droite est blanche (couleurs par défaut).

Pour modifier les couleurs,
faire un double-clic sur l’étape de gauche et choisir une autre couleur parmi celles qui s’affichent

Changer les couleurs du dégradé

Vous pouvez également ajouter d’autres étapes de dégradé, donc plus de couleurs, en cliquant sous la barre de l’aperçu du dégradé, afin d’ajouter une étape supplémentaire.

Ajouter plus de couleurs

Ajouter les textes :

Nous allons maintenant ajouter les textes puis leurs attribuer des liens.

dans le panneau Scénario (en bas de l’interface, par défaut), cliquer sur l’icône Nouveau calque

puis faire un double-clic sur le nom du calque (Calque 2) et le nommer liens

Nommer le nouveau calque

Vous pouvez également nommer le Calque 1 en menu, par exemple.

prendre l’outil Texte ou touche T

dans le panneau Propriétés – Caractère, choisir la police, sa taille et la couleur du texte

Paramétrer les caractères

placer l’outil dans le document et écrire le nom du premier menu

Le texte se place dans une zone qui peut être modifiée ensuite (paragraphe).

puis cliquer à l’extérieur pour valider le texte

Écrire le texte du premier menu

Vous pouvez à tout moment modifier le texte en cliquant à nouveau avec l’outil Texte.

Ajouter les liens :

avec l’outil Texte cliquer dans la zone de texte puis afficher l’onglet Options du panneau Propriétés en cliquant sur la flèche
entrer le lien dans le champ Lien
ensuite cliquer sur le texte, pour valider le lien

Entrer un lien pour le Lien 1

Si le lien est externe, vous pouvez activer son ouverture dans un autre onglet du navigateur en sélectionnant _blank dans le menu Cible en dessous du lien (panneau des Options).

Pour créer les autres liens il faut ajouter autant de calque qu’il y a de lien. Nous allons dupliquer le lien actuel puis le modifier.

dans le panneau Scénario, faire un clic droit sur le calque lien (celui contenant le Lien 1 du menu)
choisir Dupliquer les calques

Dupliquer les calques

Vous obtenez un second calque, vous pouvez le nommer lien 2, par exemple (et nommer le premier, lien 1).

prendre l’outil Sélection ou touche V

cliquer sur la zone du lien pour la sélectionner puis déplacer cette zone dans le menu, donc déplacer le calque.
Vous pouvez utiliser les touches Maj + Flèche bas pour déplacer en dessous par exemple, de 10 pixels à la fois (grâce à la touche Maj).

Déplacer le second lien

Une fois votre second lien créé et positionné, il suffit avec l’outil Texte de le renommer et de modifier son lien dans le panneau Propriétés – Options.

donc cliquer avec l’outil Texte, écrire le lien dans les Options et cliquer à nouveau dans le texte, pour valider

Ensuite vous pouvez créer les autres liens de la même façon (Lien 3, Lien 4, …)

Menu avec 4 liens

Vérifier ensuite que les liens sont bons en cliquant sur chaque textes du menu successivement, sinon les refaire.

Enregistrer en fla :

choisir le menu Fichier / Enregistrer ou Enregistrer sous et donner un nom à votre fichier .fla

Enregistrer en fla

Aperçu :

Vous pouvez lancer un aperçu de votre menu en utilisant le menu Fichier / Aperçu avant publication et sélectionner :
soit la ligne Par défaut (HTML) pour lire dans le navigateur ou touche F12
soit la ligne Flash pour lire l’animation avec le lecteur Flash intégré (apparait dans une fenêtre indépendante)

Exporter l’animation en swf :

Pour exporter votre animation en tant que fichier .swf
choisir le menu Fichier / Exporter / Exporter l’animation ou les touches Ctrl + Maj + Alt + S

L’image finale se trouve au début du tutoriel ▲

 

Ce tutoriel a été créé par ---/// F®K Design ///---. Photoshoplus en a créé une nouvelle version, avec son autorisation.
Toute reproduction, exploitation ou diffusion du présent document est interdite.