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 cliched, 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 synching, 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 Macromedia Flash MX, but you will most likely have either Macromedia Flash MX 2004 or Flash Professional 8. The tips in this tutorial should work for whatever version you have, some of the buttons and such might just be in a different place.

Websites for the Flash 30 day trial or to buy:

Flash Professional 8
Macromedia Flash MX 2004

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

Outline of the interface.

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.

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: A bit hard to understand at first. But just play around with them 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 frame, or goes to the next frame. F6 makes a new frame, except it keeps what was in the last frame. 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:

I hope you can read my writing, hah. So yeah, just play with the frames, see what they do, because I can't really explain it better than this.

Tools: 1. I never use the white arrow, it doesn't... Something, I haven't figured it out yet, so just use the black arrow to move and select things. 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.

Onion skin: It lets you see a lighter version of what you drew in the last frame so you don't have to guess.

Onion skin example.
Here's the finished animation. (I love how his body structure changes...)

Properties: How do I describe properties... Well, when different things are selected, you can change its properties. You can use it to change line thickness with the box tool, change opacity (when it's a symbol, will be explained later) and various other stuff.

Actions: Oh man, ActionScript. I stink at it, all I basically know what to do with it is how to make buttons. I don't have the patience to learn how to use it. :P

Ahhh, tweening. Was the death of me for a while there (wait, that doesn't make sense...) until I finally figured it out and now it's so easy. 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.
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! :O Simply select your symbol and go to Window > Properties. In the colour dropdown box, select "Alpha" and drag down 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 motion 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:

I can't teach you how to animate. I can't. I learned by trying. I don't know how to animate so I really shouldn't teach others how to. I guess I just have a natural ability for knowing where the object should be in the next frame and how much of a distance there should be between frames. But I can teach you the technique I use for colouring my animations.
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 is 'lines' or 'good' or 'banana' 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. :P
3. Delete the sketchy layer, as you no longer need it (right click and press "delete").
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.
4. 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 birds 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.
5. When you're done, click on "Scene 1" here. 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 to reeeeeally 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! Note: Your ActionScript panel might not look the same as mine, or act the same, but if you're using Flash MX or Flash pro. 8, then these actions should work for you. If not, e-mail me, and I'll see if I can help you.

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 the next 4 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, and 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 Actions > Movie Control. Drag the word Stop into the white space in the Actions. This tells the animation to, well, stop.
7a. Now, select the button. In Actions, go Actions > 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 > Movie Control and drag GoTo 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 and if that didn't work, then try this way: Go to Actions > Movie Control and drag in the Stop Action. Then drag in the GoTo action and it should automatically put in the On Release actions.

In the end, your actions should look like this:

on (release) {
gotoAndPlay(2);
}

Sounds

What's an animation without music and sound effects? I shall show you how, just as long as you always remember to credit wherever 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. Here's what you should have.
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 makes 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 gross. 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, which is grey or blue. 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.

This website is hosted for free by . Get your own Free Website now!