How should I smooth the transition between these two states in flex/flashbuilder

Question

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.

Answer 1

If you dont mind doing some actionscript coding, this becomes pretty easy with an as3 function.

You would need to do the following:

public function doTransition():void
        {
            var move:Move= new Move();
            move.target=footer;
            move.yFrom = 0;//current position
            move.yTo = 400;//or whatever is the final position of the footer
            move.duration=500;//duration in milliseconds

            var resize:Resize=new Resize();
            resize.target=body;
            resize.heightFrom=0;//or whatever is initial height
            resize.heightTo=400;//or whatver is the final height
            resize.duration=500;

            var fadeIn:Fade =new Fade();
            fadeIn.target = pieChart;//the id of the piechart
            fadeIn.alphaFrom =0;
            fadeIn.alphaTo = 1;
            fadeIn.duration =500;

            move.play();
            resize.play();
            fadeIn.play();
        }

This done, you would need code to rotate the pie chart. For that you can use timers and rotation transformations.

Answer 2

To make your tweening easier, I'd recommend using TweenLite to get the job done. You'll end up writing less actionscript.