Computer Animation
What is animation?
According to Webster’s Unabridged Dictionary, animation is the state of being
lively, brisk, vigorous quality. With one click into the Internet domain, one is drawn to
blinking text, waving banners … a lively quality indeed. Such displays of animation are a
result of the technique made famous by Walt Disney in the 1930s. A series of
progressively different graphics on each frame of movie film would play 24 frames per
second. An inanimate drawing of a mouse became a much-loved personality once
animated. The terminology incorporating animation thus evolved from Disney’s efforts.
What is Cel Animation?
The term cel derives from the clear celluloid sheets that were used for drawing
each frame. The series of frames in between the keyframes (first and last frame of
action) are drawn in a process called tweening. Tweening an action requires calculating
the number of frames between keyframes and the path the action takes, and then actually
sketching onto a cel with pencil the series of progressively different outlines. Cel
animation is the traditional method of eight overlapping stages:
· Storyboard (scripting)
· Soundtrack
· Exposure sheet (giant spreadsheet to log sound and direction for
animation)
· Background painting
· Drawing
· Pencil testing· Inking and coloring
· Compositing
Wagstaff (p. 147, 1999) recommends for low-end cel animation WebPainter, a
simple cel animation tool for the Macintosh that provides capable onionskinning and
painting tools. It can quickly add and delete frames in a window and quickly switch
onionskinning to show previous or subsequent frames. The other cel animation paint tool
for Windows called ProMotion is not as simple to use according to Wagstaff.
What is keyframe animation?
Keyframe animation programs eliminate many of the traditional steps. The
keyframe tools offer automatic inbetweening – that is, you set up the key frames, and the
program calculates and generates the inbetween frames for you. These programs are
primarily used to animate the elements of graphic design: type, photography, and
individual pieces of hand-drawn art. Many of these programs also work well with frames
of video and film. Macromedia Director and Macromedia Flash animate one frame at a
time when they work with hand-drawn cels, or they generate inbetween frames for
objects moved from point to point or rotated. ( p.119)
What is computer animation?
Computer animation follows the same format by filming a sequence of painted
cels then using layers, keyframes, and tweening techniques. Layers provide the capability
to place one image on top of another and to allow all or part of the underlying image
show through. This capability allows you to maintain registration between multiple
frames of animation and to see how various images in an animation go together.
Registration is a crucial concept in animation. Registration points let you know whetheryour layers are aligned. When you work with Adobe Illustrator, Macromedia Freehand,
or another program that support layers, you can copy and paste the registration point into
every layer in the drawing so that the points exactly overlap. (Vaughn p.156, 1998) On
the computer, paint is most often filled or drawn with tools using features such as
gradients and anti-aliasing (soft gray edges that make lines appear smooth). The word
inks, in computer animation terminology, usually means special methods for computing
RGB (red, green, blue) pixel values, providing edge detection, and layering so that
images can blend or otherwise mix their colors to produce special transparencies,
inversions, and effects. (p. 325)
Animation using Macromedia Dreamweaver
Dreamweaver is a Web-page design tool that allows users to animate elements of
pages with graphical interface. You set up a timeline reminiscent of the timelines in
Director and Flash. You can quickly set up animation of an object by setting values such
as scale and position on the timeline as keyframes. Here is how you create a simple
DHTML (combination of HTML and Java scripting) animation in Dreamweaver:
1. Open a new document
2. Place an image on the page by clicking the Insert Image button and choosing a
file in the file dialog.
3. Choose Insert/Layer to create a new layer in the document. This layer appears as a
bounding box with a marker and a position handle. If you click with of these
objects, control handles will appear around the layer, indicating that it is selected.
4. Drag the image into the layer box to add it to the layer.
5. Select the layer in the Timeline window.6. Choose Modify/Add Object to Timeline. This command inserts a control track for
the layer into the timeline.
7. Drag the final keyframe of the layer’s control track left or right to adjust the
duration of the animation.
8. Select the final keyframe of the layer’s control track, grab the position handle of
the layer, and move the layer across the page window. This step sets the position
of the layer at the selected frame in the timeline. A line indicates the animation
path.
9. Select a point on the timeline halfway between the first and last keyframes; then
move the layer again to set its position at the new point in time. This step creates a
third keyframe, and the animation path changes to curve connecting the three key
positions.
10. Save the page in HTML format.
11. Open the page in your browser, which should be Netscape or Internet Explorer.
(Wagstafff p.444-450)
Animation using Director
In Director, you can create animations that are highly interactive and that take
advantage of advanced programmatic controls created with Director’s scripting language,
call Lingo. To build a project – called a movie—in Director, you begin by importing or
painting cells of animation into a cast. Then you place the cast members on a stage as
sprites, which you can animate by tweening or by cycling through consecutive cast
members. You control sprites with a spreadsheet-like timeline called the score. Finally,
you give sprites behaviors by using the Lingo language to attach programs called scripts.Director can also be used for traditional cel animation,which may not be as
compacts as tweened animation but can be much more graphically interesting and
pleasing. There is a command, Cast to Time, that makes a series of cast members animate
over time. Select all the cels in sequence then choose the Modify/Cast to Time command.
The cels are automatically compiled into a single sprite on stage. This sprite can be
animated using automatic tweening. This sprite can be animated as many times as you
like.
On the score, each layer of animation is given its own track, and as the animation
plays, all the tracks with any action play along. When one frame of the script track or one
of the sprites has a behavior attached at a particular frame, the behavior executes when
the needle arrives at that point in time. Each column of the score represents a frame of
action; each row is an actor, script or event.
Shockwave animation
Shockwave is Macromedia’s collection of compressors and run-time player plug-
ins for delivering to Director, Flash, and Authorware projects over the Web. To create a
Shockwave animation in Director one must first install the Shockwave plug-in in your
browser. Follow the following process:
1. Launch Director
2. Choose File/New/Cast to open the New Cast dialog, and name the cast
example.3. Click the first frame in the cast and choose File/Import to open standard file
dialog.
4. Navigate to the example folder and choose Add All.
5. Click the import button to add all the frames to the cast. Notice that Director
automatically imports the frames in proper order if the files are numbered.
6. In the Cast window, Command+click all the cast members that make up the
cels of the animation (right click in Windows) to select them all.
7. Choose Modify/Cast to Time. The cast members are placed on stage in a
sequence as a sprite. The cast members also appear on the first timeline in the
Score with a duration equal to the number of frames in the new sprite.
8. Click frame 0 in the score to move the time pointer to that frame; then select
the sprite on the stage and drag it to the left side of the screen.
9. In the Score, click the last keyframe for the sprite (represented by a small
vertical bar) and then drag the sprite to the right side of the stage. This step
changes the position of the sprite at that keyframe so that the sprite animates
across the screen.
10. Click Play in the Control Panel to preview the animation.
11. To adjust the timing for the animation, drag the last keyframe for the sprite
from frame 10 to frame 60 in the Score. This step stretches the animation to
take more time.
12. To add a behavior to the sprite, choose Xtras/Behaviors to open the cast of
preset behaviors. You can drag and drop behaviors onto the objects to apply
them. For this example, choose Frame: Hold on Current and drag to frame 60
in the script track of the Score.13. Play the animation again to see the effect of this behavior. The timeline and
the animation should play smoothly all the way to frame 60 and then stop.
14. Add a user input behavior to the sprite. Drag the behavior Frame: Go to /Play
Number to the sprite’s timeline in the Score. A small dialog box opens,
allowing you to specify parameters to the behavior. Enter 1 in the Frame box,
choode Initializing Event: MouseUp and Play Mode: Go to, and click OK to
accept the changes. Now, whenever the movie is playing or paused, clicking
the sprite causes the movie to jump to frame 1 and begin playing again.
15. To make the movie play with sound when the viewer clicks the sprite, drag
the behavior Sound: Play Member onto the Score. In the behavior’s dialog
box, choose the cast-member sound file to play.
16. Play the movie. Notice that when the movie pauses at the last frame, you can
click the sprite, and the movie jumps t frame 1 and begins playing again. Any
time you click the sprite, the sound plays also.
17. Choose File/Save AS Shockwave Movie to save the movie in Shockwave
format.
18. Drag the Shockwave movie to your browser’s window to preview it. The
movie should start playing. (p.379-383)
Animation using the computer is like a front door to Web sites. Simple animation
is easy to accomplish and can add a lot of visual interest. Listed below are products to
include in your animation library:
· Pacework’s Object Dancer: specialize in animating text.· Adobe After Effects: powerful text on path plug-in that works with all the
other features of the professional animation tool.
· QuickTime Virtual Reality: images you can “walk” through using your
mouse.
· 3D Images: images created in three dimensions that can be rotated and
viewed from any angle.
· Shockwave: combines animation, sound, and interactivity.
· Java: programming that creates applications that can run from within the
web site.
· JavaScript: scripts, or small programming sequences, that can make
certain actions take place.
· ActiveX: programming that creates and allows interactivity within the web
site.
· Database interaction: the browser creates web pages “on the fly”, calling
upon changing information in a database and combining that information
with designated graphics to create a page that reflects the latest possible
information.
· GIF89a: with Version 2.0 of Netscape Navigator, Netscape implemented
an animation feature of the final 1989 revision “a” of the GIF (Graphics
Interchange Format) specification. It is possible to make simple
animations by putting multiple images or frames into a single GIF89a file
and display them with programmable delays (in 100ths of a second)
between them. When you use the
![]()
tag to embed a GIF89a
multiframe image, Netscape Navigator will download the file and store it
in the cache folder pf your local hard disk. Once fully downloaded, theimage will play each frame quickly and smoothly. Limit animated GIFs to
small images, and use a more capable plug-in for animations over larger
areas.
The variety presents a challenge to the animator. The golden rule is to keep animation
simple and don’t overuse it. The effect is to be lively not repetitive.
References:
Hubbard, J. & O’Connell, K, Computer animation, Microsoft® Encarta® Online
Encyclopedia 2000
Vaughn, T. (1998) Multimedia: Making it work. Berkely, CA: McGraw Hill.
Wagstaff, S. (1999) Animation on the web. Berkeley, CA: Peachpit Press.
Animation sites:
http://www.visualcities.com.
CNET : Search results for computer animation
Found 30 Displaying: 16-30
Ray Dream Studio 5 to Offer Powerful Design, Animation Capabilities [PC World]
July 5, 1997 – Fractal Design today announced a new version of Ray Dream Studio Version 5, its 3-D design and animation
software for artists. The new release promises to bring ...
Ray Dream Studio 5 to Offer Powerful Design, Animation Capabilities [IDG.net]
Fractal Design today announced a new version of Ray Dream Studio Version 5, its 3-D design and animation software for artists.
The new release promises to bring ...
Lines drawn over Web animation [IDG.net]
IDG, October 19, 1998 – GifBuilder may be shareware, but it's still the most popular Web animation tool for the Mac.
Macworld reports that three software heavyweights -- Adobe, Extensis and Macromedia -- are working to ...Anime
COMPUTABILITY
Computer Animation School
Computer Film Animation
3d Computer Animation
Computer Animation Movies
Animated Computer Graphics
Computer Animation Benifits
Computer Animation Atlanta
1. Computer Graphics and Animation Home . This site is still an ongoing process, and is being worked on almost contantly.The
purpose of these pages is to teach people about computer graphics and animation. These pages
http://www.bergen.org/AAST/ComputerAnimation/
2. Welcome to Pixar's Home Page! Feel free to surf through our company information, our projects, our products and our job
opportunities. Enjoy your visit! TOY STORY 2 WINS GOLDEN GLOBE FOR BEST MOTION PICTURE -
http://www.pixar.com/
3. Kevin's Animated GIFs Page! Last updated 11.08.98 A HUGE collection of Animated GIFs from all over the net
http://www.crosswinds.net/los-angeles/~kevin/gifs.html
4. A Brief History of Motion Capture for Computer Character Animation The use of motion capture for computer character
animation is relatively new, having begun in the late 1970's, and only now beginning to become widespread. Motion capture is the
http://www.css.tayloru.edu/instrmat/graphics/hypgraph/animation/motion_capture/history1.htm
5. JORDI MORAGUES - Computer animation Excerpts and information about my computer animation works, plus useful
resources for the beginner.
http://www.iua.upf.es/~jordi
6. An-amaze-tion Company - Computer Animation for the Industry We are a 3d computer animation and digital audio / video
production house producing only the finest output for the broadcast, film, forensic, architectural, environmental, and
http://www.an-amaze-tion.com/
7. Legal Animation, Forensic Animation, Computer Animation, Scientific Animation, Sigma Animation: An animation
company specializing in technically accurate, high-quality animations and 3D analyses for the legal industry.
http://www.sigma-animation.com
8. animation intro Hi there, and welcome to the ANI TOURS! I'm Toots, and I'll be your guide for the rest of your visit. SO YOU
WANT TO LEARN ABOUT ANIMATION? What? Why, animation of course. The
http://www.art.uiuc.edu/local/anle/ANIMATION/animation_intro.html
9. Spicy Cricket Animation--Hello and Welcome! 3D Computer Character Animation for Film, TV, Multimedia and Games.
http://www.spicycricket.com/hello.html
10. Pineapplehead Broadcast Solutions Pinapplehead is a sports broadcasting, computer animation and web developement
company. Our flagship product is Green Reader VR, a golf course visualisation tool used by channel 7
http://www.pineapplehead.com.au/1. Computer Graphics and Animation Home . This site is still an ongoing process,
and is being worked on almost contantly.The purpose of these pages is to teach
people about computer graphics and animation. These pages
http://www.bergen.org/AAST/ComputerAnimation/
2. Job Listing for a Graphics Artist November 28, 1999 34,900 Jobs Online - HOME -
FOR EMPLOYERS LOCAL- Select a City ---- Atlanta Baltimore Boston Charlotte
Chicago Cleveland Columbus Dallas Dayton Denver Detroit
http://www.careerweb.com/jobsearch/joblist.cfm?JobID=387061&Keyword=animation%2C%20computer%20graphics
3. the 1st Internet Gallery of GIF Animation If you have come from another site,
please notify them that the gallery has relocated to
"http://members.aol.com/royalef1/galframe.htm" for more space. the G allery has R e-
O
http://members.aol.com/royalef/galframe.htm
4. Computer Graphics International Conference in Central Europe on and
Visualization Electronic Visualization Laboratory Army Research Labs - Scientific
Visualization AHPCRC Graphics Software AirForce
http://mambo.ucsc.edu/psl/cg.html
5. QB's Computer Animation & Graphics QB's Computer Animation & Graphics.
Original Artist prepared Animations/Stills 3D Models for all media types - video, print,
games.
http://www.halcyon.com/jpoff/
6. Make Your Own WWW Site - Web Graphics www.Tparents.org - Rev. Sun Myung
Moon, Founder - Gary Fleisher, Webmaster Your www Page (Graphics) Installing Tparents.org Zip files on your web page , How to copy graphics to
http://www.tparents.org/Lib-www.htm
7. Scott's Anime and Computer Graphics Page Scott's Anime Page Sites I sponser
Sasami's Kitchen Washuu's Subspace Laboratory Sailor Moon's Meeting Place
Anime Survey Please Fill Out For Me. Welcome to My page on
http://members.tripod.com/~Kedri/
8. Animated GIFs by Lawrence Goetz Free animated GIFs for your web page.
http://pages.prodigy.com/VDJW65A/gifs.htm
9. Syracuse University AMS-Computer Graphics This Web Server houses faculty and
student projects and facilitates the collaboration between artists and others
individuals located across the Internet. This server is always
http://ziris.syr.edu/home.html
10. Media Link's Free Graphics! All the freebie web graphics here are free for use on
personal web sites only (not to be offered for use or download from your site
however). If you would like to use any of them
http://www.erinet.com/cunning1/tiles.html
*This paper is written by Barbara Harper for the course EDC385G Multimedia Authoring
at the University of Texas at Austin.
Posts
