Basic Animation
Greetings, and welcome to the first Flash tutorial! I hope this
tutorial will allow you to take your first step in Flash animation.
Before we get started, you need to make sure you have a copy of Flash.
Any recent copy should be fine, I will be using Macromedia Flash MX,
so if there are any confusions email me and I will check and see if its
because of different versions. OK, so load up Flash and we can get started.
First things first. Whenever you are using a new program you need to
look around, and make yourself familiar with the layout. The way I
view it, there are 5 basic components to Flash. The Menu at the top
which contains the menus like File and such, the drawing toolbar to
the left side, the Timeline in top center, the Canvas in the center,
and the properties/actions bar bottom center. All of these will come
of use to you in some point in your movie making.
In the Properties/Actions bar (I'll call it the PA) you should have properties menu up. The Properties bar right now gives you properties of the entire animation, if you click seperate drawings and components of the animation, it will give your their individual properties. It should show you your movie's size, the player it publishes to, the backgorund color of your movie, and the frame rate- all of which you can edit. Make sure your frame rate is set at 12- that is 12 frames per second, you can change it if you see fit but the common rate is 12 and that is what my movies will be set at in the tutorials.
OK- so lets get started on some animation! On the drawing toolbar the paintbrush, choose a color below (the color for the paintbrush is the color next to the fill tool, the color for outlines and the pencil is the color next to the pencil color), and paint whatever you want. Since this is just a tutorial I will just paint a blob. Its not important what you draw.
The first thing you might notice is that after you draw, Flash automatically smooths youo're edges out and makes the picture look pretty. How much it smooths and such is editable and I'll show you how to customize your tools later. For now, we just need a blob.
So now that you have a blob, we want to make your blob move. Take the black arrow tool and click your blob. if you notice it selects the entire blob, but the blob is divided up into lots of little squares. Thats because even though we see it as a blob, Flash sees it as a lot of little blobs put together, and if we want Flash to animate it for us, we have to get Flash to see it as one big blob. So what we need to do is convert the blob into a symbol. Make sure all of the blob is selected and click "Insert>Convert to Symbol." A menu pops up with a few options. You can see you need to name your symbol and there are three types of symbols you can have (movie clips, buttons, and graphics) but we don't need to worry about those. For now just check the box next to graphic, name your symbol blob, and click OK.
Now you'll notice that the whole blob is selected by a blue rectangle, Flash now thinks of the blob as one blob. Now we can animate it. There are two kinds of animation you can do with Flash. If you have animated before you know what frame by frame animation is. This is where you move an object each frame little by little then run it together to make it look like motion. Flash can do this but it also does something that makes certain animations a lot easier, its called tweening. The idea of tweening is that you can take an object on frame one, then put it somewhere else on frame 10, add a motion tween in between and Flash will add all the other frames in and make the object move. This takes a lot less time and is how we will make our blob move around the screen.
In this tutorial I'm just giving you a taste of Flash. I don't plan on explaining the whole Timeline yet, that will come in another tutorial, so for now, just do as I say. Your blob is hopefully clicked, now drag it to the far left, not leaving your white drawing area. Now go to your timeline and find frame 10. Right click it and click "Insert Keyframe." This will add a new frame with a dot in the middle and fill the other frames up. Now still in frame 10, drag your blob to the far right of your white drawing area. Now click any frame in between frame one and frame ten. In the properties box where it says Tween click the drop down menu and select "motion." The frame should fill with blue and a dark arrow should be poiting to frame 10. If the arrow is not connected make sure your blob has been converted into a symbol. Now right click frame one and click copy frame. Then right click frame 20 and click paste frame. you have now duplicated frame one to where frame 20 is. Click anywhere between frame 10 and frame 20 and add a motion tween. Now click frame one and press enter. Enter plays the movie from the begining, but pressing enter or clicking will stop it.
Note: To see what the movie will look like on the internet click Control>Test Movie.
Your blob should be moving back and fourth! If you do it by Control> Test Movie it should be a continuous loop of a moving blob. Save this flash video as whatever you like!
You have just finished the animation tutorial. More tutorials will come explaining GD in Flash, complex animation, the timeline, layers, buttons, actions, and more.
If you liked this tutorial please email archie@magliteunleashed.com
In the Properties/Actions bar (I'll call it the PA) you should have properties menu up. The Properties bar right now gives you properties of the entire animation, if you click seperate drawings and components of the animation, it will give your their individual properties. It should show you your movie's size, the player it publishes to, the backgorund color of your movie, and the frame rate- all of which you can edit. Make sure your frame rate is set at 12- that is 12 frames per second, you can change it if you see fit but the common rate is 12 and that is what my movies will be set at in the tutorials.
OK- so lets get started on some animation! On the drawing toolbar the paintbrush, choose a color below (the color for the paintbrush is the color next to the fill tool, the color for outlines and the pencil is the color next to the pencil color), and paint whatever you want. Since this is just a tutorial I will just paint a blob. Its not important what you draw.
The first thing you might notice is that after you draw, Flash automatically smooths youo're edges out and makes the picture look pretty. How much it smooths and such is editable and I'll show you how to customize your tools later. For now, we just need a blob.
So now that you have a blob, we want to make your blob move. Take the black arrow tool and click your blob. if you notice it selects the entire blob, but the blob is divided up into lots of little squares. Thats because even though we see it as a blob, Flash sees it as a lot of little blobs put together, and if we want Flash to animate it for us, we have to get Flash to see it as one big blob. So what we need to do is convert the blob into a symbol. Make sure all of the blob is selected and click "Insert>Convert to Symbol." A menu pops up with a few options. You can see you need to name your symbol and there are three types of symbols you can have (movie clips, buttons, and graphics) but we don't need to worry about those. For now just check the box next to graphic, name your symbol blob, and click OK.
Now you'll notice that the whole blob is selected by a blue rectangle, Flash now thinks of the blob as one blob. Now we can animate it. There are two kinds of animation you can do with Flash. If you have animated before you know what frame by frame animation is. This is where you move an object each frame little by little then run it together to make it look like motion. Flash can do this but it also does something that makes certain animations a lot easier, its called tweening. The idea of tweening is that you can take an object on frame one, then put it somewhere else on frame 10, add a motion tween in between and Flash will add all the other frames in and make the object move. This takes a lot less time and is how we will make our blob move around the screen.
In this tutorial I'm just giving you a taste of Flash. I don't plan on explaining the whole Timeline yet, that will come in another tutorial, so for now, just do as I say. Your blob is hopefully clicked, now drag it to the far left, not leaving your white drawing area. Now go to your timeline and find frame 10. Right click it and click "Insert Keyframe." This will add a new frame with a dot in the middle and fill the other frames up. Now still in frame 10, drag your blob to the far right of your white drawing area. Now click any frame in between frame one and frame ten. In the properties box where it says Tween click the drop down menu and select "motion." The frame should fill with blue and a dark arrow should be poiting to frame 10. If the arrow is not connected make sure your blob has been converted into a symbol. Now right click frame one and click copy frame. Then right click frame 20 and click paste frame. you have now duplicated frame one to where frame 20 is. Click anywhere between frame 10 and frame 20 and add a motion tween. Now click frame one and press enter. Enter plays the movie from the begining, but pressing enter or clicking will stop it.
Note: To see what the movie will look like on the internet click Control>Test Movie.
Your blob should be moving back and fourth! If you do it by Control> Test Movie it should be a continuous loop of a moving blob. Save this flash video as whatever you like!
You have just finished the animation tutorial. More tutorials will come explaining GD in Flash, complex animation, the timeline, layers, buttons, actions, and more.
If you liked this tutorial please email archie@magliteunleashed.com