Citrus Engine: Adding Screen Transitions

Well then, continuing to the previous post, in this post I’ll tell how to add a transition between the screen/state.

If you want to read the other part, here are all the links:
1. Game Structure
2. Adding Screen Transition
3. Head-Up Display
4. Working with Data
5. Creating Level using Tiled Map Editor 

Nothing much to tell here, as it actually a very basic tutorial and you can get so many references about it in other sources. You can use any transition library like tween lite, kitchen sync, gTween, etc, or built in transition from Flash.

Here, I’m using built in transition classes from Flash. So if you want to learn more about this, I recommend this link. 

First thing first, we need a changes to the CE State class:
public class State extends MovieClip implements IState

Yep, you can see here, I change the state to extends MovieClip rather than Sprite, coz the Flash transition class can only handle MovieClip. Other than that, you’ll get an error message.

So, to add a transition, open your BaseState class we’ve create it before, and write some code like this:
protected var myTM:TransitionManager;

override public function initialize():void
        myTM = new TransitionManager(this);
        myTM.startTransition({type: Fly, direction: Transition.IN, duration: 1, easing: Back.easeOut})
        myTM.addEventListener("allTransitionsInDone", doneTrans);
private function doneTrans(event:Event):void
        myTM.removeEventListener("allTransitionsInDone", doneTrans);
        myTM = null;

I won’t explain the code as it already well explained in the link I’ve write before.

Compile and run it, and you’ll get your transition… Very simple, isn’t it?

Download Source Code:

Freelance 2D game artist, occassional game developers, lazy blogger, and professional procrasctinator


  1. How did you changes the CE state Class?? I'm using SWC from the site and stil didn't know how to change the code in the class

    1. It's not possible to modify the code if you use SWC.

      You can try to cast the sprite to movieclip when applying the transition manager:
      myTM:TransitionManager = new TransitionManager(this as MovieClip);
      But I haven't tested it yet...

      Or simply using another Tween library, like TweenLite or else... It accept any types other than MovieClip