Easy Breezy 3D Card Flip Effect with Flash, AS3 and Our Good Buddy TimelineMax

by carl schooff on December 22, 2010 · View Comments

in GreenSock Tweening Platform Tips

This movie requires Flash Player 9

Here is a super slick effect that takes very little effort. Plug 3 tweens into TimelineMax and you’re off to the races! Forget the Flash timeline and those horrible new Motion Tweens. We’ll touch on some extra goodies like the immediateRender property and visible plugin.

Watch The Video

Some cool stuff we will discus

visible plugin
The visible plugin, activated by default in TweenMax, is a real life saver. If you ever want to hide an object that is being tweened as soon as a tween finishes, just plop this into your vars object like so: visible:false. No need to add an onComplete callback or additional zero based tween. It’s all built in!

immediateRender:false
immediateRender is another handy property when you are using tweens that are set to have a duration of zero seconds. Since these tweens have no duration, they complete the instant they are created. To avoid this, simply pass immediateRender:false into your vars object.

tweenTo()
tweenTo allows you to play a TimelineLite/Max instance from where the playhead currently resides to any point in time on the timeline. tweenTo respects the playback speed of the timeline and all easing. You can pass a time or frameLabel into this method. tweenTo(2) will play the timeline to 2 seconds into your timeline. If the playhead is 5 seconds in, the timeline will automatically play backwards. very cool.

ActionScript 3.0 code used in this movie

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

//startValues for the card back
flipper.back.rotationY = -90;
flipper.back.alpha=0;

//speed of 90 degrees of flip
var flipSpeed:Number = .5; 

//create TimelineMax instance
var tl:TimelineMax = new TimelineMax({paused:true});

//flip the front 90 degrees
tl.append(TweenMax.to(flipper.front, flipSpeed, {rotationY:90, visible:false, ease:Linear.easeNone}))

//set the back to alpha of 0 as soon as front finishes
tl.append(TweenMax.to(flipper.back, 0, {alpha:1, immediateRender:false}))

//flip the back 90 degrees
tl.append(TweenMax.to(flipper.back, flipSpeed, {rotationY:0, ease:Linear.easeNone}))

//basic button code
flip1_mc.addEventListener(MouseEvent.CLICK, flip1);

function flip1(e:MouseEvent){
// play to the beginning of the timeline
	tl.tweenTo(0);
	}

flip2_mc.addEventListener(MouseEvent.CLICK, flip2);
function flip2(e:MouseEvent){
// play to the end of the timeline
	tl.tweenTo(tl.duration);
	}

Download Flash CS4 Source File

flipper_new_cs4
(must export as Flash Player 10+)

Learn More About the GreenSock Tweening Platform

Official GreenSock Site
SnorklTV GreenSock Tips

Merry Christmas

Post to Twitter Post to Facebook

  • http://twitter.com/pjinteractive Paul Johnson

    Very useful tutorial…

  • http://twitter.com/pjinteractive Paul Johnson

    Very useful tutorial…

  • http://www.snorkl.tv/ carl schooff

    Thanks Paul!

    I hope to someday convert this to something class-based so you can have a bunch of flippable objects.

    Great to have you around here.

    Carl

  • Cor

    Thanks Carl,

    I am using this technic now to rotate 4 picture of a vehicle, so I can turn it around

  • Guest

    The source file doesn't work properly???

  • Guest

    Oops, in Publish Settings, Flashplayer = 9.
    Sorry

  • Cor

    Hi Carl,

    When I rotate a dynamically created MC in the y-direction, I asumed when rotating it 90 degrees, I would look exactly at the edge of my object.
    However, this is not correct.
    When I set it to -108.5 it is.

    Copy this in an empty fla, run it, play with the m.rotationY = -108.5; line
    var m:MovieClip =new MovieClip();
    m.graphics.beginFill(0×990000);
    m.graphics.drawRect(0,0,640,480);
    m.graphics.endFill();
    m.x = (stage.stageWidth-m.width)*.5;
    m.y = (stage.stageHeight-m.height)*.5;
    var tf:TextField = new TextField();
    tf.text = “TESTING”;
    tf.x = (m.width-tf.width)*.5;
    tf.y = (m.height-tf.height)*.5;
    m.rotationY = -108.5;
    m.addChild(tf);
    addChild(m);

    The same goes for a positive value:
    m.rotationY = 71.6;

    Can you explain this?

    And I have a second question:
    Is it possible to and dynamically change/set the registration point of the movie clip m generated with code?

    Regards,
    Cor van Dooren
    The Netherlands

  • http://www.snorkl.tv/ carl schooff

    hey Cor,

    Thanks for your questions. For the first issue, not seeing “the edge” this has to do with the positioning of your object in relationship to the virtual camera. hold your left hand directly infront of your face with your palm facing right. you should should only see the “edge” of your hand with the thumb. now move your hand to the left now you see the palm of your hand. the same thing is happening in your movie. your MovieClip is not directly infront of the virtual camera so you are seeing it skewed. by default this virtual camera is in the middle of your stage.

    paste this code into a blank fla

    var m:MovieClip =new MovieClip();
    m.graphics.beginFill(0×990000);
    m.graphics.drawRect(0,0,640,480);
    m.graphics.endFill();
    //set x to middle of stage
    m.x = (stage.stageWidth)*.5;
    m.y = (stage.stageHeight-m.height)*.5;
    var tf:TextField = new TextField();
    tf.text = “TESTING”;
    tf.x = (m.width-tf.width)*.5;
    tf.y = (m.height-tf.height)*.5;
    //change this to -90 and the clip will be invisible
    m.rotationY = -91;
    m.addChild(tf);
    addChild(m);

    and you will see what happens as the movieclip gets closer to the virtual camera.

    you can change the position of this camera by utilizing the ProjectionPerspective class
    http://help.adobe.com/en_US/as…

    I have never used it myself.

    For your second question about changing the registration point of a movieclip. no you can not directly change the registration point but you can put your movieclip inside another display object parent and then re-position your movieclip relative to the parent. For an easy way around this I would strongly recommend you look inside the tweenMax plugin explorer and look at the TransformAroundPoint plugin as it allows you to very easily reset a registration point. This is a benefit of being a club greensock member.

    scroll down to the plugin explorer here: http://www.greensock.com/tween…/

    Thanks for watching my videos and for posting such a clear question with working code!

    Carl

  • http://twitter.com/codo1956 codo

    Thanks, Carl,

    That was (again) a very clear explanation!!
    I also found this option, but it doesn't fulfill my requirements.
    But maybe someone who is following this, can benefit:

    http://www.codobyte.com/!problem/Dyna…

    Maybe if I tell what I am trying to do, you have a better approach for me.
    Or if you think it is worth a tutorial… :-)

    I have 4 pictures, 1 of every site of a vehicle.
    And I want to offer the user 4 buttons, and a nice tweening from one side to the other.
    Of course I can do this on the timeline, but I want to learn to use TimelineMax and TweenMax.
    I even may want to extend this with the bottom and the roof of the vehicle.

    Regards
    Cor

  • http://www.snorkl.tv/ carl schooff

    Hey Cor,

    I think that doing what sounds like a 3D cube spin animation like you are describing is possible with timelineLite/Max but probably a bit tricky. The tough thing is that while the objects are spinning they will also most likely have their x coordinates change as well. If it can be done on the flash timeline… it definitely can be accomplished programmatically. This seems like a decent challenge. If I get around to building something like this I will let you do.

    For true 3d object manipulation you may want to look into Papervision. I have yet to tinker with it but have heard that it is pretty easy to pick up if you take the time.

    Best,

    Carl

  • Nasimshab

    Great and wonderful tutorial Carl.
    Thank you so much

    Nasim

  • Brant

    Hi Carl,

    Great work!

    Question: When the browser width/height ratios are taller than the original FLA, the top edge of flipper stays at the same (starting) y value during the entire tween!? Only the bottom edge of flipper behaves correctly and becomes taller at the narrowest point. Everything is good when the browser width/height ratios are wider than the original FLA. I am using LiquidStage to keep flipper centered on stage.

  • http://www.snorkl.tv/ carl schooff

    Hi brant,

    thanks for checking in. I'm hoping your question will get answered in the forum. if not I'll try to look into it more.

    Carl

  • Marcusgriffen

    This tutorial worked great when programming on the timeline. However, when I tried using it in a project where I have an external/document class structure, it resulted in simply flashing over to the new card, bypassing the flip animation. Any ideas?

  • http://www.snorkl.tv/2011/02/snorklreport-january-2011/ SnorklReport January 2011

    [...] The code samples look horrendous when they wrap. When the code wraps it is really hard to read: example. I think I need a much wider column to facilitate nice code formatting. I know a lot of folks [...]

  • http://www.snorkl.tv/ carl schooff

    sorry marcus I really don't. can you run some traces to verify that your external class has access to or can properly target all of the movieclips? That's where I would start. I'd also mess with doing just a very simple tween first just to verify that TweenLite/Max is being loaded up properly.

  • Guerra

    killer stuff!!!
    keep it up, CS!

  • http://www.snorkl.tv/ carl schooff

    Thanks Guerra. Appreciate your comments.

    Carl

  • WB

    The source file doesn’t work. Is timelineMax available to everyone or do you have to pay for it?  I am trying to modify it to flip  buttons with a MouseEvent.ROLL_OVER. I need to do this for 5 buttons. I’m using Gaia framework and these will be in the NavPage.as. I don’t really know how to make this a class. Any help with my numerous problems? 

  • http://www.snorkl.tv/ carl schooff

    sorry about the trouble. just change the publish settings to Flash Player 10 in the source file you downloaded. I updated the zip, but you should be fine just changing the one you have.

    TimelineMax is free.

    I don’t have any experience incorporating this into gaia.

    Thanks for letting me know about the source issue.

    Carl

  • WB

    Source file works now. Thanks for quick response. All I’m really doing is changing the eventlisteners from CLICK to ROLL_OVER and deleting the buttons. I got it working… sorta. But the flip doesn’t flip on the center axis of my Movie Clip it flips like a page in a book turning then the back clip alphas in and spins on its axis. Any idea why one Movie clip (front) would do this and not the back movie clip? got a feeling its got something to do with vanishing point or something retarded about 3D.  

  • WB

    K I got everything working. I just deleted the movie clips and brought them back in from Illustrator then renamed everything. But I have converted them to a MouseEvent.ROLL_OVER/MouseEvent.ROLL_OUT deleted the buttons and am trying to use them for nav buttons. But I’m getting an interesting problem now. When you mouse over the movie clip’s area parameter the animation begins to spin in 3D but the parameter becomes smaller and when it gets passed the mouse cursor the ROLL_OUT event is triggered and you start a loop and the animation will only finish if you find that little spot in the center where it still exists. I tried adding a removeEventListeners but I must not be doing it right because I can’t get the animations to flow together or complete with a mouseover. I’ve searched the internet everywhere and I can’t find a solution because i think most people just do things like this on the timeline and not through AS3. Any help would be appreciated. 

  • http://www.snorkl.tv/ carl schooff

    I had a bit of trouble understanding this exactly, but it seems as if the
    rollover/out is on the object that is spinning. when the object spins to a
    point where it is very skinny a ROLL_OUT is triggered. the solution is to
    place an invisible and interactive element on top of the spinning card.
    just cover your card with a movieclip that has an alpha of 0. put the
    ROLL_OUT/OVER code on that mc.

  • WB

    I didn’t think of that. Wow good idea. I’ve converted them to a class and when I’m done I could send you the file. Its not the same as yours because they are now Navigation buttons but still 90% your code. And your viewers might like it. Oh and BTW big thanks! love this site. 

  • http://www.snorkl.tv/ carl schooff

    glad you got it to work. and yes, let me know when you’re done with your
    custom class. I’m sure we all would love to see it!

    -carl

  • Kebabflap123

    Hi there nice tut is it possible do repeat the flip constantly?
    Can’t figure it out (kinda newbie)

  • http://www.snorkl.tv/ carl schooff

    replace the timeline constructor code with:

    var tl:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});

  • Bill

    Hi Carl,
    Great teaching stuff. Pic on front and what they did on the back. I have three flips going and plan on making more. It really is a smooth flip. I see some great history lessons coming up!
    Thanks,
    Bill

  • Bang Nguyen

    Hi Carl,
    The source code of yours doesn’t work correctly when you move the card far from the center to either side of the stage, using the latest greensock library (v1.697 - 2012-02-23).
    I don’t know what the problem is and how to fix it.
    Please help.

  • http://www.snorkl.tv/ carl schooff

    Hi Bang,

    Thank you for reporting the problem. It does seem that something may have changed in the latest version of TweenLite that effects how tweens with 0-second durations are handled. I will definitely discuss this with GreenSock. I know I won’t be able to get to it immediately though.

    in the meantime, please replace the second line of timeline code with this:
    tl.append(TweenMax.to(flipper.back, 0.0001, {alpha:1, immediateRender:false}))

    that will give you identical results to moving the card around with the OLD version of TweenLite.

    I will be sure to respond again to your comment and email you when this is resolved.

    thanks

    Carl

  • http://www.snorkl.tv/ carl schooff

    Hey Bang,

    There was actually a little bug in TweenLite relating to tweens with 0-second durations. The GreenSock classes have been updated in zip above. Also if you go to GreenSock.com, the fix is in the latest publicly available version of the GreenSock Tweening Platform files.

    Thanks for taking the time to point this out, and sorry for the trouble.
    Carl

  • Christer

    Hi There
    Thanks for a great tutorial.. Everything works great with these files but the “backside” gets very blurry.  Any ideas?
    Thanks
    Christer

  • Chris Watson

    When my card plays backwards it leaves the edge of the front card showing behind the back. What am I missing?

  • Chris Watson

     Never mind. I just got it working. I had to add a line so it worked right when it played backwards

    tl.append(TweenMax.to(e.currentTarget.cardBack, .25, { rotationY:90, visible:false, ease:Linear.easeNone } ));
    tl.append(TweenMax.to(e.currentTarget.cardFront, 0, { alpha:0} ));
    tl.append(TweenMax.to(e.currentTarget.cardFront, 0, { alpha:1, immediateRender:false} ));
    tl.append(TweenMax.to(e.currentTarget.cardFront, .25, { rotationY:0, ease:Linear.easeNone} ));

  • http://www.snorkl.tv/ carl schooff

    Hi Chris,

    Don’t really know what the trouble is. Did my source files have the same issue?
    Just as a note, awhile ago I experienced an issue that sounds similar and greensock made an update to TimelineLite. Might be a good idea just to check that you have the latest from greensock. Glad to hear you got it to work though.

    -carl

  • Anonymous

    Excellent and helpful as always.  Thanks a lot!

  • Anonymous

    After watch this, I did some studying on Flash 3D.
    To move the vanishing point of your object:
    // Move the vanishing point to the location where it will rotate:
    var pl:PerspectiveProjection = new PerspectiveProjection();
    var cPoint:Point = new Point(centerX,center.y);
    pl.projectionCenter = cPoint;
    pl.fieldOfView = 55;// set camera focal length for the projection
    myObj.transform.perspectiveProjection = pl;
    // Skewed if rotated and not moved to center point, so if needed:
    myObj.x = centerX;
    myObj.y = centerY;
    Now when it rotates 90 deg in Y, it will be invisible

  • Ultimate Belmont

    Thanks a lot this is a very creative use of tween engine.
    I know Its an old post but I was wondering if we can apply the same concept on a card like which has 4 sides i.e Front, inside left, inside right and back.
    I tried to do it but the results are not very pleasing. Any suggestion?

    Best Regards,

  • James B

    this isn’t working with the latest greensock.swc. Any ideas why?

  • http://www.snorkl.tv/ carl schooff

    No errors?

  • James B

    Nope. Obviously some differences in the TimeLineMax API. For instance I can use the ‘useFrames’ property with your version, but throws an error with latest

  • http://www.snorkl.tv/ carl schooff

    oh, yeah, duration is now a method: duration()

    function flip2(e:MouseEvent){
    tl.tweenTo(tl.duration());
    }

    useFrames isn’t working because the duration of each tween is .5

    if you change: var flipSpeed:Number = 30;
    it works fine
    nothing to do with the API

  • James B

    k thanks!

blog comments powered by Disqus

Previous post:

Next post: