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.
Double-clicking on the fill of your shape will select both the fill
and the stroke (line). This is very important. If you select only the
fill and leave the stroke unselected, you wouldn’t be able to create a
classic tween. Why? Remember this well: in order to create a working,
proper classic tween in Flash CS4, in the layer you are making it, you
must have only a single Movie Clip symbol present and nothing else. If
you happen to have any drawings or text in the same layer where you are
making your classic tween, this will result in an error. If you have
many layers in your Flash document, lock them all except the one you are
working on, to prevent any possible errors.
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.
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.
The classic tween animation needs a minimum of two keyframes to work.
The first one, with the initial state of your movie clip, and the
second one, where you will move it, resize it, or make any change that
you wish.
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.
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.
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.
