In Flash, it's not necessary to draw every frame of an animation.
You can define the content in the beginning and ending frames, and Flash will create all of the frames in between. This is called tweening.
Motion tween allows you to apply smooth motion and transform effects, such as scale, position, rotation, and skew, to symbol instances (movie clip, graphic, and button) and text fields.

Some characteristics for Motion Tween:
- Not allows frame scripts.
- Treats framespan as a single object that you can stretch and resize in the Timeline.
- Can apply only one color effect per tween.
- Allows animation of 3D objects.
- If Motion Tween is applied to a non-symbol or text object type (editable shapes, images and groups), will convert it into a Movie Clip symbol.

Creating animation with Motion Tween

First step in creating an animation with Motion Tween is to convert into a Symbol the object you want to animate.
You can tween position, scale, rotation and other transform effects applied to symbols instances and text fields.
You should have only one object on the Stage when you apply the tween.
After you add a Motion tween to a Layer, Flash changes it to a tween layer, which you can no longer draw on. A tween layer can contain tween framespans, static frames, and actions.

- In the next example we create a simple Motion Tween animation.
  1. Open a new Flash document, select the "Oval Tool", and draw an oval in the left side on the Stage.
  2. Make shure the oval is selected, and convert it into a Movie Clip symbol (by click Modify -> Convert to Symbol, or F8; choose the Movie Clip type and click OK).
  3. With the oval selected (which now is a Symbol Instance), click Insert -> Motion Tween.
    - Flash converts the Layer containing the tweened object to a "tween layer" and creates a tween span in the layer, with an equal number of frames set to FPS (default 24).
    - The Playhead is moved to the last Frame (Frame 24).
  4. To change the length of the tween span, drag either end of the tween span in the Timeline.
    So, place your mouse on the margin of the last frame Tween (when it gets the appearance of a double arrow) and drag the margin line to the cell 40. This increases the number of frames (and the duration time) of the animation.
  5. Choose the Selection Tool, drag and move the oval to the right side on the Stage.
    - Notice the dotted line that appears between the starting position of the oval and its place on the last frame. This is the motion path.
  6. In the last frame of the animation, click on the oval to select it, open the "Properties panel", then from the Style list options (in the Collor Effect sub-menu) apply a color effect, for example Tint.
  7. Now we'll change the Motion path. Click on an empty area on the Stage to have nothing selected. Place the mouse cursor over the dotted line (next to the cursor appears a curve line), click and drag to create a curved path.
    - Press Enter key to see the result.
  8. Now we'll move the motion path. Click on the dotted line to select it (becomes slightly thicker), then click and drag the line.
  9. Now we'll resize the path. Select the "Free Transform tool", click the motion path, and then drag a resize handle.
  10. Use the Free Transform tool to resize the oval tool (click on it and drag a resize handle).
    - Press Enter key (or Ctrl+Enter) to see the animation.
- You can watch this example in the presentation below:

Animation Motion Tween

- You can download the FLA file with this example from -> Animation Motion Tween.

Editing Motion Tween Animation

1. Edit the Motion Path

- There are various ways to change a motion path: - All these methods will create a curved path. If you want to create an angled path, follow these steps:
  1. In the Timeline, click on a Frame where you want to create the angle of the path.
  2. With Playhead on that Frame, click the object on the stage and drag it (or change the values of X and Y in the Properties panel).
    - The Frame is converted into a Keyframe.
This can create an angled path like in the image below:
Angled Motion Path

2. Moving the Motion Path

- To move the motion path as it is, click the Selection tool, click the motion path, then click and drag the path.

3. Creating Keyframe

- A keyframe created in the middle of a motion, becomes a control point where the object and the motion path can be changed.
To create a keyframe in the middle of a motion tween, click on the Frame you want to convert into keyframe, then change the pozition or the size of the object on the Stage, or apply a Color efect to the object (from the Properties panel), Flash create a keyframe in that Frame. Then you can return the object to its initial settings.

4. Adding curves to motion path

To create a curve in a motion path, just click and drag any line segment on the path (when it isn't selected).
A curve is created between two keyframes, so if you want to make multiple curves in a path, you need to create the keyframes. For example, to create two curves like in the image below, you need to add a keyframe between the first and last motion frame, then drag the line on both sides of the keyframe.
S-Motion Path

5. Copying and Pasting a Motion Path

- Here's a motion path nice trick. You can draw a line and then paste it into your tween, to become the motion path. You can't draw directly in the tween, so you need to draw the path in a separate layer.
  1. Draw a line using either the Pencil, Pen, or Line tool (in a Frame from a separate Layer).
  2. Select the entire line, and then press Ctrl+C (or click Edit -> Copy) to copy it.
  3. Click on a frame in your Tween, then press Ctrl+V (or click Edit -> Paste in Center)
The new path (the line you drew) replaces the old path (as it's shown in the picture below). It uses the same starting point as the original.
Drawn Path

6. Select and copy frames

To select multiple frames in a framespan tween, hold down the Ctrl key, click on a frame and drag till you select the frames you want.
To copy the selected frames, right-click on them, and choose Copy Frames. Then, right-click on the frame where you want to add the copy, and choose Paste Frames.

7. Copy keyframe properties

To copy the properties of a keyframe to another frame, select the keyframe (Ctrl+click), then right-click on it and choose Copy Properties. Then, select the frame in which you want to add the properties, right-click on it and choose Paste Properties.
Will be copied the properties: Position, Rotation, Scale, Skew, Color Effects and Filtres. If you want to copy only some of them, paste them with Paste Properties Special (Flash will open a dialog box with options to select each property).

8. Reversing the animation

- To reverse an animation, right-clik on one of its frames, and choose Reverse Frames. The first and the last keyframe will change places.

9. Frame Tween properties

When you select a keyframe in the tween span (Ctrl+click on it), a number of options appears in the "Properties panel". These options are different from object properties, and apply effects to the animation.
Frame Tween properties

Flash has a special panel, called Motion Editor. This panel (dislayed in the image below) can be opened from Window -> Motion Editor. It appears next to the Timeline.
Motion Editor
The Motion Editor panel allows you to view and edit all tween properties and related keyframe properties. When you select a tween space, a tweened object, or motion path, the Motion Editor panel displays tween property values in categories and a grid with a graph for each property.

You can apply Motion Tween to one Symbol instance only.
If you want to animate with Motion Tween another instance, create a new Layer, add the symbol instance in one of its frames and create the second tween animation.

Daily Test with Code Example

Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
Click on the "echo" correct instruction.
echo "" echo ""; echo """;
echo "Address URL:";
Motion Tween - Flash Animation

Last accessed pages

  1. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (19916)
  2. setTimeout and this with bind() method in JavaScript class (1316)
  3. Contact page - CoursesWeb (36725)
  4. Tabs effect with CSS (37362)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (44327)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2279)
  2. Contact page - CoursesWeb (2184)
  3. Tabs effect with CSS (2172)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (882)
  5. PHP getElementById and getElementsByTagName (793)