Votre question

[TUTO FLASH] Créer un bouton animé

Tags :
  • Contour
  • Graphisme
Dernière réponse : dans Photo et vidéo
7 Juillet 2007 01:11:30

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.



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.



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



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.



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.



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



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.



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.



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



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



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



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.



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



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.



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.



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



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)



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

Autres pages sur : tuto flash creer bouton anime

7 Juillet 2007 08:23:42

Merci ! Simpa le bouton !

On peut aller encore plus loin avec la superposition de MovieClip !
Si je retrouve, j'ai un bouton animé constamment, mais l'animation change au passage de la souris !

:D 

Bref, encore un grand merci, j'ajoute le tout sur la page des tutos ;) 
7 Juillet 2007 15:07:53

Ouais on peut en effet faire ça...

De rien. :kaola: 
6 Novembre 2009 20:35:21

Une précision qui peut avoir son importance :

Si vous effectuez des sites internet, des jeux ou des applications, il serait judicieux de vérifier assez rapidement le résultat de vos éléments lors de la création d'un PDF (En vue de la création d'un PressBook par exemple).

Les résultats peuvent être catastrophiques :
Dégradé de couleurs Coupé ou invisible (trés souvent dût à des dégradés imbriqués dans des groupes. Préferez créer des calques et si vous devez créer des groupes, faites plutot des clips) ;

Applatissement des transparances (ex : un reflet en _alpha 50% risque de se transformer en applat blanc _alpha 100%, là c'est la Merde, vous allez devoir reflechir un peu plus, peu etre que je ferais un tuto la dessus un jours !!)

Voila des petits conseils qui permettent de ne pas trop perdre de temps !

++
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS