Animator @ bizineo.com - How to ColorBalloon
Home | About
This tutorial covers the creation of hand-drawn Animated GIF files with a color background.

Creating a Hand-Drawn Animated GIF

Open Internet Explorer or Firefox and enter the following url address in the URL box http://www.bizineo.com and then click on the link to the Animator application. Alternatively you can enter http://www.bizineo.com/animator
Note: You may be prompted to install Microsoft Silverlight. This application requires Silverlight to run.
Bizineo Animator Overview
Pic. 1

Once the application has been loaded (Pic. 1), click on the "Create New Animation Project" icon Create New Animation Project , a dialog window will prompt where you can set the properties of the new project (Pic. 2).

For the purpose of this tutorial do the following:

(1) Since we want to have a color background check the "Color" radio button.
(2) Select "White" color by clicking on the small white box in the color palette.
(3) Select 3 on the "Onion Skin" property. It will allow us to see three frames in the background.
(4) Click Ok.

Create properties window image ratio off
Pic. 2

Next, add a frame clicking on the "Add new animation frame" icon Add new animation frame . Pick a color and brush size. The "Stylus" properties for this tutorial are width=100, height=100, Ink=#990030, and Outline=#FF00FF. Select a place on the right side of the drawing canvas and click. Four our case, by clicking you will be drawing a balloon with the dimension you selected.

Next, add a new frame and repeat the previous step choosing a different location to draw the balloon. The onion skin of the background frames will help you visually where to place the new balloon. Since you want to animate the balloon try to create new ones close enough to have a smooth transition in your animation. Create as many balloons as you please. This tutorial uses 56 frames with a balloon in each frame. Each balloon is located next to the previous one for the purpose of our animation as you can see in the following picture Pic. 3
Note: You can turn on and off the grid lines by clicking on the "Show/Hide gridlines" Show/Hide gridlines icon. Also you can show or hide the onion skin by clicking on the "Show/Hide Onion skin (Shadow frames)" Show/Hide Onion skin (Shadow frames) icon.
Bizineo Animator how to Cuzco overview
Pic. 3
Note: You can draw any shape or scene you like. The purpose of this tutorial is to give you an idea how to draw a sequence of frames to animate.
At this point you can click on the "Start animation" icon  Start animation and test your animation with the different options provided (All, Selected, Stack, Once, Loop, Bounce, and Frequency).

Next, click on the "Export a frame or frames as an Animated GIF file" icon Export a frame or frames as an Animated GIF file The following dialog will appear (Pic. 4)

For the purpose of this tutorial do the following:

(1) On the Type option select "All frames".
(2) On the Mode option select "Stack frames".
(3) Do not change the "Repeat" value. Default is 0 (zero).
(4) Set the "Frequency" to 5 fps.
(5) Click on the "Create GIF" button. Follow the instructions to select a folder and name of your animated GIF.

Export GIF options window all, stack  
Pic. 4

That's all. After following the previous steps you should have an animated GIF file like the one show down below (Pic. 5)

White balloon stack 56f
Pic. 5

Click on the "Export a frame or frames as an Animated GIF file" icon Export a frame or frames as an Animated GIF file The following dialog will appear (Pic. 6)

For the purpose of this tutorial do the following:

(1) On the Type option select "All frames".
(2) On the Mode option select "Stream".
(3) Do not change the "Repeat" value. Default is 0 (zero).
(4) Set the "Frequency" to 5 fps.
(5) Click on the "Create GIF" button. Follow the instructions to select a folder and name of your animated GIF.

Export a frame or frames as an Animated GIF file
Pic. 6

The GIF created should look as the one shown here (Pic. 7)

White balloon all 56f
Pic. 7


Down below are shown a couple of GIF Animations created using the same technique having 200 frames and animated at 60fps. You can compare to the previous ones and see the difference. The more frames you have in your animation the smother the animation. Check it out  "How to Ballons".

Bizineo Animator. Balones GIF animado creado usando Silverlight.
Bizineo Animator. Balones GIF animado creado usando Silverlight.
Virtual Learning Instruments Logo. Provides web based technologies for virtual learning that can be accessed from anywhere providing real-time interactivity offering a new synchronous learning approach.