Tom's Guide > Forum > Graphisme > [TUTO FLASH] Créer un bouton animé

[TUTO FLASH] Créer un bouton animé

Forum Graphisme : [TUTO FLASH] Créer un bouton animé

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Mot :    Pseudo :           
 

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.

http://img163.imageshack.us/img163/4167/rondcq0.png

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.

http://img48.imageshack.us/img48/5913/peinturezf6.png

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

http://img48.imageshack.us/img48/8641/grouperle2.png

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.

http://img163.imageshack.us/img163/7588/pivoterca2.png

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.

http://img163.imageshack.us/img163/5523/boutonrh8.png

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

http://img133.imageshack.us/img133/3277/newcalqueqr4.png

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.

http://img133.imageshack.us/img133/87/rougeuu9.png

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.

http://img133.imageshack.us/img133/1686/blancov0.png

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

http://img163.imageshack.us/img163/8461/dessustt5.png

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

http://img133.imageshack.us/img133/5827/imgclfh0.png

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

http://img113.imageshack.us/img113/6233/vertay1.png

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.

http://img519.imageshack.us/img519/6296/clvidejd8.png

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

http://img95.imageshack.us/img95/5152/degradje6.png

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.

http://img95.imageshack.us/img95/6256/animgi2.png

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.

http://img129.imageshack.us/img129/4853/img29ye0.png

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

http://img402.imageshack.us/img402/2809/30wg5.png

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)

http://img95.imageshack.us/img95/9076/interpolationfw6.png

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émunère ton site
Hosting Favicon
Clic pas ici
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.

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


Message édité par RedTux le 07-07-2007 à 08:24:09
------------------------------ N'oubliez pas le [Résolu] dans le titre si vous êtes satisfait.
Les règles du Forum - À lire absolument
Répondre à RedTux

Ouais on peut en effet faire ça...

De rien. :kaola:

------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
Répondre à Allstar27
- 0 +

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 !

++

Répondre à J_J
Tom's Guide > Forum > Graphisme > [TUTO FLASH] Créer un bouton animé
Aller à :

Il y a 1747 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Liens