Question

I am trying to do the move vertically animation on a button nested in the vertical layout. I am not sure if the Hgroup restricts the button moving vertically. Are there ways to go around it? Thanks for the helps.

<s:states>
<s:State name="default"/>
<s:State name="addRecommend"/>
<s:State name="seeOther"/>
</s:states>


AS:

protected function add_clickHandler(event:MouseEvent):void
{
currentState="addRecommend";
addRecommendMove.play();
}





<s:transitions>
<s:Transition fromState="default" toState="addRecommend">
<s:Sequence id="addRecommendMove">
<s:Move yTo="50" target="{add}"/>  // add button doesn't move at all
</s:Sequence>
</s:Transition>
<s:Transition fromState="addRecommend" toState="seeOther">
<s:Sequence>
<s:Move yBy="50" target="{seeOthers}"/>
</s:Sequence>
</s:Transition>
</s:transitions>




<s:layout>
<s:VerticalLayout paddingTop="15" paddingRight="10" paddingLeft="7"/>
</s:layout>


<button id="add" click=add_clickHandler(event)/>
<button id="seeOthers"/>

Answer 1

By default, the HGroup does restrict all of it’s elements to a single layout vertically. They can be aligned through the verticalAlign property of the HGroup but will all have the same alignment.

To give the button total freedom to move, nest it inside of a normal group with basic layout. This is the equivalent of a canvas in flex 3 and means you’ll have to specify the x and y coordinate of every element in that container.

Your other option is to nest your button inside of a group with basic layout and place that thing inside of an HGroup. Make the inner group tall enough for your animation to play. In this way you can keep whatever advantages you’re getting from HGroup but still be able to animate the position of your button.

Hope that helps – post the full source if it’s not enough and I can try to provide a more complete answer for you.