|
Home
>> Communication
>> Motion and Sound >> Intro
to moving images and Web animation
Part One: History of Moving Images
 How
is that we perceive motion from a series of still images?
One early explanation was the concept of persistance
of vision. This phenomenon explains how the human brain retains
an image for a fraction of a second longer than the eye actually
sees it. As a result, even though we are actually shown discrete
images very quickly, our brain percieves this as one persistent
image.
The concept of persistance of vision was illustrated
in a number of optical toys that were popular in the 1800's.
The thaumatrope is a disk with a different image
on each side. When the string is wound and then let go, the spinning
disk gives the illusion of both images combined into one static
image.
Other early optical toy technologies: here
and here
 Praxinoscope:
The praxinoscope,
invented in 1877 by the Frenchman Charles Reynaud, was the first
device to overcome the picture distortion caused by viewing through
moving slots (the zoetrope).
The image produced is more brilliant than with any previous devices.
Because of this advance, it quickly replaced the zoetrope in popularity.
How
a praxinoscope works: A band of pictures is placed inside
a shallow outer cylinder, so that each picture is reflected by
the inner set of mirrors. The number of mirrors is equal to the
number of pictures, and the images of the pictures are viewed
in the mirrors. When the outer cylinder rotates, the quick succession
of reflected pictures gives the illusion of a moving picture.
video of praxinoscope: Windows
Media Player | Quicktime
| Real
Player high | Real
Player all
video of praxinoscope theater and zoetrope in action:
George
Eastman house
Motion and Photography: Shortly after the invention of
photography in 1839 came the first early experiments in capturing
motion.
Eadweard Muybridge's 1878 photographs
of horses in motion were first to capture what looked like
the actual, discrete sequence of motions. Muybridge devised the
means of portraying the speed of a horse's running by the action
of several cameras (in this case twelve) set up in a row and arranged
to go off in sequence as the horse ran by. He attached a piece
of string to the shutter and extended it across the horse's path.
As the horse ran in front of Muybridge's cameras the shutters
were released by the horse's movements over the string, each making
an image at 1/200th of a second. The resulting images, when placed
next to each other, showed the horse in what appeared to be continuous
rapid movement.
Frames per second (fps): In order to achieve
the illusion motion, images must be displayed at least 12 frames
per second. Television shows are broadcast at 24 frames per second.
But on the Web, there are file size constraints.
Creating animation on the Web requires considering
bandwidth, platform, and browser issues. Part of the work in making
animation, is deciding what the best format is for your needs.
Part Two: Technology
- Animated GIF
a. GIF89a file format
b. Guaranteed to work across platforms without
a plugin
c. Animated GIFs have large file sizes because
they are composed of "bitmap" images
- Dynamic HTML
a. combines JavaScript, style sheets, and HTML
b. requires programming knowledge, but can be created
with Dreamweaver (advanced)
c. example: 1
. 2
.
- Java
a. programming language used to make "applets"
b. will work across browsers, but requires programming knowledge
c. example: 1
. 2
.
- Shockwave
a. difference between Shockwave and Shockwave Flash
 
b. Shockwave Flash example: 1
. 2
. 3 (what
we will use in class)
c. Shockwave (Director) example: 1
. 2
d. creates a format (SWF) with a low file size-- but requires
plug-in
e. vector
graphics vs. raster (bitmap) images
Part
Three: Design
Good animation comes from good
design. Good design comes from practice and awareness-- spend
a lot of time looking at graphics (both static and animated online),
look at color schemes, what fonts are chosen, and how things move.
Scale and Proportion
Scale and proportion can refer to elements
within the animation or to the animation itself. I have always
found scale on the computer to be limiting, since it's very
hard to create something overwhelming (as you might be able
to do with film) within the confines of a small computer screen.
And, distinct from a darkened movie theater, the computer screen
sits in a room full of distractions (that incoming fax, the
full-blast music, a stark-naked neighbor playing tetherball
outside your window). A good way to deal with these disadvantages
is to turn them to your advantage: perhaps accentuate this problem
by taking the opposite approach and making everything extremely
small.
Unity and Variety
When every object in the animation relates
to a similar object in one unified way, that's "unity."
Variety is the difference between objects. Too much unity can
create boring animations, too much variety can make things too
chaotic. Strive for a well-balanced combination of both with
your animations.
Repetition and Rhythm
Recurring elements in animation can help
with continuity and add emphasis. They can also add a sense
of pace and help people follow the narrative.
Balance
The two types of balance:
1. Symmetrical balance
— the two sides of an object are equally similar. This
kind of balance is easier to achieve and tends to feel obvious,
less interesting.
2. Asymmetrical balance
— dissimilar objects are used to appear equal. This is
harder to create, but tends to be more dramatic and intriguing.
Emphasis and Subordination
By focusing on one object/subject over another,
you show the audience where to look, which strengthens your
animation's message. As we discussed earlier, a number of different
ways exist for achieving emphasis (through color, value, shape,
line, scale, texture, or vectors). Conversely, if you want to
achieve the perception of "sameness," try not to give
emphasis to any one object. This can be particularly effective
when you want to emphasize a lack of variety (suburbia, robotlike
workers, or a chorus line of Storm Troopers).
Contrast
Contrast between objects
adds emphasis and makes things interesting. Common types of
contrast include: dark/light, happy/sad, large/small, good/evil,
textured/smooth. Contrast can also occur in color through hue,
value, and intensity.
Part
Four: Considerations and Tips
- Make sure your animation has a succinct
point or message that you are trying to communicate. How many
"segments" does it take to get your message across?
Work on tightening your message-- most of
the time quicker is better, and you don't want to have some
long winded message that people will lose interest. How many
segments does this banner have?
- The file size of this banner is 140k, almost
6 times larger than we want it to be! It was created in ImageReady
and consits of 27 frames-- too many!
The file size of your file animated GIF is very important--
these files, because they are "bitmap" images, are
very heavy. Therefore, you must be willing to make some trade
offs or sacrifices to your animation so that it is smaller in
size. We will stick to a file size limit of 30k in this class--
this might be difficult, but this is part of the challenge of
creating content for the Web. If you can't stick within these
limits, consider a different design strategy that will compress
better:
The GIF compression algorithm works best with flat fields of
color in graphics instead of subtle gradients like in photographs
or drop shadows--keep the number of colors to a minumum. To
get fewer colors and blends, you're better off working with
illustrations versus photographic imagery.
Reducing the number of frames in your animation will decrease
file size.
- Know the audience: To whom is this banner
targeted? What platforms or browsers are they using? These are
some of the most important deciding factors behind the visual
style you choose and types of messages you create.
- Design Around the Disadvantages
The file-size limitations of GIF89 mean that
you have to use as few frames as possible. As a result, the
motion in these animations tends to be very choppy. The key
is to force this disadvantage to work in your favor by making
it a part of your aesthetic. Consider "cutout" style
animations (à la South Park or Terry Gilliam's Monty
Python animations). You're better off designing with these limitations
in mind from the start, as opposed to creating the perfect animation
and then hacking it up to make it Web-worthy.
- Check it in both browsers and on different
computers
Some versions of MSIE have a tendency to display GIF89s at a
much faster framerate than Netscape. So you should double-check
your animation in both browsers to make sure your message isn't
distorted by the speed differences. Always check the tempo over
a live Net connection — a desktop drag-and-drop doesn't
accurately duplicate real-life usage. Faster CPU processors
will also play back a GIF89 at an increased tempo. Check your
animations on as many different browsers, OS platforms, Internet
connection speeds and CPU's as you can get your hands on!
-
Work with Tempo (how long the animation stays
on each frame)
Pay very close attention to the tempo of
your animation. Play around with the timing until you get the
desired effect. As it does with acting, timing can have an impact
on the way your story is perceived. Fast pacing gives off a
frantic feeling, slo-mo pacing adds a sense of drama, and so
on.
Other Uses and Ideas:
1. You could use an
animated GIF as a background image-- this might be distracting,
but who knows, you might do something clever.
2. Animated GIF as rollover image: You could use
animated GIFs in a rollover image to combine an animation with
static images.
3. A series
of photographs. Note that at 447 K this image can take several
minutes to finish loading on a computer accessing the Internet
through a modem.
Part
Five: Making an Animated GIF
Using
Image Ready
Part Six: Animated GIFs
as Banner Ads
The first law of motion: WHY DOES IT MOVE? Animation
is frequently referred to as the singlemost annoying habit on
the Web. Movement is distracting, it captures your eye and leads
focus to a particular area. The first thing to consider is why
you want to attract attention to a given element. In the case
of banner ads, the purpose is usually to attract attention. However,
too much animation yields the opposite result: annoying graphics
are avoided at all costs. WIth this said, think VERY carefully
about how you intend to incorporate animation in your work.
Looking at Banner Ads
 Standard
Sizes for banner ads; Washington Post technical
specifications for accepting banner ads
Read
this article: A
Summer Ad Flight With Brittish Airways
Read the Assignment Description: Banner
Ad assignment
Considerations: Think about using motion
to communicate a message. In order to accomplish this, you must
consider a target audience and what your animated GIF is trying
to communicate to your audience. What is the purpose of their
interaction with your banner ad? Is to enhance brand identity,
invite them to an invent, offer them free incentives, or simply
drive traffic to a Web site?
Specifics: Both banner ads should be 468
x 60 (standard size for a Full Banner) and each can be no larger
than 30k.
Include documentation (a one-two page summary):
see assignment description
for more details.
How to begin:
Animated GIFs with ImageReady
|
