Databases
StackOverflow2013
Postsdbo
POHow to add scrollbar for UIComponent in flex4.0 after it zoom
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to add scrollbar for UIComponent in flex4.0 after it zoom
    text
    copied!<p>I am using a canvas with UIComponent for loading image in flex4. I want to zoom image, it is done image is zoomed but scrollbar is not added to canvas because i want to move image with scrolling and also mouse over, Please suggest me any solution for this or any having application. Thanks, Nitin</p> <hr> <h2>LoadPDF.mxml</h2> <p> </p> <pre><code>&lt;mx:Metadata&gt; [Event(name="PDFComplete",type="flash.events.Event")] &lt;/mx:Metadata&gt; &lt;mx:Script&gt; &lt;![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; private var swfURL:String = "pdf/outra.swf"; public var loader:Loader = null; public var bool:Boolean = false; public var myPath:String = ""; import mx.events.ScrollEvent; public var libMC:MovieClip = new MovieClip(); private function init():void { /*Hide the default context menu with print option*/ var myMenu:ContextMenu = new ContextMenu(); myMenu.hideBuiltInItems(); var defaultItems:ContextMenuBuiltInItems = myMenu.builtInItems; defaultItems.print = false; this.contextMenu = myMenu; //if (ExternalInterface.available) ExternalInterface.addCallback("pdfURL", loadPDF); if(bool == false) { loadPDF(swfURL); bool = true; } } private function loadPDF(name:String):void { myPath = name; if(loader!= null) { swfContainer.removeChild(loader); loader = null; } loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, swfComplete); var fLoader:ForcibleLoader = new ForcibleLoader(loader); fLoader.load(new URLRequest(myPath)); swfContainer.addChild(loader); swfContainer.addEventListener(Event.RESIZE, updateStageSize); } private function swfComplete(event:Event):void{ libMC = event.currentTarget.content as MovieClip; libMC.gotoAndStop(1); dispatchEvent(new Event("PDFComplete")); controls.target = libMC; controls.rootSwfContainer = swfContainer; libMC.x = (swfContainer.width/2)-(libMC.width/2); libMC.y = (swfContainer.height/2)-(libMC.height/2); var point:Point=new Point(libMC.x+libMC.width/2, libMC.y+libMC.height/2); controls.points = point; } public function updateStageSize(e:Event):void { if(libMC.width &lt; swfContainer.width &amp;&amp; libMC.height &lt; swfContainer.height) { libMC.x = (swfContainer.width-libMC.width)/2; libMC.y = (swfContainer.height-libMC.height)/2; } } ]]&gt; &lt;/mx:Script&gt; &lt;views:Control id="controls"/&gt; &lt;mx:HDividedBox top="40" width="100%" height="100%"&gt; &lt;mx:Canvas id="canvasContainer" backgroundColor="#222222" width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto"&gt; &lt;mx:UIComponent id="swfContainer" width="100%" height="100%"/&gt; &lt;/mx:Canvas&gt; &lt;/mx:HDividedBox&gt; </code></pre> <p></p> <hr> <h2>Control.mxml</h2> <p> <pre><code> import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.events.DropdownEvent; import mx.events.IndexChangedEvent; [Bindable]private var _currentPage:Number; private var _target:*; private var _swfContainer:*; private var _point:Point; private var currentScale:Number =1; private var rotateIndex:Number = 0; public function set target(value:*):void { _target = value; } public function get target():*{ return _target; } public function set rootSwfContainer(value:*):void { _swfContainer = value; } public function get rootSwfContainer():* { return _swfContainer; } public function set points(point:Point):* { _point = point; } public function get points():* { return _point; } public function zoomIN():void { if((Number(_target.width - _swfContainer.width) &lt;= 1000 ) || (Number(_target.height - _swfContainer.height ) &lt;= 1000)) { var xPos:Number = (_swfContainer.width/2)-(_target.width/2); var yPos:Number = (_swfContainer.height/2)-(_target.height/2); Tweener.addTween(_target, {x:xPos, y:yPos, scaleX: _target.scaleX * 1.25, scaleY: _target.scaleY * 1.25, transition: 'easeOut'}); repositionObject(); } } public function zoomOUT():void { if((_target.width &gt; 100) &amp;&amp; (_target.height &gt; 100)) { var xPos:Number = (_swfContainer.width/2)-(_target.width/2); var yPos:Number = (_swfContainer.height/2)-(_target.height/2); Tweener.addTween(_target, {x:xPos, y:yPos,scaleX: _target.scaleX * .6, scaleY: _target.scaleY * .6, transition: 'easeOut'}); repositionObject(); } } public function repositionObject():void { var tempXPos:Number = Number((_swfContainer.width/2)-(_target.width/2)); var tempYPos:Number = Number((_swfContainer.height/2)-(_target.height/2)); if(tempXPos &lt;= 0) { tempXPos = 0; } if(tempYPos &lt;= 0) { tempYPos = 0; } _target.x = tempXPos; _target.y = tempYPos; } ]]&gt; &lt;/mx:Script&gt; &lt;!-- icon="@Embed(source='assets/buttonicon.png')" height="16"--&gt; &lt;mx:Button label="Zoom In (+)" click="zoomIN()" /&gt; &lt;mx:Button label="Zoom Out (-)" click="zoomOUT()"/&gt; </code></pre> <h2></h2>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload