I have an item in which has two states, best described as open and closed, and they look like this:

and

And what I'd like to do is is smooth the transition between one state and the other, effectively by interpolating between the two points in a smooth manner (sine) to move the footer/button-block and then fade in the pie chart.

However this is apparently beyond me and after wrestling with my inability to do so for an hour+ I'm posting it here :D

So my transition block looks as follows

<s:transitions>
    <s:Transition id="TrayTrans" fromState="*" toState="*">
        <s:Sequence>
            <s:Move duration="400" target="{footer}" interpolator="{Sine}"/>
            <s:Fade duration="300" targets="{body}"/>   
        </s:Sequence>       
    </s:Transition>

    <s:Transition>
        <s:Rotate duration="3000" />
    </s:Transition>
</s:transitions> 

where {body} refers to the pie chart and {footer} refers to the footer/button-block.

However this doesn't work so I don't really know what to do...

Additional information which may be beneficial:

The body block is always of fixed height (perhaps of use for the Xby variables in some effects?).

It needs to work in both directions.

Oh and the Sine block is defined above in declarations just as <s:Sine id="Sine">.

Additionally! How would I go about setting the pie chart to rotate continually using these transition blocks? (this would occur without the labels on) Or is that the wrong way to go about it as it's not a transition as such?

The effect I'm after is one where the pie chart rotates slowly without labels prior to a selection of a button below, but on selection the rotation stops and labels appear...

Thanks a lot in advance!

And apologies on greyscale, but I can't really decide on a colour scheme. Any suggestions welcome.