Uses of web animation

Banner ads
Banner ads are advertisement found usually at the top of websites. They can be any orientation
whether its horizontal or vertical and are most commonly found as a long, thin rectangular shape
but can also be any shape. They are mainly pop up adverts for when you click onto a website. Some
websites may have an area already designed for banner ads to be placed on their page. Banner ads
are created to draw attention to the website and promote the company in a way which itll stand out
against everything else. Flashy images and bright colours are usually used to do this, which can get a
little distracting, therefore the website which the banner ad is on may sometimes allow you to buy a
membership so you can get rid of the banner ads.

This image shows banner ads being

shown on a popular news website. The
audible company has used bold letters
with the word free in capital letters to
stand out and some examples of books of
which you may download if you create an
account with the website/application.
Banner ads may also be interactive in a way where you can click on it and you are redirected to the
website of the advert. You may be able to mute the banner, by doing so, the company will still get
profit off it as it means youve seen the advert and youve interacted with it.
Some more interactive ways are that your mouse may change into an image or object when you
hover over the web banner, or sprites on the page may move around to move away from your
mouse or maybe rollover images.

Animated interface elements

This is the interaction between the user and the website via buttons. You may be able to click on
these buttons on a website and youll be taken to another part of the website or can be found as
menus on mobile phones etc. The interface means how the program works, every program must
have an interface or it simply wont work. It is all the buttons that are visible to the user as they are
an interaction to do something or to go somewhere on the website.

This is an example. This banner is allowing you

to be taken to another website to try the application once you click the button.

Linear and interactive animations

Theres only 1 major difference between a linear animation and an interactive animation, which is
that linear is more video based and something to watch, maybe to advertise entertainment such as a
film or TV program whereas interactive is usually something like a game or something that you can
do on it. You can control an interactive animation, whether its a character who is being controlled
by the users actions or something being fired at a target following the users mouse which is quite
obviously the most popular type or animation as its fun and you can get involved.

This is a linear banner as its just telling you about the film
coming out. It may have animations or videos but you wont be able to interact with it.

This is interactive as youre able the do something with the

burger (even though it tells you not to) and it also has a sound button you can click on to turn the
sound on/off.

Promotion
The main purpose of advertisements is to promote the company. Most people will own a PC so its
efficient for companies to promote their work online as a lot of people will see it. A web banner is a
good way to promote as it is animation, it can fit a lot of information on it; like a clothing brand can
promote its sale and add in a few images of clothing items. A travel agent may promote cheap
holiday deals or an estate agent could have their web banner about houses on sale in your area.

This is a clothing web banner. It is promoting a sale that the brand is having.

Instruction
Instructions are normally found on an advert which wants you to apply for something or buy
something off it. The instructions are just little buttons saying Sign up or Click here whichll
redirect the user to another website or to another part of that website. It might even open up an
image or video connected to the banner.

On this example, it says for you to start your free trial, then has a button
saying Log in with Google which is most likely to redirect you to the Google
log in page.

Information
The information given on a web banner is usually a summary of what the overall purpose is of the
web banner. It never has too much text, especially if the purpose is to promote, as that isnt what
stands out to the audience. What stands out it images, videos, animations, colour, big text and bold
font. The information must be appropriate and not paragraphs as the audience wont find that
appealing.
This example uses a
nice, short summary of
what PMAR is about.
Because the banner is
about pit-bulls
specifically, it tells you
that they have them there to adopt, but dont list a whole load of other breeds as itll be too long.

Entertainment
This is most likely to be a banner with a flash game in it or some sort of interaction like that. This
may be to promote an online game or a game coming out on Xbox or PlayStation, so youll get a
taster of what the game is and maybe get to meet your character. Another example of
entertainment on a web banner is a movie banner. Again, like a flash game, it could be introducing
you to the cast of the film, commonly used in superhero films, each character could come up one by
one with their name and an image of them.

Most entertainment adverts will have audio included within the banner, with an sound control
button otherwise people will just click off the page. They may also loop so its played over and over
again.

History of animation
Hand drawn (cell)
Before computer generated animation, film makers use to have to hand draw animations. This is
called Cel-animation. Huge amounts of detail had to go into these drawings to make the animation
seem more realistic, so shading and everything within the lines drawn. Cel-animation works in
layers, you get the background and foregrounds. An example of a Cel-animation is Snow White
which came out in 1937. It nearly took 5 years to make and at least 570 crew members to complete
with 2 million sketches created but only 166,000 were used in the final shooting.

Flick books
These are litterally books which you flick through and it creates a little cartoon, the first one being
created in 1886. Anybody could make one of these as they are simple to create and produce. As easy
they may seem, they wont make it into proper film industries as they are too small and can be quite
jumpy when flicking through. Flick books are still made, though, mainly for fun and posted onto
YouTube or any other video website.

When Flick book animation is typed into Youtube, 270,000 results

come up , so flick books are still quite popular.

Animated cartoon
Animatied cartoon is one of the most popular ways of animation. The first animated cartoon was
known as a silent film called Pauvre Pierrot made in 1892 created in France by a science teacher. It
consists of 500 separate images and lasts around 15 minutes, and within less than 10 years, already
500,000 people had gone to see it.

Cartoons then became popular to create and watch in 1920s-1970s. The most popular cartoons
being Scooby Doo, Tom and Jerry, Top Cat , The Flinstones etc. created by big companies like HannaBarbera and Warner Brothers which are still shown to this day and even have remakes of the shows.
Scooby-Doo in
1969
VS
Scooby-Doo in
2015

Present day, like 1990s onwards, animated cartoons such as The Simpsons, Family Guy, South Park
have become quite popular with new series coming out as well.

Animated process
First off, desginers will design characters, the backgrounds and create the base of the story
meaning the storyline, the plot etc. These are all then sent to the people who create the
script for the animation. The script must be detailed before being sent off to the
storyboards as this is what will determin what actions the characters will make, the
background noises, speech and so on. Artists will then create backgrounds, colours and will
sketch them onto paper in a flipbook kind of way. Animators will collect all this information
and start creating the animation in a 3D environment. Modern day animatiors use bones
which allow them to move arms, legs, tails, heads, fingers around and change facial
expressions, whereas the more traditional way of making animation is by having to redraw
the same character over and over again in order to just move one arm, which took a while.

Graphic information file (gif)

A gif is a type of animation. It is one of the most popular ways to animate on the internet.
Unlike cartoons, gifs are short and dont up much space at all as they can only use 256
colours and dont hold any audio or sounds. You can create these gifs on the internet or
even on Photoshop which is most commonly used, although you need to provide the frames
yourself. The less frames you have, the faster and more efficient the gif will flow.

Animation
Optical illusion of motion (persistence of vision)
This is when 2 or more images are evolved into one. This is an illusion.

Claymation
This is animation made out of clay. You have to make everything out of clay which takes up a lot of
time, therefore you have to be willing to do this. For the characters, you need something called
bones (as explained in animated process). The most popular way to make claymation is by using
plasticine as it is cheap and already comes in different colours. You also dont have to worry about it
drying out and getting crumbly as it isnt like clay which does this. Clay animation is a long, step-bystep process of moving the clay and taking a picture of every slight move, then editing it by a certain
number of fps to make it look like a flowing film.
The most popular clay animation is Wallace and Gromit or Pingu, as they are viewed on the
television and are popular animations for children to watch.

Stop motion
This is again a step by step process of taking images of every move but stop motion doesnt
necessarily have to be created around clay, it could be humans, drawings, puppets etc. Again, every

move you take a picture of the frame and then edit it to become a smoth, flowing animation causing
an illusion that the characters/objects are actually moving. Stop-motion was popular in the 20th
century where full length films like The Nightmare Before Christmas (1993) or short films like Mickey
Mouse. The most recent popular stop-motion animation film is ParaNorman which came out in
2012.

Computer generation (frame rate, frames, key frames, onion skinning, tweening)
The frame rate in video cameras is the consecutive images displayed. This is used for cameras and
video cameras mainly, but also it can be used in computer graphics and motion capture.The most
commonly used frame rates are 24p (the cheapest and used for more aesthetic reasons to deliver
film-like motion characteristics), 25p (used by more television and film companies), and 30p (which
is used in a way that film cameras have frame-by-frame capture) which stands for the frames per
second.
Frames are what the different stages of an animation is. For example, one frame could be a person
with their arm by their side and the next frame could be them starting to raise their arm. Frames
take up a lot of images and space in the camera but are what you need to be perfect in order to
allow the animation to run smoothly.
A key frame is a key part of the animation. One key frame could be inserted at the beginning of the
animation and another at the end. It could be an object at the top of your screen for the first key
frame then the object on the ground at the end being the second key frame.
Tweening is the between part of the two key frames. So, with the object idea, the tweening could be
frames of the object actually falling to the ground, so the object looks like its falling smoothly.

Digital Animation
Vector animation
Vector animation is made out of vectors rather than pixels. Vector animation is a cleaner, smoother
way of animating, because images are displayed and/or resized using mathematical values instead of
stored pixel values. Macromedias Flash is one of the most commonly used vector animation
software. Vector images usually dont take up as much space as they dont need much colour
because they are made out of lines and can change colour as they go along. Because they use lines,
vectors can be shaped into anything including curves, polygons etc. which is why theyre better for
animation because of how well they flow.

Raster (bitmap) animation

Raster images (bitmaps) are what the image type is. Raster images are made up of small squares in
rows and lines in the image. Each square is made up of a colour of its own, it cant be 2+ colours, just
one. When you zoom into the raster image, it stretches and you can see all the pixels. They take up a
lot of space on the computer as raster images need a lot of different colours as there needs to be a
block colour per square. Raster images are often used in GIFs and is why the quality in these GIFs
arent that good and the colours arent all HD.

You can tell the difference between Raster animation and Vector animation in this image. You can
see the pixels in the Raster image whereas Vector has smooth, flowing lines which is how cartoons
should be.

Compression (file size, download speeds)

Compression is what you do to compress a large file size to a smaller version of it. Compression has
advantages and disadvantages to it. An advantage being that compression allows files to upload
quicker and because of being compressed, files then take up less space meaning you have more
room on your drive. However, advantages outweigh the one disadvantage being that in order to
compress a file, it is quite time consuming.

File formats
.PNG: stands for Portable Network Graphics. It is a file format for image compression. A PNG allows
the person who created it to adjust the colour, brightness, file size when the image has been
compressed.

.GIF: stands for Graphics Interchange Format. This is widely used on the web to create small
animations using the raster image type. It can only hold 256 colours though, so its quality isnt that
good.

.TIFF: stands for Tag Image File Format. It is used for exporting grey-scale images to other
programmes. It usually stores raster images, and it is widely supported by image-manipulation
applications.

.JPG: stands for Joint Photographic Experts Group. A JPG is like a GIF but you can have more colours
on it. A JPG can be used on websites which you dont need to zoom into as a JPG hasnt got great
quality.

.PSD: is a Photoshop Document. When you save work from Photoshop, it saves as a PSD which can
work with all the layers. On Photoshop, you can then flatten your layers together and save it as a
JPG, GIF or TIFF file.

.EPS: stands for Encapsulated PostScript. An EPS is mostly used for images, graphics and text. It is the
most popular file used for vectors.

.FLA: is used to save Flash formats. You can use these for saving animations on to put on a website.

.SWF: This stands for small web format which is also an Adobe Flash file format, like flv. It is normally
used for multimedia and vector graph files. They contain video animations, too.

Web animation software

Authoring eg. Flash, Director
Flash is commonly used to create animations and director is a more detailed program for publishing
the files. It is used to create vector graphics most of the time.
Director is what I used to create my web banner. I could add in my own text, images, videos and
animations just using director.

Players eg. Flash Player, Quicktime

Flash player is known as a freeware software in which you can view different types of multimedia
and also stream audio and video on. It was created by Macromedia in 1996 and can be run on a web
browser or supported mobile devices.

You can use QuickTime to view images, watch videos, listen to audio clips. QuickTime pro allows you
to do many things, this includes:

Editing video clips using copy, paste and cut functions. You can add in sound, like music, and
video clips to this. You can also crop and rotate your clips.

Saving and exporting videos to any devices like iPods, TVs and iPhones.

Save existing QuickTime movies from the web directly to a hard disk drive. This may be
blocked however.
o

Still save your work as a QuickTime movie in a *.mov file format.