Motion Tween - Flash Animation

Flash Course

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:

• Choose the Selection tool, click away from the motion path, and then drag any line segment on the path.
• Change the X and Y values in the Properties panel of the object.
• Click and drag the object on the Stage

- 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:

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.

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.

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.

• Ease - accelerates or deccelerartes an animation.
  - Ease in (a negative value) means the motion starts off slow and speeds up at the end.
  - Ease out (a positive value) - the object starts by going fast, and then slows down at the end of its motion.
• Rotation - Sets the direction and frequency your object rotates.
• Path - Sets the X and Y position of the tween path, and its Width and Height.
• Sync graphic symbols - Synchronizes the animation contained in the symbol with the Timeline that contains it.

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.

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.

<input type="checkbox" name="a_name" value="value" checked="checked" />

#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}

var rest8_7 = 8 % 7;
alert(rest8_7);

$nr = ceil(3.5);
echo $nr;        // 4