Ce tutorial a été réalisé
pour Flash5. Il s'agit de créer un texte ou un bouton avec
un lien.
La version Anglaise de Flash étant plus courante que la version
Française, les noms des outils et fonctions sont à la fois
en anglais et en français dans le lexique en bas de page.
[Etape 1]
Créez un nouveau document (Fichier>Nouveau).
Procédez comme pour le texte, mais, au lieu de cliquer sur
le bouton "Texte" de la barre d'outils, cliquez cette fois
sur l'outil "Rectangle" (
).
Dans la fenêtre "Couleurs", définissez une couleur de contour
et une couleur de remplissage, puis tracez votre rectangle
sur le document.
Procédez ensuite comme pour le texte, à ceci près qu'un clic
sur le rectangle ne sélectionne que le contour ou le remplissage,
parce que Flash utilise les vecteurs pour les formes géométriques
et le dessin (l'explication du dessin vectoriel fera l'objet
d'un prochain tuto).
Il vous faut donc cliquer, dans la barre d'outil, sur la flèche
noire, et délimiter un cadre autour du rectangle pour en sélectionner
la totalité.
Donc, faites : F8 > Bouton, nom du bouton, puis double-clic
sur le rectangle, et copie de la première image-clé.
Nous voulons que le rectangle change de couleur, et qu'un
texte apparaisse lors du rollover. Placez-vous sur la deuxième
image (Dessus). Un simple clic sur la couleur de remplissage
vous permet d'en changer. Pour le texte, écrivez-le comme
décrit plus haut.
[Etape 2]
Attribuer un lien au texte ou au bouton réactif.
Sélectionnez l'objet (texte ou bouton, selon celui que vous
voulez choisir), et faites un clic droit dessus, puis sélectionnez
Actions. Un panneau s'ouvre (ci contre).
Il permet de piloter les modules de programmation Action Script
de Flash.
Nous verrons les fonctions avancées plus tard, dans d'autres
tutoriaux. Néanmoins, pour associer un lien à notre objet,
nous allons avoir besoin d'une ligne de programmation.
Dans Actions de base, sélectionnez "On mouse event" (action
de la souris) : la case "Release" est cochée par défaut, et
ça nous convient parfaitement.
Double-cliquez maintenant sur Get URL.
Vous remarquez un certain nombre d'options en bas du panneau.
Dans le champ "URL", entrez l'URL à laquelle vous voulez lier
votre bouton.
Dans le champ "Window", laissez-le tel quel si vous voulez
que la page appellée se charge dans la fenêtre où se trouve
votre bouton. Sinon, sélectionnez "_blank" pour charger la
page dans une nouvelle fenêtre.
Enfin, dans le champ "Variables", laissez-le tel quel.
[Etape 3]
Et voilà ! Faites le test ci-contre, c'est ce que vous devez
obtenir si vous avez tout suivi :
[Créer un texte]
[Etape 1] Commencez par vous positionner sur la première image-clé
de la ligne de temps : elle apparaît en noir, comme ci-dessous
:
[Etape 2] Cliquez sur le bouton texte (
) dans la barre d'outils, et définissez un espace pour y inscrire
votre texte (vous pourrez le modifier par la suite). Attention
: les modifications réalisées pour en faire un texte avec
lien ne permettront plus, par la suite, de modifier le texte
lui-même !
[Etape 3]
Après avoir cliqué sur le texte (un contour bleu doit apparaître),
appuyez sur la touche F8 (attribution de la fonction).
Une fenêtre s'ouvre : Choisissez "Bouton" et attribuez-lui
un nom.
[Etape 4]
Double-cliquez sur le texte : vous pouvez maintenant modifier
les propriétés du bouton. Faites un clic droit sur la première
image-clé (Haut), puis "Copier", et faites un clic-droit
dans la deuxième case (Dessus), puis "Insérer une image-clé",
puis enfin, coller.
Nous allons faire en sorte que lors du survol du texte par
la souris, le texte change de couleur.
Pour ceci, cliquez sur la deuxième image-clé, puis sur le
texte.
Dans la barre d'outil, choisissez une couleur.
[Etape 6]
Cliquez sur "Scène 1", en haut à gauche de la ligne de temps,
puis faites Ctrl+Entrée, pour tester votre animation.
En passant sur le texte avec la souris, celui-ci
doit changer de couleur, comme ci-contre.
[Lexique]
Français
- Ligne de temps
- Haut
- Dessus
- Image-clé
- Relâché (état du bouton gauche de la souris).
Anglais
- Timeline
- Up
- Over
- Keyframe
- Release