Swift's Guide To Flash (ALL RIGHTS TO xSwifxClawx)

[size=200]BASIC Guide to Flash[/size]
THIS GUIDE WAS MADE BY xSwiftxClawx
If you copy and paste it, GIVE CREDIT TO ME, I SPENT A LOTTA TIME ON THIS >.<

UNFINISHED

-------------------------------------------------------------------------------------------------------------------------------
[size=150]INTRODUCTION[/size]

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.

--------------------------------------------------------------------------------------------------------------------------------
[size=150]BEFORE WE BEGIN[/size]

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/aa61/xWhoxCaresxNowx/FlashInterface.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.

--------------------------------------------------------------------------------------------------------------------------------
[size=150]CREATING A SYMBOL[/size]

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.

=================================================================================================
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, 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).

============================================================================================================
============================================================================================================
[size=150]Motion Tween Guide[/size]

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".


[size=150]NEVER EVER HAVE MORE THAN TWO GRAPHICS ON A LAYER. CREATE A NEW LAYER FOR EACH GRAPHIC[/size]

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.

=============================================================================================
Posted this so people have a simpler flash guide than Secht's.

All rights to xSwiftxClawx

Oh lol.

I thought I had already posted it.

Thanks mtplaya i was waiting for Swift to do it but...
Anyway nice helpful animation

Spoiler:

make frame by frame tut already lol

xSwiftxClawx wrote:Oh lol.

I thought I had already posted it.

swift iz lazy0r >:|

I didn't even know about the CTRL+ATL+6

god I'm such a noob *head desk*

D:

this helps thnx

I never knew xSwiftClawx was Chinese?

its a good guide its just that i notice that

Link at the bottom doesn't work...

Nice tutorial. :D

@derek, you are not a noob! I'm not trying to cheer you up, it's because if you're a noob, then I'm nothing!

kinna blur 4 me ...
T___T
u guys so pro ><

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>../../DOCUME~1/Edward/LOCALS~1/Temp/Untitled-1</title>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="100" id="../../DOCUME~1/Edward/LOCALS~1/Temp/Untitled-1" align="middle">
<param name="allowscriptAccess" value="sameDomain" />
<param name="movie" value="../../../DOCUME~1/Edward/LOCALS~1/Temp/Untitled-1.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="../../../DOCUME~1/Edward/LOCALS~1/Temp/Untitled-1.swf" quality="high" bgcolor="#ffffff" width="550" height="100" name="../../DOCUME~1/Edward/LOCALS~1/Temp/Untitled-1" align="middle" allowscriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>


How do i post this? in Flash

AWEZUMM YO!! LOL, I finally know how to tween :) YAYY Thanks!!

I just realized the text on swifts computer is chineese/Japeneese(Shut up I can't tell)