how to zoom a panel

Hi All,

I want a zoom facility in my application i.e. if i click the zoom button then all the elements in the panel should be zoomed to that extent. I am using %26lt;mx:Zoom%26gt; and %26lt;mx:Resize%26gt; tag but they zoom only that particular element which has evoked these tags. I want a dropdown on the panel with zoom options like 100%,200%,50% etc and when i select any value, all the elements in the panel should be resized according to the value selected.

Please guide me

how to zoom a panel

Hi,

Pls find the solution of your problem,and let me know if you have any issue.Hope this will full fill your requirement.

MainApplication.MXML

%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;

%26lt;mx:Application xmlns:mx=''http://www.adobe.com/2006/mxml''

layout=''absolute''%26gt;

%26lt;mx:Script%26gt;

%26lt;![CDATA[

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 %26lt; children.length; i++)

{

doZoom(children[i], val);

}

}

}

public function applyZoom():void

{

if(pnl == null)

{

return;

}

doZoom(pnl,zoomSlider.value);

}

]]%26gt;

%26lt;/mx:Script%26gt;

%26lt;mx:HBox horizontalAlign=''right''%26gt;

%26lt;mx:VBox width=''700'' height=''100%''%26gt;

%26lt;mx:Panel id=''pnl'' width=''400'' height=''400'' title=''Panel''%26gt;

%26lt;mx:HBox width=''100%'' height=''100%''%26gt;

%26lt;mx:Button label=''B1''/%26gt;

%26lt;mx:Button label=''B2''/%26gt;

%26lt;mx:Button label=''B3''/%26gt;

%26lt;/mx:HBox%26gt;

%26lt;mx:HBox width=''100%'' height=''100%''%26gt;

%26lt;mx:Button label=''B11''/%26gt;

%26lt;mx:Button label=''B21''/%26gt;

%26lt;mx:Button label=''B31''/%26gt;

%26lt;/mx:HBox%26gt;

%26lt;/mx:Panel%26gt;

%26lt;/mx:VBox%26gt;

%26lt;mx:VBox%26gt;

%26lt;mx:HSlider id=''zoomSlider'' minimum=''.1'' value=''1''

maximum=''2'' change=''applyZoom()'' width=''180''/%26gt;

%26lt;mx:Label text=''Apply Zoom''/%26gt;

%26lt;/mx:VBox%26gt;

%26lt;/mx:HBox%26gt;

%26lt;/mx:Application%26gt;

with Regards,

Shardul Singh Bartwal

how to zoom a panel

Thanks a ton Shardul....You have been a great help!!!