Se connecter / S'enregistrer
Votre question

[TUTO FLASH] Animer le rebond d'une balle!

Tags :
  • Contour
  • Graphisme
Dernière réponse : dans Photo et vidéo
5 Juillet 2007 16:05:01

Salut, je vais vous montrer comment animer le rebond d'une balle sur le sol, avec son ombre.

1. Créez unnouveau document Flash (Fichier/Nouveau/Ducument Flash), et dessinez une simple ligne horizontale noir qui symbolisera le sol. Ajoutez deux autres calques par-dessus. (Pour dessiner une ligne parfaitement horizontale, appuyez sur la touche et, tout en la maintenant enfoncée, dessinez la ligne.)



2. Sur le calque du haut, dessinez un rond rempli d'un dégradé de la couleur de votre choix, sans contour. Veuillez à ce que le mode Dessin d'objet soit activé et positionnez ce rond au-dessus de la ligne horizontale. Maintenez la touche enfoncée tout en dessinant ce rond pour qu'il soit parfait.



3. Utilisez l'outil Pot de peinture et cliquez en haut à gauche de votre rond pour que le dégradé ne soit pas situé au centre.



4. Dans le scénario, cliquez sur l'image 20, et appuyez sur F6 pour créer un deuxième image clé à cet endroit.



5. Sur le calque du bas, contenant la ligne horizontale, cliquez sur l'image 20 et appuyez sur F5 pour étendre l'image jusqu'à cet endroit.



6. Sélectionnez votre balle et, toujours en restant à l'image 20, déplacez-la en dessous de la ligne horizontale.

7. Pour créer l'interpolation de mouvement entre les deux positions de la balle, cliquez entre l'image 1 et l'image 20.

8. Dans le panneau Propriétés, dans la liste déroulante Interpolation choisissez Mouvement.



9. Une flèche bleue apparaît dans votre scénario, entre les deux images clés, signifiant ainsi que votre interpolation est réalisé. Déplacez la tête de lecture pour voir l'animation de votre balle, qui tombe désormais.

10. Nous allons donner un effet de rebondi à notre balle, pour rendre l'animation un peu plus réaliste. Pour cela, créez une nouvelle image clé de la balle à l'image 25, sélectionnez la balle et, avec l'outil Transformation aplatissez-la légèrement en utilisant la poignée du haut en appuyant simultanément sur la touche ALT.



11. Créez une deuxième interpolation de mouvement entre l'image clé 20 et l'image clé 25.

12. Votre balle semble s'écraser sur le sol. L'interpolation de mouvement a donc permis d'animer cettre transformation. Nous allons maintenant faire remonter notre balle et, tout d'abord, la remettre à son état normal. Pour cela, il suffit de copier la balle à l'image 20, de créer une nouvelle image clé vide à l'image 30 en appuyant sur F7 et de coller la balle en faisant Editon/Coller en place (ou Ctrl+Maj+V).

13. Mettez-vous a l'image 1, copiez la balle, créer une image clé vide à la position 50 en appuyant sur F7, et collez la balle en faisant à nouveau Editon/Coller en place. Notre balle retrouve ainsi sa position de départ.

14. Créez une interpolation de mouvement entre les images 25 et 30 ainsi qu'entre les images 30 et 50 et allongez à nouveau notre ligne du sol jusqu'à l'image 50, en sélectionnant ce calque et en appuyant sur F5.



15. Votre balle rebondit! Testez votre animation en faisant Ctrl+Entrée, vous la verrez ainsi jouer en boucle. Cependant, le mouvment n'est pas très réaliste. Nous allons ajouter un peu d'effet de gravité, en jouant sur l'accélération et la décélération. Pour cela, cliquez sur le scénario entre l'image 1 et l'image 20.

16. Dans le paneau Propriétés, à l'option Accélération, déplacez le curseur vers le bas pour créer une accélération négative de -100. Le terme négative est un peu trompeur car on pourrait penser qu'il s'agit d'une décélération.



17. Répétez la même action pour l'interpolation entre l'image 30 et l'image 50, mais cette fois avec une accélération positive de 100.
Testez votre animation , et vous verrez que la balle a désormais un mouvement plus réaliste. Ajoutons encore du réalisme en créant une ombre au sol.

18. Sur le calque 2, qui était vide jusqu'a présent, dessinez un rond noir légèrement aplati, de façon qu'il soit sur le sol et à droite de la balle.



19. Convertissez cette ombre en clip d'animaiton, en la sélectionnant et en allant dans Modification/Convertir en symbole (ou en appuyant sur F8), et, dans la boîte de dialogue qui apparaît, donnez lui comme nom ombre et cliquez sur OK.

20. Dans le panneau Propriétés, cliquez sur l'onglet Filtres, et appliquez un filtre de flou à l'ombre, avec des paramètres de Flou X et Flou Y égaux à 25 et de qualité Moyenne.



21. Positionnez la tête de lecture du scénario à l 'image 20, et créez une nouvelle image clé de notre ombre en appuyant sur F6. Déplacez l'ombre de façon qu'elle soit sur le bas à droite de notre balle, et baissez les paramètres de flou à 5, pour que l'ombre soit plus nette.



22. Créez une autre image clé à la position 30, tant que votre balle est au sol, puis mettez-vous à l'image 1 et copiez l'ombre. Mettez-vous ensuite a l'image 50, créez une image clé vide en appuyant sur F7, et collez l'ombre en faisant Editon/coller en place (ou Ctrl+Maj+V). Votre ombre prend ainsi sa position de départ.

23. Créez une interpolation de mouvement entre les images 1 et 20, avec une accélération négative de -100 et une autre interpolation de mouvement entre les images 30 et 50 avec une accélération positive de 100. Vous avez fini! Testez votre animation pour voir votre balle rebondir. Vous noterez que l'interpolation de mouvement a animé automatiquement le passage du flou de l'ombre de 25 à 5. Vous pouvre rendre votre animation moins saccadée en changeant le nombre d'image par seconde de votre animation Flash, dans le panneau de Propriétés. Une cadence de 25 images par seconde changera nettement la qualité de l'animation.

RESULTAT FINALE:

http://img151.imageshack.us/my.php?image=rebondhu4.swf

Autres pages sur : tuto flash animer rebond balle

5 Juillet 2007 16:21:46

Un tuto qui peut être bien amélioré avec des captures d'écrans :ange: 
(c'était un message subliminale)
5 Juillet 2007 16:35:11

Ouaip mais j'ai plus flash :lol:  je le retrouve et je fais ça....
Contenus similaires
5 Juillet 2007 18:51:28

je n'ai rien compris
5 Juillet 2007 18:52:46

Qu'est ce que ta pas compris???
5 Juillet 2007 19:12:25

le tout desole allstar je vais poster un tuto pour rebond ball avec un guide de mov a+bonne continuation
5 Juillet 2007 19:15:32

Euh ... son tuto est très clair ! Il manque des illustrations, mais c'est tout!
5 Juillet 2007 19:40:41

allstar c un mec cool pas d probleme avec lui C que mon point de vu du tuto c tout
5 Juillet 2007 19:48:56

Oui, j'avais compris, mais vu comment t'écris bien le Français je comprends que tu ne comprennes pas le tuto ...

(si tu pouvais essayer de faire attention à l'orthographe ... le SMS est très mal vue ici ! Merci d'avance)

Bon, j'attends la version illustré :D 
6 Juillet 2007 01:29:02

Voilou j'ai éditer... xD
6 Juillet 2007 01:38:29

Merci :D  J'ajoute à la liste des tutos ;) 
6 Juillet 2007 01:42:25

Quelle honneur :jap:  :D 
6 Juillet 2007 02:12:03

pas mal le resultat allstar bonne continuation a+
24 Juillet 2007 03:05:13

Mici Cuti :jap: 
30 Juillet 2008 09:16:31

Très bien fait ta démo!! ça vaut bien un petit clic!!!!!!!!!
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