1. Web animation
Web animation is used all over the internet for multiple purposes, including advertising, file
sharing, streaming videos, browser based games and other animations.
Banner ads for example are common in
using animation in their advertisement.
When hovered over these ads establish a
sense of interactivity. There may be a
simple game or linear animation. What is
more and more common is the use of
scrolling banner ads that expand when
hovered over with the mouse. These banner ads are usually tied in with the website they’re
displayed on. In fact most ads are linked in some form or another to the website or
webpage that displays them. For example an article about healthy eating would most likely
have dieting and health care related banner ads on the page. This happens because the
advertising system you associate your site with (Google, yahoo etc.) will search for key
words and phrases in the content and create an ad connected to this.
Websites in general are known to contain some form of animated interface elements. Most
sites would have links connected to images or certain text. Other sites offer animation along
with these links. Take the official Disney website, for example. Their interface is very user
friendly, using little text and using animation to help the user understand the site page. It
offers a menu of images that you can scroll through, each expanding when hovered over
and linking to a page connected to the image displayed.
This is very helpful for children especially to understand.
The Simpsons website uses flash animation extremely
professionally and effectively. The site must load properly
before being accessed as the coding of flash is a little more
complicated than a simple website. On the start page there
is a selection of other pages to choose from at the bottom
of the screen, when clicked on they look as if a button has
been pushed in. on the character page there is a unique
and child friendly interface that instead of a simple list of
characters or series of complicated links the page is
displayed like a filing cabinet and the characters are split
off into six catagories, A-E, F-H etc. when selecting each
character a new page will appear that will either display a linear animation or begin an

2. interactive flash game to play.
The difference between a linear and interactive animation is the control that the user has
over the animation itself. For example a looping web ad is linear because the user has no
real control over it. Any gif is classed as a linear animation, whereas a YouTube video is
interactive because it offers multiple control elements including pausing and selecting a
specific point in the video. Games are also interactive.
The google doodles are great
examples of how web animation
can be used effectively. Google
doodles are short animations,
games or interesting logo designs
that represent a celebration or
anniversary of something on the day that is displayed. For example on the 30 th anniversary
of the ever famous retro game, Pacman, Google decided to recreate the game for their
users to play on the main page. Any browser based game on the internet is another form of
web animation, mostly for entertainment purposes.
Google has also been known to create interactive doodles where the user can click on
certain places on the page and establish a domino effect of animations. This kind of
animation is used in games as well in the form of ‘point and clicks’ where the user must click
on items or areas on the screen to begin an animation that will lead the character onto the
next stage of the game.
Web animations are typically used, in ads at least, to grab the attention of the user. With so
much going on a single page many ads need to think of something original or at least some
kind of bold statement to grab people’s attention. The most common and more annoying
ads will flash different bright colours on the screen. Others are known to create a shaking
affect, making it look as if the actual image is vibrating on the page. Another tactic is to use
sound to distract the user, causing many people to search frantically on a page trying to find
the ad and its mute button. It’s also very typical that clicking on said button will just lead the
user to a pop up.
Games and other systems use animation
for entertainment or to provide learning
and information. The BBC bitesize
webpage is dedicated to provide
learning for GCSE and A-level students.
They have interactive games and videos
that help with learning. For example
one game requires the user to complete a sentence by dragging and dropping the correct
word or phrase into the box.

3. Cartoons are a form of stop motion animation that uses drawn images to create movement.
One of the first full length animations like this was Snow white and the Seven Dwarfs
animated by Disney in 1937. Each frame was hand drawn and snow white was one of the
first animations to ever use colour. Now-a-days drawn animations aren’t used in films as
much as before though there are hundreds of cartoons produced every month including hits
like “Phineas and Ferb” and “Adventure Time” which is drawn digitally instead. Flash is
software that can be used to create drawn animation. Hand drawn animation is very
uncommon for the digital era and is a much more time consuming process than the modern
methods used today.
Persistence of vision is an effect on our eyes which makes animation possible. Each image
we see individually overlaps one another creating the illusion of fluid movement. in low
budget cartoons usually there is a shared image for every 2 frames, so the same image is
shown twice within the animation (usual frame rate of around twenty-four would suggest
that only twelve of those frames were separate images) This is possible without detection
because the frame rate is higher than the rate at which we retain an image, which means
we could not see the flicker between each frame. When depicting fast paced movement the
animation is usually changed to one frame per second as two frames does not adequately
perceive the movement of the subject.
The animation process – task 2
1. Before anything can be animated there needs to be a story. Animators and Directors
come together to discuss the film and a ‘storyboard’ is made.
2. When the all the pieces of the storyboard are put
together you have a complete story. Making this
storyboard allows the directors etc. know roughly how
long the movie will last and an estimate of how many
drawings there are going to be. The storyboard is usually
displayed as a timeline on a wall or pin board and goes
through several editorials before the set-up is finished.
3. The dialogue then needs to be recorded so that the animators know what the
characters will say before they can animate them in the way they wish.
4. Once the dialogue is recorded, sketches need to
be made up of just the characters of the story and
there appearances. At this stage there is no colour,
background etc. involved and the sketches are usually
very messy. Many films have used around 70,000 plus,
individual drawings. (Usually, the best animators only
sketch a few animation drawings and leave gaps in

4. between for the ‘inbetweener’ that would come along and finish the scenes by drawing in
the animation gaps.)
5. A very specialized artist or group create the ‘layouts’ for the film/story. They are
created on the basis that all the drawing is done. Every element in the layout (background,
character position etc.) is drawn on to a sheet of transparent paper (acetate or similar).
6. Everything is then put through a process called ‘Line Test’, where a test animation is
carried out (using a computer or video equipment) to make sure the animation is smooth.
7. Assuming everything goes to plan, the completed drawings will be sent to the people
that ink and paint them.
8. The animation is then photographed and captured. This whole process can be really
troublesome if special effect and/or CG images are used (that very ugly 'this-is-computer-
this-is-not' effect you see in many TV shows and even feature films).
9. After all the drawings have been filmed, the dialogue is added. Sometimes the film is
edited at this step. The film is then released to the public.
Gifs are a good example of how animation has been used digitally. Gifs are a file format that
loops a series of images infinitely. They are often used in web ads and as account images on
forums and social sites like tumblr.com or deviantart.com. They can be created in software
like Photoshop and flash and usually display a short looping animation. They are used on
sites and ads to gain attention to certain areas on a page or add to the overall design of a
webpage.
DHTML is a coding script for HTML used to create
animation on webpages usually. Though ill effective
when used to create complicated animations like
that of flash DHTML still offers a variety of animation
possibilities for creating a dynamic and interesting
website. It uses three different forms of language to
achieve its capabilities. The script allows for a change
in variables of an original HTML language. DHTML is
commonly described as using HTML, style sheets and scripts and is also thought of as a
combination of HTML, JavaScript, DOM and CSS. Both HTML (Hypertext Mark-up Language)
and XHTML (extensible hypertext mark-up language) do very similar jobs in the fact that
they both following coding in creating a website. However there are a few major differences
between the two. One difference which is the main reason why XHTML is much less popular
than the standard HTML is that XHTML is much less forgiving in its coding. Just one simple
mistake like missing the </ on the end of a line of coding would render the entire data
useless unless the problem was fixed. It will not work unless there are no mistakes what-so-

5. ever. That is why XHTML is usually used for search engines as it provides reliable results. It
removes any errors within the coding or the page meaning that the engine is much more
efficient. XHTML was creating by combining the language of HTML with the rules of XHTML,
which is used to design other language using certain tags and attributes to suit the type of
document you are writing.
HTML and XHTML are very similar but at the same time very different. Both code languages
use the same predetermined language, their main difference being that HTML is much more
forgiving. With a few odd mistakes the coding can still work to create a website which allows
for much easier manual coding. The problem with HTML is that the rules are not as
apparent as they are in XHTML which allows for no faults. In HTML you can write in lower
case, add extra letters or numbers and the code will still work. There is a wider margin of
error allowed when compared to XHTML. This means that XHTML is much more efficient,
allowing for exact coding. With XHTML you know if what you’re doing is right or wrong with
HTML you may never know if what you’re writing was the correct code as the coding will
still work regardless. XHTML is a new more efficient version of HTML however HTML is still
the preferred coding so far as it is less strict and there aren’t any real benefits to switching
to XHTML other than its efficiency when coding. It does not change how the websites
appears to the visitors. The purpose of HTML is to write coding which is understood by the
internet and allows for people to connect to one another through websites and pages. It is
basically instructions for different browsers to show different content for a website.
Java applets are programs used on websites to help run and operate an animation. Unlike
DHTML, which is more restricted, Java applets are cross platform compatible and can be
used in other languages such as Jython, JRuby, or Eiffel. Java is a fast application and until
recently was faster than any other for its purpose. Java is able to establish 3D imaging and
complicated animation. Because of its cross compatibility Java can be executed by browsers
for many platforms, including Microsoft Windows, Unix, Mac OS and Linux. Java applets are
typically used to create web animation that cannot be created using XHTML and have
proven very useful in helping to display programs like word processor or browser games.
Task 3
Persistence of vision is the act of the eye receiving information (an
image) which persists on the eye for usually one twenty-fifth of a
second. Persistence of vision is why stop motion animation is so
effective. The eye only has so long to process each individual
image at a time and so the images merge together as the eye can
only perceive so much of what it sees. It gives the illusion that
each frame is moulded to the next like fluid movement instead of
being individual images. It is thought that the reasoning behind
this short gap between one image being seen before the next is a
visual form of memory known as ‘iconic memory’ - which is the

6. idea that there is a section in the brain dedicated to quick, responsible and precise short
term memory. This thereby allows the brain to retain an image within the brain for longer
than it is shown on screen.
The idea of persistence of vision is that each image we see individually overlaps one another
creating the illusion of fluid movement. in low budget cartoons usually there is a shared
image for every 2 frames, so the same image is shown twice within the animation (usual
frame rate of around twenty-four would suggest that only twelve of those frames were
separate images) This is possible without detection because the frame rate is higher than
the rate at which we retain an image, which means we could not see the flicker between
each frame. When depicting fast paced movement the animation is usually changed to one
frame per second as two frames does not adequately perceive the movement of the
subject.
The first ever creation of stop motion animation was the Phenakitoscope which was a
simple circle with images around the sides which rotated causing the illusion of a couple
dancing. Stop motion uses persistence of vision and a series of images quickly passing on
screen to create the illusion of movement. Now-a-days our idea of stop motion animation
would be Wallace and Gromit or the night before Christmas, simple clay animations that
‘move’ at around 30 frames per second (fps). The usual frame rate when you’re watching
the TV is usually between 24-30 fps.
Clay or model animation uses moulded shapes
and morphs them to create movement. There
are several kinds of model animation, the most
basic form being clay. You create a character
and then as you take each frame you move the
character slightly at each moment. “Wallace and
Gromit” is a famous series that uses Clay
models. There are even some frames where the
modeller’s fingerprints can be seen in the model.
-Flash (computer) animation-
Frame is the term given to each image in an animation or film reel (stop frame is the actual
image within the frame itself). Frame rate is the amount of still frames per second within a
reel of film or animation. Frame rate is used to determine the speed of which each stop
frame is seen within a second. Usually the frame rate is around twenty four to thirty in
Television. This means that twenty four to thirty frames are shown on screen within a
second.

7. In flash animation, the frame rate is no different. The default FPS is usually 12.0 and can be
altered easily by double clicking on the display and writing in a new frame rate. The more
frames per second the faster the animation will be. In order to create something fluid and
average speed an animator must find a balance between the frame rate and the amount of
movement between each frame.
Frames are displayed as small rectangle boxes on the timeline at the bottom of flash. There
are other animation software available and they will most likely use a similar format when
displaying frames. A key frame is the name of a frame that begins the start and the end 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. Because there is no illusion of movement between the frames a
transition is created between them, morphing one to the other to create the illusion of
movement. These frames are known as inbetweens. This
method of animation is known as tweening.
A less automatic method of animation is to draw each
frame individually. In digital animation there is a tool
called ‘onion skin’ which can be selected. When it is used
onion skinning displays the last few frames under the
current one, making it easier to create a smooth
transitioning animation.
Raster images are images that when enlarged or compressed keep to the same number of
pixels within the image. This means that if the image were to be expanded it would lose
quality and clarity. Lines would become blurred and pixelated.
Raster images are stored as file types such as: BMP, JPG, TIF, GIF and PNG
BMP: a BMP file is a bitmap file, capable of storing 2D images of unlimited width, height and
resolution.
TIF: a TIF file is capable of saving with both a lossless format and a lossy format. It is a
flexible data format allowing you to customise how the image is saved and compressed.
GIF: GIF files are easily portable files that can store up to 8 bit images. It also allows
animation. GIF files allow lossless data compression. GIFs are usually used for mini emotes
and logos on websites.

8. PNG: PNG is a bitmap file that allows
lossless data compression. This means
that when the file is downloaded or
reloaded and saved, it does not lose any
of its original memory after first being
saved as a PNG as it follows the path to
the original save file.
JPG: a JPG file is a common file type used to store images. It allows lossy data compression
which means that every time the file is re-opened and saved it will lose some of its original
data, slowly losing pixels and quality until the image is unrecognisable. The image works to
save memory which is why it is a common file format to use.
Raster images can either follow lossy data compression or lossless data compression.
Lossless: Lossless data compression is when the file when saved follows the same path as
the original file it was saved with. For example a file might have 2000 x 1000 pixels (in total
200,000 pixels) for an image. When saved with lossless compression (PNG..) the file will not
lose any of the pixels. This means that the file can be re-opened changed and saved again
without losing any pixels and therefore any of its original quality. This format is best when
editing a file but does not help in saving memory space.
Lossy: lossy data compression works to save memory through compression. When a file is
saved with a lossy data format the file will continue to lose quality from the original image
every time it is opened changed and saved again. This is because some pixels in the image
are taken out and deleted each time the file is re saved. This file format means that editing
would result in a poor quality image but is useful in saving memory and useful as a
downloadable file on a website.
Raster animation is used for depicting realistic representations of people, animals or places,
rather than the more stylized, anime-style animation you might get with vector graphics.
Raster animation is also use to create animation for logos and banners based on photos or
drawings.
Vector images are images that follow a particular format which allows them to keep the
same quality whatever happens to the image. This allows the possibility for a small image to
be expanded without worrying that the images quality will be lost.
Vector images are stored as file types such as: EPS, AI and FLA
EPS: EPS files are self-contained files that describe an image or drawing and can be placed
within a postscript document. They preserve the description data of an image meaning that
the quality will constantly be the best quality possible.

9. AI: AI is an Adobe Illustrator file. When saving a drawing, if it is AI it is usually means it is
always the original file. This file can only be opened with Adobe Illustrator.
FLA: an FLA file is a file used in flash to save the elements of the flash itself, the editing, the
effects, the frames etc. This file only opens in flash and cannot open in the flash player.
Vector imaging works by used lines, curves, points
and shapes to help mathematically create
representations of images in computer graphics. It
records the points and shapes and paths etc to
keep an image the same. No loss of pixels or
change in shape. Because of this, vector imaging
doesn’t tend to work very well with colour or a
wide selection of them. Vector formats are very
good with bold text and shapes mostly and should
not be used for detailed 8 bit images or above as it
does not work. These file formats are known as primitive objects, anything too complex out
of the capabilities of mathematical equations within the vector format cannot be made into
a vector image
Vector animation often allows cleaner, smoother animation, because images are displayed
and/or resized using mathematical values instead of stored pixel values. One of the most
commonly used vector animation programs is Macromedia's Flash.
Image optimising is a form of image compression used when trying to shorten the file size
(and in turn the download time) of an image for maximum efficiency. Optimisation is usually
used for websites which need to save as much loading time as possible for the best
browsing capability for visitors of their website. A person will on average wait around 7-12
seconds for a webpage to load before leaving it. This means that the website needs to use
as little time as possible for images on the website to load. So they must optimise their
images in order to save loading time.
Animation software and plugins – task 5
Animation can be created with authoring software such as Amara, Swish and Director but needs
plug-ins or players in order to run the animation, especially on a website.
Authoring packages
Swish –Swish is an authoring package that uses flash technology to create interactive and cross-
platform movies, animations, and presentations. The software incorporates flash
animation into a simpler and less expensive tool that allows for less complicated
building of animation. It includes general Flash creation features such as vector
drawing, motion tweens, and symbol editing. It makes building certain Flash
elements such as buttons, advanced transition effects, and interactive Flash sites

10. easier. It does not include some Adobe flash features such as the action script, shape tween and
bitmap capabilities. The software uses SWF. File format, just as flash does, but files cannot be
opened in the other program as the program cannot open or save .FLA files.
Amara – Amara is commonly used for website animation and though it is not as
powerful as flash it is one of the most affordable authoring packages. It can be used
to create a wide variety of text and photo effects and other animations specifically for
websites. It used a .SWF file format that can be used for any kind of website. It is also
compatible with the .FLA file format making it compatible with Flash. HTML is not needed to create
Amara animations and the user would not need any Flash experience in order to know how to use
the software. It is made up of separate applications that are used to carry out certain animations
such as Banner and Photo animations.
Director –Director is a multimedia application authoring platform. It is used mainly
for entertainment, used to create 3D animation with the use of Shockwave 3D and
multiple outputs as a platform. The software was originally created for online
animation and so is easily incorporated into websites. It used Lingo scripting language
and supports Vector graphics.
Players
Flash player –Adobe flash player is used for displaying several multimedia
applications on the internet. It is primarily used to view and play .SWF files online.it
was primarily created to view 2D vector graphics but supports both vector and raster
graphics, 3D graphics and action script. It also streams both audio and video online.
Flash player is a very commonly used player for video sharing sites such as YouTube
and flash animation videos and is popularly used across the world with over 90% connection to all
computers worldwide. Flash player is also available as a plug in for most web browsers. Google
integrated the player into its browser distribution.
Shockwave –shockwave is used to add animation and interactivity to webpages and
though initially created for animation, it is mostly used online to display browser
based games which require a very rich graphical environment. It supports 3D
animation and is used to help display adobe director applications. The simulation of
real-world physics or involving significant graphing, charting, or calculations can and sometimes use
shockwave. It has a much faster rendering engine than flash but it has only connected to around
52% of the world’s computers. It the most used multimedia player until Flash player. Unfortunately
Shockwave cannot be played on Linux or Solaris unless the correct program is installed to run
windows applications.
Real player -Real Player is a cross‐platform media player. Real Player supports and
plays a number of multimedia formats including MP3, MPEG‐4, QuickTime and
Windows Media. It is primarily used to stream online videos and sound. Depending
on what browser the user has real player can have multiple capabilities including CD
burning, video and audio conversion, transferring files to the Ipod or Zune and video
recording.

11. Quicktime –originally created for Mac users but available on other computer
systems, Quicktime is an extensible multimedia framework capable of handling
various formats of digital video, picture, sound, panoramic images and interactivity. It
is available for additional download when adding ITunes to your system and is
completely free to use as all other popular players.