Flash Explained

With this easy tutorial, I will show you how to make classic tweens in Flash CS4. You are going to learn:

• What are Movie Clip symbols and how to make them
• What is the timeline
• How to make keyframes
• How to make your Movie Clip move, change size and more

1. Making your Movie Clip symbol

1.1 Open a new Flash CS4 document by selecting File > New. The "New Document" window will show up. Click on the Flash File (ActionScript 3.0) option and then click OK.

1.2 Select the Oval Tool (O).

1.3 Click anywhere on the stage and drag your mouse until you obtain an oval. You may use any color you like.

1.4 Pick the Selection tool (V).

1.5 Now, if you have had the Object Drawing option turned off while you made the oval (see screenshot below), you have to double-click with your mouse on the shape to select it. It will appear rasterized (dotted), which shows that it has been selected.

On the other hand, if you have had the Object Drawing option turned on while you drew the oval, you only have to click once on it to select it (see next screenshot).

That’s because with the Object Drawing option turned on, you are creating drawing objects instead of simple shapes. A thin blue border around it indicates that it has been selected. On a sidleine note, if you happen to double-click it, you will enter inside it and see the simple vector shape. To go back to the stage, just double-click on an empty part of the stage area.

1.6 Whether you drew a simple shape or a drawing object, it is important that you have selected it. Now, select Modify > Convert to Symbol (shortcut key: F8). This dialog box will appear:

This is where you create your Movie clip symbol.

• In the Name field, enter green oval or any name you like. Choose names that will tell you what your movie clip is about and try to avoid using default names (Symbol 1, Symbol 2). Any name can seem good now, when you have just one movie clip. But once you have your library full of different symbols, intuitive symbol names can help you a lot. You will know instantly what any given symbol is about, and you’ll find them more quickly.
• Select the Movie Clip option in the Type menu. I will discuss the other options (Button and Graphic symbol) in further lessons.
• The Library root folder is a fine place to put your movie clip into. In complex Flash movies, it is advisable to create folders for different symbols that belong to the same scene, or are somehow related. Good organization leads to better workflow and less frustration.
• The Registration point is the reference point by which your movie clip will be handled by ActionScript in relation to its coordinate system. Also, all the modifications and transformations such as distortion, rotation, skewing etc will be done in relation to this point.
• For now, let’s leave the Advanced options button as it is. This is a basic tutorial and I don’t want to complicate it with unnecessary stuff at the moment.

Click OK.

This is how your movie clip should look like on the stage:

It is surrounded by a thin blue border and its registration point (see the Convert to Symbol screenshot above) is at its center, represented by a small cross in a circle. Take a look at the Properties panel.

While your movie clip is selected, the Properties panel shows it clearly. It says that this is an instance of the movie clip symbol green oval. This means that you can have many instances of one symbol on the stage. When making a classic tween, however, you should have only one instance of a movie clip in the layer where you are creating the tween. That’s what we’re doing right now.

Top of page

2. Creating keyframes and the Classic Tween animation

We’ll have some fun with the timeline now. This is where you create your animations, by making changes through different time intervals.

Right now, your timeline looks like this:

…or like this, if your movie clip on the stage is selected:

These small rectangles are simple, empty frames. The first one, with a black dot inside, is a keyframe. Keyframes are used for making changes in your classic tween animations. This is where you change the position, size and anything else about your movie clip.

2.1 So go anywhere further down the timeline: For the sake of convenience, let’s choose frame 24. Right-click on it and select the Insert Keyframe option from the menu that will show up.

This is how your timeline will look now, after the second keyframe has been inserted:

2.2 You should make a change now, to make your animation. For example, move your movie clip. Use the Selection Tool (V) — click on your movie clip once and drag it away from its current position.

OK, you made a change. But still, there is no animation now. You have to tell Flash to calculate the movement of the movie clip between the first and second position.

2.3 To do just that, right-click anywhere between the two keyframes in the timeline and select the Create Classic Tween command from the menu that appears.

Your timeline should look like this now:

The space between the two keyframes is colored in purple, and an arrow shows that a classic tween animation exist here. This is how a properly done classic tween looks like.

2.4 Let’s see now how this animation looks like: test it by selecting Control > Test Movie. Your animation should be similar to this:

If this animation appears strange — because the movie clip moves smoothly and then suddenly jumps from one place to another, don't worry — this is normal. All Flash animations loop endlessly, unless you stop that via an ActionScript command. So, this particular animation you just made goes from start to end and then back to start again, jumping from the last position (the second keyframe) back to the first (the first keyframe). This is the reason you see the jump here.

If you want to have a smooth animation, you can add another keyframe to make your movie clip go back to the starting position smoothly. So, you should add another keyframe in which your movie clip should be in the same position as it is in the first keyframe. You can do that the long way, by trying to adjust your movie clip's position until the animation looks ok. But there is an easier way to do this — by copying the first keyframe.

Top of page

3. Copying and pasting keyframes

3.1 Go to the first keyframe and right-click on it. Select the Copy Frames option.

By copying a keyframe, you are copying all the contents that are inside it. In this case, you will copy the movie clip with all of its characteristics — its size, position, rotation and so on.

3.2 Go to, say, frame 48, right-click and select Paste Frames.

The timeline has changed its appearance again:

As you can see, there is just one classic tween in the timeline. The frames between the second and the third keyframe are grey. This means that there is no change between them. The second keyframe lasts until the third one, with no change whatsoever. To create a new classic tween, you must do the smae thing you did back in step 2.3: right-click between the 2nd and the 3rd keyframe and select the Create Classic Tween option.

...and here is your second classic tween in the timeline:

3.3 Check to see if you are animation is smooth now by selecting Control > Test Movie. The movie clip should move now back and forth, without any sudden jumps.

Top of page

4. Troubleshooting

If the space between your keyframes looks like in the screenshot below:

...this means that you have made a bad classic tween — something went wrong and Flash lets you know this happened by showing a dotted line instead of a continuous one. The possible reasons for this may be:

• You haven't got only your movie clip in this particular layer: you have some other objects too - lines, shapes, text fields... remember, in order for Flash to be able to make a proper classic tween animation, the layer in question should contain one movie clip only! If you want to have multiple classic tweens, or a shape tween along with your classic one, you should do that in a separate layer.
• You have got the movie clip in one keyframe only (maybe you accidentaly removed it from one of the keyframes).
• You have one movie clip in your first keyframe, and some other in the second one. OK, this has little chance of happening, but is still a possibility (because Flash lets you swap symbols).
• You didn't create a movie clip in the first place, and have just a drawing object.

Well, you have just learned how to create a simple classic tween in Flash CS4! Follow Flash Explained and you'll see how to make other kinds of animations (like motion tween) in upcoming lessons.

Download the source file for this lesson.

Comments

Submit a comment