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.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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.