How To Animate Characters

[aaron_da_killa]

Hey guys, not a programming question.

I'm just wondering how I animate a movieclip? I understand I need to use goToAndStop/goToAndPlay but that's about it.

So far, I know how to make the player facing left/right using goToAndStop and a simple graphic with the player facing either left or right, but I'm trying to make a walk animation that will play if the player is holding the right or left arrow which I'm having trouble figuring out how to do.

Any insight would be great!

Thanks in advanced!

[ASWC]

If you have after effect then the puppet tool would be perfect for you. If you have Flash CS4 then the kinematic tools would help you a lot too.

[aaron_da_killa]

If you have after effect then the puppet tool would be perfect for you. If you have Flash CS4 then the kinematic tools would help you a lot too.

Actually making the animations aren't the problem here, I'm just having trouble implementing them into flash. I've already created an 8 frame walk animation for my character, I just need to know how I should implement it into flash.

[runawayprisoner]

AS3 or AS2? Anyway... shouldn't make a single difference, I'd say.

In the movie clip of the animation, label the first frame of the walk animation (the start of the walk animation) something like "walk_left" or "walk_right" and so on... then at the last frame of the walk animation, put a "stop()" statement.

Then whenever the player presses the left button or right button, just do a gotoAndPlay("walk_left") or gotoAndPlay("walk_right").

That might be glitchy in itself, so you might want to remove the key press listeners (keyDown and keyUp) or the on (onKeyDown and onKeyUp) event function, until the last frame when the animation is done.

[bluemagica]

AS3 or AS2? Anyway... shouldn't make a single difference, I'd say.
err, actually there should be a difference, cause in as3, we generally follow the OOP approach and let a "player" class handle all the player animations, without code on timeline!

anyway, as2 way is easier to understand for now, so just do this
1) take all frames for walk left, and make it into a movie clip.
2) same for right.
3) make a empty mc called "player". On its first frame, put walk left mc, and on second, walk right mc!
4)label the frames walk_Left and walk_Right!

5) on left press
if(this.currentLabel!="walkLeft")
{
gotoAndStop("walk_Left");
}

[aaron_da_killa]

If I put the animation in an animated gif, can I put the gif on a frame and say like goToAndStop(walk) and the gif plays?

[Cauterize]

Gifs are a no no!

Some of the code above is a great start, ill tell you my method.

The way I do it is have my static character position on frame 1, how ud like them to look once they have stopped moving.

On frame 2 -> whatever frame youd like, have the walking animation. Set the final frame of the walking animation to gotoAndPlay(2) once it finishes. This way, it will loop!
You only need to animate the character moving one way as you can flip the character over depending on which way they are moving, youll see!

So...

if (leftKeyDown == true) {
character.x -= walkingSpeed;
//play walking animation
if (character.currentFrame == 1) {
gotoAndPlay(2)
}
//flip over to the right direction
if (character.scaleX > 0) {
character.scaleX *= -1;
}
}


The way this works is that the character walking animation only plays if the character was stood still, otherwise its already playing and will loop.
For flipping the chacter over the other way in the rightKeyDown, just change the > to a < in the if statement.

Just make sure that you have it set so that when no keys are being pressed it gotoAndStop/Plays(1)

Does that make sense?

[aaron_da_killa]

Ah thanks, I'm just foggy in one last area, actually making the walk animation in flash.

So I assume I put the 8 individual images that make up my animation in sequence to compose the animation? How exactly is this done because I'm very unfamiliar with the timeline and frames and such. Do I use keyframes or frames, do I need to use a tween?

[Cauterize]

Ah thanks, I'm just foggy in one last area, actually making the walk animation in flash.

So I assume I put the 8 individual images that make up my animation in sequence to compose the animation? How exactly is this done because I'm very unfamiliar with the timeline and frames and such. Do I use keyframes or frames, do I need to use a tween?

Correct. 8 individual frames of animation each on a frame of their own. On the last frame of their animation have actionscript tell the movieclip to gotoAndPlay the first frame of the walking animation.

No tween needed, just a new keyframe everyframe with the right graphic/picture in place!
So keep the character walking on the spot, remember, the walking will happen when they key is pressed!

If you have a gif animation youre wanting to use, Im sure you could extract the frames of animation to jpg/png etc and use them in the keyframes.

[runawayprisoner]

err, actually there should be a difference, cause in as3, we generally follow the OOP approach and let a "player" class handle all the player animations, without code on timeline!

Well, that's actually a misconception. You can put codes on frames in the timeline just fine (in fact, if you want to test something out really quick, doing so is recommended). The only difference is that codes are strictly tied to frames. If you want to add codes to a display object, you have to put the codes into its frames. Otherwise... the other differences are only due to approach.

That aside, I'm not a big fan of OOP myself. Too much of those and your codes crawl to a standstill although they do help clarity. That said, though, ActionScript 2 is also OOP. Anything in AS2 is an object of some sort, and is treated like an object.

I'd write an article about how similar AS2 and AS3 are, as well as how one can successfully transition from one to another in a matter of weeks, but... I'm too tied down with jobs right now. Do a little research on your own meanwhile if you are interested. AS2 and AS3 are really not that different. The problem is that most tutorials and guides and books on AS3 go with the multi-file approach which is really discouraging to AS2 users, although I suppose it is a good pre-text for Flex...

Ah thanks, I'm just foggy in one last area, actually making the walk animation in flash.

So I assume I put the 8 individual images that make up my animation in sequence to compose the animation? How exactly is this done because I'm very unfamiliar with the timeline and frames and such. Do I use keyframes or frames, do I need to use a tween?

You use keyframes. Tweens are not necessary if it's some sprites (or pre-drawn) graphics we are talking about. Otherwise, it's a whole separate movie clip of the character. Well, anyway, make a walking animation first. On the timeline, put a label on the first frames of the animations for faster reference, and then you go to the last frames of those animations, and put a "stop()" statement right there. Ahhh... I think an example would be easier to follow. Should it be AS3 or AS2? I guess I have a few minutes to spare at break so I can whip one up for you.

[aaron_da_killa]

I think an example would be easier to follow. Should it be AS3 or AS2? I guess I have a few minutes to spare at break so I can whip one up for you.

Thanks so much mate. I'm using ActionScript 3.0 :cool:

[runawayprisoner]

Thanks so much mate. I'm using ActionScript 3.0 :cool:

Here you go. A free demo. Codes are on their own layers and the likes. Make sure you look at the character's symbol in the library, too.

Sprite was some random free one I found on Google. Sorry, couldn't come up with anything fancier. If the sprite ends up being a copyrighted one, then please don't use it in your product (or at least not in a commercial product) or there might be troubles.

If you are wondering, the same procedures also apply to multi-file projects. Just that you would be handling it a bit different...

Any other question, feel free to ask! If I have spare time, I'll answer.

[aaron_da_killa]

Great! Thanks so much runawayprisoner and everybody else! :)

If the sprite ends up being a copyrighted one, then please don't use it in your product (or at least not in a commercial product) or there might be troubles.

Don't worry, I've created my own character ;). You can see it here (http://www.pixeljoint.com/forum/forum_posts.asp?TID=8218) (bottom post). It's not great but it'll do for this project.