Cours et tutoriaux Photoshop, Flash, Fireworks, Paintshop et sur le développement de sites Web XHTML, PHP, MySQL...

Tutorial Flash : Bouton

  • Introductions

  • Informations

  • Résultat

Apercu du tutorial bouton

Nous allons voir ici comment créer un bouton en flash. Cela vous sera particulièrement utile pour créer des menus.


Avatar de netger

Auteur : WebmasterNetger

Difficulté : Très facile
Création : 02/02/2005
Mise à jour : 02/10/2007

Nombre de visites : 2906


1. Avant de commencerIcone remonter en haut de page

Avant tout il nous faut les images correspondantes à chaque état du bouton, c'est à dire :
- haut : lorsque le pointeur de la souris ne se trouve pas sur le bouton.
- dessus : lorsque le pointeur de la souris se trouve sur le bouton.
- abaissé : lorsque le pointeur de la souris se trouve sur le bouton avec le clic gauche enfoncé.

2. Créer un nouveau document flashIcone remonter en haut de page

Il faut maintenant créer un nouveau document flash.
Attribuez lui les propriétés suivantes :
- dimensions : 174 x 29 pixels (j'ai choisie ces dimensions pour que les boutons ne soient pas déformés)
- couleur d'arrière-plan : le mieux est de mettre la même couleur d'arrière plan que celle de la page destinée à recevoir le bouton (ou de faire un bouton rectangulaire).
- cadence : 12 images par secondes
- unité de la règle : pixels

3. Importer le bouton "haut"Icone remonter en haut de page

Nous allons maintenant importer le bouton "haut" dans notre scène : cliquez sur "Ficher", sélectionnez "importer" et enfin cliquez sur "importer dans la scène" (ou Ctrl + R). Choisissez le graphisme "bouton_haut.jpg" dans la boite de dialogue.

Pour aligner notre graphisme sur la scène nous allons le placer aux coordonnées X=Y=0 à l'aide du panneau propriétés.
Si le panneau propriétés n'est pas présent, cliquez sur le graphisme pour le faire apparaitre.

4. Convertir en symboleIcone remonter en haut de page

Nous allons convertir ce graphisme en symbole "bouton" afin de pouvoir lui attribuer ses comportements.
Pour cela faites un clic droit sur le graphisme puis cliquez sur "convertir en symbole" : définissez le type "bouton" et nommez-le.

5. Assigner les comportementsIcone remonter en haut de page

Choisissez l'outil de sélection et double-cliquez sur le symbole que nous venons de faire.
Nous allons "entrer à l'intérieur du symbole" afin de lui attribuer les comportements "dessus" et "abaissé".
Vous remarquerez également que le scénario a changé.

Pour appliquer le comportement "dessus" faites un clic droit sur la case vide dans la partie scénario et sélectionnez "insérer une image clé vide". Puis cliquez sur "Fichier", "importer" et "importer dans la scène" (Ctrl + R) et choisissez l'image "bouton_dessus".

Il ne reste plus qu'à répéter la même méthode pour le comportement "abaissé".
La frame nommée "cliquable" représente la zone active du bouton. Pour la remplir faites un clic droit sur la case correspondante dans la partie "scénario" et choisissez "insérer une image clé".

6. RésultatIcone remonter en haut de page

Vous pouvez maintenant importer ce bouton dans n'importe quelle animation Flash et lui ajouter une fonction (en ActionScript).
Vous pouvez aussi l'utiliser comme un élément flash isolé dans une page html.


Utilisez FireFoxW3C XHTML 1.0W3C CSS 2.1