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) Separating in different layers the fixed objects and those that  will be animated.

                2) Putting 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:

    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.

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