Motion Tweening

What is tweening?
One of the very basics of Giotto animations is motion tweening; it is a method by which you
can easily create animations without the need to draw each and every frame in an animated
sequence as required by traditional animation tools. As we said before, animation requires the
creation of a series of frames showing the gradual movement or change in the scene and then
moving through these frames quickly to create the illusion of movement. There are three
types of tweening in Giotto:
Motion tweening: You can use motion tweening to mimic movement by only creating the
first and the last frame of a given animation, Giotto will do the rest by inserting frames in
between needed for an object of animation to travel from point to point. By using this tool
you can animate the movement of an object on all three axis of space.
Shape tweening: You can use shape tweening to make the object of animation change its
physical properties. All you need to do is to provide Giotto with an object, designate how it
will look like in the end and Giotto will do the rest. Basic shape tweening is covered in
tutorial 1.32.
Shape morphing: You can use shape morphing option to create a morphing effect between
two separate objects. All you need to do is provide Giotto with one starting object and with a
separate object that you want the first one to morph into. Giotto will calculate and create the
morphing sequence. Shape morphing is covered in the advanced tutorials (TO BE ADDED).

How do I use motion tweening?

Lets try and make simple motion tween of one animation object entering and exiting the
animation stage.

In Giotto create a new empty document (Ctrl+N).

Select Oval Tool (O) to draw a circle right of the stage in the gray area.

Select the circle using the Selection Tool (V) note that the object is now covered
with a net of white dots, this shows that the object is selected.

Optionally you can convert the circle shape into a symbol by clicking F8
(Modify/Convert to Symbol). This will open Insert into library panel where you can
name the symbol and decide whether it will act as a separate movie clip or a button.
For our purposes now we need to make it a separate movie clip.

This will be very useful for you in the future because in this way you can make
separate animation from an object that will be stored in a separate file in the Library
for you to use later with other animated objects. For this simple animation, however, it
is not necessary.

If you created a symbol from the object double-click new movie clip that appeared in
your Library.

We will now use the timeline above the stage to create the motion tween animation.

At frame 1. you can see a black dot, it means that this frame is a keyframe. Keyframes
here will represent target destinations for our object of animation.

Right-click, for instance, on frame 40. You will open a drop menu with various
timeline options.

Now click Insert Keyframe option.

You can now see that there is another dot on the frame 40 and that frames between 1
and 40 are now shaded gray.

Now click on frame 40 (if it is not selected already).

Your circle is still in its original position. Use the Selection Tool (V) to drag it on the
other side, left of the stage.

You have now determined the finish position of the circle. All you need to do now is
to animate this movement.

Right-click anywhere on the gray strip between frames 1 and 40. From the drop menu
choose Create Motion Tween.

Now the gray strip has turned blue and there is a straight line on it this means that
motion tween is in place.

You can now test your animation by clicking on the first frame and then pressing
Enter on your keyboard, or you can test it in an external player by pressing Ctrl-Enter.

Your animation should now look something like this.

You can save your animation in a vgd format as a Vectorian Giotto Document or
export it as a swf movie file.