Unit 13. Motion Animations (II)

Animation of Texts

Certainly, in most cases, images or icons are insufficient to convey some message, and the text receives great importance. However, one has to be careful with the animation of the texts, since it turns out to be quite difficult to read a text that moves or changes it size.

    For this reason, an animated text would have to be only in the presentations or to be a part of a short animation and, the most important is that it wouldn't have to be playing infinitely.

    Multitude of effects are used in the presentations that we will see further on. Nevertheless, with the help of what we have seen up to now, interesting effects can be obtained. One of the most used options is to separate the letters of texts and to animate them independently.

    Here you have an example of a simple presentation of text using this technique.

    If it isn't clear how to make an animation we recommend you to do the Exercise Animating Text by Blocks. 

Animation of Lines.

  A good animation hasn't to be composed only of spectacular texts or images. Sometimes it’s convenient to simplify the movie or to add certain effects that make it showy without overloading the movie with visual effects, and as far as the size of the file is concerned. 

We can obtain this just animating lines and making them move through the stage. This technique allows us to give dynamism to the animation or to create different shapes throughout its duration.

They are specially useful and showy in dark backgrounds and usually are used to form rectangles that take advantage of inserting images.

At the right we can see an example of this type of presentations.

To create an animation like this you will have to create as many layers as line animations you are going to include. In the example we have created 4 layers.

One of them is for the lines which moves upwards, the other one for the downwards, and so...

Also we will create a layer that will be placed on top and where we will insert the images that perform the welcome message.

How it works is simple, we should create motion interpolations for each of the layers. For each of them we will place the lines in its opposite side in the final frame.

In the Images layer we will create animations that will display the welcome message, in the first frames we will show the fist part of the message. Then, later, we will hide this part and show the second. And making it disappear, we will show the last part.

Tip: If you want to add a background, do it in a new layer, and place it at the bottom, so it doesn't cover the rest.

Here we show the way of creating an animation of this type.

Tweening by Motion Guide

  Previously we've seen how the motion tweenings moves Flash symbols in a straight line. Since this supposes a certain limitation Flash 8 includes motion Guide.

     A motion guide is an special layer that sets a trajectory for the symbols of the affected layer, so that these symbols follow it, during its motion. This layer is invisible during the reproduction and allows one to draw any type of vector drawing, that will allow us to create not neccessarily a rectilinear movement.

Creating a movement by this technique is quite simple, it is enough to create a tweened motion in a layer, select it (we must do this to avoid that the guide is associated to another layer) and create a guide layer.

Place the symbol of the last frame at the end of the layout made previously in the guide layer. It is not necessary to place them at the beginning of the layout since Flash does it automatically.

     We see, as the layer is associated with the guide, it appears below and aligned to the right.

To create a guided motion tween is easy. first you will have to create the tween, for this:

1. Create a keyframe pressing F6 and insert in it the symbol you want to move.
2. Create a new keyframe to set the length of the animation.
3. Select all the frames in between and right click on one of them. Select the option Create Motion Tween.

Once created the tween, select the layer an press the Add Motion Guide button . A new layer (associated to the latter) will be created.

Now the procedure is simple. Select the Pencil tool and draw in the Guide Layer the path to follow for the symbol.

When finished, select the last frame of the motion and place the symbol on the final point of the guide. Remember that the symbol MUST be in touch ALWAYS with the guide line.

Here it is shown how make it.

We can see a more flashy effects than the one that we made with the simple tweening at the beginning of the theme.

You can test your knowledge by doing the:

  Unit 13 Test.