Applying an effect to a popup in Flex (open,close)

This is an effect I made to make popups appear and disappear in a cooler way...

u can view an example here right click for source code...

also posting the code here just in case...

the mxml code for the main application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html" backgroundColor="0xffffff">




<mx:Script>
<![CDATA[
import mx.effects.easing.*;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;

private function launchDiag1():void
{
var win:diagBox = PopUpManager.createPopUp(this, diagBox, true) as diagBox;
PopUpManager.centerPopUp(win);
}
]]>
</mx:Script>


<mx:Canvas height="100%" width="100%">




<mx:Button click="launchDiag1()" label="Play!" verticalCenter="0" left="50" height="80" width="100"/>

</mx:Canvas>
</mx:Application>

//=================================================

Now the popup code: ( create a new mxml component first, and name it diagBox)

<?xml version="1.0" encoding="utf-8"?>
<!-- diagBox.mxml -->

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
showCloseButton="true"
width="550"
height="500"
close="titleWindow_close();" backgroundAlpha="0.0" borderAlpha="0.0" creationComplete="openingEffect.play();"
shadowDirection="center" shadowDistance="0" borderStyle="none">

<mx:Script>
<![CDATA[
import mx.events.EffectEvent;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
import mx.effects.easing.*;

private function titleWindow_close():void {
shutdownEffect.play();

}

public function endDiag():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>

<mx:Style>
.header
{
color:#ffffff;
}
</mx:Style>

<mx:Sequence id="openingEffect" target="{panel}" effectStart="panel.visible=true">
<mx:Pause duration="400"/>
<mx:Resize id="expand" widthTo="500" duration="300" easingFunction="Circular.easeOut"/>
<mx:Pause duration="300"/>
<mx:Resize id="expand2" heightTo="450" duration="300" easingFunction="Circular.easeInOut"/>
</mx:Sequence>

<mx:Sequence effectEnd="endDiag();" id="shutdownEffect" target="{panel}" suspendBackgroundProcessing="true">
<mx:Pause duration="400"/>
<mx:Resize id="contract2" heightTo="1" duration="300" easingFunction="Circular.easeInOut" suspendBackgroundProcessing="true"/>
<mx:Pause duration="300" suspendBackgroundProcessing="true"/>
<mx:Resize id="contract" widthTo="1" duration="300" suspendBackgroundProcessing="true" easingFunction="Circular.easeOut"/>
</mx:Sequence>

<mx:Canvas height="100%" width="100%">


<mx:Panel id="panel" visible="false" height="1" width="1" borderColor="#000000" horizontalCenter="0" verticalCenter="0"
title="Early Years..." themeColor="#ffffff" autoLayout="true" titleStyleName="header">


<mx:Text id="info" text="Sample Text containing the phrase: Hello World! "/>


</mx:Panel>
</mx:Canvas>




</mx:TitleWindow>

Enjoy!