Créer un bouton animé

  • Introduction
  • Informations
Créer un bouton animé Ce tutoriel expose la création d'un bouton "complexe".
Le vrai point important de ce tutoriel est l'imbrication de movies clips; cette méthode vous permettra d'obtenir de biens meilleurs résultat sous Flash.  
Netger
  • Auteur : Netger
  • Publication : 15 mars 2006 15:17
  • Consultations : 8931
 

1. Créer un nouveau document & importer le bouton

Créer un bouton animé  image 1 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 symbole

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

Créer un bouton animé  image 2 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'animation

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.
Créer un bouton animé  image 3 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"

Créer un bouton animé  image 4 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.  
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire