Freegaia.comHébergement PRO !Hébergement discountLe forum de discussion Tous les kits graphiques ! Création de bannières Flash en ligne : c'est ici ! iwebMoteur UndergroundQuitter Freegaia

le
La boutique de Freegaia






Accueil / Ateliers & Dossiers / Multimédia / Flash

Réalisez un bouton avec lien
Avant-propos

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.
Informations

Logiciel : Flash 5.0

Niveau : Débutant

Auteur : PotatoesJunky [ www.grafimage ] 

Les étapes

[Créer un bouton]


[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.

[Etape 5]
Vous avez maintenant 2 images identiques.


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

 


 cliquez ici pour imprimer la page





cliquez ici pour découvrir l'offre hebergement de Freegaia
cliquez ici <