Introduction

I recommend reading xSwiftxClawx's BASIC Guide to Flash before reading this. This tutorial assumes that you already know everything in xSwiftxClawx's guide.

Alignment Problem

I've been hearing a few people with alignment problems in Flash where the character/skill moves 1 pixel up, down, left, or right. To fix this just round the x and y numbers. It SHOULD fix that little problem. (EX: http://purelitex.googlepages.com/ex2.png)

Notice the x and y numbers. The x is -22.5 and the y is -36. The ".5" (or any number below ".5" or above ".5") usually causes that weird alignment problem. As already mentioned, round the number to the closest whole number. (Note: Must do this on EVERY sprite you put on to the stage if you don't want that alignment problem.)

I don't see the x and y, where is it?
Use the selection tool and click on the image. (EX: http://purelitex.googlepages.com/ex3.png)

Organizing Your Library

This really helps in making an animation. To make a folder click the folder looking icon that's at the bottom of the library, and name it whatever you want. (EX: http://purelitex.googlepages.com/ex6.png, http://purelitex.googlepages.com/ex7.png)

To add sprites to the folder just drag the image on top of the folder. You can also add graphics, movie clips, and buttons. If you want to add multiple images at a time, click an image in the library, then hold shift. Still holding shift, click on the last image. Then just drag and drop the images into the folder.

Basic Walk

Start out by making a graphic (CTRL+F8). Assuming you already imported all your images, drag the first walk stance on to the stage (first frame). I like to copy and paste the image on to the stage so that it's in the middle. (EX: http://purelitex.googlepages.com/ex4.png) Now make another frame (F7) and paste the next stance. Repeat until all the stances are on the stage. Now click on each keyframe (Image) and hit F5 four times. This makes each stance last a little bit longer. So the walk will be smooth. You can preview the animation by hitting enter. (Note: This is for a slow walk. If you want a faster walk, decrease the amount of frames of each stance.)

This is what it should look like.

Now you can just motion tween the graphic. :)

Again, be sure to round the x and y numbers of each walk stance. (Note: The second and fourth frame should go 1 pixel down. If you don't know what I mean, preview the walk animation in BannedStory.)

Directional Jump

Start out by making a signature sized animation, I'll be using a 400x120 document. Import the jump sprite to the library, then drag and drop the image onto the stage. You should now have something like this (EX: http://purelitex.googlepages.com/ex9.png).

Now create a new layer, and name it whatever you want. I named mine "Alignment" (EX: http://purelitex.googlepages.com/ex8.png). (Note: You can rename each layer by double clicking on the layer name.)

Now make sort of a curved line (EX: http://purelitex.googlepages.com/ex10.png). This should help in aligning the jump.

Align the character's feet on the start of the line (EX: http://purelitex.googlepages.com/ex11.png).

Make a new frame using F6, this makes a new keyframe with the same image in the same exact spot, and sort of like drag it straight on the line (EX: http://purelitex.googlepages.com/ex12.png, http://purelitex.googlepages.com/ex14.png, http://purelitex.googlepages.com/ex15.png, http://purelitex.googlepages.com/ex16.png). Repeat this step until you've reached the end of the line.

Motion tween all the keyframes, and add frames to make them last longer. Decrease/increase the amount of frames in each tween to make the jump look better.

My outcome,

I added a flash jump to make it look better. :)

This takes time and practice to make a good directional jump!!! Don't worry, you'll soon be able to make a directional jump in a snap. :)

More tutorials coming soon...