BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Zoom Any container with children In Flex 3.0

Posted by Shardul Singh Bartwal on September 15, 2009

Zooming in Flex

I saw many people searching for the finding solution for zooming functionality. They are normally trying it with the zoom effect or scaling which is very true. But the case is bit sensitive when you have to zoom all the components inside a component and so on. So surly this will be achieved through a recursive function which will zoom each and every control inside a container unto the nth level where a container will not have any more child. Below is the demo application for achieving this. Hope this will be useful for all those who are having such requirement.

For code click on the link below.
ZoomDemo Source Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute">
<mx:Script>
<!&#91;CDATA&#91;
import mx.core.Container;
import mx.core.UIComponent;
private function doZoom(component:UIComponent,val:Number):void
{
component.scaleX = val;
component.scaleY = val; 
if(component is Container)
{
var children:Array = Container(component).getChildren();
for(var i:int = 0; i < children.length; i++)
{
doZoom(children&#91;i&#93;, val);
}
}
} 
public function applyZoom():void
{
if(pnl == null)
{
return;
}
doZoom(pnl,zoomSlider.value);
}
&#93;&#93;>
</mx:Script>
<mx:HBox horizontalAlign="right">
<mx:VBox width="700" height="100%">
<mx:Panel id="pnl" width="400" height="400" title="Panel">
<mx:HBox width="100%" height="100%">
<mx:Button label="B1"/>
<mx:Button label="B2"/> 
<mx:Button label="B3"/>
</mx:HBox>
<mx:HBox width="100%" height="100%">
<mx:Button label="B11"/>
<mx:Button label="B21"/> 
<mx:Button label="B31"/>
</mx:HBox>
</mx:Panel> 
</mx:VBox>
<mx:VBox>
<mx:HSlider id="zoomSlider" minimum=".1" value="1"
maximum="2" change="applyZoom()" width="180"/>
<mx:Label text="Apply Zoom"/>
</mx:VBox>
</mx:HBox>
</mx:Application>

Hope you will like this………Enjoy Flexing…

Advertisements

5 Responses to “Zoom Any container with children In Flex 3.0”

  1. Harit Kothari said

    This doesn’t fit for all. Consider code snippet as under:

    replace Panel with id ‘pnl’ with below code, and accuracy will not be maintained, buttons will overlap. Also, according to my experience, scaling parent is sufficient, maintains accuracy.

  2. iamcoder said

    Hi

    Thanks for the post.. it is really good.. You can get more information about flex from here.

    http://www.rsdhariwal.com/

    really nice site for flex

  3. Vik said

    Thats nice my friend, I was thinking of not using a slider, trying for selecting the component and then using mouse scroller to zoom in šŸ™‚ Thanks again!

  4. Nagesh said

    This is nice,Thanks
    can we zoom the container from the center point?

  5. samarth said

    thanks, this code works nicely…

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: