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

Tutorial Flash : Bouton (animé)

  • Introductions

  • Informations

  • Résultat

Apercu du tutorial bouton-anime

Ce tutorial expose la création d'un bouton "complexe".
Le vrai point important de ce tutorial est l'imbrication de movies clips; cette méthode vous permettra d'obtenir de biens meilleurs résultat sous Flash.


Avatar de netger

Auteur : WebmasterNetger

Difficulté : Facile
Création : 15/03/2006
Mise à jour : 02/10/2007

Nombre de visites : 3389


1. Créer un nouveau document & importer le boutonIcone remonter en haut de page

Créez un nouveau document et attribuez lui les propriétés suivantes :
- dimensions : 200 x 100 px
- 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

Importez maintenant le bouton dans votre scène.
Cliquez sur "Ficher", sélectionnez "importer" et enfin cliquez sur "importer dans la scène" (ou Ctrl + R).
Convertissez le ensuite en symbole bouton (ici nommé : "but_base").

2. Insérer un nouveau symboleIcone remonter en haut de page

Nous allons maintenant créer un Movie Clip qui sera joué en boucle lorsque la souris sera placée sur le bouton.

Cliquez sur "Insertion" et "Nouveau symbole".
Choisissez "Movie Clip" et nommez le (ici "mc_anim").

Vous devez maintenant vous trouver devant une page blanche.
Ouvrez la bibliothèque si ce n'est pas déjà fait et faites glisser "bouton_aqua" dans votre scène.
Placez le correctement aux coordonnées 0,0 et convertissez le en symbole Movie Clip ("mc_anim_graph")

3. Créer l'animationIcone remonter en haut de page

Il nous est maintenant possible de créer une animation !
Pour l'exemple je vais juste modifier la teinte du graphisme mais vous pouvez faire tout ce que vous souhaitez dans ce Movie Clip que nous allons ensuite utiliser comme état "rollover" du bouton.
Ici, j'utilise les paramètres suivants :
- Rouge : ( 100% x R ) + 0
- Vert : ( 100% x V ) + 75
- Bleu : ( 100% x B ) + 75
- Alpha : ( 100% x A ) + 0

N'oubliez pas de créer vos interpolations !

4. Affecter l'animation à l'état "Dessus"Icone remonter en haut de page

Cliquez sur "Séquence 1" afin de revenir sur la scène principale puis double cliquez sur le bouton.

Insérez une image clé vide sur l'état "Dessus" du bouton puis faite glisser depuis votre bibliothèque jusque sur votre scène l'animation que vous venez de créer ("mc_anim") et placez la correctement (coordonnées 0,0).
Pour Les 2 état restant complétez les comme d'habitude.



Utilisez FireFoxW3C XHTML 1.0W3C CSS 2.1