2 Replies Latest reply on Sep 15, 2009 4:50 AM by harsh_hot

    how to zoom a panel

    harsh_hot

      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 <mx:Zoom> and <mx:Resize> 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

        • 1. Re: how to zoom a panel
          ShardulSingh Level 3

          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

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

          layout="absolute">

          <mx:Script>

          <![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 < children.length; i++)

          {

          doZoom(children[i], val);

          }

          }

          }

           

          public function applyZoom():void

          {

          if(pnl == null)

          {

          return;

          }

          doZoom(pnl,zoomSlider.value);

          }

          ]]>

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

           

           

           

           

           

          with Regards,

          Shardul Singh Bartwal

           

           

           

           

           

           

           

           

          • 2. Re: how to zoom a panel
            harsh_hot Level 1

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