Flex 4, rotation transition, use shortest route?

Question

I have this object in Flex 4

<s:Group 
        id="shanks" 
        width="243" 
        height="243" 
        x="243" 
        y="243"
        rotation.Classic="0"
        rotation.Centro="72"
        rotation.Lace="144"
        rotation.Lido="216"
        rotation.Euro="288"
        clipAndEnableScrolling="false">
        <mx:Image source="{circleUnder}" x="-243" y="-243"/>
    </s:Group>

It is a circle divided into 5 equal parts each 72 degrees. So each state you can see is increases the rotation by 72 degrees.

I have a transition for the rotation when the state changes like so:

<s:transitions>
        <s:Transition>
            <mx:AnimateProperty target="{shanks}" property="rotation"/>
        </s:Transition>
    </s:transitions>

Being that this is a circle you can actually rotate CW or CCW to get to the right degree for the state. Usually the rotation-transition uses whichever is lower. For example to get from Classic to Centro (0 to 72) it goes CW. But this is not always the case. To go from Lace to Lido (144 to 216) it goes CCW. This is not desired sense it would make a much better transition to go CW because it requires less spinning of the circle to get to the desired degree.

What I want is for the circle to spin in the direction which requires the least amount of rotation to reach its destination degree.

I hope this makes sense. Is there a way to set the transition to do that?

Answer 1

I don't think you should use mx:AnimateProperty. Try the new spark Rotation class in your transition. You will also probably want to set autoTransformCenter to true which tells the overall transform effect that the operation will happen about the center of the object.