How to give some effect to your component in FLEX using ACTIONSCRIPT

Suppose you have some component in your FLEX application and you want to give effect like during visible=flase it should show fade during visible=true it should rotate.
For example, if you have one datagrid say mygrid

< id="mygrid" x="485" y="119" width="600" dataprovider="{employees.contact}" visible="false">

< mx:columns >
< headertext="UserName " datafield="userName">
< headertext="Location" datafield="location">
< headertext="Email" datafield="email">
< /mx:columns >
< /mx:DataGrid >

and you want to put the effect then you have write one method

private function init():void {
mygrid.setStyle("showEffect", rotate);
mygrid.setStyle("hideEffect", fade);
}

and obiviously this method should run during application start time, so you have to add this method name with <mx:Application ...... /> like this
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
Put these below code outside from < / mx:script >

<mx:Fade id="fade"/>

<mx:Fade id="fadeOut" duration="4000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Rotate id="rotate"
angleFrom="-180"
angleTo="0"
easingFunction="Elastic.easeInOut"
duration="2000" />

You can also set Face class directly in the function without <mx:Fade id="fade"/>

private function init():void {
// Fade effect
fade = new Fade();
// Rotate effect
rotate = new Rotate();
rotate.angleFrom = -180;
rotate.angleTo = 0;
rotate.easingFunction = Elastic.easeInOut;
rotate.duration = 2000;
mygrid.setStyle("showEffect", rotate);
mygrid.setStyle("hideEffect", fade);
}


That it !!!!!!!!!!!!!!!!!!!!!!!! :)