Uses of Web Animation

Banner Ads
A banner ad is a rectangular graphic that goes across the top or bottom or
down the right or left side of a webpage. The format type of a banner ad is
called a leaderboard and the latter is called a skyscraper. Banner ads
usually use mostly images rather than text. They are also a popular form
of advertising on websites. A banner is used to promote a brand, or its
used to get visitors to the advertisers website from the host website.
Banner ads are usually simple pieces of HTML coding. They are typically
images with formats like GIFs, JPEGs and PNGs.
The IABs (Internet Advertising Bureau) 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)

Animated Interface Elements

A part of a webpage that moves or lets the user interact with it. This could
be a button or menu that changes colour or gets highlighted when the
user moves the cursor over it. It could also be a web banner that has a
short clip on it that it plays. They can be found on Android smartphones or
IPhones with menus that are used on the phones. They can also be found
on websites with buttons that highlight or have a drop down menu when
the cursor is over them. Programs used to create these can include Adobe

CS4 Bare Bones. Flashs invisible buttons can also be used by having one
of the layers a particular colour when the user moves the cursor over it.

Linear and Interactive Animations

A linear animation is something that you
view
or watch, while an interactive animation
is
something that you can control work
with.
Linear animations are just films or
short
clips of something. The best example
of a
linear animation would be on YouTube,
due to linear animations being
animations that have a clear start and end.
Interactive animations would be something like a game. Most of these are
Flash animations. They are used to involve the audience with the product,
letting them click, control, choose and take part in activities throughout
the animation. This website has an example of interactive animation on it:
http://www.bbc.co.uk/history/interactive/animations/wwtwo_movies_dday/i
ndex_embed.shtml

Promotion
Companies find it useful to advertise on websites because all of their
potential customers will most likely own a PC meaning they have access
to the internet. Having animations on web pages create a lot of attention
because they not only move and stand out, but they usually make noise. If
the advert isn't initially found attention grabbing, the noise that it makes
will create interest which will most likely give the user the curiosity to look
over the web page for the thing creating the noise. However, not all of
them make noise but they stand out from the plain text that is usually on
the web page. A moving picture will attract attention and the user will be
curious to what its for. Once they find out, they may click it and be took
to the companys website. Once they are on their website, they have the
option to buy their products. http://www.qudosanimations.co.uk/videos/animated-promotional-videos.html This website
has an example of a promotional video that is created using animation.

Instruction
Some animated adverts that are interactive are also instructional. They
are instructional when they have commands on them, such as Click for
more. It could be a game that when you click a button it takes you to a
website with more games to play. The reason to this is so that the
websites that use this type of advertisement is so that they get more
viewers to the website and getting money for every person that goes onto
their website. SAM Learning is a good example of this.

Information
Informational adverts let the person looking at them know more about the
website or what the advert is advertising. An example could be on the
howstuffworks.com website. They
have a lot of these adverts
surrounding the page on each
webpage. These are different
adverts on different things, but on
the same website. They add in
extracts from the information that
is on the link. By doing this, they
make people interested in reading
the whole of the information,
instead of just one section of it.

Entertainment

Most adverts are entertaining to the people that see them because they
are either humorous or they involve a game that you can play. Animation
has been a part of entertainment for a while and in different ways. These
include: CGI movies, like Final Fantasy VII: Advent Children or Disney:
Tangled. Hand drawn cartoons, like The Simpsons or Scooby Doo.
Computer generated cartoon, which can be
found in most modern cartoons. This is used
so that people viewing the advert will
hopefully click on it and be took to the
website, because they think that the
website will contain something humorous. It
also gets the audience interested in what
the website that the advert is advertising
has to offer.
https://www.youtube.com/watch?
v=qbAYLAbhyxc This is an example of entertainment in animation.

History of Animation
Hand Drawn (Cel) Animation
Cel animation is what makes the TV show look as though it is hand drawn.
Hand drawn was one of the first forms of animation. However, because of
technology advancing over the years, hand drawn animation has been
created using computer animation to give hand drawn a different look.
This has been created because programmes, like Flash, can be used to do
this type of animation but faster, easier and cheaper than actual hand
drawn animations. This animation is mostly known in games, such as: Jet
Set Radio Future and some of the Zelda games.

Flick Books
Flick books are the earliest forms of animation and the simplest. They are
done by having a book with a drawing of something on one page, then on
the next page it will have the same drawing but slightly different. This
carries on through the whole book until that drawing has done or got to

where you wanted it to go. The animation could be something simple like
a man running, but it doesnt show that when looking at each page
individually because of how little it changes. Instead, it shows the whole
animation when the pages are being flicked through, hence the name

Flick Book.

Animated Cartoons
An animated cartoon is the way that you can view cartoons
as a moving image. This is so that you can see the same
cartoon in different places or doing different activities.
Animated cartoons are known mainly for being used for childrens
TV programmes. There are also TV channels that are there for just
animated cartoons, like Cartoon Network or Nickelodeon.
There are also some films that use animated cartoons. One
example is Snow White and the Seven Dwarves. This was the
most
expensive animated cartoon film when it was released. It was also the first
fully animated cartoon film. Newer animated films use advanced
technology to create the animation in them. This has made them easier to
be created, but also some films take longer to create.

Animation Progress
In the first days of animation, animated films were made by using hand
drawn animation which means that each frame was drawn over 3 years by
lots of different people with different jobs, such as layout artists, effect
animators and inkers. This process can now be done with different
applications like CorelDraw, Flash and Illusion Mage. These are used by
people that are professional animators or people with experience with
animation. The process of animation is different depending on the type of
animation thats being used. It could be anything like CGI Animation, Cel
Shaded, Cartoon and Anime style.

Graphic Information File Format (GIF)

Graphics Information File Format, or GIF, is bitmap based and uses lossless
compression to avoid the loss of quality in the image. It supports up to 8
bit per pixel, allowing the image to have up to 256 different colours in it. It
also supports animation which is what the file format is only used for.
Looped animations or real life footage can be created and can be up to a
maximum of 25 seconds long. This type of animation is only really used
for adverts and never TV programmes or normal animation. It is popular
among banner adverts on websites to promote different products.

Java Applet
A Java Applet is a way to view different documents from the internet
without having to download the specific program used to create those
documents. It lets you run the online document, like animated videos, like
you would run a normal video or game. You only have to wait a minute or
two for the Java Applet to load and open the document to view it, instead
of waiting for the specific program to download and the for the document
to open on that. This makes it easier for anyone to watch video online,
play games or fill in forms without having to download the required
program to do it. You do, however, have to allow the Java Applet plug in to
run, or you wont be able to access the document or video.

Animation
Persistence of Vision
A strip of still images in any order can be given the effect of animation
when viewed at a certain rate. This gives the illusion that the image is still
there a split second after it is gone, making it look like it is moving. This
principle applies to all animated moving images, whether it is from a
simple device or a full animated film.

Claymation
In Claymation, each animated piece is made usually of plasticine
clay. Each frame is recorded and then played back at a frame rate
higher than 10-12 frames per second. This creates a convincing
illusion of motion. Each object in Claymation is created from
clay or plasticine. They are usually created around a wire
skeleton which is called an armature. Wallace and Gromit is a
good example of Claymation made by the Aardman team.
They use Claymation throughout the whole of their films that
they produce. However, they still use a wide range of
materials like clay or wood.

Stop motion

Stop motion is an animation technique to make a physical object appear

to move on its own. The object is moved in small movements between
individual frames. This creates the illusion of movement when the frames
are played on a sequence. Dolls with movable joints or clay figures are
usually used in stop motion because
they are easy to reposition. Stop motion
animation using Plasticine is called clay
animation or Claymation. Not all stop
motion uses figures or models. Many
stop motion films can involve people,
household items and other things for
comedic effect. Stop motion using
objects is sometimes known as object
animation. Adobe Flash is the most
common piece of software that is used
to create stop motion films.

Computer Generation
Frame rate is the rate at which a device produces consecutive images
called frames. The term also works well with film and video cameras,
computer graphics, and motion capture systems. Frame rate is most often
said as FPS (Frames per Second) and is also expressed in progressive scan
monitors as hertz.
A key frame in animation and filmmaking is a drawing that shows the
starting and ending points of any transition. They are called "frames"
because their position is measured in frames on a strip of film. A sequence
of key frames shows which movement the user will see. Whereas the
position of the key frames shows the timing of the movement. Because
only two or three key frames over a second do not create the illusion of
movement, the remaining frames are filled with in-betweens.
Onion skinning is a technique used in creating animated cartoons and
editing movies to see several frames at once. With this, the animator or
editor can make decisions on how to create or change an image based on
the image before in the sequence. In traditional cartoon animation, the
frames in a movie were 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
motion. In computer software, this effect is achieved by projecting frames
on top of each other. This effect can also be used to create motion blurs.
Tween is short for in-between and it refers to the creation of frames of
animation between key frames. In computer animation, the term is most
commonly used for Flash's shape tweening and motion tweening
processes. This is where the user can define two key frames and Flash will
create the in-between frames of either morphing one shape into another

or moving a shape from point A to point B over a set period of time. 3D

animation programs also have their own method of tweening.

Vector and Raster Animation

Vector animation refers to animation in
which its art or motion is controlled by
vectors rather than pixels. Vector
animation often shows cleaner,
smoother animation, because images are
displayed using mathematical values
instead of pixel values. One of the most
commonly used vector animation programs is Macromedia's Flash.
Raster based animation frames are made up of individual pixels. These
pixels contain information about the colour and brightness of that spot on
the image. This is similar to the concept of pointillism in painting, with the
sum of the points making up the total of the picture or frame.
Raster animation is used for showing realistic images of people, animals
or places, rather than the anime-style animation you might get with
vector graphics. Raster animation is also usually used to create animation
on logos or banners that are based on photos or drawings.

Java Applets
Java applets are programs that are used on web pages to help operate
animation. Java applets are quite cross platform compatible, meaning that
they will work across different platforms like a
computer, a phone or a tablet. This is because Java
interpreters are not available on all platforms and dont
always agree about what they consider to be proper
code. Java applets are used to provide interactive
features to web applications that HTML cant create.
The similarities between them is that they create
motion on screen by drawing successive frames at a
speed of 1020 times per second.

Compression
The Animation Compressor employs a compression
process developed by Apple. This technique is best
suited to animation and computer-generated video
content. The animation compressor can be used to
compress sequences of images. It can store images
in encoded format and it can work in either a lossy or
a lossless mode. Lossless maintains picture data and
quality, saving an animation as a series of encoded images. The lossy
mode loses some image quality and data.

FLA is the file format that is used in Adobe Flash Pro for authoring in and
storing work that is still in progress or under development. FLA files are
converted into SWF format, so that they can be used with flash player,
before they are used on the Internet.
SWF is an Adobe Flash file format used for multimedia and vector
graphics. It originated with FutureWave Software, then changed to
Macromedia, and then changed again to Adobe. SWF files can contain
animations or applets of different grades of interactivity. SWF is the main
format for displaying animated vector graphics on the Web. It may also be
used for programs like browser games, using ActionScript. SWF files can
be created from several Adobe products, like: Flash, Flash Builder and
After Effects. It can also be created through MXMLC, which is a command
line application compiler, which is part of Flex SDK.

Scalability
This is when files are either increased or decreased in size so that it suits
a specific programs specifications. The most scalable type of files are
vector graphics, as they are made from a mathematical formula, which
allows the graphic to be scaled up or down as much as its needed. Raster
graphics arent very scalable. This is because they are made from pixels
which lose data and quality when they are scaled up or down too much.