Rotate & Zoom Image

Question

Hi,
In the below example I have tried to insert the
functionalities of zoom and rotate on an image, unfortunately from
time to time the centre of the image gets lost. How to resolve this
Problem?
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import flash.events.*;
private function onZoomW(event: MouseEvent) : void
zoomSlide.zoomHeightTo=zoomSlider.value/100;
zoomSlide.zoomWidthTo=zoomSlider.value/100;
ZoomRotateShow.play();
private function onZoom(value : Number) : void
zoomSlide.zoomHeightTo=value/100;
zoomSlide.zoomWidthTo=value/100;
ZoomRotateShow.play();
private function onRotate( value : Number ) : void
rotateSlide.angleTo=value;
ZoomRotateShow.play();
]]>
</mx:Script>
<mx:Parallel id="ZoomRotateShow">
<mx:Zoom id="zoomSlide" target="{phoneImage}"
duration="1" captureRollEvents="true" />
<mx:Rotate id="rotateSlide" target="{phoneImage}"
duration="1" />
<mx:Move id="moveSlide" target="{phoneImage}"
duration="1" />
</mx:Parallel>
<mx:Canvas id="c1"
borderStyle="none"
width="200" height="200">
<mx:Panel id="panel"
title="HSlider Control Example"
height="100%" width="100%"
paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10"
top="0" horizontalAlign="center"
verticalAlign="middle">
<mx:HBox height="100%" width="100%" id="c2"
horizontalAlign="center" verticalAlign="middle"
autoLayout="true">
<mx:Image id="phoneImage"
source="
http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
x="{c2.width/2-phoneImage.width/2}"
y="{c2.height/2-phoneImage.height/2}"
scaleContent="false"
autoLoad="true" scaleX="1" scaleY="1"
maintainAspectRatio="true"
mouseWheel="onZoomW(event);" >
</mx:Image>
</mx:HBox>
<mx:HSlider
id="zoomSlider"
minimum="0" maximum="200" value="100"
snapInterval="1" liveDragging="false"
change="onZoom(zoomSlider.value);"
enabled="true" allowTrackClick="true" />
<mx:HSlider
id="rotateSlider"
minimum="-180" maximum="180" value="0"
snapInterval="1" liveDragging="false"
change="onRotate(rotateSlider.value );"
enabled="true" allowTrackClick="true"/>
</mx:Panel>
</mx:Canvas>
</mx:Application>

Answer 1

I spend some time with your sample.
Have you read this?
http://www.mail-archive.com/[email protected]/msg53092.html
What if you will create this rotation effect in Flash CS3 and
then import this SWF movie into Flex2?
Have you seen Tweener-classes package in action? Maybe it can
be useful to achieve your task, see the demo here:
http://labs.flexcoders.nl/?p=89