swap page transition please help.

[Asteroids]

I see transition effect in this link

 

http://activeden.net/item/as3-xml-site-template-with-swap-transition/full_screen_preview/147060

 

can i use greensock to make this transition?

 

please help me and thanks for help.

 

[Carl]

Yeah, the transition can definitely be created using GreenSock tools. 

Its really just a combination of tweening some 3D rotations, scale and positional properties at the right time. The only real trick is getting the elements to swap depths.

 

We really don't build a lot of custom effects as support but here is a general idea:

 

import com.greensock.*;

var tl = new TimelineLite();


card2.scaleX = card2.scaleY = 0.8
tl.to(card1, 1, {rotationY:-20, x:"-=200"})
  .to(card2, 1, {rotationY:20, x:"+=200", scaleX:1, scaleY:1}, 0)
  .to(card2, 1, {rotationY:0, x:"-=200"}, "swap")
  .call(this.addChild, [card2], "swap")
  .to(card1, 1, {rotationY:0, x:"+=200", scaleX:0.8, scaleY:0.8}, "swap")

With all animations it can take a lot of time tweaking the values to be perfect. This was a very quick stab.

 

Flash CC fla and swf attached. If you don't have CC just create a new fla and place 2 movie clips on top of each other with instance names card2 (bottom) card1 (top). You should be able to open the swf. Silly Flash CC won't let you save to any earlier versions.

 

 

 

 

 

3Dtransition_CC.zip

[Asteroids]

thank you carl schooff for this help ^^

 

can i got this task on greensock v11?

[Asteroids]

help me please to convert this code to greensock v11.

 

please help.

[Carl]

import com.greensock.*;
 
 

var tl = new TimelineMax();
 
 

  

tl.insert(TweenLite.to(card1, 1, {rotationY:-20, x:"-200"}))

tl.insert(TweenLite.to(card2, 1, {rotationY:20, x:"200", scaleX:1, scaleY:1}))

tl.insert(TweenLite.to(card2, 1, {rotationY:0, x:"-200"}), 1)

tl.addCallback(this.addChild, 1, [card2])

tl.insert(TweenLite.to(card1, 1, {rotationY:0, x:"200", scaleX:0.8, scaleY:0.8}), 1)

[Asteroids]

import com.greensock.*;


var tl = new TimelineMax();


  
tl.insert(TweenLite.to(card1, 1, {rotationY:-20, x:"-200"}))
tl.insert(TweenLite.to(card2, 1, {rotationY:20, x:"200", scaleX:1, scaleY:1}))
tl.insert(TweenLite.to(card2, 1, {rotationY:0, x:"-200"}), 1)
tl.addCallback(this.addChild, 1, [card2])
tl.insert(TweenLite.to(card1, 1, {rotationY:0, x:"200", scaleX:0.8, scaleY:0.8}), 1)

 

thank you again.

 

you are my hero!!