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.

Advertisements

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.

    regards,
    kumar.

  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.

      regards,
      kumar.

  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:

WordPress.com Logo

You are commenting using your WordPress.com 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: