Sunday, November 23, 2008

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 !!!!!!!!!!!!!!!!!!!!!!!! :)

No comments:

Post a Comment

You can post your feedback on any question do you have.