CODEWITHSUNDEEP
actionscript-3
floatingwoo
floatingwoo

Reputation: 15

Tweening with TimeLine animation

Easy one for you guys but new to me. I have an animated walking character called mcPlayer. Inside of it's timeline I have frame labels at various animated states "walkingLeft","walkingRight" and "Idle". The walking animations are of him walking in one spot. I want to be able to use buttons to move the character with actionscript to various targets on the stage and have the corresponding animation play as it moves.So the most direct way I could think to do it is like this...

import com.greensock.*;

btnRight.addEventListener(MouseEvent.CLICK, moveRight);
btnLeft.addEventListener(MouseEvent.CLICK, moveLeft);

function moveRight(Evt:MouseEvent):void{
TweenLite.to(mcPlayer,2,{x:450});
mcPlayer.gotoAndPlay("walkingRight");
}
function moveLeft(Evt:MouseEvent):void{
TweenLite.to(mcPlayer,2,{x:450});
mcPlayer.gotoAndPlay("walkingLeft");
}

I have tried different commands on the mcPlayer timeline,like, putting a stop(); at the beginning of each anima. I have tried putting a gotoandplay(); at the end of each anima so it will go to the beginning and loop.I would like to use the timeline as little as possible.

How do I... 1. Have the animation play continuously while the tween is in motion 2. Have the animation stop when it has reached its destination and finally have the anima"idle" play after mcPLayer has reached its target.

Upvotes: 0

Views: 306

Answers (1)

prototypical
prototypical

Reputation: 6751

To loop an animation you would test for the last frame of the animation and then loop back, you can do that within a tween with the onUpdate parameter and use onUpdateParams to pass any data needed for the update. Such as the animation label and the last frame of the animation.

If you want to do something after a tween is completed, such as change to the idle animation, you'd use the onComplete parameter.

Here's an example of what you might do :

btnRight.addEventListener(MouseEvent.CLICK, moveRight);
btnLeft.addEventListener(MouseEvent.CLICK, moveLeft);

function moveRight(Evt:MouseEvent):void{

    // lastframe should be replaced with whatever the frame the walk right animation ends on.
    TweenLite.to(mcPlayer, 2, {x:450, onUpdate:updateHandler, onUpdateParams:['walkingRight', lastFrame], onComplete:idleHandler);
    mcPlayer.gotoAndPlay("walkingRight");
}
function moveLeft(Evt:MouseEvent):void{

    // lastframe should be replaced with whatever the frame the walk left animation ends on.
    TweenLite.to(mcPlayer, 2, {x:10, onUpdate:updateHandler, onUpdateParams:['walkingLeft', lastFrame], onComplete:idleHandler);
    mcPlayer.gotoAndPlay("walkingLeft");
}


function updateHandler(loopLabel:String, lastFrame:int):void
{
    if (mcPlayer.currentFrame == lastFrame)
    {
        mcPlayer.gotoAndPlay(loopLabel);
    }

}

function idleHandler():void
{
    mcPlayer.gotoAndPlay("idle");
    // this is also where you'd do anything else you need to do when it stops.

}

I am not sure how you have your content set up, I was just guessing that you had all the animations on the timeline of the mcPlayer with labels for each animation based on what you had said.

Depending how your content is set up, you might need to implement differently. But the concepts are still the same - using onComplete and onUpdate to handle things for those particular events.

Upvotes: 1

Related Questions