Animation image par image

Des outils pour céer des animations en flash

Modérateurs: Guardian, AgnesD

Animation image par image

Messagede FLORIAN le Lun 28 Mar 2005 - 18:10

Je pense que vous avez du lire la premiere partie de la présentation de flash macromedia voici maintenant la seconde partie qui seras mis a jour a la suite des postes edités

pour les exemple des résultats crees et comme le forum n'accepte pas le swf il faudra suivre les liens edités entre parenthése

Aujourd'hui l" Animation image par image

L'animation image par image est la méthode la plus lente pour produire une animation. Il faut réaliser chaque image qui va etre lue. Evidemment, lors d'un mouvement le nombre d'images à réaliser va vite etre très conséquent. Cette méthode trouve justement ses limites au niveau de la productivité.

Nous allons réaliser l'animation image par image d'un rond qui effectue une rotation sur le plan. Nous utiliserons la méthode image par image ce qui va nous permettre de mieux apprécier les fonctionnalités de flash par la suite.

1==>Allez sur fichier, nouveau. Une nouvelle animation s'ouvre.

2==> Prenez l'outil cercle et tracez un rond sur le coté gauche de votre animation, peu importe la couleur, du moment que le rond n'est pas trop gros. Faites un rond plus ou moins comme celui réalisé ci dessous :
Image

3==>Ensuite, prenez la fleche noire et faites un rectangle de selection sur le cercle, ce qui le selectionne dans sa totalité. Appuyer sur F8 pour convertir le tracé en symbole, nommez le rond "rond" et choisissez clip pour le comportement (par défaut, c'est le type choisi). OK. Vous pouvez remarquer que lorsqu'on selectionne le rond, il s'entoure dorénavent d'un encadrement bleu.
Le rond a été transformé en symbole, à ssavoir qu'il fait maintenant partie de la bibliothèque de l'animation (CTRL L pour l'ouvrir).
4==>cliquez sur l'image 2, qui ne contient rienImageet appuyez sur F6pour créer une image clé. Cela produit une nouvelle image qui contient exactement le meme rond que la premiere.

5==>vérifiez que vous vous situez bien sur l'image 2 (cliquez dessus) et déplacez le rond en bas au centre comme suit
Image

6==> appuyez de nouveau sur F6 pour créer une troisième image clé, identique à le seconde et déplacez le rond au milieu a droite. Une derniere fois F6 et déplacez le rond en haut au centre.


7==>sauvegardez l'animation (fichier/enregistrer sous) et appuyez sur CTRL ENTREE une fenetre s'ouvre et donne un apercu de l'animation.
Le résultat, le rond se déplace circulairement en 4 points distincts. On remarque que le travail est long et que pour obtenir une animation bien fluide avec un déplacement peu sacadé, il serait nécessaire de créer beaucoup plus d'images clés ! Or, avec cette méthode, ce serait un travail long et répétitif qui peut etre simplifié aisément par l'interpolation de mouvement Que nous voyons par la suite.

le résultat = ici ( http://img121.exs.cx/my.php?loc=img121& ... on14ec.swf )
_________________________________________________________________________

l"interpolation de mouvement

Nous venons de voir l'animation mage par image. Cette méthode n'est pas sans inconvénients : le travail est long, minutieux, pas toujours avec de bons résultats ... L'interpolation de mouvement est une autre méthode de faire ce type de travail.

1==> Faites les trois premiers points du cours précédent ( animation image par image ).

2==> cliquez ensuite sur l'image 10, et appuyez sur F6 pour créer une nouvelle image clé. Votre barre d'animation doit alors ressembler à cela :
Image

3==> vérifiez que vous êtes bien sur l'image 10 (la tete de lecture rouge doit se trouver sur le 10) et d"éplacez alors le rond en bas au centre de l'animation.

4==> cliquez (clic droit) sur une des images entre la 1ère at la 9ème image (quand une main apparait). puis choisissez "créer une interpolation de mouvement" dans le menu qui vient de s'ouvrir. Votre barre ressemble à cela :
Image
Vous remarquez nettement ce qui caractérise des images interpolées :elles ont une flèche et sont de couleur violette. A remarquer que si l'interpolation est impossible, ou ratée, le trait qui constitue la flèche est discontinu.

5==>insérez d'autres images clés avec F6 aux images 20, 30 et 40. Sur la 20, le rond doit etre a mi hauteur, à droite; sur la 30, le rond doit etre en haut au centre; et sur la 40, mle rond doit etre au meme endoit que sur l'image numéro 1.

6==>entre chaque image clé ainsi faite, créez une interpolation de mouvement de la meme maniére qu'auparavant.

7==>enregistrez l'animation et testez la (CTRL ENTREE).
Votre animation est maintenant terminée, vous avez créé 4 interpolations de mouvement.

le résultat ici = ( http://img123.exs.cx/my.php?loc=img123& ... on23dc.swf )

_____________________________________________________________________________________

le guide de mouvement

Nous avons vu que les méthodes utilisées précedemment ne permettent pas d'obtenir un résultat "correct" dans certaiens situations comme celle du rond qui effectue une rotation. Pour faire un mouvement fluide et exploitable, il nous faut utiliser les guides de mouvement.
1==>Créez un nouveau document
2==>Sur le premier calque, avec l'outil ovale, créez un ovale, cliquez sur l'image 50 et appuyez sur F6 pour étendre cette image clé aux 40 premières images. Vous devez avoir quelque chose comme ceci :
Image
3==>Allez dans insertion, calques.Un nouveau calque, nommé calque 2 se place au dessus du calque 1. Cliquez sur le calque 1 et glissez le sans relacher au dessus du calque 2.
4==>Sélectionnez les 40 premières images du calque 2 sauf la première et supprimez les (la zone blanche doit disparaitre). Vous obtenez donc ceci :
Image
5==>Sur cette image 1 du calque 2, créez un rond avec un remplissage. selectionnez le, F8 pour le transformer en symbole graphique.
6==>faites glisser le rond sur le grand cercle, vous pouvez remarquer qu'il y a une "atirance" du rond vers le cercle, C'est normal.
7==>Cliquez sur l'image 10 (calque2) puis F6 pour créer des image clé. Faites de même sur les images 20, 30 et 40.
8==>Sur l'image 10, placez le rond sur le cercle en bas au centre; sur l'image 20, placez le rond sur le cercle à droite au centre; sur l'image 30, placez le rond sur le cercle en haut au milieu et su rla derniere image (40), placez le rond au même emplacement que sur l'image 1.
9==>Entre chaques images clés (0,10,20,30,40) créez un interpolation de mouvement. Vous avez donc créé 4 interpolations. Cela doit ressembler à cela :
Image
10==>Faites maintenant un clic droit sur le calque 1, cochez la cas " guide ". Cliquez droit ensuite sur le calque 2 et cochez " guidé " . Les calques prennent cette apparence :
Image

11==>enregistrez l'animation et testez la (CTRL ENTREE). Le résultat est impeccable, la rotation est presque parfaite. Il est donc absolument nécessaire de connaitre cette fonction. Voici le résultat :
( http://img93.exs.cx/my.php?loc=img93&im ... on37oa.swf )
_______________________________________________________________________________________

L'interpolation de forme

Cette interpolation s'applique à peu près de la même manière que l'interpolation de mouvement. Elle permet cependant des choses complètement différentes. Sur l'animation précédente, imaginez que vous voulez que le rond qui se déplace change de forme et se transforme en carré alors qu'il continue son mouvement circulaire. C'est ce que nous allons faire maintenant.

1==> Ouvrez l'animation 3
2==> double cliquez sur le rond (qui est un symbole). Vous voyez que vous entrez dans l'occurence (ou symbole) et que vous pouvez le modifier. Conséquence logique : puisque ce symbole, défini un seule fois dans la bibliothèque est utilisé dans toutes les images, si on le modifie, il est modifié dans toutes les images. Vous devez avoir ceci :
Image
3==> cliquez sur l'image 10 et appuyez sur F7 pour créer une nouvelle image clé vide . Puis dessinez y un carré au même niveau ou vous avez déssiné le rond sur les images précédentes.
4==> cliquez sur une des images entre la 1 et la 9. Allez dans la fenetre image et dans le sélecteur d'interpolation, choisissez forme. Votre barre doit alors ressembler à ça :
Image
Vous remarquerez que la représentation sur la barre de temps est la meme que pour l'interpolation de mouvement à la couleur près. Ici, la couleur est verte.
5==> Cliquez avec le clic droit sur l'image 1, copier les images.
6==> Clquez droit sur l'image 20 et coller les images. Vous créez donc une nouvelle image clé identique à l'image1.
7==> Créez une interpolation de mouvement entre l'image 10 et l'image 20.Ca doit etre comme ca :
Image
8==>enregistrez l'animation et testez la (CTRL ENTREE).
Le symbole suit la trajectoire définie par le guide mais le rond se transforme en carré puis redevient un rond. La connaissance de ces techniques "simples" ouvre énormément de possibilités. Reste le talent :wink:
resultat ici = ( http://img93.exs.cx/my.php?loc=img93&im ... on48xu.swf )

________________________________________________________________________________

a suivre tres prochainement

les masques
FLORIAN
 

Retourner vers Flash

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron