How do you combine a Move and Rotate effect in Flex 3?

Question

I realize you can make one of each effect, set the same target, and hit .play();, but this produces weird results (acknowledged by Adobe, fixed in Flex 4).

I'm trying to have an object move from the top of the screen to the bottom while it rotates around it's own center. When called independently, both of these effects work perfectly. When called together, the object always rotates around the top left corner. I even tried putting them both inside a <Parallel> tag with no success. Has anyone come up with a workaround?

Answer 1

You need to include both Move and Rotate inside a Parallel instance to get them to work simultaneously. Additionally, in order to get a Rotate effect to rotate around the center of a component, you need to set the originX and originY properties to the center of your target, (originX and originY properties define the rotation center point.)

The following examply works perfectly fine:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Image id='effectTarget' source="assets/waterfall.jpg" width="390" height="292" scaleContent="true" autoLoad="true"/>
<mx:Parallel duration="5000" id="effectParallel">
    <mx:Move xFrom="0" xTo="500" yFrom="0" yTo="500" target="{effectTarget}"/>
    <mx:Rotate originX="195" originY="149" angleFrom="0" angleTo="360" target="{effectTarget}"/>
</mx:Parallel>
<mx:Button x="856" y="27" label="Go" click="effectParallel.play()"/>

Answer 2

I found a stopgap solution.

The problem (as mentioned in my OP and in the comment to David), is that after the Rotate effect completed one full cycle, if it had a repeatCount=0 to continue indefinitely, it's originX and originY values got reset to the registration (top, left) point, which made the whole appearance wobbly.

The trick, therefore, is to not let it complete a full cycle of rotation. If you have

<mx:Image id="myImage" source="images/someImage.png" />
<mx:Rotate originX="{myImage.width/2}" originY="{myImage.height/2}"
    angleFrom="0" angleTo="360" duration="2000" target="{myImage}" />

...then what you need to do is something like ...angleTo="360*100"... AND ...duration="2000*100...

By setting the angleTo property to something very high, it will never finish one Rotate effect before you remove or restart it, and therefore won't throw off the originX and originY, and by multiplying the duration by the same factor as the angleTo you will keep the same rate of rotation you were hoping for.

This is probably as clear as mud to most people, but this was a big breakthrough for me, so I hope this can save someone else some time.