Problem with scrolling after rotating image

Question

Hi,
I am trying to write a simple image viewer in flex. I came
across a problem which I've been trying to solve through the past 4
days. In my example I want to rotate the image and then scroll
around once its been rotated (Say after the user would zoom in). If
I rotate the image by 90,180 or 270 deg and then move the scroll
bars the image disappears. Has anyone else had this problem? Any
suggestions welcome, thanks!
===================================================================
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Panel x="10" y="10" width="816" height="715"
layout="absolute" title="Viewer">
<mx:Button x="365.5" y="643" label="Rotate"
click="rotateImage()"/>
<mx:VBox id="vb" x="10" y="10" height="604"
width="776">
<mx:Image id="img" width="777" height="618">
<mx:source>file:///C:/example.jpg</mx:source>
</mx:Image>
</mx:VBox>
</mx:Panel>
<mx:Rotate id="rotate" angleFrom="{angle-90}"
angleTo="{angle}" target="{img}" />
<mx:Script>
<![CDATA[
[Bindable]
public var angle:int=0;
private function rotateImage():void {
rotate.end();
angle += 90;
rotate.play();
]]>
</mx:Script>
</mx:Application>

Answer 1

Thanks for a quick response. I did something simillar before
(using the Canvas instead of the VBox) your suggestions fix the
scrolling issue but it still does not work the way it should. If
the rotation is 0 then the scroll bars "fit" the image (So you
don't go out and see any white space). If the rotation is say 90
than it doesn't allow the image at full height, little bit of the
page and no scroll bar to move down, also it gives you a lot of
room to move to the side event though you can already see the image
at full width. It's event worse when you do 180 deg rotation. Do
you think this is something that is achievable (to have scroll bars
that fit the image regardles of the rotation) ? Thanks
================================================================================
<!-- <mx:VBox id="vb" x="10" y="10" height="604"
width="776" autoLayout="false"> -->
<mx:Canvas x="10" y="10" width="776" height="604"
autoLayout="false">
<mx:Image id="img">
<mx:source>file:///C|/Documents and Settings/All
Users/Documents/My Pictures/Sample
Pictures/Winter.jpg</mx:source>
</mx:Image>
</mx:Canvas>
<!-- </mx:VBox> -->