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”/>

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.,

import mx.effects.easing.*;
import mx.controls.Alert;
private function fullscreen():void
private function compact():void


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.


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

  1. Tom says:

    Very good! I have never saw it before

  2. Laurie says:

    Thanks, this helped me “get it done” faster.

  3. stephanie says:

    hi i cant understand

  4. kumargandhi says:

    Hi ,

    Can you tell me which part , i can rewrite the post.Can you be clear.


  5. abhishek says:

    how can we give effect move and resize for container which should increse its height only to up side ?

    • kumargandhi says:

      Container are resizable from the both the ends and to achive this you got to move the container[x,y] to the position from where you actually want to stat the resize and do the height thing.

      comment me for any queries.


  6. lakshmikanthreddy says:

    HI kumar ,

    u r idea has helped me out .

    thank u ,

  7. Anonymous says:

    Hi Kumar
    Nice blog. But distorted logo. Please do something about it

  8. Andrea says:

    Thanks! this is exactly what i was looking for! Took me more than 40 minutes to figure it out that i had to google “resize Effect” instead of “show effect” 😦

  9. hey kumar,
    its really helpful.exactly for what I am looking for.
    Gud work !!!!!!!!!

  10. madhavi says:

    Hi Kumar,
    its very helpful but is there a way to see such that the resize can be done only to left and the right side remains as such becoz in my application i have tool icons on left and the right side can be overlapped when resized.

  11. Jeyabalan says:

    Hi Please guide me how to configure Flex 4.5 in eclipse Helios.Give me the full details na

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: