[ e-anim ] bases du flash avec e-anim

J'ai plusieurs tutoriels, je les postes a la suite ^^

On peux faire de nombreuses choses avec e-anim un logiciel gratuit de flash. Et avec un peu de créativité, on peux faire sans arret de nouvelles choses ^^
L'avantage de ce logiciel, moin complet que d'autres, et d'etre gratuit, et aussi plus simple d'acces

1) télécharger E-anim
http://phildes.com
cliquez sur " télécharger e-anim 7.01 béta " et suivez les instruction. Normalement, en quelques minutes a peine, il est installé. Une petite présentation vous montre les outils généraux de e-anim, regardez la bien ca pourrais vous servir :p
Donc voila, vous possedez E-anim ! Alors, dans ce logiciel, tout tourne autour de la " barre du temps ". Autrement dis, chaque objet pourra avoir une action. M'enfin, ca parait bizarre dis comme ca mais en fait c'est simple ^^

( a reheberger )

SI vous passez votre souris sur une otpion, un texte apparait pour vous montrer l'option en question. Si vous ne comprenez pas a quoi ca sert ( comme " cacher-montrer " ) ne vous inquietez pas, vous en aurez besoin plus tard ( pour faire une signature musicale, par exemple ^^ )
Je n'ai mis que les option vraiment " utiles " ou celles dont on parle apres :p
( si deux textes apparaissent en meme temps, l'un sur l'autre, c'est que vous avez apssé votre osuris d'une option a une autre trop vite, enlevez la puis repassez sur l'option en question )

2) faire bouger un texte
Alors on vas apprendre a faire simplement bouger un texte !
Vous ovrez votre logiciel, vous avez normalement une page " blanche ". Pour travailler a partir d'une image faites projet => dimentions => et vous mettez la taille de votre image. Ensuite vous cliquez sur ajouter une image et vous choisissez l'image en question ^^
Bon, la on va travailler sur fond blanc. E-anim ne permet aps de faire de beaux effets de texte, par la suite je montrerais comment avoir un joli texte quand meme, donc on est obligé de prendre un texte tout simple.
On fait ajouter texte et on choisit les mesures que l'on veux^^

Ensuite on place le texte ou on veux sur l'écran. Normalemen la barre du temps est a 0 ( la barre graduée en haut ) ce qui veux dire que au début de l'animation, le texte sera la ou vous l'avez placé.
Maintenant cliquez sur la barre du temps au temps 50 ( peu importe mais moi je choisit ce temps xD ) et la, déplacez votre texte a un autre endroi. Donc, lorsque le temps sera a 50, le texte sera au nouvel embracement, ce qui veux dire que entre temps, il va bouger.

Maintenant, il faut le faire revenir. Pour qu'il soit a la meme vitesse, vous vous placez au temps 100 et vous remettez votre texte a l'emplacement du début ( c'est aps grave si c'est pas pile au meme endroi)

sur la capture jme suis trompé j'ai mis a 99 mais c'est pas grave xD Si vous vous trompez comme ca, ne recliquez surtout pas sur 100 !

Maintenant, on va voir votre animation. On se place sur le temps 0 et la vous cliquez sur " play" ( enfin le pti triangle ). Normalement votre texte se déplace sans s'arreter :

( le fond est transparant car j'ai travaillé sur " fond blanc ", ou plutot sur aucun fond :p )
Vous pouvez lui faire faire plus de déplacements ^^

A la fin faut toujours bien remettre le texte a son emplacement du début !

Par contre, vous ne pouvez pas heberger normalement du flash avec n'importe quel hebergeur

3) comment heberger ( tuto by lunard )
Bon, maintenant avec l'anim, il faut pouvoir l'heberger et la poster sur un forum :p
D'abord il faut enregistrer votre travail, attention, ca ne marche que si tu n'a jamais enregistré ton travail auparanvant !
faites fichier => importer/exporter=> exporter l'animation au format macromédia flash

Une fenêtre s'ouvre et te demande de "créer la page html", tu cliques "créer la page html"

Un message apparait et te conseil d'enregistrer ta création, tu clique "sauver"

Tu donne un nom.phi à ta création et tu l'enregistre dans le dossier que tu veux:

Ta création a bien été enregistré en .phi et en .swf!

Une autre fenêtre s'ouvre et te demande d'enregistrer en .htlm
Comme tu ne veux pas créer une page html mais mettre ta création sur le forum, annule, ça ne sert à rien de t'encombrer avec un fichier innutil! (Mais si tu le fait c'est pas grâve, ça sert juste à rien pour toi!).

Maintenant il faut heberger ta création.
Il faut un hebergeur qui accepte le flash, en voici un: https://www.archive-host.com/
Clic "parcourir", retrouve le dossier ou tu as enregistré ta création.
Il doit y avoir deux fichiers côte à côte avec le même nom, mais l'un porte l'extension .phi et l'autre n'a pas d'extension apparente. C'est ce deusième fichier qu'il faut heberger.

Clic "envoyer"

L'hébergeur te donne tout un tas de codes, celui qui nous interesse est le premier, marqué "absolu"

Mets l'adresse entre ces balises:

Code:

[embed-flash(longueur,hauteur)]http://ton url.swf[/embed-flash]

Sans oublier de changer les valeurs de hauteur, longueur par les bonnes valeurs en pixel!

( ce tutoriel n'est aps de moi, j'en ai trouvé un tres bien fait par lunard- que je remercie-sur un autre forum, je dois donc mettre le lien >ici< si c'est consideré comme de la publicité, je referais le tuto ^^ )

/!\ L'hebergement n'est pas a l'infini, si vous ne vous inscrivez pas sur archive host, la limite est de deux mois. L'enregistrement est gratuit mais il ne faut pas depasser un certain nombre de choses herbergées :p

4) autres effets sur objets ( rotation, transparance .... )

Il existe bien d'autres effets que faire bouger un texte, le tout et de jouer avec la barre du temps. Ainsi, on peux par exemple au temps 10 décider de rajouter un objet et lorsqu'il y aura l'animation, l'objet apparatra au temps 10 ou alors de le faire disparaitre en le supprimant au temps 15 ^^

D'abord, il faut savoir que chaque objet est indépendant de tous les autres ( enfin sauf si on met des roll over ou autre mais j'explique ca plus tard xD ) et que donc, on peux mettre une action sur chaque objet.
Par exemple, si vous mettez une image ( pour travailler dessus ) ensuite vous pouvez mettre 5 textes différents qui apparaissent, bougent, tournent, se fondes, ou meme d'autres images qui apparaissent et disparaissent ...

1 ) la rotation :
=> places vous au temps 0 et ouvrez l'image ou creez le texte que vous voulez faire tourner
=> placez vous a un autre temps ( 20 / 30 / 40 .... )
=> faites " objet => rotation "
=> ne touchez surtout pas aux fleches ! mettez juste un nombre a la place du 0 dans " tour complet "
=> revenez au temps 0 et faites play, l'image tourne !

2) la transparance
=> de meme que pour la rotation, ouvrez l'image ou le texte que vous voulez faire " disparaitre " progressivement
=> placez vous a un autre temps
=> faites " objet => transparance " et reglez la transparance comme vous voulez qu'elle soit a la fin. Si vous voulez voir completement disparaitre votre objet mettez une transparance complete
=> revenez au temps 0 et faite play, l'image disparait progressivement !

3) changement de couleur
Alors ca, c'est pour le texte ^^
=> vous vous placez temps 0 et vous creez votre texte d'une couleur de votre choix
=> placez vous a un autre temps
=> double cliquez sur votre texte et changez la couleur
=> mettez vous au temps 0 et faites play ^^

4) l'animation basique ( défilement d'image xD )
=> ouvrez la premiere image
=> placez vous a un autre temps et ouvez la 2 eme image, de la meme taille que la premiere
=> mettez la au meme endroi que la premiere
=> si vous en avez plusieur a mettre, repetez l'opperation
=> mettez vous au temps 0 et faites play ^^

5) faire un bouton original
Alors, le " bouton " sert a pas mal de choses. Déja pour mettre son puf discretement :
=> faites " objet => ajouter => un bouton "
=> cliquez sur " relief "
=> choisissez la taille et la police de votre puf
=> sur " couleur " cliquez sur le "N" et choisissez une couleur presque identique a votre créa ( pour que je puf soit " invisible " )
=>cliquez sur " texte sorvollée " et choississez une couleur qui ressort bien
=> placez votre puf

Maintenant, votre puf est invisible jusqu'a ce qu'on passe la sourie dessus !
Si vous voulez un " beau " texte il faut auparavant le creer sous the gimp ou photoshop, sur un fond transparant et l'enregistrer en PSD. Comme ca, vous pouvez creer des boutons de la meme maniere en posant un brush sur fond transparant et en l'enegistrant en PSD ^^

Vous pouvez combiner les 5 et les mouvement ^^

5) le roll over

Le principe du roll over est que, quand on passe la sourie par dessus un objet alors une action se passe. Contrairement aux effets précedents, l'action a " besoin " de nous pour se faire.
Il peux y avoir des elements qui apparaissent quand on apsse la sourie dessus, des changements de couleur, de nouvelles choses, et ces elements peuvent eux aussi etre animé
Exemple :

Lorsque l'on survolle l'oeil de l'oiseau, une étoile apparait. Et cette étoile a été animée grace a la rotation ( comme dis auparavant :p ) et grace a l'opacité .
on peux bien sur mettre plusiquers elements, donc j'aurais pu mettre tout pleins d'étoiles et toutes les animées ^^

Comment faire =>

=> ouvrez un nouveau projet et mettez votre image de " base " ( sans oublier de changer les dimentions du projet )
=> cliquez sur "ojet/dynamique =>ajouter un roll over "
=> vous etes maintenant dans l'image " principale " legerement grisée. C'est l'image que l'on vois normalement. la, vous allez choisir l'objet qu'il faudra survoller. Donc vous ajoutez une image, un texte ou alors si vous ne voulez pas d'ojet vous faites " objet => ajouter => un rectangle transparant " et vous placez le rectangle a l'endroit qu'il faudra survoller
=> maintenant vous cliquez sur le carré jaune ( état survollé )
=> vous etes maintenant dans ce qui sera visible lorsque l'on apsse la sourie sur l'objet choisit avant
=> ajoutez les objets voulus et animez les ( rotation, transparance .... )
=> cliquez sur " écran de base " et faites play, si ca marche, votre roll over marche lorsque vous apssez sur l'objet ^^

Je rajouterais des captures écran plus tard car dis comme ca c'est aps toujours tres clair xD

Il faut savoir que e-anim accepte le PNG donc pour avoir une " étoile " transparante, sans contour, il faut avoir une étoile avec un contour transparant et enregistré en PNG ^^
Pour avoir un bel effet de texte, comme on ne peux pas avec e-anim, c'est pareil, il faut avoir un texte fait et mettre un tour transparant et enregistré en PNG et ensuite, on l'anime comme une image ^^

6) la signature musicale
JE vais vous expliquer direct comment faire un bouton play ( qui marche ) qui se transforme en bouton stop ^^ Moi j'ai commencé apr la et j'ai trouvé ca plus simple :p

Déja ouvrez votre image, mettez le projet aux dimentions ^^ C'est bon ? Bon alors, vous faites " objet => ajouter => un groupe "( vous ne touchez a aucun moment a la barre du temps )
Votre image est grisée, normalement[. Vous faites " objet => ajouter => un bouton "
La vous pouvez choisir de mettre un texte ou une image ( Vous cliquez sur un des 4 carré pour choisir une image ^^ ) et cliquez sur " relief " pour enlever le tour pas beau xD Ne faites pas ok
ensuite vous cliquez sur " action" et ensuite sur " programmer " et vous marquez ce code EXACTEMENT

Code:

Mp3Play("http://ma musique.Mp3");
Goto(1);
Stop();

Et a la place de http://ma musique.Mp3 vous mettez le lien de votre musique
Et pour avoir ce lien, il faut avoir la musique en format mp3 sur votre ordi et l'heberger avec cet hebergeur : https://www.archive-host.com ( vous prennez le premier lien )
la, vous faites ok.
Ensuite, toujours au temps 0 vous stoppez l'animation ( cliquez sur le petit triangle rouge vers le bas ^^ )
vous vous mettez au temps 1 précisément ! La vous faites " cacher " ( cliquez sur l'oeil )
et la vous faites " objet => ajouter => un bouton "
Vous choisissez votre bouton stop cette fois, soit un texte soit une image. Faites action, programmer. Normalement, il y a l'autre code, vous l'effacez et vous mettez ce code exactement a la place :

Code:

Mp3Stop( );
Goto(0);
Stop( );

La vous faites ok. Voila, vous avez votre image avec la musique ! Mais, vous ne pouvez aps l'entendre avant de l'avoir heberger ^^

7)Principe des groupes
Qu'est ce qu'un groupe ? C'est quelque chose que l'on rajoute pour ne pas utiliser la barre du temps. Lorsqu'il y a plusieures animations en meme temps c'est tres utilise. Il est aussi indispensable pour creer une signature musicale
Pour ajouter un groupe faites " objet => ajouter => un groupe " ou tout simplement appuyez sur le bouton avec des maisons, des sapins et marqué " gr " au dessus de la barre du temps ( voir capture écran plus haut ^^ )
On peux creer une infinité de groupe, et pour éditer ce groupe, il suffit de double cliquer sur un objet appartenant a ce groupe. Je vous conseille de creer un nouveau groupe pour chaque animation différente ^^

Exemple :

Ici, chaque coeur qui tombe est sur un groupe différent. Ainsi, des qu'il est tombé, il retombe immediatement. Si tous les coeurs avaient été sur la meme barre de temps, alors un coeur doit attendre que tous les autres soient tombés avant de retomber. C'est dont plus long a faire sans groupe et moins beau ^^ ( faites pas gaffe a la créa, elle date un peu XDD )

8)Mettre des portes qui s'ouvrent et se ferment

( ici il y a un probleme au niveau des musiques qui sont au dessus des portes xD )

Pour obtenir des portes ce fermant, vous devez d'abord faire 3 objets au minimum + 2 autres facultatifs
D'abors, votre création ( logique :p xD ) sauf si vous voulez faire des portes qui s'ouvrent avec un fond blanc derriere
Ensuite, creez deux portes. Si vous voulez faire une autre forme que le rectangle ( comme pour ma création, deux vagues ^^ ) il faut the gimp ou photohsop pour les mettre en transparance en format PNG
Donc, creez vos deux portes sur fond transparant. Il faut que une fois fermées, elle soient de la meme dimention de votre création !
Vous pouvez creer deux autres choses : un bouton entrer et un bouton fermer. Moi, j'ai créé un bouton entrer mais le bouton fermer est un texte que j'ai fait avec e-anim

Ouvrez votre création de base. Donc si vous voulez faire une animtation ( musique, roll over ... ) faites les avant et dans des nouveaux groupes. Ne touchez pas a la barre du temps ! Une fois vos animations finies on va commencer a animer les portes
1) ouvrez vos deux portes et mettez les en position fermé au temps 0. Puis stoppez l'animation ( triangle rouge vers le bas )
2) mettez vous au temps 50 ( par exemple) et mettez vos portes en position ouvertes. Stoppez a nouveau l'animation
3) Mettez vous au temps 100 ( par exemple ) et fermez de nouveau vos portes. Par contre, NE STOPPEZ PAS L'ANIMATION ( tres impotant :p xD )
4) re mettez vous au temps 0 et ajoutez un bouton " entrer ". Si vous en avez créé un avec votre logiciel ( photoshop, photofiltre ou the gimp ) ouvez le comme image, sinon tappez tout simplement un texte.
5) Faites " action " et appuyez sur " play "
6) mettez vous au temps 50, ouvrez votre bouton fermer ( ou mettez un texte ) et faites " action " puis " play "

Voila, normalement vous avez des portes qui s'ouvrent et se ferment ^^

9)Changer le curseur ( par lunard )

1) Pour commencer, fait un curseur avec ton logiciel de graphisme, de préférence en transparence png (si tu n'as que photofiltre, ce sera en gif transparent)
voilà le mien: (si quelqu'un le veux il peut le prendre)
Puis ouvre ton animation dans E-Anim. Moi je vait utiliser l'animation du tuto précédent.

2) Mets toi au temps 0 et crée un groupe (objet => ajouter => un groupe)
dans ce groupe place l'image du curseur (objet => ajouter => une image)
Place le curseur de tel sorte que la croix corresponde à la pointe du curseur, comme ça:

3) Retourne à l'écran de base (tout à gauche il y a écrit "écran de base")
Nous allons renommer le groupe qui contient le curseur. en haut à gauche de la barre des temps, il y a écrit "sans nom", clic dessus, appelle le groupe "drag" et valide.
Clic sur le bouton "ajouter une action programmée" (avant dernier bouton, avec des rouages, celui-là: )
Une fenêtre s'ouvre, en haut en jaune il y a écrit "l'objet déclenche l'action après un clic souris", clic dessus pour qu'il y ai écrit: "l'objet déclenche l'action immédiatement, au temps indiqué".
Puis clic sur "programmer" et entre ce code:

Code:

startDrag (_root/drag, true);
0; "Mouse.hide"; code_3D( ); //cache la souris

4) Enregistre ton animation et heberge là, si tu n'as rien oublié ça devrait marcher

voilà:

10)Faire plusieures pages

Je vait vous montrer comment réaliser une création avec plusieurs "pages" avec e-anim, et comment faire des liens entre ces pages, par exemple:

1) Faites plusieurs fond de la même taille, pour l'exemple j'en prendrait 3, mais ça marche quel que soit le nombre d'images.
Voici mes images:
(image 1)

(image 2)

(image 3)

2) Dans e-anim, mettre la page à la taille de vos images ( projet=> dimentions )
Au temps 0, inserer la première image, puis stopper l'animation en cliquant sur le bouton stop

3) Va au temps 1.
Au temps 1, insère l'image 2.
Si tes images ont une formes particulière et que l'image 1 se voit encore en dessous de l'image 2, tu peux cacher l'image 1 en cliquant su l'oeil chacher/montrer.

4) Vas au temps 2, insère l'image 3. Fait pareil si tu as d'autres images, une image par temps.
A chaque temps, il faut stoper l'animation en cliquant sur le bouton stop (image plus haut)

5) Création des liens entre les images.
Retourne au temps 0.
Ajoute un bouton ( objet => ajouter => un bouton )
Je vait le nommer "image 2", parce que c'est le bouton qui permettra d'aller à l'image 2, c'est pas très joli, mais c'est pour le tuto! Dans la fenêtre d'édition du bouton, cliquer sur action puis programmer, et écrivez ceci dans le cadre de programmation:

Code:

Goto(1);
Stop( );

Le 1 entre parenthèse signifie que le bouton mène au temps 1.

Faites de même pour aller à l'image 3, il sufit de renplcer le 1 du code par un 2 puisqur l'image 3 se trouve au temps 2. Puis pareil si tu as d'autres images.

Il faut aussi un lien de retour vers l'image 1, de la même façon, avec un 0 à la place du 1 dans le code.

Tu peux tester tes liens en cliquant sur le bouton play, ils doivent marcher, sinon recommence.

ça doit donner:

6) On remarque que le lien 1 ne sert à rien sur la 1ère image, le lien 2 ne sert à rien sur la 2ème et le 3 ne sert à rien sur la 3ème. On peut les faire disparaitre, par exemple en posant les liens derrière les images quand ils ne servent à rien ( objet => changer de couche => poser sur le fond) et en le remettant au premier plan quand ils sont utils (objet => changer de couche => premier plan)
Il est aussi possible de déplacer les liens à chaque temps.
Ca me donne:

7) ajouter des animations.
Pour ajouter des animations, il faut créer un nouveau groupe (objet => ajouter => un groupe)
La page devient grisée, et une nouvelle barre de temps apparait, construis ton animation dans cette nouvelle barre des temps.
De la même façon que pour les boutons, les groupes animés peuvent être changé de couche pour apparaitre ou disparaitre selon l'image de fond.

Voilà pour moi:

-Tuto by lunard -

11)Mettre un gif dans e-anim

Tout ceux qui aurons essayé d'importer un gif animé comme n'importe quelle autre image serons arrivé au même constat: ça ne marche pas! Il va donc falloir décomposer le gif et inserer les images une par une!

I) Décomposition du gif:

Je vous propose de décomposer le gif avec photofiltre, petit logiciel simple et gratuit que tout le monde a. Pour décomposer un gif avec photofiltre, il faut avoir le plugins décomposition. Si vous ne l'avez pas, téléchargez-le là: >ici< et dézippez le dans disque c: => programs files => photofiltre => plugins
Ensuite réouvrez photofiltre, allez dans affichage et cocher "barre des modules" (si elle n'est pas déjà coché). Dans la barre des modules, à gauche, vous devez voir un logo comme ça: . C'est le plugins, cliquez dessus, et choisissez le gif que vous voulez ouvrir.
Moi je vait utiliser ce gif là:
Toutes les images du gif s'ouvrent une par une, dans l'ordre, attention à bien conserver l'ordre, il faut remettre la transparence et enregistrer toutes les images une par une. Plus il y a d'images plus l'insertion du gif sera longue, pour une première fois je vous conseil de prendre un petit gif. Le miens contient 7 images.
Une fois que toutes les images sont enregistrées, on peut ouvrir e-anim.

II) insertion du gif dans e-anim.

Ouvrez e-anim, mettez un fond, faites des animations si vous avez envie, puis placer vous au temps 0.
Au temps 0, cliquez sur "créer un groupe". L'image est grisé et une petite croix apparait au milieu, c'est normal.
Vous remarquez que la barre des temps est vierge, même si vous aviez fait des animations avant, c'est parce que chaque groupe possède sa propre barre des temps.

Vous êtes au temps 0, cliquer sur objet => ajouter => une image et choissisez la première image de votre gif (image 1). Placez-là ou vous voulez.

Allez au temps 5. Cachez l'image 1 (en cliquant sur l'oeil cahcer /montrer). Puis ajouter l'image 2 et placez-là là ou était l'image 1.

Allez au temps 10. Cacher l'image 2, ajouter l'image 3.

Au temps 15, cacher l'image 3, ajouter l'image 4, etc..., jusqu'à ce que vous n'ayez plus d'images.

Astuce: pour bien placer ses images au même endroit à chaque fois, vous pouvez utiliser la grille: affichage => utiliser la grille, et pour l'enlever: affichage => ne plus utiliser la grille.

Pensez à laisser 5 temps à la fin de l'animation pour que la dermière image reste affichée autant de temps que les autres.

Ensuite rejouez votre animation, si elle est trop lente, changez d'image touts les 3 ou 4 temps au lieu de 5, si elle est trop rapide tout les 6 ou 7 temps, à vous de voir!

Puis revenez à l'écran de base, ça me donne:

Le groupe du gif peut être déplacer comme vous voulez. Par exemple, je le déplace de gauche à droite sur une durée de 100 temps, ça me donne:

En insérant ainsi plusieurs gifs, et d'autres images, on peut arriver aussi à ça:

-tuto by lunard-

Les derniers tutos sont de lunard, quelqun qui n'est aps sur ce forum. J'ai eu l'autorisation de mettre ses tutos et le lien du site est dans le 3) ( heberger une image )

Bonjour,

Merci pour ce tuto.
Je verrouille et déplace dans la bonne section Wink

Pour les questions, direction entraide !

» [SQL] Les bases du php/sql
» Rom64 >> Banniere flash [Flash] [1] [ok]
» flash
» Signature flash
» horloge en flash