DustyBones
Owner
Posts : 504
Join date : 2011-02-26
Age : 67
Location : Washington
 |  Subject: Vectorian Giotto Quick Start Guide  Fri Jun 13, 2014 10:57 am | |
|
|
In this section you will see how to make a simple animation in Vectorian Giotto. It also describes some basic but essential terms you have to know if you want to use Giotto effectively.
Animation Basics
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. For smooth appearance, animation requires 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, creating of tween frames and determining how many frames per second (fps) animation will have.
 |  | 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 choose color of rectangle’s outline and fill (interior). This is done from Colors Toolbar, which is initially located just below the Drawing Toolbar.animation By left-clicking the small black triangle just right of Pen label we can choose the color of rectangle’s outline. Similar to that, by clicking the small black triangle just right of Brush label you can choose the color of rectangle’s interior. 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 to be and drag (with left mouse button still pressed). When you release left mouse button a rectangle will be shown on the screen, as seen in the picture. | |  |
 | | 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 on the timeline which shows 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 already selected, select it by left-clicking it on the timeline.animation Now choose Selection tool from the Drawing Toolbar. Both rectangle and oval have green dot shaped markers around them, which means they are already selected. But you need to select only rectangle in order to move it. Left-click white space on the Stage and notice that green markers have vanished. Select blue rectangle by left-clicking it. Now drag the rectangle (without releasing left mouse button) to the bottom right corner of the Stage. This is the final rectangle’s position 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 : | |  |
Left-click any of frames between 2nd and 23rd frame on the timeline. Notice the black marker on the timeline which shows that all future commands will refer to this frame!
Now right-click and choose Create Motion Tween from the context-sensitive menu.
After this, all frames from 2nd to 23rd became tween frames. 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 tweened. Finally, 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. It is possible to set fps in any moment during the animation process and to change that value any time later.
Now you can see how your animation looks like in a built-in player. Left-click the 1st frame on the timeline, thus making it starting frame for animation playing, 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 position of rectangle and oval and how many fps you want in your animation.
| Presented by:
DustyBones
|
|
|
