Bordure elastique passage souris

Bordure elastique passage souris - Flash/ActionScript - Programmation

Marsh Posté le 01-04-2008 à 15:24:45    

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 !

Reply

Marsh Posté le 01-04-2008 à 15:24:45   

Reply

Marsh Posté le 01-04-2008 à 16:18:48    

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 !

Reply

Marsh Posté le 02-04-2008 à 05:15:03    

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
Reply

Marsh Posté le 02-04-2008 à 09:46:27    

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

Reply

Marsh Posté le 02-04-2008 à 20:29:38    

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
Reply

Marsh Posté le 03-04-2008 à 05:04:22    

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
Reply

Marsh Posté le 03-04-2008 à 11:51:09    

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 !

Reply

Marsh Posté le 03-04-2008 à 12:33:01    

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...

Reply

Marsh Posté le 04-04-2008 à 21:02:06    

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

Reply

Marsh Posté le 07-04-2008 à 09:52:11    

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 :(

Reply

Marsh Posté le 07-04-2008 à 09:52:11   

Reply

Marsh Posté le 07-04-2008 à 21:58:23    

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
Reply

Marsh Posté le 08-04-2008 à 04:33:26    

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
Reply

Marsh Posté le 09-04-2008 à 06:14:30    

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
Reply

Sujets relatifs:

Leave a Replay

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