Flash Explained

Learn Flash easily.

Learn Flash CS4 animation: Classic Tween

April 13th, 2010 | Author: Luka | Category: Animation


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.

Opening a new Flash File (AS 3.0)

1.2 Select the Oval Tool (O).

Selecting the Oval tool in Flash CS4.

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

A simple oval drawn on the stage.

1.4 Pick the Selection tool (V).

Picking the Selection tool.

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.

Selecting a simple vector shape in Flash CS4.

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).

Selecting a drawing object with a single click, in Flash CS4.

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:

The Convert to Symbol dialog window in Flash CS4.

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:

A newly created movie clip.

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.

Properties panel showing a selected movie clip instance.

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:

A layer with a single keyframe in Flash CS4.

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

How a keyframe looks in Flash when its contents are 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.

Inserting a new keyframe on a layer in the timeline.

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

The timeline with a second keyframe inserted into the first layer.

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.

Dragging a movieclip to a new position in Flash CS4.

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.

Making a Classic Tween in Flash CS4.

Your timeline should look like this now:

A classic tween as seen in the timeline in Flash CS4.

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.

Copying a keyframe in the first layer.

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.

Pasting a keyframe in the first layer.

The timeline has changed its appearance again:

Three keyframe and one classic tween shown in the timeline - in the first layer.

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.

Making another classic tween.

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

Two classic tween animations, one after the other.

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:

A badly made classic tween animation in Flash CS4.

…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.

Be Sociable, Share!

Comments

Submit a comment

  • These tutorials were so goooood. I’ve almost completed all of them. They are soo helpful and make me just wanna do them all. oh kid okey. Time to do some more.

  • Staging May 7, 2010 at 10:06 am

    I am very much thankful to the owner of the site. I have almost gone through 22 tutorials to understand the basics of flash cs 4. I really admit that one who is even new to flash can also learn lot from these tuts. I have one suggestion – every tuts should carry its slf file- to play and view the animation immediately.

  • technology analysis May 11, 2010 at 9:39 am

    Going back and forth between these 2 lesson blocks is confusing. I created a movie symbol that is animated. When I move it to a layer it is not animated anymore. It just shows the first frame of the movie instead of the whole thing.

  • brigitte Jul 27, 2010 at 8:06 am

    Well done, thank you.
    Brigitte

  • Pam Lee Nov 12, 2010 at 11:22 pm

    Excellent, even a newbie like me could do this–I think I love Flash!!

  • Traffolyte Dec 16, 2010 at 6:15 pm

    Great post really.I created a movie symbol that is animated. When I move it to a layer it is not animated anymore. It just shows the first frame of the movie instead of the whole thing.

  • Traffolyte Dec 17, 2010 at 3:52 pm

    I admire those writers who share the best of their knowledge in writing such articles. Keep up the good work and continue inspiring readers.Thank you so much.

  • Feralbreeze Dec 24, 2010 at 3:50 pm

    Very interesting articles Luka. Detailed and easy to grasp. Thanks.

  • Bhavani Shankar Jan 28, 2011 at 9:36 am

    Well done. Great Job!

  • Traffolyte Feb 5, 2011 at 6:01 pm

    Firstly, let me commend your clarity on this subject. I am not an expert on this issue, but after learning your article, my understanding has developed considerably. Please tolerate me to take hold of your rss feed to stay in touch with any potential updates. Effective job and will pass it on to friends and my website readers.

  • David Borough Feb 13, 2011 at 4:37 pm

    I know this is a shot in the dark — but hoping someone can explain something to me — what is the difference between a CLASSIC TWEEN and a MOTION TWEEN? I have Flash 8 (CS3 ?) and I’ve seen many tutorials saying to use a classic tween, but it’s not an ‘option’ in Flash 8 ???? Only motion and shape….

  • Luka Feb 14, 2011 at 9:37 am

    @David Borough: Motion Tween is explained in this tutorial:

    http://flashexplained.com/banners/how-to-create-ad-banners-in-flash-cs4/

  • tracy ingram Apr 1, 2011 at 9:55 pm

    Thanks for the info. Great tutorial.

  • tracy ingram Jun 1, 2011 at 9:06 pm

    great tutorial very helpful

  • Thanks for these tutorials. This is a really nice way to learn the basics of how Flash works. I need to follow more of these tutorials.

  • [...] Written by admin on December 31st, 2011. Posted in Flash Como fazer uma simples animação através do Classic Tween. Sítio Web: Flash Explained Link: http://flashexplained.com/animation/learn-flash-cs4-animation-classic-tween/ [...]

  • karishma Feb 27, 2012 at 3:23 am

    really helpful…………………………… very sistematic in the explanation aspect of explaining………………………………………… keep up the good work

  • Solomon ndungu May 28, 2012 at 9:19 am

    thank you very much this tutorial. this is very good way to start flash animations basics thank you

  • uk nair Jul 9, 2012 at 4:43 pm

    very nice and step by step simple explanation shows the depth of your knowledge about flash. really helpful……expecting more..

  • fofo Oct 26, 2013 at 5:15 am

    how to make classic tween stop looping???

Leave a comment