FLEX - Scrollbars & Zooming
Question
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);
}
1 answers
solution1
0 2012-01-25 19:24:27
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.