Animation

Animation is the optical illusion of motion. Animation consists of still images called frames which are displayed sequentially, one after another, in order to create illusion of continuous movement. This is possible due to the way our sense of sight “operates” or, more precisely, persistence of vision phenomenon. There are two types of frames: key frames and tween frames.

Key frame

A key frame is a single still image (frame) in an animated sequence that occurs at an important point in that sequence. Key frame is always drawn or constructed by the user. Key frames are defined throughout an animation and they define crucial points of motion, for example start of a motion and end of a motion. In hand-drawn animation, an experienced animator would draw key frames and beginner animators would draw tween frames (also known as in-between frames). In computer animation, user of an animation program would draw key frames and computer would insert tween frames.

Tween frame

Tween frames actually create illusion of motion. Tween frames are intermediate frames with the purpose of creating smooth transition between two key frames. In order to appear smooth, animation require at least 24 frames per second (fps). For example, you can create only two key frames, one to begin and one to end a movement. Computer program will then create remaining 22 tween frames. The final result would be one second of smooth animation with a little effort from user.

How to make an animation in Giotto?

This section provides step-by-step instructions on how to make a simple animation in Vectorian Giotto. It illustrates creating of key frames, tween frames and determining how many frames per second (fps) will animation have.

First of all, we will set fps. This is done by invoking Modify/Document command from menu or by pressing Ctrl+J keyboard shortcut.  Giotto will open a Document properties dialog where fps can be set. In this dialog we will enter desired fps in the Frame rate field.

Now you will draw one rectangle and one oval (ellipse) on the first key frame. From the Drawing Toolbar, which is initially placed in the left hand side of the Giotto’s window, choose Rectangle tool.

Now you can choose color of rectangle’s outline and interior. This is done from Colors Toolbar, which is initially located just below the Drawing Toolbar. By left-clicking the small black rectangle just right of Pen label we can choose the color of rectangle’s outline. Similar to that, by clicking the small black rectangle just right of Brush label you can choose the color of rectangle’s interor. In this example you will draw rectangle with black outline and blue interior. All graphic media content (vector images, bitmap images and text objects) are drawn on Stage, the central part of Giotto’s window. You will see crosshair cursor. Press left button of your mouse where you want top left hand corner of your rectangle and drag (with left mouse button still pressed). When you release left mouse button a rectangle will be shown on the screen.

 

In a similar fashion, add an oval in the top right hand corner. Oval tool is located just to the left of Rectangle tool. For example, change Pen color to green and Brush color to red. You have now finished the drawing of the first key frame, which is at the same time the first frame of animation.

Next step is adding the second key frame. For example, choose 24th frame on the timeline by left-clicking it. Notice the blue marker showing that all future commands will refer to this frame.

Make this (24th) frame key frame by right-clicking it and choosing Insert Keyframe option from context-sensitive menu. Notice the difference in timeline - frames from 1st to 24th are now marked grey. If the 24th frame is not selected, select it by left-clicking it on the timeline. Now choose Selection tool from the Drawing Toolbar. Select blue rectangle by left-clicking it. Notice 4 green markers in the corners of rectangle. When seeing them you know that you are working with Selection tool. Now drag the rectangle (without releasing left mouse button) to the bottom right corner of the Stage. This is the final rectangle’s postion in animation. In a similar fashion drag red oval to the bottom left corner. You have now finished the drawing of the second key frame, which is at the same time 24th frame of the animation. Your screen should look like this:

Next step is adding tween frames between first and second key frame. Left-click the 2nd frame on the timeline, press Shift and left-click the 23rd frame on the timeline. Frames from 2 to 23 are now marked black. Right-click anywhere on the black line and choose Create Motion Tween from the context-sensitive menu. After this, all frames from 2nd to 23rd became tween frames. Left-click the 1st frame on the timeline. Notice that frames from 2nd to 23rd on the timeline are now marked blue and there is a line with an arrow pointing to 24th frame. This is a visual indicator that those frames are tweens.

Now you can see how your animation looks like in a built-in player. Left-click the 1st frame on the t imeline and click Play button on the Main Toolbar. Your animation is displayed in the Stage. Notice that Giotto has created all the necessary movements for you. All you had to do is to decide beginning and ending postion of rectangle and oval and how many fps you want in your animation.