[FLASH] Déclenchement d'animation - infobulle animée

Déclenchement d'animation - infobulle animée [FLASH] - Infographie 2D - Graphisme

Marsh Posté le 20-09-2002 à 03:21:51    

Voici un petit tutorial sur les déclenchements d'animation. Pour cet exemple, j'ai choisi de faire afficher une bulle lorsque le curseur survolle une zone définie.  
 
Logiciel : Flash 5.0 fr
 
Ce tutorial s'adressait à Kodamas (c'est la personne à qui je suis censé parler :D).
 
Première étape : définir la zone de clic (ici un carré, tu pourras éventuellement faire de même avec un texte, la manipulation est identique).
 
* Tu ouvres Flash (si, si) ;
 
* tu dessines un carré ;
 
* tu le sélectionnes (clique 2 fois dessus avec le pointeur 'flèche noire';), tu fais F8 (Convertir en symbole...), tu lui donnes le nom que tu veux (disons "bouton1"), tu choisis le comportement "bouton" ;
 
* tu cliques 2 fois dessus pour entrer en mode édition de ton bouton ;
 
* dans la barre des calques, tu distingues désormais les 4 états de ton bouton : appuie sur F6 3 fois pour créer des images-clé sur chacun des états.
 
 
 
Deuxième étape : l'animation de ta bulle. En général c'est un peu au "feeling" (c'est le talent, ce qui permet de reconnaitre les bons flasheurs des mauvais ;)) : je vais te donner une base, libre à toi de faire autre chose plus tard.
 
* Menu Insertion > Nouveau symbole... > tu entres le nom que tu veux (disons "bulle"), tu spécifies le comportement "clip" et tu valides ;
 
* tu fais un carré (pratique les carrés décidément) ;
 
* dans la barre des calques, tu cliques sur l'image 20 du calque 1 et tu fais F6 (Créer une image clé) ;  
 
* en bas de la barre des outils (à gauche par défaut), si tu te trouves actuellement avec l'outil 'flèche' (si ce n'est pas le cas, sélectionne-le), tu dois avoir plusieurs options : clique sur "redimensionner" (tout en bas à droite), et augmente la taille de ton carré à l'aide des poingées afin de pouvoir y inscrire ton message ;
 
* dans la barre des calques, sélectionne les 20 images ;
 
* dans la fenêtre volante "Image" (ctrl+'F' pour l'afficher / désafficher), tu as un onglet "Image" (décidément) : clique dessus, et sélectionne "Forme" dans le menu déroulant "Interpolation" (tu peux également mettre "100" dans "Accélération", pour ajouter un effet de ralentissement) ;
 
* pour éviter que l'animation ne soit trop saccadée, va dans le menu Modification > Animation... > et met la Cadence à 30 images par seconde ;
 
* crée un nouveau calque (menu Insertion > Calque, ou la petite icône avec un + en dessous de tes calques), clique sur l'image 20 et fait F6 ;
 
* sélectionne l'outil texte, et inscrit ton texte dans le carré ;
 
* crée un nouveau calque, clique sur l'image 20, fais F6, clic droit > Actions, et tu ajoutes un "Stop ;" dans la liste de droite.
 
Ton animation est désormais terminée, appuie sur "Entrée" pour la lire.
 
 
 
Troisième étape : lier le tout pour que l'animation se joue lorsque le pointeur de la souris passera sur le bouton.
 
* Tu retournes sur ta scène (clique sur l'onglet "Scène 1" en haut à gauche, juste en dessous du menu Fichier), tu double-cliques sur ton bouton pour entrer en mode édition ;
 
* clique sur l'état "Dessus" dans la barre des calques ;
 
* fais ctrl+'L' pour afficher la bibliothèque de ton fichier (fais le plusieurs fois si ça ne s'affiche pas du premier coup, c'est un bug de flash - enfin dans la version 5), et glisse ta bulle (qui se nomme normalement "bulle" ) sur ta scène ;
 
* fais ctrl+'Entrée' pour jouer ton animation.  
 
Bon, si tu as réussi à faire (et à comprendre, surtout) tout ça, c'est que tu as bien avancé. Comme je l'écrivais plus haut, c'est une base. Il ne te reste plus ensuite qu'à embellir tout ça, et à l'adapter le cas échéant.
 
Notes :  
 
1. Il y a tout un tas de façons de faire la même chose autrement. J'en ai décrit une, il en existe des dizaines d'autres.
 
2. J'ai fait ceci avec flash 5. Les manips sont sensiblement les mêmes avec flash MX, mais il se peut que quelques détails divergent.


Message édité par parappa le 20-09-2002 à 03:22:34
Reply

Marsh Posté le 20-09-2002 à 03:21:51   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed