Smoothing the resizing of layout’s in flex with effects.

For example suppose that there is an App where you wanted a Panel control to resize on click of button, then u would probably use setting the width and height of the panel.Which will resize the Layout, but the resize is not smooth [i.e immediate movement in resize] ,so we have to slow down the resize so that it looks fine [smooth].

So here we have to use a tag called <mx:Resize /> to achieve this.

Example :

<mx:Resize duration=”2000″ id=”r1″/>

Now this resize Effect can be included with any layouts.

Here iam using a Canvas, below one shows it.,

<mx:Canvas id=”cnv” width=”50%” height=”100%” resizeEffect=”r1″>
<mx:Panel layout=”absolute” id=”p” height=”100%” width=”100%”>
<mx:ControlBar horizontalAlign=”center”>
<mx:Button label=”FullScreen” click=”fullscreen()” id=”f”/>
<mx:Button label=”Compact” click=”compact()” id=”c”/>
</mx:ControlBar>
</mx:Panel>
</mx:Canvas>

Here resizeEffect is the property iam using [in canvas] to specify the resize effect to the canvas.

And the functions are here which will move the canvas. to full screen.,

<mx:Script>
<![CDATA[
import mx.effects.easing.*;
import mx.controls.Alert;
private function fullscreen():void
{
cnv.width=this.screen.width-100;
}
private function compact():void
{
cnv.width=(this.width)/2.2;
}

]]>
</mx:Script>

So atlast the the resize of canvas is smoothen by using resize effect..using <mx:Resize /> Tag and resizeEffect Property. simple and small but very use full.