AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  

Partagez
 

 Réaliser un bouton animé

Aller en bas 
AuteurMessage
allstar27
A l'aise
A l'aise
allstar27

Messages : 98
Date d'inscription : 20/08/2007
Age : 35
Localisation : Liège

Réaliser un bouton animé Empty
MessageSujet: Réaliser un bouton animé   Réaliser un bouton animé EmptySam 1 Sep - 16:59

Salut, voici comment créer un petit bouton animé sympa.

1. Créez un nouveau document flash (Fichier/Nouveau/Document Flash), et dessinez un rond rempli d'un dégrader radial en tons de gris, sans contour.

Réaliser un bouton animé Rondcq0

2. A l'aide de l'outil Pot de peinture (touche K), modifiez le centre du dégradé de façon qu'il soit en haut à gauche.

Réaliser un bouton animé Peinturezf6

3. Groupez ce rond si ce n'est pas déjà fait (Modification/Groupez ou appuyez sur Ctrl+G) et dupliquez le rond à l'aide de la commande Edtion/Dupliquer (ou appuyez sur Crtl+D).

Réaliser un bouton animé Grouperle2

4. A l'aide de l'outil Transformation, tournez le rond dupliqué de 180 degrés, et réduisez légèrement sa taille. Positionnez-les ensuite de façon qu'il soit aligné avec le rond en dessous.

Réaliser un bouton animé Pivoterca2

5. Sélectionnez les deux ronds et choisissez Modification/convertir en symblole ou appuyez sur la touche F8. Dans la boîte de dialogue qui apparaît, choisissez Bouton comme type de symbole, et entrez bouton animé comme nom.

Réaliser un bouton animé Boutonrh8

6. Cliquez deux fois sur ce bouton afin d'entrer dans son scénario. Ajoutez un nouveau calque au-dessus du calque existant.

Réaliser un bouton animé Newcalqueqr4

7. Sur ce calque, dessinez un rond sans contour rempli d'une couleur rouge foncé unie, d'un opacité de 50%, de la même taille que le plus petit rond sur le calque en desous, comme sur la figure.

Réaliser un bouton animé Rougeuu9

8. Fignolez en rajoutant un calque par-dessus et en dessinant un petit rond blanc légèrement transparent en haut à gauche qui symbolisera le reflet.

Réaliser un bouton animé Blancov0

9. L'état Haut de notre bouton est terminé. Dans le scénario, sélectionnez toutes les images de l'état Dessus.

Réaliser un bouton animé Dessustt5

10. ... et choisissez Insertion/Scénario/Image-clé. Trois images clés sont alors créees dans cet état.

Réaliser un bouton animé Imgclfh0

11. Changez la couleur du rond rouge foncé pour un vert assez lumineux, d'une transparence de 70%.

Réaliser un bouton animé Vertay1

12. Créez un nouveau calque par-dessus les autres. Insérez une nouvelle image clé vide en choisissant Insertion/Scénario/Image-clé vide.

Réaliser un bouton animé Clvidejd8

13. Sur ce calque, dessinez un rond assez grand rempli d'un dégradé radial partant d'un vert clair d'une transparence de 70% à ce même vert clair d'un transparence de 0%.

Réaliser un bouton animé Degradje6

14. Sélectionnez ce rond, et convertissez-le en symbole clip en choisissant Modification/Convertir en symbole ou en appuyant sur le touche F8. Mettez anim dégradé come nom de symbole.

Réaliser un bouton animé Animgi2

15. Cliquez deux fois sur ce symbole afin d'entrer dans son scénario. Comme vous pouvez le constater, nous avons créé un clip d'animation dans un bouton.

16. Créez deux nouvelles images clés, l'une à l'image 10 et l'autre à l'image 20.

Réaliser un bouton animé Img29ye0

17. Sur l'image 10, changez le drégradé en diminuant la transparence du vert central. Mettez-le à 30% de transparence.

Réaliser un bouton animé 30wg5

18. Créez ensuite une interpolation de mouvement de forme entre les images 1 et 10 et les images 10 et 20. (Clic droit entre les images)

Réaliser un bouton animé Interpolationfw6

19. Testez votre animation (Contrôle/Tester l'animation ou appuyez sur les touches Crtl+Entrée), vous obtenez un bouton qui semble s'allumer lorsque vous passer le curseur au-dessus

RESULTAT FINAL

http://img95.imageshack.us/my.php?image=boutonnc1.swf

_________________
Réaliser un bouton animé Kenzavn0
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://kenza-farah.exprimetoi.net
 
Réaliser un bouton animé
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Val-Création :: Espace Graphisme :: Tutos Flash-
Sauter vers: