The Classic Tween in Flash

Here (on the left) we can see a typical walk cycle performed using classic “tweens” and graphic symbols. If you look closely, however, this characters movements are pretty basic and limited to movements along a flat, two-dimensional plane.

On the other hand, a three dimensional performance makes use of a characters full range of movement including, depth, weight, flexibility, and world physics. And even though technically the animation on the right is a 2d graphic, the performance itself is very much three dimensional. Tweening is a perfectly acceptable and very well recommended form of animating simple movements as well as “cheating” the audiences eye in instances where the effort required to create a three-dimensional performance is really not worth all the extra work. It is also great for animating inorganic and mechanical objects where the audience will readily forgive the visual “flatness” of the action being performed and simply attribute it to the lifeless nature of the object performing the action in the first place.

Let’s now take a look at the Classic Tween Feature in Adobe Flash. In this example, I have set up my stage to a 16:9 aspect ratio. The actual pixel dimensions themselves are irrelevant. Keep in mind that Flash is a vector based program and as such I can export my work to any resolution without any loss of quality. Therefore, for the purpose of this demo I chose to use a canvas size of 720×405 which gives me plenty of room to work with and while at the same time not placing too much strain on the processor.

I have created three layers and renamed each layer according to the object I have drawn on that layer. The upper most layer contains a drawing of a car. The middle layer contains a billboard of some kind. And the bottom layer contains a gradient color which sort of mimics the ground and sky. Before we can tween an object we must first convert it into a symbol.  A symbol is basically a reusable library object. Once a drawing is part of your library it can be reused throughout various parts of your animation without having to draw it again. But we will get further into that later on. To select an object on the stage, if that is the only object within a layer you only need to click on the actual frame and all items inside that frame will become selected. You can also lock all other layers to avoid accidentally selecting them and use the selection tool to draw a box around the item you wish to select.

Once your object is selected, you can go to your menu bar and select Modify > Convert to Symbol… or you can simply press the F8 function key on your keyboard. I highly recommend getting accustomed to using the hot keys as they will dramatically improve the speed and efficiency when performing these type of actions.
When the convert to symbol dialog box pops up. Give your object a name, select a symbol type, (in this case a “Graphic Symbol”) and adjust adjust your registration point. Once this is all set, press the OK button to continue. Now that the object is part of your library you can use and reuse that symbol as many times as you want within your work without having to re draw it all over again.

We will get into reusing symbols in a later lesson. In this case we simply move a single instance of the car symbol to the left had side of the screen just outside of the stage.

Next we will right-click on frame 60 and from the context menu select “Insert Key Frame”. This action basically duplicate the contents of the that cel on frame 1 over to the cel on frame 60. While I’m still on frame 60 of my sequence, I then drag the car over to the other side of the stage.

Note: Holding down the Shift key on your keyboard while dragging an object will allow you maintain the object aligned as you move it. Next, right click on any frame between 1 and 60 (on the car layer) and from the context menu select “Create Classic Tween”.

It is also a good idea to right-click on frame 60 of both the Sign and the Background layers and from the context menu select the “Insert Frame” option. This will extend the exposure of those two key frames all the way to frame 60. You should, at this point, have something that looks like like the animation below.

You can add a motion guide layer to the “Car” layer by right-clicking the name of the car layer, and selecting “Add Classic Motion Guide” from the context menu.

A motion guide layer allows you to draw a line using the pencil tool, and have your tweened object follow that path. Once you draw your line, make sure you have the snapping option enabled in your tool panel. And snap the graphic symbol on each of the two key frames to the respective end of the  line. You should now have something that looks like the animation below.

Notice how even though the car now follows the path that we drew, the way it moves is still not quite convincing. One of the options in the properties panel for a selected tween is the ability to orient the object along the path.

Note: The properties panel can be hidden and displayed using the Ctrl-F3 keyboard combo.

Launch the properties panel and make sure to highlight any frame in the timeline within the two “tweened” keyframes. This will display the properties available for that tween. Once the Properties Panel is displayed, make sure to place a check mark on the “Orient to path” option. The result of this is as follows.

Lastly you may want to play around with the “Ease In” and “Ease Out” options in the properties panel to adjust the timing at which the animation is performed. Keep in mind that the less frames that are drawn to perform a sequence, the faster the action takes place. The more frames you use to create it, the slower it will be. When you put that into practice you should note that as an object gains speed, that motion should be drawn with less drawings at the start of the action,  and gradually with more drawings towards the end of the action. The same goes for the other way around. The ease in/out option in the propperties panel helps to generate such results and give your movements a bit more realism. As a final tweak to this animation, we will add two more key frames. One at frame 20 and one at frame 36 which are key points in the sequence.

Having done this allows us to select the first segment of the sequence and have the car ease in to that dip on the road, slightly gaining speed as it gets to frame 20. From frame 20 to frame 36, the car is climbing a dirt mound, so we want it to lose momentum as it gets higher ans so it will “ease out” as it get to the top. Finaly, the car is at the top of the mound and once again hurls downwards. We will want to add some easing-in to this section as well.

The final result will look like this.