Web Animation Article
Uses of Web Animation
Uses of Web Animation
These small rectangular advertisements appear on all sorts of Web pages and vary considerably in appearance and subject matter, but they all share a basic function: if you click on them, your Internet browser will take you to the advertiser's Web site.
But how do they work and why are they there?
This new medium of education and entertainment has revolutionized the economy and brought many people and many companies a great deal of success. But where is all this money coming from? There are a lot of ways Web sites make money, but one of the main sources of revenue is advertising. And one of the most popular forms of Internet advertising is the banner ad.
A banner ad is simply a special sort of hypertext link.
A bit of HTML code instructs a Web server to bring up a particular Web page when a user clicks on a certain piece of text. Banner ads are essentially the same thing, except that instead of text, the link is displayed as a box containing graphics (usually with textual elements) and sometimes animation.
Because of its graphic element, a banner ad is somewhat similar to a traditional ad you would see in a printed publication such as a newspaper or magazine, but it has the added ability to bring a potential customer directly to the advertiser's Web site.
This is something like touching a printed ad and being immediately teleported to the advertiser's store A banner ad also differs from a print ad in its dynamic capability. It stays in one place on a page, like a magazine ad, but it can present multiple images, include animation and change appearance in a number of other ways.
Like print ads, banner ads come in a variety of shapes and sizes. The Internet Advertising Bureau (IAB) specifies eight different banner sizes, according to pixel dimensions. A pixel is the smallest unit of color used to make up images on a computer or television screen. The IAB's standard banner sizes are:
- 486 x 60 Pixels (Full Banner)
- 392 x 72 Pixels (Full Banner with Vertical Navigation Bar)
- 234 x 60 Pixels (Half Banner)
- 120 x 240 Pixels (Vertical Banner)
- 125 x 125 Pixels (Square Button)
- 120 x 90 Pixels (Button 1)
- 120 x 60 Pixels (Button 2)
- 88 x 31 Pixels (Micro Button)
The full
banner (468 x 60) is by far the most popular, but you will see all these
variations all over the Web. These are not the only banner ad shapes and sizes,
either, but they are a good representation of the range of common banner ads.
There is no universal file-size constraint for banner ads, but most Web sites
impose their own limits on memory size, usually something like 12K to 16K. This
is because banner ads add to the total file size of the page they appear on,
therefore increasing the time it takes for a browser to load that page.
As you've
probably noticed while surfing the Web, actual graphic content, or creative,
varies considerably among banner ads. The simplest banner ads feature only one,
static GIF or JPEG image, which is linked to the advertiser's home page.
More
common is the GIF-animated banner ad, which displays several different images
in succession, sometimes to create the effect of animated motion. Then there
are rich media banner ads -- ads that use audio, video, or Java and Shockwave
programming. These banner ads, which usually have larger file sizes, are often
interactive beyond their simple linking function.
Linear animation
There are significant differences between the art of animating for linear media such as film and video and the art of animating for interactive media such as computer and video games. In particular, these differences arise from the shift from linear characters to autonomous interactive characters.
linear animation and interactive animation in several areas of character design -- character intelligence, emotional expressiveness, navigation, transitions among animations, and multi-character interaction. These differences provide insight into the processes of both forms of animation and the final products that they create, and may provide a starting point for linear animators interested in becoming familiar with interactive animation.
Interactive animation
Interactive animation is not
linear and the narrative does not have to be controlled by the animator. In
digital media the narratives can be transferred to spectator either in linear
or in circular structure. In the geometric shape of the circle there is neither
a start nor an end. Start, middle or end can be any point that composes the
circle.
He or she can reach sequence of events or return to previous sections and by this way he/she re-visits the narrative sections. On the basis of these explanations we can say that interactive animation sets up the events that enable mutual relationship between narrative and user.
Interactive animation is used in various areas such as; entertainment, web, computer and video games.
Traditional animation and
interactive animation have very different narration structures. Especially in
3D character animation based computer and video games, interaction tremendously
affects the storytelling. For example, in Quake, the player chooses a character
among different ones and control of the character totally belongs to the
player. Player can run, walk, crouch, turn, jump, pick items through the
corridors moreover can fight various monsters awaiting for assault. The saving
feature in the game and various ends enable completion of levels or gaining
experience many times.
Additionally,
the tools which are used in the two different forms of animation are
dissimilar. While traditional animators use tools like paper, pencil and paint,
interactive animators have to use 2D and 3D animation software and work with
the complex systems like procedural animation and motion capture which contain
widely computer and mathematical principles to add interactivity.
Persistence of vision
Persistence
of vision is the phenomenon of the eye by which even nanoseconds of exposure to
an image result in milliseconds of reaction (sight) from the retina to the
optic nerves. This is because persistence of vision depends on chemical
transmission of nerve responses, and this biochemical hysteresis is much slower
than the light transmission.
The myth of
persistence of vision refers to the mistaken belief that human perception of
motion (brain centred is the result of persistence of vision (eye centred).
The myth was debunked in 1912 by Werther but persists in many citations in
modern texts.[citation needed] Motion perception has been shown to be the
result of the Beta Phenomenon.
A visual form of memory known as iconic memory has been described as the cause of this phenomenon. Although psychologists and physiologists have rejected the relevance of this theory to film viewer ship film academics and theorists generally have not. Some scientists nowadays consider the entire theory a myth.
Persistence
of vision should be compared with the related phenomena of beta movement and
phi movement. A critical part of understanding these visual perception
phenomena is that the eye is not a camera: there is no "frame rate"
or "scan rate" in the eye; instead, the eye/brain system has a
combination of motion detectors, detail detectors and pattern detectors, of
which each output is combined to create the visual experience.
The
measure of the number of frames displayed sequentially per second of animation
in order to create the illusion of motion. The higher the frame rate, the
smoother the motion, because there are more frames per second to display the
transition from point A to point B.
Frames
A frame is
uniquely defined by a combination of the image to be displayed and the time the
image is to be displayed. A sequence of frames makes an animation. Each frame
is displayed on the screen until the next frame overwrites it. Since each frame
remains displayed on the screen for a tiny but finite time period, you can
think of an animation as frames displayed at discreet intervals of time in a
continued sequence.
Any scene
change happens by drawing a whole new frame. Even changing a single pixel
requires drawing the next frame in its entirety. Furthermore, even if the image
of the scene remains constant, identical content must be drawn in subsequent
frames as long as the still scene is needed.
In practice,
the time needed to refresh the screen must be negligible compared to the time
the frame remains on the screen. If this were not so, the viewer would notice
the individual scene changes, which would be an awful animation experience. In
the case of a movie projector, the refresh time is the time that the shutter
remains closed while the next frame of film is loaded. In case of the computer
monitor, it is the time required for the monitor's electron gun to traverse the
entire screen from left to right and up to down to draw each pixel on the
screen.
The content
of the frame is the image (every pixel on the screen) to be displayed. It is
possible for one monolithic function in an animation engine to draw all the
pixels of each frame. The movie projector is like this kind of monolithic
function, as it loads an entire image for each frame. The movie projector can
do this because the content of each frame is available as a separate image.
However, it is a completely different situation in a video game. Let's say that
the player is sitting still in a closed room. The screen will display a still
image of the room view.
Now the player gives some input to turn around the room
gradually. For example, right-click-and-drag in SPORE turns the player
gradually, at the speed of the mouse. The view of the virtual world needs to
change as the turn progresses. It would be impossible to store every possible
image of the virtual world and then load the right image for each part of the
turn. Instead, the content of each frame, while turning, must first be computed
and before it is copied into video memory. The term for this computation is
Rendering the frame.
Like a From/To/By
animation, a key-frame animation animates the value of a target property. It
creates a transition among its target values over its Duration. However, a
From/To/By animation creates a transition between two values, but a single
key-frame animation can create transitions among any number of target values.
Unlike a
From/To/By animation, a key-frame animation has no From, To, or By properties
with which to set its target values. Instead, you describe a key-frame
animation's target values by using key-frame objects. To specify the
animation's target values, you create key-frame objects and add them to the
animation's KeyFrames property. When the animation runs, it transitions between
the frames you specified.
In addition
to supporting multiple target values, some key-frame methods even support
multiple interpolation methods. An animation's interpolation method defines how
it transitions from one value to the next. There are three types of
interpolations: discrete, linear, and splined.
To animate
with a key-frame animation, you complete the following steps:
- Declare the animation and specify its Duration, as you would for a From/To/By animation.
- For each target value, create a key frame of the appropriate type, set its value and KeyTime, and add it to the animation's KeyFrames collection.
- Associate the animation with a property, as you would with a From/To/By animation
Tweening
"Tween"
is actually short for "in-between", and refers to the creation of
successive frames of animation between key frames. In computer animation, the
term is most commonly used for Flash's "shape tweening" and
"motion tweening" processes, where the user can define two key frames
and Flash will automatically create the in-between frames, either morphing one
shape into another over a set period of time or else moving a shape or shapes
from point A to point B over a set period of time. 3D animation programs also
have their own method of "tweening".
Here is an example video of how tweening works.
Applet Browsers: Java applets cannot be viewed by all web browsers. Sun created a special browser (written in Java) called HotJava, which can be used to view Java applets. Sun claims that this browser can present any image, program, etc. to the user even in new formats, that may be created in the future, which the user's other software does not recognize. This is supposed to be enabled if the server, from which the object to be viewed comes from, has a few Java lines which "teach" the browser how to display the object.
Applet Browsers: Java applets cannot be viewed by all web browsers. Sun created a special browser (written in Java) called HotJava, which can be used to view Java applets. Sun claims that this browser can present any image, program, etc. to the user even in new formats, that may be created in the future, which the user's other software does not recognize. This is supposed to be enabled if the server, from which the object to be viewed comes from, has a few Java lines which "teach" the browser how to display the object.
Java applets
can run on the user's computer so freeing up server's resources as explained
above. Applets may have access to resources on the host machine that the user
may not want them to play around with. The simplest solution would be to
restrict all access of downloaded applets to any resources on the host machine.
This solution sounds very simple, but the applet may very well have no use if
it cannot access basic resources. For example, suppose the applet helps you
draw pictures. It would not be very useful if you cannot save the drawing when
it is ready.
Applet
Browsers: Java applets cannot be viewed by all web browsers. Sun created a
special browser (written in Java) called HotJava, which can be used to view
Java applets. Sun claims that this browser can present any image, program, etc.
to the user even in new formats, that may be created in the future, which the
user's other software does not recognize. This is supposed to be enabled if the
server, from which the object to be viewed comes from, has a few Java lines
which "teach" the browser how to display the object.
Java applets
can run on the user's computer so freeing up server's resources as explained
above. Applets may have access to resources on the host machine that the user
may not want them to play around with. The simplest solution would be to
restrict all access of downloaded applets to any resources on the host machine.
This solution sounds very simple, but the applet may very well have no use if
it cannot access basic resources. For example, suppose the applet helps you
draw pictures. It would not be very useful if you cannot save the drawing when
it is ready.
An applet
must begin with init() and end with destroy(). There are four other methods but
an applet does not necessarily need all of them. Here are all six methods:
init() -
this method is called immediately after the applet begins to execute, when an
applet is reloaded or when the user returns to the applet's page. This method
is used to set up any data structure or perform tasks that help you get ready
to run the applet.
start() -
this method performs the real execution of the applet. It is called after the
init() method. This method is called whenever the applet can be seen on the
user's screen (i.e. it is not called when the user is looking at another page,
for example). So, if there is any code that should be executed every time an
applet is restarted, this is where to put it.
paint() -
this method deals with the applet's display. In the HelloWorld example it is
used with the Graphics parameter (this parameter is defined in the
java.awt.Graphics class). There is a lot more about the java.awt.Component
class which is the super class of java.awt.Graphics.
update() -
this method in java.applet.Applet clears the applet and repaints it again by
calling repaint(). If you want to avoid the flickering that results from this,
you might try overriding the update() method with a new one that includes only
the paint(g) method. (Both paint() and update() can be overloaded with
paint(Graphics g) and update(Graphics g) respectively.)
stop() -
this method is called when the user leaves the applet's page. It should usually
stop all unnecessary activities which will probably not interest the user when
s/he returns to view the applet (such as displaying cartoons). On the other
hand it should not stop important calculations which the user will probably
want to know the results of.
destroy() -
this method is called after the stop() method and before the applet is unloaded
completely, to release the applet's resources. If the user returns to the page
the init() method is called again.
Digital Animation
.Fla
.SWF
Digital Animation
.Fla
To get the
best out of the web you will need Flash. Research shows that around 99% of
internet users now have it. It is a popular player for video and animation.
Flash is
popular with web designers as it allows them to create animated websites
containing graphics, games, cartoons or movies. It allows for more interactivity.
And it has
the added advantage of being quick to load, thanks to very small file sizes,
and the ability to ‘stream’ media. Streaming means that the animation will
start to play before the whole file is loaded, thus saving time.
Macromedia
has had a great deal of success with two closely related formats, Flash and
Shockwave. Flash is now the standard format for rich animation on the Web, and
Shockwave is a very popular format for presenting more complex animated
content.
The .SWF
Flash media container extension is one of the most popular available on the
Internet. SWF stands for Small Web File. .SWF was originally created as a file
extension for Flash-based vector graphics and simple sequential animations and
it used to stand for ShockWave Flash.
Later, the .SWF extension became more
complex and now it is a dominant file format which contains all types of Flash
media (including audio and video). The .SWF file can be used for showing Flash
animation based on vector and raster graphics, for different forms of
interaction with the end user - Flash menus, Flash buttons, Flash banners, and
more. Also, it can contain Flash applets which provide control for other Flash
elements.
For example, it can contain a Flash player applet which will provide
advanced timeline and volume controls for a Flash-based .FLV movie clip.
GIF's
Typically, Web sites post these sorts of images as either JPEG files or GIF files.
Animation is just a series of still images shown in sequence, so the most obvious way to add animation to a Web site is to post a series of bitmap images that the user's browser displays in sequence. This sort of animation, called GIF animation, or GIF89, was the first Web animation to catch on, and it is still very popular today.
The main advantages of GIF animation are that it is incredibly simple to work with and it is automatically recognizable to most Web browsers. With a shareware program, such as GIF construction set for Windows or Gif builder for Macintosh, all you have to do is provide the individual bitmap images that make up the frames of your animation. You then post the file and code the tag for the image, just as you would with an ordinary static GIF.
The disadvantage is that you have to keep the animation pretty simple to keep the file size down. After all, each frame is a full bitmap image. Four simple frames transmit very easily to most users, but when you get up to something like 20 frames, your file size could be too big. And you can't even accomplish very much with 20 frames -- the fluid animation we see in movies includes at least 24 still images every second -- so animated GIFs are fairly limited. To create a movie of any substantial length, you have to make pretty big jumps between each frame, which means the animation is not very fluid.
Web Animation Software
Quicktime
What Is
QuickTime?
QuickTime is
Apple’s multiplatform, multimedia technology for handling video, sound,
animation, graphics, text, interactivity, and music. As a cross-platform
technology, QuickTime can deliver content on Mac OS and Windows computers. Many
applications, including Final Cut Pro, use the powerful architecture of
QuickTime to view, create, import, and export media.
QuickTime
supports most major video, audio, and graphics file formats. It works with
local disk-based media, media accessed over a network, and streams of real-time
data. QuickTime supports a wide variety of video and audio codecs and can be
extended with third-party codecs.
QuickTime
technology is composed of:
- A suite of applications (most notably, QuickTime Player)
- An environment for media authoring
- A movie file format
Using an
application like QuickTime Player Pro or Final Cut Pro, you can import, edit,
and export every file format that QuickTime supports. This allows you to create
movies for the web, for DVD, or for output to videotape. You can also create
movies including video, audio, text, still images, and interactive layers.
Flash & Shockwave
Unlike Real Player and QuickTime files, Flash and Shockwave movies actually appear as part of the Web page and include a high level of interactivity, just like a straightforward HTML page. The Shockwave player not only plays animation, but also recognizes user input and then controls how the browser responds.
Macromedia has had a great deal of success with two closely related formats, Flash and Shockwave. Flash is now the standard format for rich animation on the Web, and Shockwave is a very popular format for presenting more complex animated content. Unlike Real Player and QuickTime files, Flash and Shockwave movies actually appear as part of the Web page and include a high level of interactivity, just like a straightforward HTML page. The Shockwave player not only plays animation, but also recognizes user input and then controls how the browser responds.
It's also easy to update the plug-ins, allowing Macromedia to continually develop and then distribute new technology. The company intentionally designed the Flash and Shockwave players to adapt to future modifications, so the user doesn't have to do anything to update the player but download the file. And since these files are fairly small in size, it doesn't take much time to do this. Additionally, if a site detects that you don't have the newest version of the plug-in, your browser will tell you, and direct you to the Macromedia site to download the update.
The different animation formats on the Web all have particular strengths and weaknesses. But many webmasters end up using Flash, even when another format might be better suited to their needs, simply because they know that most Web users already have Flash capability; and if they don't, it's really easy for them to get it. The universality of Flash and Shockwave leads more webmasters to include Flash content, which further spreads the acceptance of the formats.
Comparison between Flash & Shockwave
Flash and
Shockwave software applications cover a lot of the same ground, and they are
produced by the same company, but there are a few significant differences. Most
of these are directly related to the origins of the two file formats. Director,
the software application used to create Shockwave files, has been around for a
long time, longer than the Internet in its current form. It was originally
developed to create dynamic content for CD-ROMs, and it is still used for this
purpose. As dynamic content has become more popular on the Internet, however,
updated versions of Director have included more features that tailor Shockwave
files for use on the Web.
Flash, on
the other hand, was built from the ground up for use on the Web. Macromedia
adapted Flash from Future Splash Animator, a vector art animation program.
Macromedia's version was tailored specifically for transmission over phone line
connections. So at their heart, Flash and Shockwave have two different
specialties. Consequently, they have a number of contrasting strengths and
weaknesses:
Flash files load more quickly than Shockwave
files.
- Shockwave is more versatile. You can create more complex games, more elaborate interactivity and more detailed animation.
- You can use more types of files with Shockwave. You could, for example, import a Flash file into a Shockwave movie, but it doesn't work the other way around.
- Flash is more universal. More than 90 percent of Web users have the Flash plug-in installed, while a little less than 60 percent have the Shockwave plug-in.
- Flash creation software is cheaper. Director costs a little less than $1,000, while Flash costs about $400.
- Flash is an open-source format. Anybody can see how it works and is free to adapt it for their own purposes. Director uses a compiled file format, so it is extremely difficult to modify the program.
With each
software update, the two formats move closer and closer together. Shockwave has
better Web capability with each version, and Flash gets more versatile.
Eventually, the two formats will probably be merged into one comprehensive
format that encompasses the best qualities of each.