[FLASH] Faire une "bulle" d'information

Faire une "bulle" d'information [FLASH] - Web design - Graphisme

Marsh Posté le 19-09-2002 à 20:53:05    

Bonjour,
 
je débute complètement en flash (2 jours) et j'aimerais faire l'animation suivante :
 
lorsque le curseur passe sur un texte, une bulle/cadre grossit à côté puis du texte apparaît à l'intérieur.
 
Ça fait 2 jours que j'essaie, mais les résultats que j'obtiens sont vraiment laids. J'ai entre autres essayé en faisant une interpolation "simple" entre un petit rond et une grosse bulle.
 
J'ai regardé tous les liens du tutorial du forum et je n'ai pas trouvé mon bonheur. Je sais que je fais un peu "assisté" mais si vous pouviez m'aider ou que vous connaissiez un tutorial, ça serait super.  
 
Merci :)

Reply

Marsh Posté le 19-09-2002 à 20:53:05   

Reply

Marsh Posté le 19-09-2002 à 21:34:05    

:cry:

Reply

Marsh Posté le 20-09-2002 à 02:56:13    

Hop, petit tuto fait maison.
 
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. Il est tard, j'ai certainement fait des oublis, alors si tu as des questions n'hésite pas.
 
3. 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:07:07
Reply

Marsh Posté le 20-09-2002 à 03:29:56    

quel classe ce parappa

Reply

Marsh Posté le 20-09-2002 à 13:07:18    

Merciiiiiiiiiiiii :love:

Reply

Marsh Posté le 20-09-2002 à 14:21:09    

J'ai tout compris, mais je sens qu'il va falloir que j'apprenne le language "flash" (le stop).
 
Je suis en train d'adapter à mon idée et je vais le poster, tu me diras ce que tu en penses ? Merci en tout cas :hello:

Reply

Marsh Posté le 20-09-2002 à 14:33:52    

Parc ontre, j'arrive pas du tout à gérer l'espèce de croix qui semble désigner le "milieu" de l'anime et la zone clicable ...

Reply

Marsh Posté le 20-09-2002 à 16:31:00    

kodamas a écrit a écrit :

Parc ontre, j'arrive pas du tout à gérer l'espèce de croix qui semble désigner le "milieu" de l'anime et la zone clicable ...




 
oauip...
la coix est TOUJOURS au millieu...
c'est a toi de déplacer le reste de tes éléments... (on peut pas bouger la croix)

Reply

Marsh Posté le 20-09-2002 à 19:10:32    

Plutôt que de galérer à placer tes objets au centre, tu sélectionnes ton objet et tu entres manuellement sa position dans la fenêtre volante "info" en haut à droite.
 
Sinon tu peux utiliser des règles, j'ai des potes qui ne font que ça (Menu Affichage > Afficher les règles).

Reply

Marsh Posté le 23-09-2002 à 16:20:36    

Merci, ça m'aide bien. :)

Reply

Marsh Posté le 23-09-2002 à 16:20:36   

Reply

Marsh Posté le 11-10-2002 à 19:32:44    

J'ai enfin fini ce que je voulais faire.
 
http://www.gala-esiee.com/index.php?rub=equipe
 
C'est pas génial limite naze mais ça me suffit. :D
 
Merci encore parappa

Reply

Marsh Posté le 11-10-2002 à 19:39:20    

T'as pas terminé là : maintenant il faut que tu fermes les bulles quand le curseur n'est plus en survol, et que tu gères les chevauchements des unes sur les autres. [:ddr555]

Reply

Marsh Posté le 11-10-2002 à 19:40:13    

Au fait : lorsque l'on clique sur la zone sensible d'une bulle ouverte, la bulle se réouvre. Spa très élégant ;)

Reply

Marsh Posté le 18-10-2002 à 02:32:18    

parappa a écrit a écrit :

T'as pas terminé là : maintenant il faut que tu fermes les bulles quand le curseur n'est plus en survol, et que tu gères les chevauchements des unes sur les autres. [:ddr555]




 
ben cai fait automatiquement :??:

Reply

Marsh Posté le 18-10-2002 à 02:32:41    

parappa a écrit a écrit :

Au fait : lorsque l'on clique sur la zone sensible d'une bulle ouverte, la bulle se réouvre. Spa très élégant ;)




 
pour le click, faut que je voie effectivement :)

Reply

Marsh Posté le 18-10-2002 à 14:29:57    

kodamas a écrit a écrit :

 
 
ben cai fait automatiquement :??:




 
Non non, quand je dis "se ferme", ça signifie appliquer l'animation dans le sens inverse (la bulle se referme). :D

Reply

Marsh Posté le 18-10-2002 à 15:37:45    

Un petit *.fla fait en vitesse pour ceux que ca interesse.
Decortique le pour voire un peu comment j'ai fait :)
 
http://cbolavie.free.fr/HFR/Sans%20titre-1.swf
 
Le Fichier source:
http://cbolavie.free.fr/HFR/Sans%20titre-1.fla

Reply

Marsh Posté le 19-10-2002 à 17:10:44    

parappa a écrit a écrit :

 
 
Non non, quand je dis "se ferme", ça signifie appliquer l'animation dans le sens inverse (la bulle se referme). :D




 
ok :)
euh ... je vais pas me prendre la tête à faire ça ! :D

Reply

Marsh Posté le 19-10-2002 à 17:31:22    

clear a écrit a écrit :

Un petit *.fla fait en vitesse pour ceux que ca interesse.
Decortique le pour voire un peu comment j'ai fait :)
 
http://cbolavie.free.fr/HFR/Sans%20titre-1.swf
 
Le Fichier source:
http://cbolavie.free.fr/HFR/Sans%20titre-1.fla




 
je viens de regarder, c'est quoi la commande setProperty ?
 
et je n'arrive pas à voir comment tu fais pour que ça fasse le début de ton clip "bulle" quand la souris passe sur le bouton et la suite quand ça quitte
 

Reply

Marsh Posté le 20-10-2002 à 01:36:30    

Regarde les actions sur le bouton.
 
Sinon Setproperty ba c comme son nom l'indique pour regler la propriété d'un clip. Ici en l'occurence je lui dis de donner au clip bulle les coordonnés de la souris.

Reply

Marsh Posté le 30-10-2002 à 03:39:45    

J'ai vraiment l'impression d'être un poliopathe :/
 
Je voudrais que quand on clique sur le bouton, ça envoie un mail.
Et bien, impossible, ça se contente de rejouer l'animation. :cry:


---------------
"Nous n'avons pas besoin de croire, nous savons"  dixit un vendeur de lessive ou un mormon, je sais plus ...
Reply

Marsh Posté le 30-10-2002 à 13:45:39    

C'est très simple : sur ton bouton, tu mets l'action "getUrl" en on(release), et tu entres l'adresse email précédée de "mailto:".
 

on (release) {
    getURL ("mailto:parapppa@ifrance.com" );
}


 
 

Reply

Marsh Posté le 04-11-2002 à 02:49:41    

'tain j'ai passé la nuit dessus sans trouver :cry:
 
je voudrais que l'on puisse maintenant aller sur la bulle sans qu'elle se ferme pour pouvoir clicker sur les gens et que ça leur envoie un mail.
 
J'ai été infoutu de trouver comment faire ça avec les actions. :/
 
 
ps : parappa, j'ai compris comment arriver à ce que l'animation ne se rejoue pas quand on click dessus, il suffisait de virer l'état "abaissé" du bouton
effectivement, ça faisait moche, merci de me l'avoir fait remarquer :jap:
 
ps2 : clear, j'ai étudié ton petit truc en détail et effectivement, c'est bien simple pour ouvrir/fermer
je vais l'appliquer :)
 
par contre, un truc que je n'ai pas compris, c'est que, quand je faisais un

Code :
  1. telltarget("bulle" )
  2. gotoandplay


comme tu l'as fait, ça me mettait un "cible introuvable)
par contre, quand j'ai fait directement

Code :
  1. bulle.gotoplay


ça a marché parfaitement :??:

Reply

Marsh Posté le 04-11-2002 à 12:37:14    

Eu comme ca je vois pas bien ... mets les 2 exemples en ligne stp
 
A priori c parce que tu as fait une erreur dans ton chemin du telltarget. Pour eviter ce genre d'erreur quand tu fait un telltarget dans la fenetre action tu as une petite cible. Tu click dessus et tu vas chercher ton movie clip.  
 
Si c la difference entre :

Code :
  1. on (release) {
  2. tellTarget ("/bulle" ) {
  3. }
  4. }


 
et
 

Code :
  1. on (release) {
  2. tellTarget (_root.bulle) {
  3. }
  4. }


 
qui te pose probleme c juste la difference de notation entre les "." et les "/"


Message édité par clear le 04-11-2002 à 12:38:12
Reply

Marsh Posté le 04-11-2002 à 13:07:32    

clear a écrit a écrit :

Eu comme ca je vois pas bien ... mets les 2 exemples en ligne stp
 
A priori c parce que tu as fait une erreur dans ton chemin du telltarget. Pour eviter ce genre d'erreur quand tu fait un telltarget dans la fenetre action tu as une petite cible. Tu click dessus et tu vas chercher ton movie clip.  
 
Si c la difference entre :

Code :
  1. on (release) {
  2. tellTarget ("/bulle" ) {
  3. }
  4. }


 
et
 

Code :
  1. on (release) {
  2. tellTarget (_root.bulle) {
  3. }
  4. }


 
qui te pose probleme c juste la difference de notation entre les "." et les "/"




 
Il m'arrive régulièrement que la première notation (le "/bulle" ) ne fonctionne pas. Il vaut mieux mettre tous ses liens en absolu pour être sur que ça fonctionne correctement.

Reply

Marsh Posté le 04-11-2002 à 13:10:13    

Et puis pour faire simple, on n'est pas obligé d'utiliser cette saleté de commande TellTarget, en syntaxe pointée ça marche très bien et c'est beaucoup plus clair...
 

Code :
  1. _root.monMovieClip.monClipImbrique.gotoAndPlay(2);

Reply

Marsh Posté le 04-11-2002 à 13:11:45    

fastclemmy a écrit a écrit :

Et puis pour faire simple, on n'est pas obligé d'utiliser cette saleté de commande TellTarget, en syntaxe pointée ça marche très bien et c'est beaucoup plus clair...
 

Code :
  1. _root.monMovieClip.monClipImbrique.gotoAndPlay(2);






 
Je savais même pas qu'on pouvait faire ça (commencer avec flash 4 ça laisse des traces). Skool, merci du tuyau (c'est tellement logique en plus). [:bien]

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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