There was a post on Adding animations and effects to Tooltips in flex at blog.flexexamples.com I thought this was a great simple example… I wanted to show how to customize a PopUp with a similar effect. ApplicationSource You can also right click to view the source.

1. Create a component for the PopUp, I tend to base my PopUp’s off of either a Panel, or a TitleWindow, usually a TitleWindow because by default you can add a close button to it, with a couple letters of code… (showCloseButton=”true”), but I have also extended the Panel to add many different things in the header of the panel… you can do this by extending it, and adding children to the “rawChildren” but we’ll save that for another post.

2. import mx.managers.PopUpManager;

3. create the code for Popping up the PopUp

[Bindable]
private var win:MyTitleWindow;

private function createPopup():void{
win=MyTitleWindow(PopUpManager.createPopUp(this,MyTitleWindow,true));
win.title = ‘This is my title window';
win.x = -500;
win.y = 0;
customMove.end();
customMove.play();
}

4. Create your custom animation

<mx:Parallel id=“customMove” target=“{win}”>
<mx:Move duration=“2000”
xTo=“{(stage.width – win.width) / 2}”
yTo=“{(stage.height – win.height) / 2}” />

<mx:WipeRight duration=“2000” />
</mx:Parallel>

5. Call createPopup()

NOTE: these links at the bottom, are the same as at the top, they are just here in case the blog post gets long. ApplicationSource You can also right click to view the source.