This is an intermediate level tutorial.
Shown below is an archive file which you will need to
download. You can select the archive flavor of your
choice: Stuffit or Zip. Inside the archive are
two files. One is a master frame in PDF format and the
other is a drawing template in GIF format containing
the shapes of all the frames:
What You Will Need For This Tutorial
You will need a drawing program to create
the frames and an animation program to assemble them.
This tutorial uses CorelDRAW® to create the frames,
but you could also use Adobe® Illustrator®,
Macromedia® FreeHand® or Deneba Canvas.
Once all the frame images have been created, you will
assemble them in an animation program. This tutorial
uses Adobe ImageReady, but you could also use
Macromedia Fireworks or Jasc® Animation Shop
to make the animated GIF file. There are many animation
programs available to do this. Check Royal
E. Frazier's software page for details.
This tutorial assumes that you are already
familiar with basic path manipulation in a drawing program.
If you need practice, you can go to this
page in the illustration section of this site and
download the practice templates then do the drills until
you have enough familiarity with shaping points and
There are ten frames in this animation.
You will first place the GIF template in the drawing
program on its own layer, then create a new layer for
the frames. Then you will open the PDF file and copy
and paste the vector data as frame number one. Then
you will export the frame as a bitmap image. Next you
will copy (or duplicate) the frame and paste it as frame
number two and shape its points and paths then export
it as a bitmap image. You will continue this process
of duplicating one frame to make the next then shaping
its points and paths then exporting the frame as a bitmap
image until all the frames have been made.
When you have made all the frame images,
you will assemble them in an animation program, adjust
the timing of the frames and export the finished animation
as a GIF file.
The Advantage of This Technique
The technique used in this tutorial is
one of the best ways to create animations. By using
a drawing program to create the frames and by shaping
each frame based on the previous one, you can achieve
subtle changes in movement. As you will discover, this
will make a very smooth animation. Also, vector graphics
will render as smooth anti-aliased shapes when exported
as bitmap images (more
here on anti-aliasing).
So let's get started.
Here To Continue...