Animator @ bizineo.com - How to ColorBalls
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) Change the 'Width' to 300
(2) Change the 'Height' to 200
(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
Pic. 2

Next, add a frame clicking on the "Add new animation frame" icon Add new animation frame . Add four balls (same size 30) of different colors and a small ball as shown in the first frame (Fm.1).

Next, copy the frame by clicking on the "Copy selected animation frame" icon  Copy selected animation frame (After copying you are on the second frame). Click on the "Change to Erase mode" icon Change to Erase mode and erase the small ball. Then, click on the "Change to Draw mode" icon Change to Draw mode .  Add another ball a little bigger than the previous one as shown in the second frame  (Fm. 2).

Repeat the last step three times as shown in frames (Fm. 3,4,5). Next, copy frame 5 by clicking on the "Copy selected animation frame" icon  Copy selected animation frame  (you are positioned on frame 6 after copying). Click on the "Change to Erase mode" icon Change to Erase mode and erase the yellow, red, and blue balls. Click on the "Change to Draw mode" icon Change to Draw mode . Draw a yellow, red, and blue balls shifting their positions as shown in frame 6.

Next, copy frame 6 and repeat the previous step.

Your project should look like the one 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.
Fm. 1 Color balls frame 1   Fm. 2 Color balls frame 2   Fm. 3 Color balls frame 3

Fm. 4 Color balls frame 4   Fm. 5 Color balls frame 5   Fm. 6 Color balls frame 6

Fm. 7 Color balls frame 7


Color balls 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

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

Color balls stack
Pic. 5

Click on the "Export all animation frames as a JPEG Image" icon Export all animation frames as a JPEG image . Follow the instructions to save your image. You should have a JPEG image like the one shown (Pic. 6)


Color balls all
Pic. 6


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.