Вы находитесь на странице: 1из 11

Report

Uses of web animation


Banner ads
A banner ad is usually a product placement on an E-commerce site that
advertises or links to a product that they are selling. This could be a
featured product or one that isnt selling. They are on almost every site
these days. with services such as Google
AdSense people can get money from google
by allowing them to place banner ads on
their site, these ads are usually animated
and last about 30 seconds long. In the eyes
of a distributor banner ads are a good idea
because they raise awareness of a product
and brings them more money in, but in the
eyes of a potential customer they are a bad
idea as they can be somewhat annoying.
Animated interactive elements
Animated interactive elements can come in the
form of banner ads or box ads the most common is
those shoot the iPhone scam ads, these are a
type of Animated interactive element as they are
animated and it allows you to interact with assets
on the ad. These types of adverts are good for
collecting customer feedback as they can be used
as a questionnaire for the viewer to fill out. They
can also allow the viewer to try out applications
on the site of the publisher without having to buy
the game on the app store though the full game is
locked.
Linear and interactive animation
Otherwise known as Linear and Non-Linear,
these are essentially how the advert plays out,
linear is where there is no interaction occurring,
and the advertisement plays out in its intended
duration for example a banner advertisement
with a 'roll over' bar with a full length
advertisement, such as the one to the left,
found in a web banner on a website. Non-linear
(or Interactive) animations allow a user to
change the outcome of the entire animation. A
great example of non-linear animation is a flash
game on a website. These games, also known

by their related technology as "flash" or "java" games and are usually


found embedded within a website such as miniclip.com
Promotion
Web animation can be used for promoting items or events this allows the
promoter to display more detail than just a still image for the item or
event, this also allows the promoter to display more information in the
advert like prices, a description of what the product/event is and when
and where people can buy it. This is good for the advertisers as they can
captivate a larger audience with an animation over a picture.
Instruction
Web animation can also be used for short instructional guides; these
instructional guides can consist of anything from how to tie a tie to how to
repair your computer. Though I have not come across any myself I believe
that they can allow a better level of interactivity than just a video clip as
you can allow the user to tick some boxes when they have done that step.
Also you could use one which got you to drag the pieces and place them
in the right place so that you know where to put them and have a deeper
understanding of the instructions you are following.
information
Information can be given in an animation by showing
a cycle or process for example the water cycle can be
given in an animation, this is good as it allows the
users to fully understand the topic in hand. This is
particularly useful in education as it allows teachers
to show diagrams and processes through an
animation. Not only will it entertain the students
more it will keep them interested in the lesson.
Animations are also a good way to teach children
with learning difficulties as they can be simple and
still entertain the young person.
Entertainment
Web animation can be used for a wide
variety of things but one of the main things
that it is used for is small size video games.
There are certain sites that specialise in
collecting these sort of animations and they
allow users to select from literally thousands
of games to play. One of the best sites for
this is www.miniclip.com as it has thousands of games there. These games
can be good and bad. They are good because they are a quick way to
entertain yourself when you have a small amount of free time but on the
other hand they are bad because they can cause addiction to them.

History of Web Animation


Hand drawn (cell)
A cell, short for celluloid, is a transparent sheet on which objects are
drawn or painted for traditional, hand-drawn animation. Actual celluloid
was used during the first half of the 20th century, but since it was
flammable and dimensionally unstable it was largely replaced by cellulose
acetate. With the advent of computer-assisted animation production, the
use of cells has been all but abandoned in major productions. Disney
studios stopped using cells in 1990 when Computer Animation Production
System replaced this element in their animation process, and in the next
decade and a half, the other major animation studios phased cells out as
well. TV programmes such as tom and Gerry and the Simpsons used this
method. though the Simpsons is now animated on computer each scene is
still hand drawn beforehand. See below for a picture of the Simpsons in
cell form.

Flip books
A flip book is a collection of pictures that differ
slightly from the last in book form. If you flip
through the pages of said book fast enough it
looks like a basic animation. These were the first
forms of animation dating back to the 1800s
when the first flip books were made. The first flip
book was made in 1868; it was patented by John
Barnes Linnet. The first flip books were a rotating
disk with images on and you would look down a
viewer to see the animation when the cylinder was rotated rapidly.
Animated cartoon

The first cartoons were invented in Palaeolithic


times when the beings of the time tried to
capture motion in cave paintings this was
depicted by giving animals multiple legs. One of
the most popular animated cartoons was called
Gertie the dinosaur by Winsor McCay and it was
showed in 1914. It is considered as the first
example of character animation. Originally
animated cartoons were black and white and
they had no sound.
Animation process
Today most of the animation is made via computer
generated imagery (CGI) this is because it is the
easiest way to ensure that there is consistency
with the location of the characters throughout
the film as Claymation can be inconsistent if
the set is knocked slightly. Franchises such as
Wallace and Gromit are created using
Claymation this is because it was cheaper to do when it was first
conceived but now computers are more powerful than ever it is now
cheaper to make computer generated animations. Claymation or stop
motion is produced by taking a picture and moving the clay or an item
slightly then taking another picture, this is then repeated to create the
film. CGI animation uses various computer programs which allow you to
create custom movements to then tie to assets so that they look like they
are moving, a good example of this is the Ice age franchise.
Graphic Interchange Format
Graphics interchange format or GIF was created by CompuServe, now
known as Microsoft, back in 1987. GIF was created to provide a colour
image format for their file downloading areas, replacing their earlier runlength encoding (RLE) format, which was black and white only. GIF
became popular because it used LZW data compression, which was more
efficient than run-length encoding and fairly large images could therefore
be downloaded in a reasonably short time, even with very slow modems.
The original version of the GIF format was called 87a. In 1989,
CompuServe released an enhanced version, called 89a, which added
support for animation delays, transparent background colours, and
storage of application-specific metadata. The 89a version also supports
incorporating text labels as text (not embedding them in the graphical
data), but as there is little control over display fonts, this feature is not
widely used.
Animation
Persistence of vision

Persistence of vision or POV is when a set of


pictures differing slightly are shown rapidly, at
about 5 or more frames per second, this
occurs because our brain likes to see fluid
movement so it translates them into a moving
image, this was first captured properly in the
mid-1800s and it quickly became available in
theme parks. This caused the invention of the
kinetoscope which is the procurer to the video
camera, it would take up to 12 pictures (frames) a second. Over the years
cinematographers have found that the optimum number of frames per
second to see the effects POV is 24.

Claymation
Clay animation or Claymation is one of many forms of stop motion
animation. Each animated piece, either the character or the background,
is usually made of plasticine clay. Claymation can take several forms:

"Freeform" clay animation, which is an informal


term referring to the process in which the
shape of the clay changes radically as the
animation progresses, such as in the work of
Eliot Noyes Jr. and Ivan Stang's animated
films. Clay can also take the form of
"character" clay animation, where the clay
maintains a recognizable character throughout a shot, like in
Wallace and Gromit.

Another variation of Claymation is in


which a block of clay or wax that is
internally packed tight and loaded
with varying imagery, is sliced into
thin sheets, with the camera taking a
frame of the end of the loaf for each
cut,
eventually
revealing
the
movement of the internal images
within. Pioneered by German animator Oskar Fischinger during the
1920s and 1930s, the technique was revived and highly refined in
the mid-1990s by David Daniels, an associate of Will Vinton, in his
16-minute short film "Buzz Box".

A third form of Claymation is one that blurs the distinction between


stop motion and traditional flat animation; it is called clay painting,
where clay is placed on a flat surface and moved like wet oil paints
to produce any style of images, but with a clay look to them.
Stop motion

Stop motion is an animation technique that


physically manipulates an object that appears
to move on its own. The object is moved in
small
increments
between
individually
photographed frames, creating the illusion of
movement when the series of frames is
played as a continuous sequence. Dolls with
movable joints or clay figures are often used
in stop motion for their ease of repositioning.
Not all stop motion requires figures or models; many stop motion films can
involve using humans, household appliances and other things for comedic
effect. Stop motion using objects is sometimes referred to as object
animation.
Computer generation
Computer animation, or CGI animation, is the
process used for generating animated images.
Modern computer animation usually uses 3D
computer graphics, although 2D computer
graphics are still used for stylistic, low
bandwidth, and faster real-time renderings.
Computer animation is essentially a digital
successor to the stop motion techniques used
in traditional animation with 3D models and frame-by-frame animation of
2D illustrations. Computer-generated animations are more controllable
than other more physically based processes, constructing miniatures for
effects shots or hiring extras for crowd scenes, and because it allows the
creation of images that would not be feasible using any other technology.
It can also allow a single graphic artist to produce such content without
the use of actors, expensive set pieces, or props. To create the illusion of
movement, an image is displayed on the computer monitor and
repeatedly replaced by a new image that is similar to it, but advanced
slightly in time, usually at a rate of 24 to 30 frames per second. This
technique makes use of the POV effect.
Frame rates
The frame rate is the number of stills shown in a second giving the illusion
if movement if its more than 8 frames per second. Today most things run
at 30 60 or even 120 frames per second. Though TV only runs at 30 due to
the limited transmission bit rate of the transmitters. Cinema uses 24

frames per second as this is where we stop noticing the lack of frames,
also it improves the file size of the film that is shown as they are usually
preformatted to show at 24 frames per second. Most animations display at
30 frames per second, this is to allow the animator to design the cartoon
easier knowing that there are a rounded number of frames per second
instead of 24.
Frames
Frames are the individual still pictures of the clip
you can see an example of this if you pause your
TV, when paused it will show a single frame on the
screen. Most animations, or at least traditional
ones, are designed frame by frame, a good
example of this is tom and Gerry, when it was first
aired there were no computers made for
animation so each frame had to be drawn that meant that each episode
could take months to draw or even years. See right for an example of a
tom and Gerry frame.
Key frames
A key frame in animation and filmmaking is a drawing that defines the
starting and ending points of any smooth transition. A sequence of key
frames defines which movement the viewer will see, whereas the position
of the key frames on the film, video, or animation defines the timing of the
movement. The drawings are called frames because their position in time

is measured in frames on a strip of film. Because only two or three key


frames over the span of a second do not create the illusion of movement,
the remaining frames are filled with regular frames. Key frames are used
in computer animation and are mostly seen in flash and director.
Onion skinning
Onion skinning is a 2D computer graphics term for a technique used in
creating animated cartoons and editing movies to see several frames at
once. This way, the animator or editor can make decisions on how to
create or change an image based on the previous image in the sequence.
In traditional cartoon animation, the individual frames of a movie were
initially drawn on thin onionskin paper over a light source. The animators
would put the previous and next drawings exactly beneath the working
drawing, so that they could draw the 'in between' to give a smooth

motion; hence the name onion skinning. In computer software, this effect
is achieved by making frames translucent and projecting them on top of
each other. This effect can also be used to create motion blurs, as seen in
The Matrix when characters dodge bullets.
Tweening
When animating in a digital context,
especially with Adobe Flash, which uses
automatic interpolation, the term tweening
is commonly used and the resulting
sequence of frames is called a tween.
Sophisticated animation software enables
one to identify specific objects in an image
and define how they should move and
change during the tweening process. Software may be used to manually
render or adjust transitional frames by hand or may be used to
automatically render transitional frames using interpolation of graphic
parameters.
Digital animation
Vector animation
Vector images are made up of co-ordinates and lines that go
from one set to another, this eventually make up an image, but
unlike raster images they dont pixelate when enlarged. Vector
images also can be compressed much more without losing their
quality, this allows for really small in file size, good quality
images to be used. Also mathematical curves can be used to
make rounded objects. There are a few limitations with vector images, the
main one is that only basic images can be made e.g. cartoons (see right)
and basic logos. Vectors use only a few types of file e.g., .eps and .ai.
Vector animation is the animation of images that have no set pixels but
instead a set of mathematical equations i.e. y=X+2 when 2<y<4. This
allows direct manipulation of the vector assets by physically changing the
vertices of the vector.

Raster animation
A raster image is a graphic that is defined by pixels each raster image can
be made up of hundreds of thousands if not millions of pixels. Raster

images are produced by cameras and scanners, their main use it to


display larger complex images. Raster animation is the animation of set
images where the images can only be stretched and scaled. This is useful
for animating backgrounds in flash as there is not much that requires
change.
Compression
lossy compression is where some of the image quality is
sacrificed so the image can have a small file type. This
is useful when putting images on the internet but not
when editing images. Lossless compression is where an
image is kept in its original resolution and the file size
may become quite large but it will be very high quality.
To save a raster image you have to export it to a
different file format. For example, in Photoshop you can
save your work as multiple different file formats (see screenshot to right).
Scalability
Vector Animations are managed by vectors themselves instead of pixels. Vector
Images are displayed and resized easily by using mathematical values without
any loss of the quality, meaning that all of the picture elements within the
animation is sustainable. this means that vector animation produces cleaner and
smoother results. Raster images use just the length and width of the image
making the use of them a poor choice to use in an animation.

File formats
There are 2 main file formats for use with
animation. The first is .swf or shockwave flash,
this is used mostly by web browsers as it is a
light weight format that most browsers can
run. To use .swf files the person trying to
access them needs flash player add-on for
their browser The second format is .fla which is
pretty much the same as .swf but is not
optimised for use with internet browsers this is
because it allows more freedom when used offline.

Web animation software


Authoring
There are many authoring tools out there for animation but one of the
easiest to use is director because its script is more powerful than Adobes
ActionScript. The 2 main authoring tools are Macromedia director and
Flash; I will cover these next.

Flash
A Flash animation or Flash cartoon is an animated
film that is created by Adobe Flash or similar
animation software and often distributed in the
SWF file format. In the late 1990s, when bandwidth
was still at 56 Kb/s for most Internet users, many
Flash animation artists employed limited animation
or cutout animation when creating projects
intended for web distribution. This allowed artists
to release shorts and interactive experiences well under 1 MB, which could
stream both audio and high-end animation.
Flash player
Adobe Flash Player (Shockwave Flash in Internet
Explorer and Firefox) is freeware software for using
content created on the Adobe Flash platform,
including viewing multimedia, executing rich
Internet applications, and streaming video and
audio. Flash Player can run from a web browser as
a browser plug-in or on supported mobile devices.
Flash Player was created by Macromedia and has been developed and
distributed by Adobe Systems since Adobe acquired Macromedia.
Director
Director is a piece of software by macromedia that
uses assets and sprites to create interactive
animations that allow the user to play basic games or
navigate through their DVD menu. This is particularly
useful when making software for travel companies to
showcase destinations and events; or making an
interactive web banner.

QuickTime
QuickTime is a piece of software that allows the playback of video that is
embedded in animations and also standalone video. This is particularly
useful when combined with Director as it allows toy to add sample clips

into your animation to show customers potential travel


locations or activities.

Вам также может понравиться