Classic Tween - Flash Animation

Flash Course

Tweening is an animation technique that creates the necessary inbetween frames based on a starting and ending frame.
- Classic Tween can be applyed only to symbols (movie clip, graphic, and button). If you apply it to other object (editable shapes, groups, and text), automatically converts it into Symbol and adds it in the Library, with the name: "Tween 1", "Tween 2", etc.
- Classic Tween is applied to a single object and allows animation between two diferent colors and shapes.
- Classic Tween alows frame scripts.
- Classic Tween not create 3D animation.

Frame and Instance Properties

There is a difference between frame properties and instance properties.
When you select a Frame in the Timeline or an object on the Stage, their properties are displayed in the "Properties panel".
For example, when you click on a shape on the Stage and select it, the Properties panel displays the options for that shape, but if you click on a Frame in Timeline, in the Properties panel will be displayed the options for animation.
In the image below you can see the Properies panel for a Symbol instance, and the Properies panel with the options for a Frame in a Classic Tween animation.

The options from Frame properties will be applied to animation, while the options from Instances Properties are applied only to the objects on the Stage.

Creating a Classic Tween

A classic tween connects two keyframes, it can be created in three steps.

1. Create the first keyframe with the object you want to animate.
2. In other Frame create a keyframe with the same object.
3. Select the object in the first keyframe, then click Insert -> Classic Tween.

- You should have only one object in the keyframe when you apply the tween.

Let's see an example:

1. Open a new Flash document, select the "Oval Tool" and draw an oval in the bottom-left side on the Stage.
2. Select the "Pencil Tool" and draw a line to the oval (to appear like a balloon).
3. In Timeline, click on the Frame 40, then click Insert -> Timeline -> Keyframe (or right-click on it and Insert Keyframe) to convert it into Keyframe.
   Flash automatically copies in this keyframe the content of the first frame.
4. At the Frame 40, select the balloon (the oval and the line), drag and move it in the top-right corner on the Stage.
5. Click on the first frame, then click Insert -> Classic Tween.
   - Flash displays an arrow in the framespan (between Frame 1 and 40) to indicate that a motion tween has been applied.
   - If you check in the Library panel, you'll see two Graphic Symbols which represents the objects from the first and last keyframe. They were automatically created by Flash.
6. Now the animation is created. To test it directly on the Stage, press Enter key.
7. To add a disappearing effect, click on the Frame 40 and select the balloon. Open the Properties panel, then to Collor Effect sub-menu choose Alpha option from Style list, and give it a value of 9. The balloon became transparent.
   - Press Enter key to see the effect.
8. Now we add an effect from Frame properties. Click on any Frame between 1 and 40. In the Properties panel will be displayed the options for frames.
   To the Tweening sub-menu choose CCW option from Rotate list. This will create a rotation effect.
   - Press Enter to see the result.

- You can watch this example in the presentation below:

Animation - Classic Tween

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

Adjusting Classic Tween Properties

As you can see in the examble above, when a tweened frame is selected, a number of options are displayed in the Properties panel.

1. Ease - With this option you can slow down or speed up gradually the animation, from first to last Keyframe.
   A positive value eases in, a negative value eases out.
2. Rotate - Sets the direction and frequency your object rotates.
3. Snap - Check to snap the object's registration point to a motion guide.
4. Sync - Synchronizes the animation contained in the symbol with the Timeline that contains it.
5. Orient to Path - Use this when you have applied a motion guide layer. This keeps your object parallel to the guide relative to its center point.
6. Scale - Enable it when you are tweening size and reshape changes.

Copying a Tween

After you create a motion tween, you can copy and paste the frames, tween, and symbol information to another Symbol.
- The frames you want to copy and the other Symbol need to be on the same layer.

1. Select the frames in the Timeline with the motion tween you want to copy.
2. Click Edit -> Timeline -> Copy Motion
3. Select the symbol instance to receive the copied motion tween.
4. Click Edit -> Timeline -> Paste Motion
   - To can choose the motion tween properties you want to apply (X and Y position, horizontal and vertical scale, color, filters, and blend), click Edit -> Timeline -> Paste Motion Special.

To reverse an animation, select its frames, then click Modify -> Timeline -> Reverse Frames
To convert into keyframes (or Blank Keyframe) the frames which were automatically created by Flash, select the frame you want to convert, then click Modify -> Timeline -> Convert to Keyframes (or "Convert to Blank Keyframes").
To delete /remove a tween animation, click on one of its frames, then click Insert -> Remove Tween.

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net