[FLASH] Mouvement de clip ou de bouton

Mouvement de clip ou de bouton [FLASH] - Web design - Graphisme

Marsh Posté le 15-04-2004 à 16:37:17    

Alors alors  
 
Mon probleme est le suivant, j'aimerais qu'au passage de la souris sur un bouton, un clip se deplace mais qu'on puisse voir le mouvement.
 
C'est a dire qu'il ne passe pas de A a B directement
Mais qu'on le voit se deplacer.
 
Pour ca actionScript semble suffisant, mon probleme est que je n'y arrive pas.
En me mettant sur les Action de mon Bouton, je met un evenement sur le RollOver et je fait une boucle while pour que le clip se deplace.
 
Mais on ne le voit pas se deplacer, il va d'un point a un autre directement et ca menerve un peu beaucoup quand même  :fou:  
 
Quelqu'un auraient déja fait ca ou saurais comment le faire ?
 
Merci :jap:


Message édité par massamu le 15-04-2004 à 17:44:54

---------------
Selon les dernières sources, il y aurait de plus en plus d'étrangers dans le monde...
Reply

Marsh Posté le 15-04-2004 à 16:37:17   

Reply

Marsh Posté le 15-04-2004 à 17:45:17    

up :bounce:


---------------
Selon les dernières sources, il y aurait de plus en plus d'étrangers dans le monde...
Reply

Marsh Posté le 15-04-2004 à 17:47:52    

Reply

Marsh Posté le 15-04-2004 à 18:57:19    

Le while que tu fais ne marchera pas : il s'exécute complètement en une seule image --> tu vois la position initiale et puis tout de suite après la position finale car la boucle s'est déjà terminée.
 
Alors le plus simple serait simplement de mettre ton clip dans un autre clip qui se charge du déplacement ! Les deux mouvements (animation de ton clip + déplacement) seront donc combinés.
Dans ce nouveau clip, tu mets un "stop() ;" à la première image pour qu'il ne démarre pas tout seul.
Ensuite, tu peux mettre dans l'évènement "RollOver" de ton bouton quelque chose comme "le_nouveau_clip.gotoAndPlay(2) ;". Alors ton nouveau clip commencera à tourner à partir de l'image 2 (l'image 1 était le stop) et tu auras ce que tu voulais =)

Reply

Marsh Posté le 15-04-2004 à 21:34:39    

Oulalala merci beaucoup mais ya des details que je capte pas c'est sur quoi placer mes evenement
 
1°) Je creer ma scene vide
2°) J'ajoute un bouton que j'apelle "bouton"
3°) J'ajoute un clip que j'apelle "forme"
 
4°) Je clique sur la forme et je fait F9 puis je met le code suivant
 
onClipEvent (load) {
  stop();
}
 
et la je suis perdu en fait :(


---------------
Selon les dernières sources, il y aurait de plus en plus d'étrangers dans le monde...
Reply

Marsh Posté le 16-04-2004 à 10:00:28    

Tu peux adapter ce code pour ton anim:
 
delta_x = 10;
delta_y =  8;
_root.tonClip.move = function() {
 _root.tonClip.onEnterFrame = function() {
  if (cpt<10) {
   _root.tonClip._x += delta_x;
   _root.tonClip._y += delta_y;
   cpt++;
  }
 }
}
_root.tonBouton.onRollOver = function() {
 cpt=0;
 _root.tonClip.move();
}
 
Pour le coup des delta_x et delta_y, tu peux mettre une fonction spéciale à la place si tu veux un mouvement spéciale mais sinon, le code marche très bien.


---------------
Il y a 10 sortes de personnes. Ceux qui comprennent le binaire et ceux qui ne le comprennent pas. *** Utilitaire pour MJ du jeu du dico
Reply

Marsh Posté le 16-04-2004 à 14:16:32    

Merci mon pote ca marche
 
Bon maintenant faut que jladapte a ce que je cherche a faire  
 
merci en tout cas :jap:


---------------
Selon les dernières sources, il y aurait de plus en plus d'étrangers dans le monde...
Reply

Marsh Posté le 16-04-2004 à 14:33:33    

De rien... de rien... C'est fait pour ça les forums...  :)


---------------
Il y a 10 sortes de personnes. Ceux qui comprennent le binaire et ceux qui ne le comprennent pas. *** Utilitaire pour MJ du jeu du dico
Reply

Marsh Posté le 16-04-2004 à 21:29:02    

Une question est ce qu'il est possible de mettre un parametre a une de tes fonctions, afin de pouvoir apliquer la fonction a un objet qu'il recoit en parametre
 
exemple avec ton exemple :
 
 
_root.tonClip.move = function(parametre) {  
_root.tonClip.onEnterFrame = function() {  
  if (_root.tonClip._x < _root.parametre._x) {  
   _root.tonClip._x += 10;  
   
}  
}  
 
_root.tonBouton.onRollOver = function() {  
cpt=0;  
_root.tonClip.move(_root.tonBouton);  
}  
 
_root.tonBouton2.onRollOver = function() {  
cpt=0;  
_root.tonClip.move(_root.tonBouton2);


---------------
Selon les dernières sources, il y aurait de plus en plus d'étrangers dans le monde...
Reply

Marsh Posté le 18-04-2004 à 01:51:20    

up :bounce:


---------------
Selon les dernières sources, il y aurait de plus en plus d'étrangers dans le monde...
Reply

Marsh Posté le 18-04-2004 à 01:51:20   

Reply

Marsh Posté le 18-04-2004 à 15:26:37    

siouplait :sweat:


Message édité par massamu le 18-04-2004 à 15:57:48

---------------
Selon les dernières sources, il y aurait de plus en plus d'étrangers dans le monde...
Reply

Marsh Posté le 18-04-2004 à 15:57:41    

Je voudrais arrivé a faire un menu de ce genre, ca a l'air simple mais c'est rudement beau
 
http://www.lehiphop.com


---------------
Selon les dernières sources, il y aurait de plus en plus d'étrangers dans le monde...
Reply

Marsh Posté le 18-04-2004 à 17:29:42    

bah là, à mon avis c une histoire de getmousey (je ne suis pas sur du nom à vérifier)
 
Tu fais tes boutons comme tu veux avec un peu de transparence, et sur un calque en dessous tu mets ton petit carreau rouge qui ira à l'endroit Y de ta souris...

Reply

Marsh Posté le 18-04-2004 à 17:46:29    

aircool a écrit :

bah là, à mon avis c une histoire de getmousey (je ne suis pas sur du nom à vérifier)
 
Tu fais tes boutons comme tu veux avec un peu de transparence, et sur un calque en dessous tu mets ton petit carreau rouge qui ira à l'endroit Y de ta souris...


 
Pas con
 
Mais la j'ai tester ave le rollover et c grave pas fluide, alors que sur le flash que j'ai mis la, c'est vachement beau et fluide

Reply

Marsh Posté le 18-04-2004 à 18:10:16    

Mais jsuis pas sur que ce soit vraiment ca, matte
 
http://www.lehiphop.com/topmenu.swf


---------------
Selon les dernières sources, il y aurait de plus en plus d'étrangers dans le monde...
Reply

Marsh Posté le 18-04-2004 à 19:57:51    

Bien au contraire c'est cette technique qu'ils utilisent mais avec un système de palier :
si 100< ysouris <120 alors ycarreaurouge = 110 echelle carreau rouge = 60%
 
si 121< ysouris < 140 alors ycarreaurouge = 130 echelle carreau rouge = 80%
 
Mnt faut traduire ça en action script :D


Message édité par aircool le 18-04-2004 à 19:58:13
Reply

Marsh Posté le 18-04-2004 à 20:01:53    

lol allez t'es bien partit, continue sur ta lancé :D
 
Aaaa l'action script ce qui me rebute c'est pas le code, c'est assez simpla, ce que je capte pas c'est linterface, les histoires d'image, les actions sur le calque ou sur l'objet etc...  
 
trop de chose pour ma ptite tete


---------------
Selon les dernières sources, il y aurait de plus en plus d'étrangers dans le monde...
Reply

Marsh Posté le 18-04-2004 à 20:39:26    

bah moins ce qui me rebute c'est le code, et je trouve que l'interface est assez simple...
A deux on pourrait faire de grande chose :o

Reply

Marsh Posté le 18-04-2004 à 21:19:39    

Perso, je trouve que Flash n'est pas très bien fichu, mais bon.
 
Pour faire ce menu, il faut un calque avec le truc rouge qui se ballade. Il faut un masque par dessus qui "masque" les petites séparations verticales entre deux catégories du menu et enfin il faut des boutons sur un 2° calque au-dessus de tout cela. La zone cliquable de ces boutons doit couvrir l'espace rectangulaire réservé à chaque catégorie. Le fond des boutons doit évidemment être transparent.
 
Pour les déplacements fluides, on peut faire comme ceci : ta scène est une animation qui tourne en boucle sur deux images-clés. Il y aura une 3° image-clé pour initialiser les variables.
image 1 : initialisation des variables
image 2 : traitement du déplacement
image 3 : idem (copier/coller!) + gotoAndPlay(2) (pour boucler).
 
Le traitement du déplacement doit se faire ainsi : jouer avec les bords gauche et droit de la zone rouge qui se déplace : on assigne pour chaque bord une position courante et une position de destination. A chaque tour de boucle, on dira que :
positionCourante = (positionCourante + positionDestination)/2 ; (voir remarque)
Ce qui fait qu'à chaque traitement, chaque bord du truc rouge avancera de la moitié de la distance restant à parcourir avant d'atteindre la destination. Alors, non seulement le truc rouge se déplacera bien, mais comme on travaille directement avec les bords et pas avec l'objet complet, il se redimensionnera en même temps pour tenir en entier dans n'importe quelle des zones du menu.
 
 
Remarque : la "formule" du déplacement peut être modifiée évidemment... Je ne crois pas que ce soit celle-ci qui est utilisée dans le menu du site.


Message édité par yannick_frere le 18-04-2004 à 22:16:28
Reply

Marsh Posté le 18-04-2004 à 21:22:05    

J'oubliais de dire que dans le code de tes boutons, évidemment, il faut modifier les variables de destinations. Comme une boucle infinie se charge du déplacement du truc rouge, son déplacement sera automatique dès la modification des variables de destination.

Reply

Marsh Posté le 19-04-2004 à 00:42:13    

yannick_frere a écrit :

Perso, je trouve que Flash n'est pas très bien fichu, mais bon.
 
Pour faire ce menu, il faut un calque avec le truc rouge qui se ballade. Il faut un masque par dessus qui "masque" les petites séparations verticales entre deux catégories du menu et enfin il faut des boutons sur un 2° calque au-dessus de tout cela. La zone cliquable de ces boutons doit couvrir l'espace rectangulaire réservé à chaque catégorie. Le fond des boutons doit évidemment être transparent.
 
Pour les déplacements fluides, on peut faire comme ceci : ta scène est une animation qui tourne en boucle sur deux images-clés. Il y aura une 3° image-clé pour initialiser les variables.
image 1 : initialisation des variables
image 2 : traitement du déplacement
image 3 : idem (copier/coller!) + gotoAndPlay(2) (pour boucler).
 
Le traitement du déplacement doit se faire ainsi : jouer avec les bords gauche et droit de la zone rouge qui se déplace : on assigne pour chaque bord une position courante et une position de destination. A chaque tour de boucle, on dira que :
positionCourante = (positionCourante + positionDestination)/2 ; (voir remarque)
Ce qui fait qu'à chaque traitement, chaque bord du truc rouge avancera de la moitié de la distance restant à parcourir avant d'atteindre la destination. Alors, non seulement le truc rouge se déplacera bien, mais comme on travaille directement avec les bords et pas avec l'objet complet, il se redimensionnera en même temps pour tenir en entier dans n'importe quelle des zones du menu.
 
 
Remarque : la "formule" du déplacement peut être modifiée évidemment... Je ne crois pas que ce soit celle-ci qui est utilisée dans le menu du site.


 
Merci de cette explicatoin
 
Mais vu mon niveau en flash, ca se complique
 
1°) Alors deja, ma forme rouge, je crée un rectangle, mais apres je doit faire quoi, le convertir en clip ou pas ?
 
2°) Mon bouton, je doit faire convertir en bouton, et exporter pour action script c'est ca ?
 
3°) Comment faire pour jouer avec les bord de mon rectangle, c'est quoi les bonnes variables ?
Je sais qu'il y a _x mais ca c'est juste les coordonées nan ?
 
 
Désolé de te saouler, mais je suis un peu perdu c'est pas faute d'avoir chercher et me documenter su flash, mais pfffiou c'est quand même compliqué quand on débute ce truc la
 
Enfin j'ai surement d'autre question, mais c'est deja un bon debutca :)
 
Merci en tout cas :jap:
 
 


---------------
Selon les dernières sources, il y aurait de plus en plus d'étrangers dans le monde...
Reply

Marsh Posté le 19-04-2004 à 05:30:53    

massamu a écrit :


 
Merci de cette explicatoin
 
Mais vu mon niveau en flash, ca se complique
 
1°) Alors deja, ma forme rouge, je crée un rectangle, mais apres je doit faire quoi, le convertir en clip ou pas ?
 
Non convertis le en graphique plutôt.
 
2°) Mon bouton, je doit faire convertir en bouton, et exporter pour action script c'est ca ?
 
Non convertis le juste le juste en bouton, t'as pas besoin de l'export en action script (d'ailleurs je ne sais pas ce que ça veut dire :??:)
 
 
3°) Comment faire pour jouer avec les bord de mon rectangle, c'est quoi les bonnes variables ?
Je sais qu'il y a _x mais ca c'est juste les coordonées nan ?
 
Ca je ne sais pas dsl...
 
Désolé de te saouler, mais je suis un peu perdu c'est pas faute d'avoir chercher et me documenter su flash, mais pfffiou c'est quand même compliqué quand on débute ce truc la
 
Enfin j'ai surement d'autre question, mais c'est deja un bon debutca :)
 
Merci en tout cas :jap:
 
 
 

Reply

Marsh Posté le 19-04-2004 à 08:38:37    

massamu a écrit :

Une question est ce qu'il est possible de mettre un parametre a une de tes fonctions, afin de pouvoir apliquer la fonction a un objet qu'il recoit en parametre
 
exemple avec ton exemple :
 
 
_root.tonClip.move = function(parametre) {  
_root.tonClip.onEnterFrame = function() {  
  if (_root.tonClip._x < _root.parametre._x) {  
   _root.tonClip._x += 10;  
   
}  
}  
 
_root.tonBouton.onRollOver = function() {  
cpt=0;  
_root.tonClip.move(_root.tonBouton);  
}  
 
_root.tonBouton2.onRollOver = function() {  
cpt=0;  
_root.tonClip.move(_root.tonBouton2);  


 
Oui ça devrait marcher ça, mais il faudrait peut-être mettre parametre au lieu de _root.parametre, sinon il ne devrait pas y avoir de problème...  :bounce:


---------------
Il y a 10 sortes de personnes. Ceux qui comprennent le binaire et ceux qui ne le comprennent pas. *** Utilitaire pour MJ du jeu du dico
Reply

Marsh Posté le 19-04-2004 à 08:59:37    

Pour les bords de ton rectangle, il faut jouer avec les paramètres _x et _width. Donc le bord gauche c'est clip._x et le bord droit c'est clip._x + clip._width


---------------
Il y a 10 sortes de personnes. Ceux qui comprennent le binaire et ceux qui ne le comprennent pas. *** Utilitaire pour MJ du jeu du dico
Reply

Marsh Posté le 19-04-2004 à 09:12:16    

tu peux pas jouer sur l'echelle x et/ou y d'une occurence graphique en action sript ?

Reply

Marsh Posté le 19-04-2004 à 09:52:15    

Tu veux parler de _xscale et _yscale? Si bien sûr que tu peux jouer dessus... mais ça revient à jouer sur _width et _height sauf que l'agrandissement/la réduction est centrée sur le milieu du clip et non pas son bord gauche...
Perso je préfère jouer sur _width et _x plutôt que sur _xscale... je trouve que c'est plus facile de contrôler les dimensions et les coordonnées...


---------------
Il y a 10 sortes de personnes. Ceux qui comprennent le binaire et ceux qui ne le comprennent pas. *** Utilitaire pour MJ du jeu du dico
Reply

Marsh Posté le 19-04-2004 à 22:28:11    

Banane masquee a écrit :

Tu veux parler de _xscale et _yscale? Si bien sûr que tu peux jouer dessus... mais ça revient à jouer sur _width et _height sauf que l'agrandissement/la réduction est centrée sur le milieu du clip et non pas son bord gauche...
Perso je préfère jouer sur _width et _x plutôt que sur _xscale... je trouve que c'est plus facile de contrôler les dimensions et les coordonnées...


 
Ouip ! Avec _xscale (_yscale étant inutile, ça ne change jamais), c'est plus compliqué, je trouve. Il faut gérer le déplacement avec une boucle + s'occuper de la redimension. Alors qu'en travaillant avec les bords (_x et _width), le redimensionnement va de paire avec le déplacement et on n'a que ce dernier à traiter.
 
Massamu, pourquoi parlais-tu de convertir en boutons ?? Tu ne sais pas créer un bouton directement ?
Concernant le truc rouge au fond, j'en ferais un clip. Je ne sais plus si on peut donner un nom d'instance à un graphique. Mais bon, c'est du détail ça ...
 
Concernant la "formule" du déplacement, voici une meilleure version : fais tourner ton animation à 60 images/secondes par exemple (la boucle de calcul des positions des bords tournera plus rapidement) et fais parcourir moins de distance à chaque traitement des positions avec une formule comme celle-ci :
positionCourante = (positionCourante + positionDestination)/4 ;
 
Donc à chaque traitement, chaque bord se déplacera du quart de la distance le séparant de sa destination. Donc le déplacement est bien plus lent, car il y a deux fois plus d'étapes par rapport à la formule précédente. C'est pour compenser cela qu'on peut mettre 60 images/seconde : pour que les traitements surviennent plus rapidement.

Reply

Marsh Posté le 20-04-2004 à 00:05:32    

massamu a écrit :

Une question est ce qu'il est possible de mettre un parametre a une de tes fonctions, afin de pouvoir apliquer la fonction a un objet qu'il recoit en parametre
 
exemple avec ton exemple :
 
 
_root.tonClip.move = function(parametre) {  
_root.tonClip.onEnterFrame = function() {  
  if (_root.tonClip._x < _root.parametre._x) {  
   _root.tonClip._x += 10;  
   
}  
}  
 
_root.tonBouton.onRollOver = function() {  
cpt=0;  
_root.tonClip.move(_root.tonBouton);  
}  
 
_root.tonBouton2.onRollOver = function() {  
cpt=0;  
_root.tonClip.move(_root.tonBouton2);  


 
Tu dois pouvoir déclarer une fonction ainsi :
function nomDeLaFonction (arg1, arg2, ...)
{
    code_de_la_fonction
}
 
J'ai une petite hésitation pour la valeur de retour, je ne sais plus où ça se met =/
M'enfin, après que tu aies écrit cela, tu devrais pouvoir faire  
_root.tonBouton.onRollOver = nomDeLaFonction(arguments ...) ;
 
Si ça ne va pas, tu vas écrire ceci dans le code de ton bouton :
on (RollOver)
{
    nomDeLaFonction(arguments ...) ;
}

Reply

Marsh Posté le 20-04-2004 à 09:42:21    

yannick_frere a écrit :

Concernant la "formule" du déplacement, voici une meilleure version : fais tourner ton animation à 60 images/secondes par exemple (la boucle de calcul des positions des bords tournera plus rapidement) et fais parcourir moins de distance à chaque traitement des positions avec une formule comme celle-ci :
positionCourante = (positionCourante + positionDestination)/4 ;
 
Donc à chaque traitement, chaque bord se déplacera du quart de la distance le séparant de sa destination. Donc le déplacement est bien plus lent, car il y a deux fois plus d'étapes par rapport à la formule précédente. C'est pour compenser cela qu'on peut mettre 60 images/seconde : pour que les traitements surviennent plus rapidement.


 
Euh... tu comptes l'emmener où le carré rouge avec ta formule? :??:
Parc'que là tu nous fais une suite qui a tendance à converger vers 0 et non pas vers positionDestination... [:blastm]
Tu voulais p't'être dire cette formule à la place:
positionCourante = positionCourante + (positionDestination - positionCourante)/4 ;
 
Voili voilou...  :bounce:


---------------
Il y a 10 sortes de personnes. Ceux qui comprennent le binaire et ceux qui ne le comprennent pas. *** Utilitaire pour MJ du jeu du dico
Reply

Marsh Posté le 20-04-2004 à 21:04:43    

Euuh oui ^^ On n'était pas près de revoir notre petit carré rouge avec ma formule ^^
 
La tienne me semble déjà bien meilleure, merci =)

Reply

Marsh Posté le 23-04-2004 à 13:52:00    

c pas un truc comme ça que vous voulez?
 
http://www.adphoto.be/deplacement.html j ai fait ça à l"arrache, donc les valeurs sont approximatives mais on peut tomber pil poil au bon endroit en autamtisant le tout.
 
pour la source c là : http://www.adphoto.be/deplacement.fla c du flash mimix
 
Sinon fait longtemps je suis pas viendu sur ce forum,  j'ai oublié de poster une source .fla y a longtemps pour cause de probleme de connexion, si il la désire tjrs c sans stresss
 
PS : si qlq un veut un script pour lire une anim à l'envers je fais aussi :p  
 

Reply

Marsh Posté le 23-04-2004 à 17:29:41    

skyman a écrit :

c pas un truc comme ça que vous voulez?
 
http://www.adphoto.be/deplacement.html j ai fait ça à l"arrache, donc les valeurs sont approximatives mais on peut tomber pil poil au bon endroit en autamtisant le tout.
 
pour la source c là : http://www.adphoto.be/deplacement.fla c du flash mimix
 
Sinon fait longtemps je suis pas viendu sur ce forum,  j'ai oublié de poster une source .fla y a longtemps pour cause de probleme de connexion, si il la désire tjrs c sans stresss
 
PS : si qlq un veut un script pour lire une anim à l'envers je fais aussi :p


 
:D

Reply

Marsh Posté le 26-04-2004 à 08:39:23    

skyman a écrit :

si qlq un veut un script pour lire une anim à l'envers je fais aussi :p


Balance toujours, ça peut intéresser pas mal de gens... il me semble en avoir déjà vu pas mal demander ça... Et pis... j'vais peut-être avoir besoin d'un truc dans le genre pour mon projet...  :ange:


---------------
Il y a 10 sortes de personnes. Ceux qui comprennent le binaire et ceux qui ne le comprennent pas. *** Utilitaire pour MJ du jeu du dico
Reply

Marsh Posté le 26-04-2004 à 13:56:51    

Banane masquee a écrit :

Balance toujours, ça peut intéresser pas mal de gens... il me semble en avoir déjà vu pas mal demander ça... Et pis... j'vais peut-être avoir besoin d'un truc dans le genre pour mon projet...  :ange:


 
Vla vla  :hello:  c du brouillon , mais bon :-) le principe y est :  
http://www.adphoto.be/rewind.html
 
et pour le fla, voilouuu :http://www.adphoto.be/rewind.fla
 
Vla, c pas grand chose, y a moyen de complexifier la chose mais c une piste


---------------
APN : Nikon D100 objectif 24-85 f2.8 >> site Photo >> http://www.adphoto.be
Reply

Marsh Posté le 26-04-2004 à 14:26:15    

OK merci... En effet c'est pas très compliqué mais ça peut éviter de se prendre la tête dessus si on a déjà cette base...


---------------
Il y a 10 sortes de personnes. Ceux qui comprennent le binaire et ceux qui ne le comprennent pas. *** Utilitaire pour MJ du jeu du dico
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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