Ce tutoriel est écrit avec Flash CS 6.
Outils utilisés :
|
Outil d’écriture qui se paramètre dans les Options. On peut écrire du texte statique ou non statique. |
|
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. |
|
Permet d’effectuer des modifications d’échelle, de rotations, de biseau qui s’appliquent uniquement à un ou à des dégradés (remplissages). |
Texte
Rectangle
Transformation de dégradé
Créer un menu favoris :
Nouveau document :
► créer un nouveau document par le menu ou les touches Ctrl + N
Dans la fenêtre 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
survoler l’image pour la voir en grand
Pour afficher le panneau Propriétés s’il n’est pas ouvert,
► utiliser le menu 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
► afficher le panneau Couleur, soit en cliquant sur son icône dans le panneau des Outils, soit par le menu ou les touches Alt + Maj + F9
► dans le panneau sélectionner Dégradé linéaire dans le menu déroulant en haut à droite
► dans le document, tracer le rectangle pour créer le menu
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
► 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é
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
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 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
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
► 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
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
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
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).
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, …)
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 ou et donner un nom à votre fichier .fla
Aperçu :
Vous pouvez lancer un aperçu de votre menu en utilisant le menu 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 ou les touches Ctrl + Maj + Alt + S
Ce tutoriel a été réécrit avec l’autorisation de son auteur.
Ce tutoriel est la propriété du site Photoshoplus. Toute reproduction, exploitation ou diffusion du présent document est interdite.
Photoshoplus ©
