How to animate-with Macromedia Flash 8

[PeridotDaggr]

This is a tutorial made by PBCat/SwiftClaw. All credits go to him for this tutorial.
This a very basic tutorial.
--------------------------------------------------------------
INTRODUCTION

So, you want to use Flash, eh?
Flash is a powerful animating program originally designed by Marcromedia.
It can be used for animating and creating games.

If you are reading this guide, I'm assuming your going to use Flash to animate with BannedStory.

This guide will cover basic animating techniques used in Flash:
-Creating a symbol
-Tweening the symbol
-Frame by Frame (basic)

More advanced techniques WILL NOT BE LISTED in this guide.


Now that I've made my introduction, let's begin.

--------------------------------------------------------------------------------------------------------------------------------
BEFORE WE BEGIN

I've provided a screen shot of a typical Flash interface.
I've also labeled the few items that are covered in this tutorial.
http://i203.photobucket.com/albums/a...hInterface.png

Anything unlabeled is not covered in this tutorial.


Also, set the frame rate to 24 fps:

FPS means Frames Per Second. 24 fps means the animation will play 24 seconds in the duration of ONE SECOND.
Making the frame rate 24 fps ensures the animation will be smooth.

Now, let's begin animating.

--------------------------------------------------------------------------------------------------------------------------------
CREATING A SYMBOL

To animate, we are going to begin with symbols.
To be more specific, we are going to create GRAPHIC symbols.

Graphics are like animated GIFS.
They will loop endlessly until they are no longer on the screen.
We can then use these graphics and move them around the stage.

So for example, I can have a graphic of myself walking and move it across the screen.
It'll then look like I'm walking across the screen.

Here we go:

First off, open your library. The default shortcut for this is CTRL+L.

Now, on the menu bar at the top of the screen, go to File > Import > Import To Library


Select all your sprites you need and import them.


Now create a new symbol:


This window should pop up.
Name it whatever you want.
Make sure you tick the box that says Graphic.


Now we are in the Symbol's Stage, drag and drop your first sprite onto the stage.
In this case, I'm going to use the STAND stance.


Highlight it by clicking it. It will have a boarder as shown in this picture:


Now we are going to align the sprite to the center of the stage.
But before we can align, go to Modify > Align > To Stage. MAKE SURE IT IS CHECKED.


Now to align, go to Modify > Align > Horizontal Center (Keyboard shortcut is CTRL+ALT+2).
Next, go to Modify > Align > Bottom (Keyboard shortcut is CTRL+ATL+6). <- This will ensure that the feet are always on the floor.
This is how your sprite should look like:

Notice how the feet are ON the check mark and how the body is centered.

Before I can go on, I must explain what frames and keyframes are.

[PeridotDaggr]

================================================== ===============================================
Keyframes

They are the frames that have a dot in them.

According to Flash, they are:

a frame in which you define a change to an object's properties for an animation or include ActionScript code to control some aspect of your document.

Basically, a keyframe is like a picture.
How do I explain this... each keyframe can hold something new. You can alter something in a keyframe without it affecting anything before it. So say in frame 1 I have Keyframe A. Keyframe A has a picture of a circle. In frame 2 is Keyframe B. Keyframe B will be a duplicate of Keyframe A, but I can do anything to it. I can change the circle to a square, and it won't affect Keyframe A at all.

They are like separators really. The separate what happened in one frame to another.

Bah, this is like impossible to explain.
If you used NeoPaint or Gimp or whatever, a Keyframe is a frame. Get it?
But the reason it is called a keyframe and NOT called a frame in Flash is because a frame has a totally different meaning in Flash.

--------------------------------
Frames

They have no dot in them and they are squares shaded in with gray.


Frames are the duration of a keyframe.
Adding frames to a keyframe will increase how long that keyframe lasts.

If you used Neopaint, a frame adds a few MS (milliseconds) to each frame.
The duration of a frame varies, depening on the frame rate.
Since the frame rate in our animation is 24 fps, each frame is about 0.04 seconds or 40ms.


Have I made the definition of these clear?
If you still don't understand, keep reading on.
You might understand just based on what the guide is telling you.

================================================== ===============================================

Now, to get a second sprite into the graphic, we will now create a new BLANK keyframe.
To do this, go to Insert > Timeline > Blank Keyframe (Keyboard shortcut F7).

Now on this new keyframe, drag and drop your second sprite onto the stage.


Do the same as before, align the sprite.
REMEMBER KEYBOARD SHORTCUTS: CTRL+ALT+2 and CTRL+ALT+6


Now do the same for the rest of the sprites of the stance.
Which means I'm going to apply what we just did to Stand-Frame02 and repeat Stand-Frame01

Now you should have 4 keyframes, each frame with one sprite on it.
In my case this is what I have:

Keyframe 1 = Stand-Frame00
Keyframe 2 = Stand-Frame01
Keyframe 3 = Stand-Frame02
Keyframe 4 = Stand-Frame01


Highlight the first key frame and insert 9 frames.
You can do this by going to Insert > Timeline > Frame (Keyboard shortcut F5)

This'll increase the length of the first keyframe, which means Keyframe 1 now lasts for 10 frames long (0.4 seconds).

Do the same for the other 4 keyframes.



Now you have a graphic with a stand stance in it. Congradulation.

Try to apply your skills and create a Walk Stance graphic.
You use the EXACT SAME THING you just learned except replace the stand sprites with walking sprites.
Also, each keyframe only needs to be 3 frames long (which means you insert 2 frames to each keyframe).

[PeridotDaggr]

================================================== ================================================== =======
================================================== ================================================== ========
Motion Tween Guide

Ok, now that you have your Graphic, we are going to move it with Tweening.

A tween is when you use Flash's Motion Tween to move a graphic from Point A to Point B.
First we set Point A (Keyframe A) and Point B (Keyframe B) for the Graphic.
Then we will use a Motion Tween to to move the graphic from Point A to Point B.
Simple enough, right?

Alright, click Scene 1 to return to your animation.
You can find it on your timeline. It's underlined in this picture:


Now in the first keyframe OF THE ANIMATION drag your graphic onto the stage:


Now insert as many frames as you want. The more the better for this case. I suggest maybe inserting 19 frames.


After inserting the frames you want, create a keyframe. However, this time, NOT a blank keyframe, just a keyframe.
You can do this by going to Insert > Timeline > Keyframe (Keyboard shortcut F6)


It should look like this:


On the second keyframe (Point B) move your character to anywhere you want.



Right click on the frames inbetween the two keyframes shown in the pic below and click "Create Motion Tween".


NEVER EVER HAVE MORE THAN TWO GRAPHICS ON A LAYER. CREATE A NEW LAYER FOR EACH GRAPHIC

Now this is what should happen:
http://www.swfup.com/file/164098

Congradulations! YOU HAVE LEARNED TWEENING! YOU CAN APPLY THIS TO ANY GRAPHIC, MOVIE CLIP, OR BUTTON!

Note:
The more frames between Keyframe 1 and Keyframe 2 will increase the duration it takes to get the graphic from Point A to Point B.
----------------------------------------------------------
That was PBcat's/Swiftclaw's guide. I will made another section explaining other techniques.

[ClericLordLeo]

Last link is broken

[PeridotDaggr]

Ya, about that, this tut isn't mine, so yah... That website also on sale, so ya...

[Zait]

Awesome guide indeed

The only problem is getting Macromedia Flash :p

[ClericLordLeo]

Thanks for the tut, now my sig is great, lol.

[pyrofyr]

That definiton wasn't clear at all, good thing I know what all of them mean from years of photoshop use, and a few weeks of flash use.

[RavenBlade]

Rawr.
Im too lazy to do any bit of this. Still.

*Favs thread*