Over the years, I've been asked by several people to help them in Flash so instead of copying and pasting the same answer all the time, I decided to make a tutorial.

So, you want to learn how to use Flash but don't know how. Yes, the Flash interface is intimidating at first, it was for me, but now I know it like... Um... I don't want to say 'the back of my hand,' that's too cliche, but you get the idea. Number one advice I give to anyone: Just play around with Flash. See what everything does. I learned how to use the frames (very simply) and how to make buttons when I was in grade 7. That's it. I learned tweening, a better understanding of the frames, symbols, lip syncing, sounds and a lot more on my own. BUT, to be nice, I will show you how to do those things in this tutorial. :)

In this tutorial, I used Flash CS4. The tips in this tutorial should work for whatever version you have though, for the most part. Some of the tools and such might just be in a different place.

Websites for the Flash 30 day trial or to buy:

Adobe - Flash CS4
Softpedia - Flash CS4

Okay! So you've opened Flash and you're going "...... Um?" right? Yeah.

Note: That is the organization of things the way I like it. The tools are probably on the other side for you and there's probably a bunch of different windows open. This shouldn't matter for now, just close them... For now. They'll be there for you again when you open Flash again. If they're not, just go to Window and select whatever window you want to come back. All of the windows that you see will always be in the Window menu, so don't sweat it if you accidentally close one.

Explanation of the different terms:

Layers: Layersss... Not the hardest thing, you just have to learn to make a new layer for every different thing that moves. Don't be afraid to make a new layer!

--

Timeline/Frames: A bit hard to understand at first. But just play around with the frames and you'll learn how to use them eventually. Keep at it! But I can't just say that because this is a tutorial, SO:

F7 make a new empty keyframe, or goes to the next frame.
F6 makes a new frame, except it keeps what was in the last frame (only if the last frame is selected).
F5 is a bit of a tricky one to explain. It's like F6, only it doesn't make a keyframe, but just a frame.
You can also delete a frame by selecting it and pressing Shift + F5.
Here's a picture to help understand a bit:

So just play with the frames, see what they do, because I can't really explain it better than this.

--

Onion Skin: It lets you see a lighter version of what you drew in the last frame, like a lightbox.

Onion skin example.

To use the onion skins, they are the little boxes beneath the timeline and closest to the layers.

--

Properties: When different things are selected, you can change its properties. You can use it to change line thickness with the box tool, change opacity of a symbol, ease tweens... It does quite a lot.

--

Tools:

1. Use the BLACK arrow for moving things! The white arrow changes the shape of lines and objects, so you don't want to use that one when you're animating. When you're drawing in Flash though, by all means, use the white arrow to help you make your lines smoother.
2. The paintbrush! There are many different options with the paintbrush, you can make it have pressure sensitivity (only if you have a tablet), make it paint behind other lines, make it paint inside other lines and much much more!
3. The fill bucket. No worries about doing your colouring on a different layer, if you haven't figured that out already. Flash uses vectors instead of pixels, so your lines won't go all pixely and icky. This makes it much easier for animating, seeing as how you don't have to create several layers just for one symbol.
4. The transform tool is used mostly for tweening to change the basic shape of a symbol.

Ahhh, tweening. Once you understand it, it will become like second nature to you. Basically what tweening does, is it moves something smoothly so you don't have to draw out every single frame. Frame-by-frame is drawing each frame. Longer and harder, yes, but done right, it can give more depth and realism that tweening can't achieve.

Tweening step-by-step:

1. Draw something. Anything. A ball, I dunno.
2. Select it by either clicking on it (with the black arrow!) or by selecting the frame that it's in. Either right click and select "Convert to Symbol" or just press F8, which a lot easier and faster. A window should come up. Select "graphic" and press OK. If you press F11 you can now see your symbol in the library.
3. Your symbol you just made should now have a blue box around it. Before you tween anything make sure it has that blue box around it when you select it. If it doesn't, repeat step 2. If it doesn't have a blue box around it before you tween it, Flash will make it a symbol for you and will corrupt your file.
4. You should now have something that looks like this:

Go along the timeline and select a frame and press F6. It should look like this:

5a. In that last frame you just made, move your symbol to a different spot.
b. If you want (this step is optional) you can make your symbol disappear! Simply select your symbol and go to Window > Properties. Open the "Colour Effect" area and in the Style dropdown menu, select "Alpha" and drag the slider to 0. "MY SYMBOL'S GONE AAAA." No it isn't, it's just transparent! If you click inside the blue box and drag it, you can still see the outline.
6. Go back up to the timeline and select a frame between your two keyframes. Right click and select "Create Classic Tween." It should look like this:

If it has a little dotted line, that means you did something wrong! D: Go back to the beginning and try try again!
7. Press Ctrl + Enter and you should be able to see your little moving... Thing. Yaaaay!

Frame-by-Frame:

Animating frame-by-frame takes a lot of patience and practise and knowing how things move and not only that, but making that action appealing to look at by use of secondary action, overlapping action, cushioning, etc. It would take a whole other tutorial to explain HOW to animate FBF. So I'll tell you my technique for colouring FBF animation.

1. So you have your animation, all sketchy and unpleasant looking. It's good to make a sketchy version first so that you can change it easily if something doesn't look right. It's also good to use a bright colour, or something completely different from the colour your outlines are going to be. Make a new layer by pressing this button and double click it and name it 'lines' or 'good' or 'cupcake' or something to make sure you know that that's your good copy layer.
2. Get the paintbrush and start going over your animation on your good layer. This is what takes me the longest. It's good to flip between the drawings as you're doing this to make sure nothing looks too poppy or bumpy by pressing "<" or ">" on your keyboard.
3. Delete the sketchy layer, as you no longer need it (right click and press "delete" directly on the name of your sketchy layer or drag it right to the trash can).
4. Time to colour! Make sure you're on your good layer and fill it all in. You can use the paintbrush in "paint behind" mode to get the little spots that the fill bucket couldn't get. But they won't be that noticeable anyway.
5. Press Ctrl + Enter and you're done!

Internal Animation

So you have your symbol. It's pretty simple, yes? What if you want to make, say, a bird flapping its wings while tweening across the sky? Well here's how I would do that:

1. Draw the bird's whole body except for the wings. Make it a symbol (select and press F8) and name it "body," or something.
2. Double click the symbol to go "into" it.
3. Make a new layer for the wings. Draw the first frame of the wings. (An animation book or website might show a flying cycle for birds you might be able to reference from.)
4. Press F7 and draw the next frame. The body layer should have automatically made a new frame. Notice that it made a frame, not a keyframe.
5. When you're done, click on "Scene 1" here (it might be in a different place in newer versions of Flash). Tween it across the screen and when you're done, press Ctrl + Enter and watch your bird flyyyyy!

A note on Movie Clips vs. Graphics: You may have noticed that when you make something a symbol, you have the option to make it a Graphic, Movie Clip, or Button (You'll learn about buttons next). With a graphic and internal animation, when you go back to Scene 1, or your main animation, when you scrub back and forth (dragging the pink thing back and forth on the timeline), you'll be able to see your internal animation. Whereas with a movie clip, you scrub back and forth, and you can't see the internal animation. Me? I only use movie clips when I have an animation with only one frame, where it's not necessary to have the timeline really long. Take this animation for example. The whole of Shady is one big movie clip. If I double click to go "inside" her, this is what it looks like. Every moving thing is on a different layer, and all the animation is in there.

Buttons

I use buttons mostly for "Play" and "Play Again" buttons, and they're good to know how to do, so here you go!

1. Draw what you want your button to look like, or type Play.
2. Convert it to a symbol, but instead of Movie Clip or graphic, select Button. Double click your new button to go into it.
3. Without clicking anything else, press F6 3 times and all the frames should fill up with the same button.

--- The "Up" state is what your button will look like normally.
The "Over" state is what your button will look like when your mouse is hovered over it.
The "Down" state is what your button will look like when you click on it.
The "Hit" state is the clickable area. Like, if your button is just text, the clicker will have to click right on the text to press the button, but if you draw a rectangle around it, that rectangle is the area where the user can click. The frame in the hit state is never visible in your animation. ---

4. Change your buttons in each state to how you would like them to look.
5. Click Scene 1 to get out of your button into the main animation.
6. Now for the ActionScript. Go to Window > Actions. Click on your frame with the button in it and in your actions toolbar, to to Global Functions > Timeline Control. Drag the word "Stop" into the white space in the Actions. This tells the animation to, well, stop. You should see this:

stop();

7a. Now, select the button. In Actions, go Global Funtions > Movie Clip Control. Drag "On" into the space and double click on "release". Now, click at the end of that line next to the bracket (There should be a closing bracket 2 lines down). Go back to Actions > Timeline Control and drag "GotoAndPlay" at the end of the line and type in the number of the frame you want the button to go to.
7b. Test your movie!.

In the end, your actions should look like this:

on (release) {
gotoAndPlay(2);
}

Sounds

What's an animation without music and sound effects? Just always remember to credit where you got the sound from. ;)

1. Go to File > Import and select your sound. MP3 or WAV files should work just fine.
2. Open your library (F11) and drag the sound into the drawing space.

3. Go along the timeline, select a frame, and press F5 or F6. Just don't do this:

Make sure it looks like this:

There's your sound!

Streaming:

Streaming syncs the sound to the animation. The default thing on Flash plays the animation while it's possibly still loading and the music might start before the animation and it just goes all off sync and it makes you animation look terrible. Streaming makes it so that the animation will slow down to play with the music so that it's all in sync the way it is in your timeline.

To stream, all you have to do is select a frame with music in it and go to Window > Properties. In the Sync dropdown box, select "Stream." BUT. In this animation, the music is set on "Event" again because the main animation where the sound is only has one frame. When you want to sync it to the animation, you stream, but in this case, you use Event. This is what my layers look like in Scene 1.

Saving

I guess it's about time to learn how save!

First of all, the red file you see is the .fla, or Flash file. If you open that up, it will open up Flash. You need the .swf file (or the Flash Movie file) in order to upload your creation to the internet. The icon is usually grey or blue, but sometimes it might just be a file icon or internet icon. You can:

1. When in your animation, press Ctrl + Enter and that will export it for you and test your animation at the same time.

2. Go to File > Export Movie. Save it what you want it as, press OK, and you'll have the .swf.

Then when you open the .swf file, it will open Flash Player instead of the whole Flash program. Simple as that!

Saving as an animated .gif

1. Save it normally as a .fla
2. Go to File > Publish Settings
3. Check GIF and deselect HTML and Flash.
4. Go to the GIF tab.
5. Select Animated and if you want it transparent, change Opaque to Transparent.
6. Click Publish.

Note: The .gif won't show internal animation in a movie clip.
Another note: You should probably make the size of your frame (The white drawing space) smaller so that the gif doesn't have a huge blank space around it because in the GIF tab, where it says Dimensions, that's how big your gif is going to be. And you can't just change it in the tab. To change the size of your frame, double-click under the timeline where it says 12.0 fps and change the dimensions there. The white space will get smaller (or bigger depending on your dimensions you put in) and whatever is in that white space will be your .gif when you publish it.

Have any more questions? E-mail me! I'll be glad to help! ALSO, if you would like a Flash file of mine to look at for an example and better understanding of how I put things together, just ask. :)

This tutorial was made by Chelsea "NQN" G.R., please do not repost it anywhere, unless I am given credit. Made with screenshots of Macromedia Flash MX.