Flash CS6 motion tweening tutorial

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

THIS IS REALLY NOT DONE YET - It's just a copy of the CS3 stuff - please wait a bit ...

<pageby nominor="false" comments="false"/>

Overview

Motion tweening means motion animation with interpolation.

Learning goals

Learn about basic motion animation, i.e. move an object from A to B, to C ...

Add some simple shape transforms to the animated object

Learn how to to frame-by-frame animations with embedded movie clips.

Prerequisites

Flash CS3 desktop tutorial

Flash layers tutorial (first part)

Flash drawing tutorial (at least some of it)

Flash frame-by-frame animation tutorial (not absolutely needed, but probably useful)

Flash motion interpolation overview

Moving on

Flash shape tweening tutorial

Flash animation summary

After that you should be ready for interactivity. E.g. do the Flash button tutorial

Quality and level

This text should technical people get going. It's probably not good enough for beginners, but may be used as handout in "hands-on" class. That is what Daniel K. Schneider made it for...

It aims at beginners. More advanced features and tricks are not explained here.

Materials (*.fla file you can play with)

http://tecfa.unige.ch/guides/flash/ex4/motion-tweening-intro/

Introduction

Wikipedia, retrieved May 28 2009 defines tweeing as “Inbetweening or tweening is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings between the keyframes which help to create the illusion of motion. Inbetweening is a key process in all types of animation, including computer animation.”.

In this tutorial we will introduce Flash CS4/CS5 motion interpolation. See also Flash animation overview and the Flash classic motion tweening tutorial

Motion tweens are applicable only to instances of symbols and text fields. All other types of objects are wrapped into a symbol when interpolation is applied to them. We suggest that you should not let Flash do this, i.e. think ahead and and transform drawings into symbols beforehand.

A symbol is a graphic, a button or movie clip created in Flash and that is reusable in the same document or in others. Each symbol that you create or use is inserted into the library (library). The symbol itself is never used directly in an animation, you must create an instance. In practical terms this means that you must drag the object from the library on the scene, then give it a name as discussed below. For a programmer, a symbol represents a kind of class (ie a generic object). To learn more, read Flash embedded movie clip tutorial

You only can interpolate one single object (instance). You later can replace an object by another, but there can never be two different objects in a motion tween. Of course, you can add other layers if you want to create animations with multiple objects.

When the interpolation includes a trajectory, a "motion path" will appear on the stage. This path shows the position of the object in each frame interpolation. You can change in each frame, the interpolated position of the object. To do so, just drag the object to another position. This will create new keyframes and therefore modify the path.

Finally in each keyframe (starting, ending and those that you added), you also can transform other properties of the object, for example: size, rotation, tint, 3D position etc..

A traditional Flash desginer, creates all animations in the main timeline (scenario). The scenario will then be divided into sequences, called scenes. A modern Flash developer rather would tend to place individual animations within a symbol of type "movie clip" and then place those clips in various frames for example. A movie clip symbol can contain its own timeline (scenario) and therefore nested symbol instances, which in turn can be interpolated in their own script. For example: you could create a movie clip called "bird animation. In this movie clip, you could create a moving object ("bird") which in turn would flap its wings. These wings are are again symbols embedded at a third level and we will have a the following hierarchy: Bird animation -> Bird -> Wings.

Create a simple motion tween

Let's now look at an example:

You can download the following file that already contains the objects

• flash-cs-4-motion-tweening-empty.fla

Solution:

• flash-cs-4-motion-tweening.html (already admire the result)
• flash-cs-4-motion-tweening.fla (the solution, do not cheat

!)

Step 1: Prepare the object to animate

Important: Each object must be interpolated in a different layer and that object must be a symbol.

If you do not have symbols in your library, this is a procedure:

(1) Create a new layer

(2) In this layer, draw a picture using any drawing tools, images etc.. you want.

(3) transform the drawing into a symbol. If you do not, Flash will do it for you and not necessarily the way you like. So even if Flash provides all sorts of help to unite the selected objects and to create layers for each symbol, do not let Flash do that work for you! To create a symbol which will be placed in the library and create a instance on the stage:

• In the layer with your drawings select all objects on the stage. Then right-click and Create Symbol. Select "Movie Clip" because this type of symbol is the most powerful.
• Make sure it is no unwanted object in the scene for this layer. If you want to create a symbol from drawings that extend over many layers, the procedure is the same, just make sure that you only select wanted elements.

Step 2: Create the interpolation animation (motion tween)

First select the object (symbol instance) on the stage

Then do one of the following:

• Menu Insert> Motion Tween
• Right-click (Windows) or Ctrl-click (Macintosh) on the object or the current "frame" and choose Create Motion Tween.

In the following screenshot we show how to add a motion tween (motion tween) to an "Raising Sun" symbol of the "Sun" which is in the library.

Right-click on the sun, then Create Motion Tween

Flash now creates a motion tween span with an interpolation of 24 frames (default). Span refers to the range of the interpolation, from the beginning to the end. By default 24 frames (i.e. one second at a frame rate of 24 FPS).

Step 3: Create the motion path

The control (slider) in the timeline (scenario) was placed in the last frame. Now move the object to a new position. A motion path (trajectory) appears on the scene. The motion path shows the trajectory of interpolated images during the tween span. For now we see just a straight line that connects the first frame to last. You can change this interpolation path to create a more interesting one.

Once done, you'll see this:

In the last frame, the sun shot into a new position

To see the object moving along the route:

• Move the control (rectangle) in the red timeline to the left and right
• Or already view the results : Press CTRL-Enter (or menu Control-> Test Movie).

Notes: If the object is not "tweenable" object, or if multiple objects are selected on the same layer, a dialog box appears. The dialog box allows you to convert the selection to a movie clip symbol. If the object to be interpolated is the only item in the layer, Flash will add the motion tween span to the same layer. If there are other objects on the layer, Flash creates multiple layers, each containing an object an its tween.

• If the original object sits in the first frame of the scenario and the frame rate is 24 frames per second, the span will contain 24 frames. If the original object was present in more than one adjacent frames, the span of the interpolation will spread from first to last frame.

Step 4: Adjust the length and extend the other layers

To adjust the duration: Drag either end of the tween span in order to shorten or to lengthen the span. You also can move the span to the right or left.

Before doing so, we advise you to adjust the other "layers" to the same length, otherwise the screen does not display background. A simple method: Select a layer with a background, click in the last frame (eg. 24) and press F5. F5 is a shortcut to insert a static frame (ie a frame without drawing). In other words, a static frame simply extends the duration of the first found keyframe left. If you see "white" in a layer, this means that no image will appear. See also the screenshot for step 6, which shows an animation with 2 layers for the background ("Hills and Sky" and a layer to interpolation ("Sun").

Step 6: Adjust the path

Now you can change the motion path using two methods.

• Firstly you can add keyframes (Eng keyframes) for intermediate positions. Select a frame, then drag the object. E.g. you could start by adding one in the middle. A little diamond in the "tween layer" indicates a keyframe. The motion path will change accordingly.
• Then you also can directly make changes to the motion path graph. We suggest you use the select (deselect everything first) or the subselection tool to to this.

Additions keyframes and realignment

Important: If you want to adjust the position of the object in a frame, remember to first click into a frame in the animation layer, otherwise you will do damage elsewhere.

Step 7: Transformations of the object

In each keyframe, you can now make changes. These transformations are grafted onto the object, but does not alter the "symbol" itself. For this reason, using drawing tools will "not work".

To start, we advise you to use two types of transformation:

• Change size or rotation
• Change hue (color effect)

For both, follow these steps:

• Select a frame or a blank keyframe first, then click on the object
• Then change the values in the properties panel (Ctrl-F3 if not already visible).

Alternatively, you can also use the Free Transform tool

Transformations with the properties panel

You also can add filters (bottom panel properties) and finally, you also can add 3D rotations or positions with the 3D Translation tool and the 3D Rotation Tool in the tool panel.

Step 8: Other Adjustments

Animation may be too fast. To slow down, there are several options:

• Decrease the frame rate (fps). Default CS4 use 24. Click outside the stage somewhere and change the fps in the properties panel (FPS: 16 for example). This would give it a more jerky quality (thus try to avoid).
• Lengthen the span, eg 60 frames. Just pull the tween layer and then with F5 to extend the other layers.
• You'll also can see that the sun's movement is not very regular. This is because we pulled into the sun keyframe left or right instead of moving only vertically. Try to adjust this.

The motion editor

The editor allows to move all kinds of operations that are difficult or impossible to do on the stage.

Step 1: Open the Motion editor

• Windows Menu -> Motion Editor
• It is advisable not to fix it within the workspace, because it contains a lot of controls. Pull the panel until you see everything.

Step 2: Adjust the visible frames

• Bottom left: Adjust the "Visible Frames" to a necessary maximum.

Here is a screenshot of the editor and motion which shows our sun example.

The motion editor of CS4

You can, for example:

• Adjust the X position in a keyframe by pulling up or down the control (or by entering precise coordinate)
• Fit a transform, eg size
• Right-click on a keyframe to kill it
• Moving laterally a keyframe in the Timeline

The motion controls of the editor

The controls of this tool are not too difficult to learn. Just know that moving up / down means decrease / increase value. Moving laterally moving means moving in the scenario (timeline).

The motion controls of the editor: Source: Editing property curves with the Motion Editor, Adobe, accessed 30/09/2009

A. Property values (for editing finely ...)

B. Reset Values button (back, takes everything as a group)

C. Playhead (to move in the timeline)

D. Property area curve

E. Previous Keyframe button (keyframe preceding navigated)

F. Add or Remove Keyframe button (add or remove a keyframe). Otherwise right-click.

G. Next Keyframe button (keyframe navigated suvi)

Each property that we can animate has his own graphic in this tool. You can open / close a group of properties to save space and enlarge / reduce the graph. Also, if you click in the properties panel on the left, the display space for the curve will grow.

The motion editor of CS4 - values change

Here is a slightly modified file (and the right state of motion editor). It has smoothed the curve a bit, killed a keyframe animation and inverse size (the sun is now smaller when it is up).

Final Solution:

• flash-cs-4-motion-tweening.html (solution adjusted slightly
• flash-cs-4-motion-tweening.fla

The layout of the animation

Editing curves

We have already seen that we can add a keyframe in different ways:

• Right-click in an empty frame in the timeline. Then select Insert Keyframe and select the type.
• Move the symbol in the layer motion of timeline
• Use the motion editor

To edit the curve of the path, there are several possibilities:

• In the motion layer, go to a frame and move the symbol with the selection or the subselection tool.
• Manipulate the control points of the motion path with the pen tool and the subselection tool.
• Go to the motion editor and move the control points up or down.

With Right-click menu or with Alt-click (Windows) or Command-click (Mac) you can transform corner points into smooth points in vice versa. A "smooth point" smoothed curves. A corner is a corner point without controls for "Bezier" smoothing. Before clicking, be sure that you see a cursor with the small rectangle. Otherwise it does nothing ...

Here is a screenshot of Adobe manual that illustrates this principle:

Controls "Bezier" the motion editor to the transformations: Source: Editing property curves with the Motion Editor, Adobe, accessed 09/30/2009

Replace the path animation

There are two possibilities:

(1) Using Flash Motion presets.

• Open the panel Window-> Motion Presets
• Play with different versions
• Click on Apply (Flash will ask if you want to replace the ancient route)

(2) Copy / paste a line

• In another layer, draw a path, with a beginning and an end and no fills (fills). E.g. use the pencil tool.
• Copy and paste this path into the motion tween layer (then kill your drawing, or put in the library).

Tip: If you want a perfect circle, star, etc.: To the drawing with the Oval tool, polystar.', etc. but without fill. Then use the eraser to a very small incision to obtain a beginning and an end, i.e. a path.

Drawing tool designed polystar

Here is the result of "cutting and pasting" a polystar drawing into the motion tween layer:

Drawing interpolation movement is the tool polystar

Links

• Creating a simple Flash animation by Doug Winnie, Adobe, 2 / 2009
• Animation Learning Guide for Flash CS4 Professional (tip on a series of tutorials / topics)
• Motion tweens (manual chapter "Using Flash")
• Understanding tweens (2:36) (Video explaining the different types of interpolation)

Sour note in French:

• For the moment, there is no official manual in French (October 2009). You can consult the manual for CS3 terminology, but this tool does not exist interpolation CS3. The equivalent of the old "motion tween" CS3 is the "Classic Tween" CS4.
• Interpolated animation (Old method

!)