InfoProGraphie Simple > Tutoriels > Graphisme > Animation > E-anim > Animation avec portes

Eanim - Animation avec portes

Information du tutoriel

http://infoprographiesimple.free.fr/forums/img/avatars/2.png Auteur: DrNaBl


Voila un tutoriel qui pourra vous servir de TP, si vous maitriser E-anim, que je rappelle est un logiciel gratuit et libre;) qui permet de réaliser des animations en flash. Ce tutoriel va se découper en deux parties, le premier va vous exposer ce que l'on veut faire, les contraintes, les choses à ne pas oublier. Et la deuxième partie, la correction;). Pour réussir ce tutoriel vous devrez savoir: ajouter une image, un bouton, une action "play" et "goto and play", gérer les déplacements. Ou sinon vous pouvez bien entendu ne connaitre aucune de ses notions mais jeter un coup d'oeil sur ce tutoriel qui est assez simple même si vous n'y connaissez rien à E-anim, ce sera peut-être l'occasion pour vous de le découvrir;).

1)Qu'est-ce que l'on veut réaliser?

Ceci:

Alors, le but de ce tutorial est de créer une animation qui se déclenche lorsque l'on appuie sur le bouton "Ouvrir". L'animation ce décompose en trois parties:
-des portes s'ouvrent
-une animation se joue après que les portes se soient ouvertes.
-les portes se referment si l'on appuie sur le bouton "Fermer" ou à la fin de l'animation.

La seule contrainte, c'est de ne pas oublier que les portes ne se referment que si l'on appuie sur le bouton fermer ou à la fin de l'animation, c'est à dire il ne faut pas que les portes se referment pendant que l'animation se jouent;). Sinon à part cela, ça va être du gâteau;).

2)Correction

Si vous regardez cette partie c'est que vous avez fini :D, ou peut-être que vous avez abandonner :(, mais avant que vous ne regardez plus bas, je vous conseille quand même de ne pas lâcher les bras trop vite;), vous passer plusieurs heures, le but c'est que vous réussissiez;). Bon trêve de bavardage et voici ce que vous attendiez la correction:pour ceux qui ne sont pas encore à l'aise avec e-anim munissez vous de cette image:interface.

Tout d'abord, il faut stopper l'animation tout au début, c'est à dire au temps 0, puisque l'on veut que l'animation ne se joue que après que l'on ait appuyé sur le bouton "Ouvrir";) , donc pour cela cliquer sur le dernier bouton avec un triangle à l'envers de la barre d'outils qui stop l'animation au temps voulu(cf.1), un petit triangle rouge devrait apparaître au dessus du temps 0.

Ensuite on va ajouter les objets qui constitueront l'animation (un fond, l'image d'un soucoupe par exemple etc...) puis nos deux portes (celle de droite et celle de gauche :p) avec le bouton ajouter une image (cf.2), ces deux portes devront donc cacher les autres images. Déplacer les deux portes pour que celles-ci se touchent (soient fermées).

Ajoutez ensuite notre fameux bouton "Ouvrir" (cf.3), une boîte de dialogue s'ouvre, vous pouvez modifier l'aspect de votre bouton en détail, le but de ce tutoriel n'étant pas de faire cela je ne détaillerai pas la démarche à suivre mais vous pouvez vous y référiez au tutoriel correspondant;), donc dans le champs de texte taper "Ouvrir" ou autre chose comme "Play", "Jouer" ...(cf.4). Cliquez ensuite sur le bouton action (cf.5), une nouvelle boîte de dialogue s'ouvre, cliquer sur le bouton "play" (cf.6) et vérifier que l'action ne se déclenche que lorsque l'on clique sur l'objet (cf.7). Cliquer sur OK.

Allez ensuite au temps dix par exemple, plus vous allez dans un temps grand plus la porte prendra du temps à s'ouvrir;). Donc on prendra dix, ou plus si vous le souhaitez;). Ouvrez les deux portes (déplacez les vers la gauche et la droite). Puis faites votre animation, par exemple faire bouger la soucoupe dans tous les sens avec le bouton enregistrer un déplacement (cf.8), lorsque vous cliquez sur ce bouton tout les déplacement effectuer avec un objet est sauvegardé;), puis re-cliquer sur le même bouton pour arrêter l'enregistrement (ce bouton n'est disponible que depuis la version 7 de E-anim).

Admettons que votre animation se termine au temps 50. Il faudra alors fermer les portes au temps 60. Mais c'est là où réside la difficulté de ce tutoriel, si vous faites cela, les portes commenceront à se refermer au temps 11 juste après l'ouverture des portes. Donc il faut immobiliser les portes au temps 50 avant de fermer les portes au temps 60 pour que les portes ne se referment qu'au temps 51. Pour cela allez au temps 50 sélectionner une porte et cliquer sur le bouton "immobiliser copy précédente" (cf.9), faites de même avec l'autre porte. Ensuite vous pouvez fermer les portes au temps 60 en toute sécurité :p.

Voilà on a presque fini, il suffit juste de rajouter le bouton "Fermer" au début de l'animation. Donc allez au temps 0 et ajouter un bouton comme vous l'avez fait pour le bouton "Ouvrir", sauf que pour l'action au lieu de sélectionner "play", cliquer sur "goto and play" et indiquer 50, le temps où les portes se referment (cf.10).

Enfin c'est fini, en ayant passer ce tuto vous devrez avoir bien maitriser les quelques bases de E-anim. Il ne vous reste plus qu'a enregistré votre au format .phi (cf.11) qui est le format de E-anim qui vous permettra de retravailler avec votre animation comme le .xcf de the Gimp ou le .psd de Photoshop. Et ensuite d'enregistrer une page html qui contiendra votre .swf (cf.12). Sinon je vous invite à aller sur le forum si vous avez des soucis;).


Les cours sont la propriété de leurs auteurs respectifs.
Toute reproduction totale ou partielle sans l'accord des auteurs est interdite.