Button Animation Algorithm in AS3

[nico]

Hello AS3 GURUS.. need your help.. My logic is not that high for this one, and its very simple.

What I want to do is this..

I have 5 Button movieclips, each with different states, (OVER, OUT, and ACTIVATED)

Obviously when you rollover the button, itll play the over animation, itll also apply for the rollout event of the button. When you click the button, itll go to the activated state.

Here's my question...

What condition will i use so that when a certain button is activated and i click on a different button, the activated button will play its rollout state before going to its idle state.. What's happening to me is itll just quickly go to its idle state without playing his roll out animation. Thanks GUYS!!!

[Felixz]

dispatch a custom event

[magcius]

When you click the new button:



deactiveButton.dispatchEvent (new MouseEvent (MouseEvent.ROLL_OUT));

Where deactiveButton is the button that just lost its active state.

[Alex Lexcuk]

http://dnadillo.dn.ua/mur_gallery/lesson_button/page_0.html
http://dnadillo.dn.ua/mur_gallery/lesson_button/page_1.html

[nico]

When you click the new button:



deactiveButton.dispatchEvent (new MouseEvent (MouseEvent.ROLL_OUT));
Where deactiveButton is the button that just lost its active state.

Thanks Guys for the idea.. heres my code.. how can i apply it?

import caurina.transitions.*;

myBtn.addEventListener(MouseEvent.ROLL_OVER, over);
myBtn.addEventListener(MouseEvent.ROLL_OUT, out);
myBtn.addEventListener(MouseEvent.CLICK, onClick);

myBtn1.addEventListener(MouseEvent.ROLL_OVER, over);
myBtn1.addEventListener(MouseEvent.ROLL_OUT, out);
myBtn1.addEventListener(MouseEvent.CLICK, onClick);

myBtn2.addEventListener(MouseEvent.ROLL_OVER, over);
myBtn2.addEventListener(MouseEvent.ROLL_OUT, out);
myBtn2.addEventListener(MouseEvent.CLICK, onClick);

myBtn.buttonMode = true;
myBtn1.buttonMode = true;
myBtn2.buttonMode = true;

function over(e:MouseEvent):void
{
Tweener.addTween(e.target, {_frame:10, time:1, transition:"easeOut"});
}

function out(e:MouseEvent):void
{
Tweener.addTween(e.target, {_frame:1, time:1, transition:"easeOut"});
}

function onClick(e:MouseEvent):void
{
e.target.gotoAndStop("hit");

e.target.removeEventListener(MouseEvent.ROLL_OUT, out);
}

Im using tweener by the way, i realy have no rollout state.. i just play the animation in reverse..

[nico]

guys pls help:(

[Felixz]

Array([myBtn,myBtn1,myBtn2]).forEach(function (item:*, index:int, array:Array):void {
item.stop();
item.buttonMode=true;
item.addEventListener(MouseEvent.ROLL_OVER, over);
item.addEventListener(MouseEvent.ROLL_OUT, out);
item.addEventListener(MouseEvent.CLICK, onClick);
})
var activeButton:MovieClip;
function over(event:MouseEvent):void {
Tweener.addTween(event.currentTarget, {_frame:10, time:1, transition:"easeOut"});
}
function out(event:MouseEvent):void {trace("o")
Tweener.addTween(event.currentTarget, {_frame:1, time:1, transition:"easeOut"});
}
function onClick(event:MouseEvent):void {
if (activeButton) {
activeButton.addEventListener(MouseEvent.ROLL_OUT, out);
activeButton.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT));
}
activeButton=MovieClip(event.currentTarget);
//Tweener.removeTweensOf(activeButton) or something to remove old Tweens - I don't know the syntax.
activeButton.removeEventListener(MouseEvent.ROLL_O UT, out);
activeButton.gotoAndStop("hit");
}

[mauma]

import caurina.transitions.*;

Array([myBtn,myBtn1,myBtn2]).forEach(function (item:*, index:int, array:Array):void {
item.stop();
item.buttonMode=true;
item.addEventListener(MouseEvent.ROLL_OVER, over);
item.addEventListener(MouseEvent.ROLL_OUT, out);
item.addEventListener(MouseEvent.CLICK, onClick);
})
var activeButton:MovieClip;
function over(event:MouseEvent):void {
Tweener.addTween(event.currentTarget, {_frame:10, time:1, transition:"easeOut"});
}
function out(event:MouseEvent):void {trace("o")
Tweener.addTween(event.currentTarget, {_frame:1, time:1, transition:"easeOut"});
}
function onClick(event:MouseEvent):void {
if (activeButton) {
activeButton.addEventListener(MouseEvent.ROLL_OUT, out);
activeButton.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT));
}
activeButton=MovieClip(event.currentTarget);
//Tweener.removeTweensOf(activeButton) or something to remove old Tweens - I don't know the syntax.
activeButton.removeEventListener(MouseEvent.ROLL_O UT, out);
activeButton.gotoAndStop("hit");
}



I put that on my movie and it tells me an error :

TypeError: Error #1006: addEventListener is not a function.
at MethodInfo-117()
at Array$/Array::_forEach()
at Array/http://adobe.com/AS3/2006/builtin::forEach()
at pruebaarray_fla::MainTimeline/pruebaarray_fla::frame1()


am I doing something wrong?

Thnx !

[Felixz]

Anonymous functions always give something unexpected...
var buttons:Array = [myBtn,myBtn1,myBtn2]
buttons.forEach(iButton);
function iButton(item:*, index:int, array:Array):void {
item.stop();
item.buttonMode=true;
item.addEventListener(MouseEvent.ROLL_OVER, over);
item.addEventListener(MouseEvent.ROLL_OUT, out);
item.addEventListener(MouseEvent.CLICK, onClick);
}
var activeButton:MovieClip;
function over(event:MouseEvent):void {
trace('over');
}
function out(event:MouseEvent):void {
trace('out');
}
function onClick(event:MouseEvent):void {
if (activeButton) {
activeButton.addEventListener(MouseEvent.ROLL_OUT, out);
activeButton.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT));
}
activeButton=MovieClip(event.currentTarget);
activeButton.removeEventListener(MouseEvent.ROLL_O UT, out);
trace('click');
}