my main application mxml I am using a tab navigator,I can access that tab navigator anywhere in the application by following code..
mx.core.FlexGlobals.topLevelApplication.menuOption.selectedIndex=0;
Now my problem is I ihave used a toggle button bar in transactionUI which is a child element of tab navigator ,How can i access that element like above mentioned code??
My main mxml tab navigator ::
<mx:TabNavigator left="10" top="20" bottom="10" right="10" id="menuOption" >
<ui1:homeUI label="Home" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:transactionUI label="Transaction" width="100%" height="100%" backgroundColor="#373737" />
<ui1:calanderUI label="Employee service" width="100%" height="100%" horizontalCenter="0" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:ManagementUI label="Management" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:reportUI label="Reports" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:admin label="Admin" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
</mx:TabNavigator>
In my main application mxml I am using a tab navigator,I can access that tab navigator anywhere in the application by following code..
mx.core.FlexGlobals.topLevelApplication.menuOption.selectedIndex=0;
Now my problem is I ihave used a toggle button bar in transactionUI which is a child element of tab navigator ,How can i access that element like above mentioned code??
My main mxml tab navigator ::
<ui1:homeUI label="Home" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:transactionUI label="Transaction" width="100%" height="100%" backgroundColor="#373737" />
<ui1:calanderUI label="Employee service" width="100%" height="100%" horizontalCenter="0" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:ManagementUI label="Management" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:reportUI label="Reports" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:admin label="Admin" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
</mx:TabNavigator>
*My toggle bar inside transactionUI ::*
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
xmlns:ui="com.colan.*" xmlns:ui1="com.colan.ui.*"
backgroundColor="#373737" chromeColor="#181818"
contentBackgroundColor="#181818" color="#FDFDFD">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.*;
import mx.core.*;
]]>
</fx:Script>
<mx:VBox horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">
<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="15%" >
<mx:ToggleButtonBar id="toggleButtonBar"
dataProvider="{viewStack}"
selectedButtonTextStyleName="mySelectedButtonTextStyleName"
/>
</mx:HBox>
<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="85%" >
<mx:ViewStack id="viewStack"
visible="{toggleButtonBar.selectedIndex > -1}" width="100%" height="100%" >
<ui1:transaction label="Transaction"/>
<ui1:addClient label="Add Client"/>
<ui1:invoice label="Make invoice"/>
<ui1:workCatalogue label="Work catalogue"/>
<ui1:productCataloge label="Products Categories"/>
<ui1:suppliers label="Offers"/>
<ui1:calendarPlanUI label="Calendar"/>
</mx:ViewStack>
</mx:HBox>
</mx:VBox>
Please advice me...
((mx.core.FlexGlobals.topLevelApplication.menuOption).getChildAt(1) as transactionUI).toggleButtonBar
Although this is crude, but helps you get going. Have not tested.
Related
I have a radioButton in an ItemRenderer of a List component. I am trying to set the selected value of each radioButton based on a field in the dataprovider (SchoolList.Athletics_Fav).
These traces show the correct value:
trace("value: " +value.Athletics_Fav2);
trace("selectetText: " +selectText);
This one is not.
trace("btnSelect: "+radBtnPhone.selected);
Anyone have a suggestion as to how I can set radBtnPhone.selected to the dataprovider value (SchoolList.Athletics_Fav)? Any help would be greatly appreciated.
Code:
]]>
</fx:Script>
<s:Group width="100%" height="100%">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="0xffffff" /></s:fill>
</s:Rect>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke weight="1" color="0xd3d3d3"/>
</s:stroke>
</s:Line>
</s:Group>
<s:HGroup id="bigGrpPhone" width="100%" verticalAlign="middle">
<s:HGroup id="grpPhone" gap="6" height="100%" width="95%" paddingLeft="2" paddingRight="2" paddingTop="2" verticalAlign="middle">
<s:BitmapImage id="imgPhone" source="{data.SchoolImage}" width="70" height="70" />
<s:Label id="schlNamePhone" maxDisplayedLines="1" width="100%" height="100%" text="{data.SchoolName}" verticalAlign="middle"/>
</s:HGroup>
<s:HGroup width="5%" horizontalAlign="center" verticalAlign="middle">
<s:RadioButton width="50" id="radBtnPhone" styleName="myRadioButton" />
</s:HGroup>
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
Try this out:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
>
<s:SkinnableDataContainer>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:ArrayList id="SchoolList">
<fx:Object SchoolName="Smith" Athletics_Fav="true" SchoolImage="./SchoolImage.png"/>
<fx:Object SchoolName="Jones" Athletics_Fav="false" SchoolImage="./SchoolImage.png"/>
<fx:Object SchoolName="Davis" Athletics_Fav="false" SchoolImage="./SchoolImage.png"/>
<fx:Object SchoolName="Cooper" Athletics_Fav="true" SchoolImage="./SchoolImage.png"/>
</mx:ArrayList>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Group width="100%" height="100%">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="0xffffff" /></s:fill>
</s:Rect>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke weight="1" color="0xd3d3d3"/>
</s:stroke>
</s:Line>
<s:HGroup id="bigGrpPhone" width="100%" verticalAlign="middle">
<s:HGroup id="grpPhone" gap="6" height="100%" width="95%" paddingLeft="2" paddingRight="2" paddingTop="2" verticalAlign="middle">
<s:BitmapImage id="imgPhone" source="{data.SchoolImage}" width="70" height="70" />
<s:Label id="schlNamePhone" maxDisplayedLines="1" width="100%" height="100%" text="{data.SchoolName}" verticalAlign="middle"/>
</s:HGroup>
<s:HGroup width="5%" horizontalAlign="center" verticalAlign="middle">
<s:RadioButton width="50" id="radBtnPhone" styleName="myRadioButton" selected="{data.Athletics_Fav}"/>
</s:HGroup>
</s:HGroup>
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:SkinnableDataContainer>
</s:Application>
I figured out a simple solution and wanted to post here for others who may need it. I created a Boolean variable (btnPhValue) and set it's value based on the value of the field AthleticsFavs in my SchoolList array. Then I set the radioButton.selected value to the Boolean var I created. Works Perfectly!
<s:List id="phoneList" width="100%" height="100%" contentBackgroundColor="0x0065a4" fontSize="20"
dataProvider="{SchoolList}" >
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer >
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
var selectPhText = value.AthleticsFavs;
var btnPhValue:Boolean;
radBtnPhone.group=outerDocument.radGrp;
if (selectPhText == 1)
btnPhValue = true;
else
btnPhValue = false;
radBtnPhone.selected = btnPhValue;
}
]]>
</fx:Script>
<s:Group width="100%" height="100%">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="0xffffff" /></s:fill>
</s:Rect>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke weight="1" color="0xd3d3d3"/>
</s:stroke>
</s:Line>
</s:Group>
<s:HGroup id="bigGrpPhone" width="100%" verticalAlign="middle">
<s:HGroup id="grpPhone" gap="6" height="100%" width="95%" paddingLeft="2" paddingRight="2" paddingTop="2" verticalAlign="middle">
<s:BitmapImage id="imgPhone" source="{data.SchoolImage}" width="70" height="70" />
<s:Label id="schlNamePhone" maxDisplayedLines="1" width="100%" height="100%" text="{data.SchoolName}" verticalAlign="middle"/>
</s:HGroup>
<s:HGroup width="5%" horizontalAlign="center" verticalAlign="middle">
<s:RadioButton width="50" id="radBtnPhone" styleName="myRadioButton" />
<!-- <MyComp:myRadioButton width="50" id="radBtnPhone" styleName="myRadioButton" /> -->
</s:HGroup>
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
If you run the following mxml code, you'll see there's a gap between the TabBar and the BorderContainer. How to simply remove that gap? I'm having trouble laying it out. Nothing I enter in TabBar (e.g. top="10", or y="10") has any effect.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:VGroup top="10" bottom="20" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="2">
<s:Label id="titleTextId" text="My Title" fontWeight="bold" fontSize="18"/>
</s:HGroup>
<s:HGroup right="0" verticalAlign="middle">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65" />
</s:HGroup>
</s:Group>
<s:TabBar id="tabs" dataProvider="{vs}"/>
<mx:ViewStack id="vs" height="100%" width="100%">
<s:NavigatorContent label="Tab 1" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="1" borderStyle="solid">
<s:Label left="3" top="5" text="This is my first tab..."/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 2" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="1" borderStyle="solid">
<s:Label left="3" top="5" text="This is my second tab..."/>
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
</s:VGroup>
Try the gap attribute, this should do it!
<s:VGroup top="10" bottom="20" left="20" right="20" gap="0">
The content(Here is VBox) is not align with Tab, put it in another way, the content is stretch out one pixel(The red border is wider than the Tab), as show in the following pic:
So how to solve the issue?
code snippet:
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
>
<mx:TabNavigator id="tn"
width="300"
height="300"
tabWidth="{tn.width/tn.numChildren}"
borderStyle="solid"
borderColor="#ff0000"
backgroundColor="#ffffff"
paddingTop="0">
<mx:VBox id="vb1" width="100%" label="Tab 1" backgroundColor="#ffffff">
<mx:Label text="width:{vb1.width}, height:{vb1.height}" />
</mx:VBox>
<mx:VBox id="vb2" width="100%" label="Tab 2" backgroundColor="#00ffff">
<mx:Label text="width:{vb2.width}, height:{vb2.height}" />
</mx:VBox>
</mx:TabNavigator>
</mx:Application>
I have created a Popup that is custom component extends Canvas i want the look of the canvas is similar like that showed in image. is there any idea that how to create a pop up similar like that.
Here i am giving you the sample code that i have done till now...
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="550" height="350" backgroundAlpha="0">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
public function btnImage_click():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Image source="Images/close.png" top="4" left="500" useHandCursor="true" buttonMode="true" click="{btnImage_click();}" />
<mx:Fade id="fadeIn" duration="700" alphaFrom="0.0" alphaTo="1.0"/>
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Canvas height="85%" width="90%" backgroundColor="#ffffff" backgroundAlpha="1" >
<mx:VBox height="100%" width="100%">
<mx:HBox height="70%" width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Image id="btnPrevious" source="Images/previous.png"
click="{vsSubImages.selectedIndex--}" enabled="{vsSubImages.selectedIndex!=0}"/>
<mx:ViewStack height="100%" width="90%" creationPolicy="all" id="vsSubImages">
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
<mx:Image id="img1" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />
</mx:VBox>
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
<mx:Image id="img2" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />
</mx:VBox>
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
<mx:Image id="img3" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />
</mx:VBox>
</mx:ViewStack>
<mx:Image id="btnNext" source="Images/next.png"
click="{vsSubImages.selectedIndex++}" enabled="{vsSubImages.selectedIndex!=2}" />
</mx:HBox>
<mx:Box height="30%" width="100%" horizontalAlign="right" verticalAlign="top">
<mx:Form height="100%" width="100%">
<mx:FormItem label="Project Name : " >
<mx:Label id="lblName" />
</mx:FormItem>
<mx:FormItem label="Description : " >
<mx:Label id="lblDescription" />
</mx:FormItem>
<mx:FormItem label="Technology Name : " >
<mx:Label id="lblTechnology" />
</mx:FormItem>
</mx:Form>
</mx:Box>
</mx:VBox>
</mx:Canvas>
</mx:VBox>
</mx:Canvas>
The main idea is to show the close button on the Canvas currently i am getting that behind the Canvas.
Please Help me.
Put the <mx:Image source="Images/close.png" top="4" left="500" useHandCursor="true" buttonMode="true" click="{btnImage_click();}" /> tag at the very bottom of the code before last </mx:Canvas> tag. Because canvas behaves like last is at the very top in the z-index.
I've had this problem for quite a while now, and I just cant get my head around it..
First, a short explanation of my program:
It's going to be used to view complicated scenes in 3D, but to make it work on laptops it's instead showing pre-rendered 360 degree renders of the objects.
When you load an object, it first buffers 360 frames into memory, so that you can rotate around this object smoothly. When you release the mouse button, it loads in the high-res image of that frame.
Then, you should be able to zoom in and move around to inspect the model closer.
Problem here is when I have the scrollbars enabled it wont work properly.
Firstly, I had a problem where the vertical scrollbar moved out of the picture when I was scrolling the horizontal scrollbar.
Then after some more testing, they now stay where they should, but when I zoom in (will post code below) the horizontal scrollbar is not able to go far enough to the left to show the whole image.
What happens is, when I zoom in, the scrollbar remains at it's left position, but I zoom in on the center of the image (zooming, by scaling the container. The image fill the container).
My problem is probably just a result of me overlooking some basic understanding. And sorry if the code is a bit messy, I've only done a little bit of clean up. The code I post below is without any scrollbars visible.
You can see that I've tried using scrollbar components too, and it works somehow. But I'm not able to scale the scrollbar depending on the content, so if I zoom in or out, the handle you drag on the scrollbar will be the same...
Thanks a LOT in advance to anyone trying to help me figure this out!
Image of app running if needed:
Code:
<mx:Panel x="0" y="0" width="100%" height="100%" titleIcon="#Embed('assets/img/cog_01.png')" title="vCog Subsea - Draugen Project">
<mx:HDividedBox x="0" y="0" width="100%" height="100%" liveDragging="true">
<mx1:TabNavigator width="30%" height="100%" chromeColor="#4B4B4B" tabHeight="20">
<mx1:DividedBox width="100%" height="100%" label="Components" borderVisible="true">
<mx:VBox width="100%">
<mx:Tree id="treeView" x="0" y="0" width="100%" height="100%"
itemRenderer="components.CustomTreeItemRenderer"
paddingBottom="2" showRoot="true"
itemClick="treeItemClick(event)"
itemOpen="treeItemOpen(event)" />
<mx:Canvas width="100%" height="30" styleName="information">
<mx:CheckBox id="infoCheckBox" x="10" y="5" width="100%" label="Information"
click="checkbox1_clickHandler(event)" enabled="true"
selected="{infoview_visible}" styleName="infoCheckBox"/>
</mx:Canvas>
</mx:VBox>
</mx1:DividedBox>
</mx1:TabNavigator>
<mx:HBox width="100%" height="100%">
<mx1:TabNavigator id="myTabs" width="100%" height="100%" dropShadowVisible="false" tabHeight="20">
<mx1:DividedBox id="my3DView" width="100%" height="100%"
label="3D View Main" borderVisible="true" >
<!-- CONTAINER -->
<mx:Canvas id="container" width="100%" height="100%"
resize="resizeHandler(event)"
mouseWheel="videoBufferWheel(event)"
horizontalScrollPolicy="off"
verticalScrollPolicy="off" >
<!-- CONTENT -->
<mx:Canvas id="content"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Canvas id="videoCanvas" width="100%" height="100%"
mouseDown="videoBufferMDown(event)"
mouseMove="videoBufferMMove(event)"
mouseUp="videoBufferMUp(event)" >
<s:Image id="imageBuffer" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />
<s:Image id="imageFull" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch"/>
<s:Image id="imageMask" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />
</mx:Canvas> <!-- videoCanvas END -->
</mx:Canvas> <!-- CONTENT END -->
<!-- Scrollbars -->
<s:HScrollBar id="hScroll" bottom="0" left="0" right="16" maximum="100" minimum="-100"
pageSize="100" change="scroll(event)"
visible="false" />
<s:VScrollBar id="vScroll" right="0" top="0" bottom="16" maximum="100" minimum="-100" pageSize="100"
change="scroll(event)"
visible="false" />
<!-- Camera controlls -->
<mx:Panel id="panelCamera" visible="true" right="20"
bottom="20" width="130" height="50"
backgroundAlpha="0.6" backgroundColor="#383838"
borderAlpha="0.5" chromeColor="#2A2A2A"
contentBackgroundAlpha="1.0"
contentBackgroundColor="#737373" cornerRadius="0"
dropShadowVisible="false" focusColor="#999999"
layout="absolute" styleName="panelCamera"
symbolColor="#878787" title="Select camera">
<mx:Button id="btnTotal" x="10" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonTotalStyle" click="camTotalClick(event)"/>
<mx:Button id="btnClose" x="50" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonCloseStyle" click="camCloseClick(event)"/>
<mx:Button id="btnExploded" x="90" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonExplodedStyle" click="camExplodedClick(event)"/>
</mx:Panel>
<!-- Full/Color image loading bar -->
<mx:ProgressBar id="myProgressFull" y="10" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
label="Downloading Image" fontSize="7" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="-8"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressColor" y="27" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
label="Downloading Hilights" fontSize="7" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="-8"
labelPlacement="center"/>
<!-- Main loading bar -->
<mx:Panel id="myLoadingPanel" top="100" width="520" height="107"
backgroundAlpha="0.5"
backgroundColor="#3A3A3A"
borderVisible="true"
contentBackgroundColor="#7E7E7E"
dropShadowVisible="false"
fontWeight="normal" fontThickness="0" fontSize="10" color="#959595"
headerHeight="15"
horizontalAlign="center"
horizontalCenter="0"
layout="absolute"
title="Downloading and buffering content..."
visible="false"
verticalAlign="middle"
titleIcon="#Embed('assets/img/loading_01.png')"
>
<mx:ProgressBar id="myProgressBarTotal" y="10" width="500"
label="Total progress" chromeColor="#474747"
color="#FFFFFF" fontWeight="normal"
horizontalCenter="0" indeterminate="false" mode="manual"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressBar" y="41" width="500"
label="Downloading data" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="0"
labelPlacement="center" source="_SWFLoader"/>
<mx:ProgressBar id="myProgressBar2" y="61" width="500"
label="Buffering data" chromeColor="#75584A"
color="#EB7738" fontWeight="normal"
horizontalCenter="0" indeterminate="false" mode="manual"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressBarVisual" y="32" width="500" height="5" label=" "
horizontalCenter="0" indeterminate="true"
labelPlacement="center"/>
</mx:Panel>
</mx:Canvas> <!-- CONTAINER END -->
</mx1:DividedBox>
<mx1:DividedBox width="100%" height="100%" label="Main Map" borderVisible="true">
<mx:Canvas width="100%" height="100%" click="overviewClickHandler(event)" >
<s:Image id="overColor" width="100%" height="100%" source="assets/img/overview_color_001.png" scaleMode="letterbox" visible="false" />
<s:Image id="overFull" width="100%" height="100%" source="assets/img/overview_001.png" scaleMode="letterbox" smooth="true" />
</mx:Canvas>
</mx1:DividedBox>
</mx1:TabNavigator>
</mx:HBox>
</mx:HDividedBox>
</mx:Panel>
Functions:
public function videoBufferWheel(event:MouseEvent):void{
var delta:Number=(event.delta*myZoom)/300;
if(myZoom+delta<1){
delta=1-myZoom;
}else if(myZoom+delta>3){
delta=3-myZoom;
}
myZoom += delta;
resizeHandler(null);
event.stopImmediatePropagation();
}
public function resizeHandler(event:Event):void{
var _w:Number=container.width-scrollerSize;
var _h:Number=container.height-scrollerSize;
if(_w/_h<aspect){
content.height=_h*myZoom;
content.width=(_h*myZoom)*aspect;
}else{
content.height=(_w*myZoom)/aspect;
content.width=(_w*myZoom);
}
content.x = (-content.width/2)+container.width/2+(hOffset*(container.width-content.width)/200);
content.y = (-content.height/2)+container.height/2+(vOffset*(container.height-content.height)/200);
}
If I understand right, you want to move a scroll button when user zooms an image. But where do you add a code for this action? I mean you should add a code to move the scroll button.