Jump to content
Search Community

Simple rotation tween on Y axis with objects on the Z axis

conleth test
Moderator Tag

Recommended Posts

As this is my first post, I think I should just say the GreenSock code is simply out of this world.

 

Ok, to 'play' and learn the library, I set about making the now famous flipping card example.

 

One movieclip with two internal movieclips, each one with a different image.

A simple rollover

 

player2.addEventListener(MouseEvent.ROLL_OVER ,flipOver); 
player2.addEventListener(MouseEvent.ROLL_OUT ,flipOut); 

 

a simple tween (just gonna show the flipOver - flip out is the same with rorationY=0)

 

private function flipOver(e:MouseEvent):void{  
var flipper:* = e.currentTarget;
TweenMax.to(flipper,.9,{ease:Quart.easeInOut , rotationY: 180, onUpdate:flipProgress, onUpdateParams:[flipper]});
}

then a switch

 

			
private function flipProgress(flipper:Object):void {
if (flipper.rotationY>=90){
if (flipper.getChildAt(1).visible==true) {
	flipper.getChildAt(1).visible=false;
	flipper.getChildAt(2).visible=true;
	}
}
else 	{
if (flipper.getChildAt(1).visible==false) {
	flipper.getChildAt(2).visible=false;
	flipper.getChildAt(1).visible=true;
	}
}
}

 

It was a bit jerky, but it worked and I was quite pleased.

 

Then I said to myself, if I set the images on the z axis one infront of the other, as they rotate the flip effect should be automatic, so I tried it.

 

Unfortuantly it doesn't work. Even though it seems it should. By making my tween very slow and making an extreme zaxis (+/-100) I can see the 2 objects rotate correctly, up until the 90º point.

Then for some reason the objects on the Z axis are switched and the 'front' image returns to the front as the tween reaches 180º.

 

Any ideas or suggestion would be greatly appreciated.

 

Conleth

Link to comment
Share on other sites

yeah, i'm a little lost in the explanation, but i think the problem is that you are mistaking how flash handles 3D. (not your fault)

It isn't true 3d, its a pseudo 3d. when you do z-axis transformations it scales and moves objects so that they appear to be farther or closer, but it doesn't handle the layering of foreground and background elements.

 

 

if in your flipper you have your back and front cards positioned on top of each other, try doing a 3d rotationX/Y rotation on the timeline with a motion tween... you'll see that the front card is always on front... there really is no back regardless of the z settings or even if they are in different layers, there is no top card or bottom card. I imagine you were trying to account for this by toggling the visibility.

what you were hoping to have happen definitely makes sense in the real world... but not the flash ide :(

 

what you want to do is have both front and back in your flipper clip with the instance names font and back.

 

do a series of tweens like this

 

import com.greensock.*;
import com.greensock.easing.*;

//hide the back
flipper.back.alpha=0;
//flip the font 90
TweenMax.to(flipper.front, .5, {rotationY:90, ease:Linear.easeNone});
//hide the front when it reaches 90
TweenMax.to(flipper.front, 0, {alpha:0, delay:.5});
//show the back as the front hides
TweenMax.to(flipper.back, 0, {alpha:1, delay:.5});
//flip the back from 90 to 180
TweenMax.fromTo(flipper.back, 1, {rotationY:90}, {rotationY:180, ease:Linear.easeNone, delay:.5})

 

there are probably more elegant ways of doing this with timelinemax and callback functions or listeners, but this simple approach will do the trick.

 

 

Carl

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...