Advanced Search

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

Expand | Embed | Plain Text

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.