Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1024 connectés 

  FORUM HardWare.fr
  Programmation
  Flash/ActionScript

  Bordure elastique passage souris

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Bordure elastique passage souris

n°1711046
Crawdge
Posté le 01-04-2008 à 15:24:45  profilanswer
 

Bonjour à tous,
 
merci d'avance d'être venu ici  :D  
J'ai une question sur lequel je ne sais pas trop par où commencer...
 
Je voudrais faire un rectangle et au passage de la souris sur les bordures, elle "tire" les bordures juste en faisant un rollover, puis quand elle est trop loin (par exemple 50px sur le coté si c'est une bordure de coté), elle se remette en place de façon élastique...
Ces bordures seraient bien sur reliés entre 2 point qui ne se déplacerais pas donc...
 
Je pense qu'il faut un écouteur pour la souris, qu'il faut repérer les collisions ou le survol, mais après...?
 
pas facile à expliquer... j'essayerai de mettre un gif pour vous montrez ça quand je pourrai...
 
Merci d'avance !

mood
Publicité
Posté le 01-04-2008 à 15:24:45  profilanswer
 

n°1711082
Crawdge
Posté le 01-04-2008 à 16:18:48  profilanswer
 

J'ai trouvé un exemple qui est plus ou moins ca : http://www.mjau-mjau.com/classic.html
 
Quand on arrive on peut voir au centre : Concept, interactive,...
C'est la même animation que je souhaiterai, sauf qu'au lieu que ça soit le clip qui bouge, c'est une ligne qui suit le mouvement de la souris au rollover, et une fois trop loin, revient en place de façon élastique...
 
Merci d'avance !

n°1711353
Zedlefou
In cabbage we trust !
Posté le 02-04-2008 à 05:15:03  profilanswer
 

Dans l'aide de Flash 8 ( si c'est ce que tu utilises) il y a ce code :

Code :
  1. this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth());
  2. var mouseListener:Object = new Object();
  3. mouseListener.onMouseDown = function() {
  4.     this.isDrawing = true;
  5.     this.orig_x = _xmouse;
  6.     this.orig_y = _ymouse;
  7.     this.target_mc = canvas_mc.createEmptyMovieClip("", canvas_mc.getNextHighestDepth());
  8. };
  9. mouseListener.onMouseMove = function() {
  10.     if (this.isDrawing) {
  11.         this.target_mc.clear();
  12.         this.target_mc.lineStyle(1, 0xFF0000, 100);
  13.         this.target_mc.moveTo(this.orig_x, this.orig_y);
  14.         this.target_mc.lineTo(_xmouse, this.orig_y);
  15.         this.target_mc.lineTo(_xmouse, _ymouse);
  16.         this.target_mc.lineTo(this.orig_x, _ymouse);
  17.         this.target_mc.lineTo(this.orig_x, this.orig_y);
  18.     }
  19.     updateAfterEvent();
  20. };
  21. mouseListener.onMouseUp = function() {
  22.     this.isDrawing = false;
  23. };
  24. Mouse.addListener(mouseListener);


 
Il te permet de dessiner des formes avec la souris. Dans le concept c'est la meme chose que tu veux faire.
Il faut dessiner ton carre de base avec du code et quand la souris passe dessus et sort de la surface, le coin le plus proche suit la souris c'est a dire que tu redessines ton quadrilatere avec comme coordonnes d'un des angles, ceux de ta souris ...
Je te laisse deja faire ca, on vera pour l'elasticité ensuite :D


---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks
n°1711390
Crawdge
Posté le 02-04-2008 à 09:46:27  profilanswer
 

Merci bien, je vais tester ça dès que je peux ;)

n°1711770
antika
Posté le 02-04-2008 à 20:29:38  profilanswer
 

IMHO ce genre de truc je le ferai plutôt en timeline : prépare 4-5 anims d'amplitude croissante et déclenche la bonne en fonction du vecteur de vélocité du curseur. Ca passe correctement si le graphiste est bon.
 
Les anims en interpolation de forme sont plutôt jolies et fluides sur ce genre de petit truc, vouloir réellement simuler la cinétique du bordel en AS2 risque plus de te faire galérer qu'autre chose. La réponse de warrior étant : il faut faire varier le deuxième paramétre du curveTo, c'est très bête, le problème étant de lui filer les bonnes valeurs. L'oscillation élastique tu la simules correctement avec une sinusoïde divisée par un facteur qui diminue à chaque refresh, c'est très bête, j'avais prévenu.
 
Le plus dur en dév. Flash AS2/Flash 8, c'est de pas trop s'emballer, parfois il suffit juste de bien utiliser la timeline et de tricher un poil, le résultat sera meilleur et ramera moins. L'intérêt d'AS3 étant d'être suffisamment rapide pour pouvoir effectivement faire en code ce genre de trucs de psychotique - en AS3 il suffit de calculer le bord de la fenetre avec une chaine formée de Constraint via APE : http://www.cove.org/ape/demo1.htm -  regarder le pont.
 
trop bien foutu l'exemple à zedlefou, je l'avais jamais vu ^^


Message édité par antika le 02-04-2008 à 20:43:25
n°1711858
Zedlefou
In cabbage we trust !
Posté le 03-04-2008 à 05:04:22  profilanswer
 

Oue l'aide c'est pas mal :D C'est dans la classe Mouse...
 
Bon alors sinon, comme hier j'avais rien a foutre au boulot et que je suis vachement curieux, je m'y suis essayé ... et antika a raison :/ C'est SUPER prise de tete.  
C'est pas tres compliqué, mais c'est long et tu es tres vite limité dans les performances. En plus j'ai utilisé des lineTo donc l'effet est bien mais sans plus et pour l'elasticité j'ai laissé tomber. (oue, moi et les maths c'est pas jojo, mais je me soigne)
Je vais voir si j'ai le temps de m'y repencher aujourd'hui ... mais je crois que c'est mieux un effet de TimeLine en effet.
 

Code :
  1. var x = 100;
  2. var y = 100;
  3. var w = 200;
  4. var h = 100;
  5. var zs = 80;
  6. var speed = 3;
  7. _global.monMC = createRectangle ("hop", x, y, w, h);
  8. // --- WHEN THOSE 4 SHAPES ARE ROLLED OVER, THE CORRESPONDING ANGLE FOLLOW ---
  9. // --- YOU SEE THEM JUST FOR THE TEST  
  10. var upL : MovieClip = zoneSurvol ("upL", x - zs, y - zs, zs, zs);
  11. var upR : MovieClip = zoneSurvol ("upR", x + w, y - zs, zs, zs);
  12. var doL : MovieClip = zoneSurvol ("doL", x - zs, y + h, zs, zs);
  13. var doR : MovieClip = zoneSurvol ("doR", x + w, y + h, zs, zs);
  14. // ---
  15. var myTab : Array = new Array (upL, upR, doL, doR)
  16. for (var o in myTab)
  17. {
  18. myTab [o].id = Number (o) + 1;
  19. myTab [o].onRollOver = monMcOver;
  20. myTab [o].onRollOut = monMcOut;
  21. }
  22. function monMcOver ()
  23. {
  24. this.onEnterFrame = function ()
  25. {
  26.  _global.monMC.clear ();
  27.  _global.monMC = createQuadril ("hop", x, y, w, h, this.id);
  28. }
  29. }
  30. function monMcOut ()
  31. {
  32. // --- REGISTER THE LAST POSITION OF THE MOUSE
  33. this.souris = (
  34. {
  35.  x : _xmouse, y : _ymouse
  36. })
  37. // --- REGISTER THE MOUSE'S POSITION RELATIVE TO THE zoneSurvol
  38. this.souris2 = (
  39. {
  40.  x : this._xmouse, y : this._ymouse
  41. })
  42. this.onEnterFrame = null;
  43. this.onEnterFrame = function ()
  44. {
  45.  _global.monMC = rewind (this, _global.monMC);
  46. }
  47. }
  48. // -----------------------------------------------------------------------------------------
  49. function rewind (Ptarg : MovieClip, Psquare : MovieClip)
  50. {
  51. // --- WE DEFINE 4 PTS FOR THE SHAPE
  52. var p1 = new Object (
  53. {
  54.  x : x, y : y
  55. })
  56. var p2 = new Object (
  57. {
  58.  x : x + w, y : y
  59. });
  60. var p3 = new Object (
  61. {
  62.  x : x + w, y : y + h
  63. });
  64. var p4 = new Object (
  65. {
  66.  x : x, y : y + h
  67. });
  68. // --- DEPENDING OF THE zoneSurvol USED, ONE POINT MOVE ---  
  69. switch (Ptarg.id)
  70. {
  71.  case 1 :
  72.  p1.x = (Ptarg.souris.x < x) ? Ptarg.souris.x += speed * ((zs - Ptarg.souris2.x) / zs) : x ;
  73.  p1.y = (Ptarg.souris.y < y ) ? Ptarg.souris.y += speed * ((zs - Ptarg.souris2.y) / zs) : y;
  74.  if (Ptarg.souris.y >= y && Ptarg.souris.x >= x )
  75.  {
  76.   Ptarg.onEnterFrame = null;
  77.  }
  78.  break;
  79.  case 2 :
  80.  p2.x = (Ptarg.souris.x > x + w) ? Ptarg.souris.x -= speed * (Ptarg.souris2.x / zs) : x + w ;
  81.  p2.y = (Ptarg.souris.y < y ) ? Ptarg.souris.y += speed * ((zs - Ptarg.souris2.y) / zs) : y;
  82.  if (Ptarg.souris.y >= y && Ptarg.souris.x <= x + w)
  83.  {
  84.   Ptarg.onEnterFrame = null;
  85.  }
  86.  break;
  87.  // --- TODO case 3 & 4
  88. }
  89. Psquare.clear ();
  90. // --- RE DRAW THE SHAPE
  91. var mc2 : MovieClip = this.createEmptyMovieClip ("hop", this.getNextHighestDepth ());
  92. mc2.lineStyle (1, 0x000000, 100, true, "none", "round", "miter", 1);
  93. mc2.moveTo (p1.x, p1.y);
  94. mc2.lineTo (p2.x, p2.y);
  95. mc2.lineTo (p3.x, p3.y);
  96. mc2.lineTo (p4.x, p4.y);
  97. mc2.lineTo (p1.x, p1.y);
  98. return mc2;
  99. }
  100. function createQuadril (name : String, x : Number, y : Number, w : Number, h : Number, Pid)
  101. {
  102. // --- MOVE THE CLOSEST CLONER
  103. var mc2 : MovieClip = this.createEmptyMovieClip (name, this.getNextHighestDepth ());
  104. mc2.lineStyle (1, 0x000000, 100, true, "none", "round", "miter", 1);
  105. switch (Pid)
  106. {
  107.  case 1 :
  108.  // --- upper left
  109.  mc2.moveTo (this._xmouse, this._ymouse);
  110.  mc2.lineTo (w + x, y);
  111.  mc2.lineTo (w + x, h + y);
  112.  mc2.lineTo (x, h + y);
  113.  mc2.lineTo (this._xmouse, this._ymouse);
  114.  break;
  115.  case 2 :
  116.  // --- upper right
  117.  mc2.moveTo (x, y);
  118.  mc2.lineTo (this._xmouse - 1, this._ymouse - 1);
  119.  mc2.lineTo (w + x, h + y);
  120.  mc2.lineTo (x, h + y);
  121.  mc2.lineTo (x, y);
  122.  break;
  123.  case 3 :
  124.  // --- down left
  125.  mc2.moveTo (x, y);
  126.  mc2.lineTo (w + x, y);
  127.  mc2.lineTo (w + x, h + y);
  128.  mc2.lineTo (this._xmouse, this._ymouse);
  129.  mc2.lineTo (x, y);
  130.  break;
  131.  case 4 :
  132.  // --- down right
  133.  mc2.moveTo (x, y);
  134.  mc2.lineTo (w + x, y);
  135.  mc2.lineTo (this._xmouse, this._ymouse);
  136.  mc2.lineTo (x, h + y);
  137.  mc2.lineTo (x, y);
  138.  break;
  139. }
  140. return mc2;
  141. }
  142. function createRectangle (name : String, x : Number, y : Number, w : Number, h : Number)
  143. {
  144. var mc2 : MovieClip = this.createEmptyMovieClip (name, this.getNextHighestDepth ());
  145. mc2.lineStyle (1, 0x000000, 100, true, "none", "round", "miter", 1);
  146. mc2.lineTo (0, 0);
  147. mc2.lineTo (w, 0);
  148. mc2.lineTo (w, h);
  149. mc2.lineTo (0, h);
  150. mc2.lineTo (0, 0);
  151. mc2._x = x;
  152. mc2._y = y;
  153. return mc2;
  154. }
  155. function zoneSurvol (name : String, x : Number, y : Number, w : Number, h : Number)
  156. {
  157. var mc2 : MovieClip = this.createEmptyMovieClip (name, this.getNextHighestDepth ());
  158. mc2.beginFill (0xcccccc, 10);
  159. mc2.lineTo (0, 0);
  160. mc2.lineTo (w, 0);
  161. mc2.lineTo (w, h);
  162. mc2.lineTo (0, h);
  163. mc2._x = x;
  164. mc2._y = y;
  165. return mc2;
  166. }


---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks
n°1712010
Crawdge
Posté le 03-04-2008 à 11:51:09  profilanswer
 

hum hum en effet, pas facile mon idée... lol
 
par contre, je me suis peut-etre mal expliqué... En fait, c'est les cotés et non pas les angles que je souhaite faire bouger...
 
D'ailleurs en cherchant encore et encore, j'ai trouvé une source qui pourrai aider :  
 
http://flashaddict.rabou.eu/viewto [...] &sk=t&sd=a
 
Merci encore pour votre aide et du temps que vous passez pour moi !

n°1712076
Crawdge
Posté le 03-04-2008 à 12:33:01  profilanswer
 

Grâce à ce code, j'ai presque réussi a faire ce que je voulais.
J'ai rajouté une zone limite sur le coté, mais je n'arrive pas a géré la collision...  
En RollOut sur la corde, je la déplace, mais je n'arrive pas a géré le fais que quand elle est en collision avec la zone, elle retourne en place...

n°1712985
antika
Posté le 04-04-2008 à 21:02:06  profilanswer
 

ah ouais, curveTo + Tween tout bêtement, ça poutre.

n°1713587
Crawdge
Posté le 07-04-2008 à 09:52:11  profilanswer
 

Oui au final l'idée est assez simple mais l'histoire de collision et du hitTest me bloque... J'arrive bien a repérer la collision, mais quand je veux faire l'effet inverse, ça ne marche pas...
 
J'ai un onRollOver sur la bordure, qui fait un startDrag sur ma corde (j'ai mis un objet d'une ligne a la place du rond pour la déplacer, et quand je suis en collision avec une zone, j'aurai voulu qu'elle se remette a l'endroit initial... Donc un stopDrag et l'effet inverse.. mais elle reste planté sur la zone...
 
Si une âme charitable veut bien m'aider je lui en serai reconnaissant :(

mood
Publicité
Posté le 07-04-2008 à 09:52:11  profilanswer
 

n°1714034
antika
Posté le 07-04-2008 à 21:58:23  profilanswer
 

c'est nébuleux, code please ?
 
(obligé, ça méta-poutre donc tu postes le code, sinon DIY - c'est comme ça ici, une putain de jungle ^^)
 
(au passage zedlefou si tu pouvais re-poster ton code ou l'envoyer en pm sans les balises code ça serait nickel, on peut pas copier/coller à cause des n° de lignes générés par ces balises ...)

Message cité 1 fois
Message édité par antika le 07-04-2008 à 22:05:54
n°1714092
Zedlefou
In cabbage we trust !
Posté le 08-04-2008 à 04:33:26  profilanswer
 

antika a écrit :

(au passage zedlefou si tu pouvais re-poster ton code ou l'envoyer en pm sans les balises code ça serait nickel, on peut pas copier/coller à cause des n° de lignes générés par ces balises ...)


Si on peut, suffit de double cliquer dessus et les num de lignes s'en vont (ne me remercie pas ;) )


---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks
n°1714737
Zedlefou
In cabbage we trust !
Posté le 09-04-2008 à 06:14:30  profilanswer
 

Crawdge > je peux pas trop t'aider pour ton truc, mais j'ai pensé a toi en voyant ce site :P
http://www.projectshow.com/


---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Flash/ActionScript

  Bordure elastique passage souris

 

Sujets relatifs
passage de l'intérieur d'un tableau par référence dans une fonction ?[XMLHttpRequest] Passage de tableau en paramètre POST possible ?
Problème de passage de variablesGtk, passage de structures a des G_CALLBACK
Pb de passage de variableUrl rewriting et passage de parametres
Image transparente au passage de la sourisPiloter un joystick avec la souris
Passage sur iframe= clic automatique 
Plus de sujets relatifs à : Bordure elastique passage souris


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR