Unit 14. Shape Tweening (I)

Shape Tweening

When what we want is not to change the position of an object on the stage, but rather its shape in a progressive way (or both of them simultaneously), Flash provides us the technique of the Shape Tweening, that consists, simply, in transforming the outline of the object created until it becomes just like the outline of another different object.

    Making a shape tweening is very similar to creating a motion tweening. Flash creates intermediary frames in which the shape of the previous frame is slightly varied. We need only two keyframes. And as we did in the previous unit, we'll place in the first frame the object with its original appearence, and in the last frame its desired one.

    This time, it is important to emphasize that in order to make the Shape Tweening to work properly, the involved objects will have to be vector objects (not Flash symbols).

    We must also take into account two points :

1. Separate in different layers the fixed objects and those that will be animated.
2. Place in different layers objects which are going to be transformed with different shapes, since Flash will transform all vector objects from the first frame in those of the last frame of the tweening.

    If we made the shape tweening correctly the timeline will look like this:

    We can consider the frame rate and the number of frames for the shape tweening and any animation done with Flash in the same way as for the motion tweenings.

    If there's some failure in the necessary parameters to execute the tweening correctly, for example, if one of the objects in the layer is a symbol, something like this will be shown in the timeline:

To create a shape tweening you should act as you did with the motion one. Once you have the start and final frames select all the frames in between and open the Properties Panel.

There you should select the Shape option in the Tween list. And you'll be done.

Easy, isn't it?

We can observe how to make a shape tweening by pressing here.

    At the right we can see the result of the previous process.

        We can also make shape tweenings in several phases in the same way as we did it in the previous theme. In this way we can cause that a certain object transforms into another one before taking its final form.

    At the right we can see the previous example but now it is previously transformed into a triangle before taking the square shape.

    We've obtained it just by right clicking the frame 10 and creating a keyframe (Insert Keyframe). Then we must only delete the object that appears on the stage and draw a triangle.

Transforming Texts

   Due to the importance of the texts, it is essential to comment the change of shape to text. Therefore we add one more possibility to make logotypes or showy presentations and to transfer information in a spectacular way.

      Let’s remember that for making a shape tweening it is necessary that the object is of vector type. This it isn't the case of texts that are based on fonts and are created on the base of the ASCII table values and a letter type. In order to solve this problem, we’ll have to previously transform the text into a vector object, or in other words, as if we had edited the outline of each letter with the tool pencil.   

What are the possibilities of this text technique? There are numerous, although it can lead to confusion if it hasn’t been made correctly. For example, we must provide enough number of margin frames to make the transition noticeable.

Also it is advised to give a time so that each shown letter can be visualized and "understood" by someone who sees the movie, because if we don’t do it we run the risk that the animation seems only a rotating pothook.

   One of the possibilities is "to spell" a word as we see on the left. We can verify that only changing the color of the final object also results in a color transition. Observe that when each letter is formed, we keep its image the enough time like as it was previously indicated as necessary.

      In this different example the transition of colors is noticed more clearly and, in addition, we see transitions from shape to text.

When we create shape tweenings and we want to include text, we should act in a special way because a text is not considered as a drawing. So, in order to do this, you should select the frame where the text is placed.

Then click on the menu Modify → Break Apart to convert the text into a group of points. Then you will be abe to create the tween.

Tip: When you apply the Break Apart command on a whole word observe that first the word is broken in letters. You should perform this command again to convert the letters in points.

Here we show how to make an animation of this type.