Shape Tween - Flash Animation

Flash Course

Shape tweening lets you create an effect (morph effect) that makes one object appear as though it's slowly turning into another object.
With Shape Tween you can also animate other changes, such as alpha, color, scale, and position, but its main purpose is to transform the shape of an object into another shape.
- Shape tweening must be applied to an editable shape, it can't be applied to a Group or the elements inside it.
- To apply Shape Tween to a Symbol, you must enter symbol editing mode and apply it to the shape contained inside the symbol.
- With Shape Tween you can animate more than just an object over a series of frames.
- If you want to apply Shape Tween to a text, you must break apart the text (Modify -> Break Apart).

Creating animation with Shape Tween

To create a shape tween:

1. Create the content of the first and the last frame of the animation
2. Click on any of those frames, then click Insert -> Shape Tween (or right-click on a frame and choose Create Shape Tween).

Shape tweens look cool, but they create large file size.

- In the next example it's created a simple Shape Tween Animation.

1. Open a new Flash document, select the "Rectangle Tool", and draw a rectangle in the left side on the Stage.
2. Insert a Blank Keyframe in Frame 41 by clicking in the Timeline at Frame 41, and selecting Insert -> Timeline -> Blank Keyframe (or press F6).
   - Flash will create a blank Stage at this frame, and Static Frames between the first frame and Frame 41.
3. Select the "Oval Tool", click on the "Fill Color" and change the color, then at Frame 41 draw a circle in the top-right corner on the Stage and another circle in the bottom-right corner.
   Select the second circle and change its fill color (from the "Fill Color").
   - The content created at Frame 41 is the end of the tween.
4. Right-click on any frame between 1 and 41, and choose Create Shape Tween.
   Now the animation is created. Flash displays an arrow spanning the frames that make the tween.
   - When you right-click, Flash moves the playhead and highlights the frame you clicked.
5. Press Enter key (or click Control -> Test Movie -> Test) to see this animation.

- You can watch this example in the presentation below:

Animation Shape Tween

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

After you have created the shape tween animation, you can create keyframes between the first and last tween frame by right-click on a frame and choose Convert to Keyframe (or Insert Keyframe).
At each keyframe the content on the Stage can be edited, so you can add effects and make changes to the objects (from the "Properties panel") in the middle of the animation. You can use the "Free Transform tool" to change their shape and size.
You can set the Ease and Blend shape tween options, which are displayed in the Properties panel when you select one or more frames in tween span. Also, you can add a sound, from the Sound options. The image below shows the Properties panel with these options:

• Ease - tells Flash to speed up (or slow down) the tween. A positive value makes the tween to speed up at the end, a negative value slows down.
• Blend - has two options:
  • Distributive - smoothes out the tweened shapes.
  • Angular - preserves corners and straight lines in the shape tweens.

- To anulate a Keyframe in Shape Tween, right-click on that keyframe in the Timeline and choose Clear Frames.
- To add additional Static frames in animation, right-click on a frame in the tween span and then Insert Frame.
- Frames are completely delete with the Remove Frames option.

Using Shape Hints

When you are tweening simple shapes: circles, squares, stars, raindrops, the morphing effect is nice and clear. But the more complicated the shapes you want to tween, the harder Flash has to work to guess how to generate the in-between frames.
You ca add shape hints to your tweens to tell Flash which parts of the shape in the first keyframe will transform into which parts in the end keyframe.
Shape hints give you more control over the shape-tweened sections of your animation.

- To add shape hints to a shape tween:

1. Select the first frame of your tween.
2. Click Modify -> Shape -> Add Shape Hint.
   - In the center of the shape appears a small red-circle with a small letter on it (a). The first letter is "a". Shape hints appear in alphabetical order "a, b, c, ...".
3. Drag the shape hint (the little red-circle) to an area of the shape you want to control (see the image below).
4. Click to place the playhead on the last frame of the shape tween.
   - The corresponding shape hint appears as a small circle with a corresponding letter (a) that matches the beginning hint.
5. Drag the corresponding end shape hints to the part of the shape that you want to correspond to the placement of the beginning shape hint.
6. Select again the first frame, and Repeat steps 2, 3, 4, and 5 to create and place Shape Hints on all areas of the shape you want to control.
   - You can use up to 28 hints in one tween. "a" from beginning should correspond with "a" from ending, "b" should correspond with "b", and so on.

Shape Hints must be created at the first frame of a Shape Tween animation.
In the picture below you can see the difference between an animation without Shape Hints and an animation with Shape Hints.


- To remove a Shape Hint, right-click on it and choose Remove Hint.
- To remove all Shape Hints, right-click on any of them and choose Remove All Hints (or from Modify -> Shape -> Remove All Hints).

You should place your shape hints in a consecutive order (clockwise or counter-clockwise direction).
To show all Shape Hints, click View -> Show Shape Hints.

<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