Simple 3D 360 Spinning Hover effect with AS3 and Tweenlite


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

demo: http://www.adamcoulombe.info/lab/as3/360-spin-hover.html
FLA: http://www.adamcoulombe.info/lab/as3/360-spin-hover.fla

requires tweenlite


Copy this code and paste it in your HTML
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3.  
  4.  
  5. //addEventListener(Event.ENTER_FRAME, rotateSquare);
  6.  
  7. square.addEventListener(MouseEvent.MOUSE_OVER, over);
  8.  
  9.  
  10. /*function rotateSquare(e:Event):void {
  11.  square.rotation+=1;
  12. }*/
  13.  
  14. function over(e:MouseEvent):void {
  15. var sourceObject = e.target;
  16. square.removeEventListener(MouseEvent.MOUSE_OVER, over);
  17. TweenLite.to(sourceObject, 0.5, { rotationY:720,rotationZ:10,rotationX:10, y:sourceObject.y-25, ease:Strong.easeOut,
  18. onComplete:function(){
  19. square.addEventListener(MouseEvent.MOUSE_OUT, out);
  20. }
  21. });
  22. }
  23.  
  24. function out(e:MouseEvent):void {
  25. var sourceObject = e.target;
  26. square.removeEventListener(MouseEvent.MOUSE_OUT, out);
  27. TweenLite.to(sourceObject, 0.5, { rotationY:0,rotationZ:0,rotationX:0, y:sourceObject.y+25, ease:Strong.easeOut,
  28. onComplete:function(){
  29. square.addEventListener(MouseEvent.MOUSE_OVER, over);
  30. }
  31. });
  32. }

URL: http://www.adamcoulombe.info/lab/as3/360-spin-hover.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.