Tweening with TimeLine animation

[floatingwoo]

I'm almost there with this one. 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.

 

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 Have the animation play continuously while the tween is in motion?

I am not savvy using onUpdate or it's params . The code below was suggested to me to try. I'm not clear with the Error I keep getting around the undefined property "loopFrame". I'm thinking I am supposed to have a label on the "mcPLayer" timeline called loop?

 

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 need to read up on using properties like "onUpdate". Something other than just the line in the documentation. if you could point me in the right direction that would be cool!Thanks.

[Carl]

Hi and welcome to the GreenSock forums.

 

From the code you posted I don't see any reference to "loopFrame" so I can't really assess why or when that is happening. Are you sure the code you posted is accurate?

 

The code you posted looks like it should work. If you post an fla (zipped) I can take a look at it.

 

---

 

As for understanding how onUpdate works, it simply allows you to define a function that is called every time the animation advances. If your frame rate is 30fps and you have a tween with a 1 second duration, the onUpdate callback function will fire 30 times.

 

Start with something simple

TweenLite.to(mc, 1, {x:200, onUpdate:updateHandler});

function updateHandler(){
   trace("update");
}

In that example you see the word update appear many times in the output panel when you test the movie.

 

If you want to pass in additional information to that function you use onUpdateParams, which is an Array of items

TweenLite.to(mc, 1, {x:200, onUpdate:updateHandler, onUpdateParams:["hello"]});

function updateHandler(message){
   trace("update " + message);
}

Now when you run that code the text "update hello" will appear in the output panel.

 

In the code you were using you were passing in 2 params "walkingRight" and lastFrame. The onUpdate callback was using these parameters to figure out what frame your animation loop cycle should start and end on. 

 

In your code do you ever set the lastFrame variable like so

 

lastFrame = someFrameNumber

 

 

 

That could be another important missing piece.

 

If this is still confusing, you may need to brush up on some AS3 fundamentals. I would suggest the republicofcode site. Here is a great overview of functions:

http://www.republicofcode.com/tutorials/flash/as3functions/

[floatingwoo]

Thanks Carl ! Yah I need to bone up for sure. I'm hittin it running though.Thanks for the tip.It was the loopLabel that was screwing me up, not loopFrame. After getting into it some more I found 

I had it spelled it loopLable . Thanks for getting back to me so quick.