Tutorial: Sexy transitions with Flex 3 (as used in the MAX widget)

Posted by Serge Jespers on Aug 28, 2009 in Flex, How-to | 5 comments

When I showed the first versions of the MAX widget to a few colleagues, most were very surprised to hear that this was all built with the Flex 3 framework and that no Flash Catalyst or Flash CS4 was involved in this.

“Including the animations?“, was a question I got a lot. And yes… Even the animations are “programmed” using the Flex framework. And you know what… It’s really not as hard as it sounds. The Flex framework actually has a bunch of effects built in and they are really easy to use.

In this case, I used 2 move effects and specified a “Back.easeOut” easingFunction. This easing function creates that bouncing effect that you see in the widget.

<mx:Move id="moveIn" yFrom="400" duration="350" easingFunction="Back.easeOut"/>
<mx:Move id="moveOut" yTo="400" duration="250" easingFunction="Back.easeIn"/>

You can use these types of effects in a number of different ways but the easiest way (I think) is to specify the showEffect and hideEffect on a component.

<mx:Canvas id="page1_back" showEffect="moveIn" hideEffect="moveOut" width="400" height="400"/>

When you set the visible property to false, the hideEffect will trigger and the showEffect gets triggered when you set the visible property to true. I’m sure you can already see how I built this ;-)

In the widget, you see 6 different pieces of graphics slide in to place over time. To do that, I created a timer that triggers my setup function over time.

var setupTimer:Timer = new Timer(150, 3);
setupTimer.addEventListener("timer", doSetupPage1);
setupTimer.start();

This timer will trigger the doSetupPage1 function 3 times with 150 milliseconds in between each call. All my doSetupPage1 function does, is set the visible property to true on the different pieces of graphics I want to show.

private function doSetupPage1(event:TimerEvent):void
{
    switch (event.target.currentCount)
    {
        case 1:
            page1_back.visible = true;
            break;
        case 2:
            page1_middle.visible = true;
            break
        case 3:
            page1_front.visible = true;
            break;
    }
}

To hide them, I’m actually doing exactly the same thing. Instead of setting the visible property to true, I set it to false and when all pieces of artwork are hidden, I trigger the function that reveals the next page.

[flash medium=5 w=400 h=400 mode=1]

To get you started, I created this little Flex project that demonstrates this approach. Now I’m not saying that this is best practice or not but I think it’s just an easy way to create sexy transitions with Flex 3.

Download the source.