how to do this animations of buttons

[Boris28]

Hello,
I want to build some web aplication in flex builder 3, but I don't know how to do this:

for example: I have 3 buttons with labels from xml.

If you click on fisrt button, then this button will move down and right (sequence of animations).
If you click on second button, then first button will move back to his starting position and after that the second button will move down and right (sequence of animations).
If you click on third button, then second button will move back to his starting position and after that the third button will move down and right (sequence of animations).

Please, what is the best way to accomplish this?

[monkey4Hire]

You'll need to add some animation. Try combining animations into generic fucntions.



// Called by parent container
private function init():void
{
btnMove1.addEventListener(MouseEvent.CLICK, startAnimation1);
btnMove2.addEventListener(MouseEvent.CLICK, startAnimation2);
}

// Some Button functionallity
private function test():void
{
// Do something
}

// I'm sure this could be generalized and combined.
function moveButton1(event:Event):void
{
// Move down
if (btnMove1.y < 25)
btnMove1.y += 1;

if (btnMove1.y >= 25)
{
// Move to the right
if (btnMove1.x < 25)
btnMove1.x += 1;

if(btnMove1.x >= 25)
btnMove1.removeEventListener(Event.ENTER_FRAME, moveButton1);
}
}

function moveButton2(event:Event):void
{
// Move down
if (btnMove2.y < 25)
btnMove2.y += 1;

if (btnMove2.y >= 25)
{
// Move to the right
if (btnMove2.x < 75) // 50 + 25
btnMove2.x += 1;

if(btnMove2.x >= 75) // 50 + 25
btnMove2.removeEventListener(Event.ENTER_FRAME, moveButton1);
}
}
function startAnimation1(event:MouseEvent):void
{
btnMove1.addEventListener(Event.ENTER_FRAME, moveButton1);
}

function startAnimation2(event:MouseEvent):void
{
btnMove1.y = 0;
btnMove1.x = 0;
btnMove2.addEventListener(Event.ENTER_FRAME, moveButton2);
}



Add the following components



<mx:Button click="test()" id="btnMove1" x="0"/>
<mx:Button click="test()" id="btnMove2" x="50"/>
<mx:Button click="test()" id="btnMove3" x="100"/>

[Boris28]

Thank you for your solution of my problem, but I tried to do it with states, but I don´t know how to use buttons from repeater in states.

First I get labels of buttons(in repeater) from XMLList. And I want to use these buttons in states(transitions between states). Here is my mxml:

<mx:states>
<mx:State name="second">
<mx:SetEventHandler target="{firstLevel.getChildAt(i)}" name="click" handler="currentState=''"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="" toState="second">
<mx:Sequence target="{firstLevel.getChildAt(i)}">
<mx:Move yTo="300" duration="1500"/>
<mx:Move xTo="800" duration="2000"/>
</mx:Sequence>
</mx:Transition>
<mx:Transition fromState="second" toState="">
<mx:Sequence target="{firstLevel.getChildAt(i)}">
<mx:Move xTo="200" duration="1500"/>
<mx:Move yTo="100" duration="2000"/>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:Repeater id="rep" dataProvider="{labelsFirstLevel}">
<mx:Button label="{rep.currentItem}" id="firstLevel" click="playEffect(event.target.instanceIndices)"/>
</mx:Repeater>


and here is my part of actionscript 3 (function playEffect gets number of button, which is clicked):

private function playEffect(numBtn:int):void{
i=numBtn;
//trace(i);
currentState="second";
}


I try to use firstLevel.getChildAt(i) but it does not work. How can I solve this please?

[Boris28]

Please how could I fix the referencing to my buttons. I also used firstLevel.getItemAt(i) , but it did not work.