Advanced Search

AS3 3D Gallery - Screen to Screen effect

/ Published in: ActionScript 3
Save to your folder(s)
demo and FLA file at http://www.adamcoulombe.info/lab/as3/screen-to-screen.html

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3. var lastRotX = 0;
  4. var lastRotY = 0;
  5.  
  6. for(var i=0; i<gal.numChildren; i++){
  7. 	var self = gal.getChildAt(i);
  8. 	self.addEventListener(MouseEvent.CLICK,windowClicked);
  9. }
  10.  
  11. addEventListener(Event.ENTER_FRAME,loop);
  12. function windowClicked(e){
  13. 	var self = e.currentTarget;
  14. 	removeEventListener(Event.ENTER_FRAME,loop);
  15. 	var timeline = new TimelineLite();
  16. 	var transition = new TimelineLite();
  17. 	timeline.insert(TweenLite.to(gal,1,{x:(self.x)*-1,y:(self.y)*-1, z:-1210, ease: Sine.easeInOut}));
  18. 	timeline.insert(transition);
  19. 	lastRotX = gal.rotationX;
  20. 	lastRotY = gal.rotationY;
  21. 	var oppRotX = gal.rotationX*-1;
  22. 	var oppRotY = gal.rotationY*-1;
  23. 	transition.append(TweenLite.to(gal,0.5,{rotationX:oppRotX*7,rotationY:oppRotY*7, ease: Sine.easeOut})); 
  24. 	transition.append(TweenLite.to(gal,0.5,{rotationX:0,rotationY:0, ease: Sine.easeIn})); 	
  25. 	self.removeEventListener(MouseEvent.CLICK,windowClicked);
  26. 	self.addEventListener(MouseEvent.CLICK,zoomOut);
  27. }
  28. function zoomOut(e){
  29. 	var self = e.currentTarget;
  30.  
  31. 	self.addEventListener(MouseEvent.CLICK,windowClicked);
  32. 	var timeline = new TimelineLite();
  33. 	var transition = new TimelineLite({onComplete:function(){	addEventListener(Event.ENTER_FRAME,loop) }});
  34. 	timeline.insert(TweenLite.to(gal,1,{x:573,y:422, z:0, ease: Sine.easeOut}));
  35. 	timeline.insert(transition);
  36. 	transition.append(TweenLite.to(gal,0.5,{rotationX:lastRotX*7,rotationY:lastRotY*7, ease: Sine.easeOut})); 
  37. 	transition.append(TweenLite.to(gal,0.5,{rotationX:0,rotationY:0, ease:Sine.easeInOut})); 
  38.  
  39. }
  40. function loop(e){
  41. 	var distx:Number = mouseX / 650;
  42. 	var disty:Number = mouseY / 450;
  43. 	TweenLite.to(gal, 2, {
  44. 						rotationY:(-70 + (140*distx))*0.06,
  45. 						rotationX:(70 - (140*disty))*0.06,
  46. 						ease:Expo.easeOut
  47. 				 });
  48. }

URL: http://www.adamcoulombe.info/lab/as3/screen-to-screen.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.