AS3 Hover / Repulsion Polka Dots


/ Published in: ActionScript 3
Save to your folder(s)

Demo + FLA Download:http://www.adamcoulombe.info/lab/as3/PolkaDot-Hover-Repulsion-Effect.html .................. This demo uses Arnaud Icard's Traer AS3 port for physics to simulate repulsion. Each polka-dot will be repelled from the polka dot that you have hovered over.


Copy this code and paste it in your HTML
  1. import traer.physics.Attraction;
  2. import traer.physics.Particle;
  3. import traer.physics.ParticleSystem;
  4. import traer.physics.Spring;
  5.  
  6. import com.greensock.TweenLite;
  7. import com.greensock.easing.*;
  8.  
  9. var s:ParticleSystem = new ParticleSystem(new Vector3D(0, 0, 0), .2);
  10. var repellerAttractedTo = null;
  11. var floats = new Array();
  12. var anchors = new Array();
  13. var repells = new Array();
  14.  
  15.  
  16. var magnet = s.makeParticle(1, new Vector3D(0, 0, 0));
  17. var repeller = s.makeParticle(4, new Vector3D(0, 0, 0));
  18.  
  19. for(var i=0; i< container.numChildren; i++){
  20. var self = container.getChildAt(i);
  21. self.id=i;
  22. self.addEventListener(MouseEvent.MOUSE_OVER, spotOver);
  23. self.addEventListener(MouseEvent.MOUSE_OUT, spotOut);
  24. self.buttonMode=true;
  25. floats[i]= s.makeParticle(0.12, new Vector3D(self.x, self.y, 0));
  26. anchors[i]= s.makeParticle(0.12, new Vector3D(self.x, self.y, 0)); anchors[i].makeFixed();
  27. s.makeSpring(anchors[i], floats[i], 0.1, 0.1, 0);
  28. //s.makeAttraction(magnet, floats[i], 20000 , 0);
  29. repells[i] = s.makeAttraction(repeller, floats[i], -80000 , 0);
  30. }
  31.  
  32. stage.addEventListener( Event.ENTER_FRAME, loop );
  33.  
  34. function spotOver(e){
  35. repeller.position.x = mouseX;
  36. repeller.position.y = mouseY;
  37. repellerAttractedTo = e.currentTarget;
  38.  
  39. repells[e.currentTarget.id].turnOff();
  40.  
  41. TweenLite.to(e.currentTarget,1,{scaleX:1.2,scaleY:1.2,ease:Elastic.easeOut});
  42. repeller.mass=4;
  43. //TweenLite.to(repeller,0.5,{mass:4});
  44. }
  45.  
  46. function spotOut(e){
  47. repellerAttractedTo = null;
  48. TweenLite.to(e.currentTarget,1,{scaleX:1,scaleY:1,ease:Elastic.easeOut});
  49. //repeller.mass = 0;
  50. //repells[e.currentTarget.id].turnOn();
  51. TweenLite.to(repeller,0.01,{mass:0.1, onComplete:repellOn,onCompleteParams:[e.currentTarget]});
  52. }
  53.  
  54. function repellOn(obj){
  55. repells[obj.id].turnOn();
  56. }
  57.  
  58. function loop(e){
  59. s.tick(1);
  60. magnet.position.x = mouseX;
  61. magnet.position.y = mouseY;
  62.  
  63. for(var i=0; i< container.numChildren; i++){
  64. container.getChildAt(i).x = floats[i].position.x;
  65. container.getChildAt(i).y = floats[i].position.y;
  66. }
  67. if(repellerAttractedTo){
  68. repeller.position.x = repellerAttractedTo.x;
  69. repeller.position.y = repellerAttractedTo.y;
  70. }
  71.  
  72. }

URL: http://www.adamcoulombe.info/lab/as3/PolkaDot-Hover-Repulsion-Effect.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.