Advanced Search

3D Flip Effect with Flash / Actionscript 3

/ Published in: ActionScript 3
Save to your folder(s)
Demo, info & FLA download at http://adamcoulombe.info/lab/as3/card-flip.html

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. import com.greensock.TimelineLite;
  2. import com.greensock.TweenLite;
  3. import com.greensock.easing.*;
  4.  
  5. card.z = 300;
  6. card.getChildAt(0).visible = false;
  7. card.getChildAt(0).rotationY = 180;
  8. card.addEventListener(MouseEvent.MOUSE_DOWN,cardDown);
  9.  
  10.  
  11. function cardDown(e){
  12. 	flipSelf(e.currentTarget);
  13. }
  14.  
  15. function flipSelf(self){
  16. 	var toRot;
  17. 	if(self.rotationY > 89){
  18. 		toRot = 0;
  19. 	}else{
  20. 		toRot = 180;
  21. 	}
  22.  
  23. 	var timeline = new TimelineLite();
  24. 	timeline.insert(TweenLite.to(self,0.5,{z:200,ease:Back.easeOut }));
  25. 	timeline.insert(TweenLite.to(self,1.5,{rotationY:toRot,ease:Strong.easeInOut,onUpdate:setFlipSide, onUpdateParams:[self] }));
  26. 	timeline.insert(TweenLite.to(self,0.5,{z:300,ease:Back.easeIn }),0.75);
  27.  
  28. }
  29.  
  30. function setFlipSide(self){
  31.  
  32. 	if(self.rotationY > 89){
  33. 		card.getChildAt(1).visible = false;
  34. 		card.getChildAt(0).visible = true;
  35. 	}else{
  36. 		card.getChildAt(0).visible = false;
  37. 		card.getChildAt(1).visible = true;
  38. 	}
  39. }

URL: http://adamcoulombe.info/lab/as3/card-flip.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.