1. Heather Lomas
Uses of Web Animation
Banner Ads
Banner ads are important when it comes to web animation as they are the first piece of information
that a customer sees when they enter a website. By having a banner ad that is outstanding and tells
you all the necessary information it then means you can navigate to where you want to go quickly
and easily without hassle. In some banner ads many people advertise different products in which
they are trying to sell but in others cases they could be selling something larger and more expensive
than a t-shirt or a gadget. The website I have used to talk about is the BMW website. This is because
it shows you a range of different cars across its banner throughout different slides. The animated
banner is set up in a linear form letting you view all the cars and the information to go with them, I
have shown this in the screen shot below. As you can see they have to represent each page a little
dot within a line of other dots. These dots represent the pages so paying attention to which page is
most applicable to u is important. By watching the banner as it continues through all the different
cars, BMW are using this as a selling technique without having a video or just simple pictures that
may annoy or distract the customer.
Information
Information is a lot like instruction. This is where a website is giving you information that you may
find interesting and you may want to know before purchasing the item. In this case I went onto
YouTube where the information displayed was beneath the video. By using YouTube I was able to
give an example on information as it gives you the necessary parts that you need to know. For
example YouTube tells you how many hits a video has had and also tells you when it was uploaded
and how many people like and dislike the video. This information is needed for either the creator of
the video or in other cases members of the public may want to know for studying a particular video.

2. Heather Lomas
Promotion
Promoting a website or other device is used on the internet every day. When it comes to promoting
something it is important in everyday life. For example anything that is giving you information about
a product is promoting a specific thing. Big websites such as Apple who are selling the iPhone ranges
every day and other new gadgets they have brought out are a promoting website. They try to sell
something every day by even entering the website you are instantly prompted with information
about the new IPhone 5 in which they are selling. Promoting websites are also on other websites.
They can include adverts and cookies to your computer so that once you have visited the website
every other website you visit will come up with adverts down the side of your screen advertising
Apple product. This is how a cookie works and Apple can promote their products further.
Entertainment
Entertainment websites are displayed online to entertain you as the used. Entertainment websites
can include interactive websites and also games websites. For this point I went onto the Simpson’s
website where the entire website is interactive meaning you can interact with it and be involved.
The Simpson’s is keeping you entertained with all the different selections on the website and also
offers you a clips section where you can keep up to date and watch your favourite clips from the
Simpson’s series. The entire website is for your entertainment and with its bright and vibrant colours
it is keeping the user interested at all times.
Linear and Interactive
Linear animation is when the animation continues without you being able to stop it. This can be any
sort of animation. A linear animation doesn’t have any play, pause or skip options it is just a basic
animation that you as the user have no control over. Below I have included a screen shot from the
BMW website showing a linear animation that they have used before entering the site. As you can
see there is a sky in which the clouds are moving. This is a linear animation as I am unable to stop or
pause the animation but instead in just continues until I click away from the site. I think this linear
animation is good as it gives you a calm feeling towards the site you are about to enter.

3. Heather Lomas
An interactive animation on the other hand is the opposite to a linear animation. An interactive
animation lets you become more involved as if you are the main controller to the animation. This is
used on many websites so that the user gets more involved with the website and it also intrigues the
user/customer to stay longer. I have used the Simpsons website as an example of interactive
animation in which you can interact with.
In the screen shot below I have shown that within the site there is a range of different places to go.
When I clicked upon the icon to show me all the different characters it was then up to me which
characters I wanted to view from the cabinet with all the characters initials on. As you can see I
selected one and it opened the file right in front of me as if I was doing it. I could then view the
characters information as I wished and repeat the process if I wished to see another.

4. Heather Lomas
Instruction
Instruction is when a website is telling you things that you need to do. This could be anything, from
telling you how to fix something or even how to wash something instruction appears across the
internet every day. I have used an example from Marks and Spencer’s website in which they are
giving information on a product and how to wash it. I chose this as it gives a clear understanding on
what instruction is about. By being able to read instructions on a website this is great for when
needing help with something.
Animated Interface Elements
An animated interface element is something that you can control yourself. The way it works is you
can control the element in which it is working. For example a website that has a range of different
methods of viewing a photo can be an animated interface element. This can include the website
Marks and Spencer’s have made. On the website they have included images of the products they
have on sale. With this they show you different angles of the product with different pictures to
represent each angle. I have shown this in the screen shot below. As you can see I have taken a
screen print from the website I have chosen and shown you what I am referring too.

5. Heather Lomas
As you can see in the screen shots that I have taken I
have shown two of the three different images that have
been displayed. This is a good example as it shows you
how and animated interface works. In some other cases
you can get websites that immediately move with the
image as you hover your mouse over it.
Development of Animation
Hand Drawn Animation
Hand drawn animation is used to create animations when computers and other animation
technology were not around or as advanced. Hand drawn animation was used in the early Disney
films such as Mickey Mouse as he started off hand drawn. Hand drawn animation is where a
character is drawn on one piece of paper and then on many other pieces of paper or canvas the
character is then doing something else, all of these are then put together through a computer and
projected as an animation.

6. Heather Lomas
Flick Books
Flick books are another way of creating animation.
Anyone can make a flick book animation. These are
where you can find a simple pad of paper and draw a
stick man or other sort of character on the back
page. Then by drawing characters on other pages
page by page you can then flick through the book
and the character will animate through your vision.
Animated Cartoons
Animated cartoons are a way of viewing an animation with cartoons moving into different situaions.
Animated cartoons are mainly used to entertain young audiences, these cartoons are usually viewed
on children’s TV channels such as nickelodeon and Cbeebies. Cartoons can also be used in films.
There are many films around even now where cartoons are being used as the main characters. The
way they do this is they film the necessary parts with the real life characters and then afterwards
super impose the cartoons into it to make it look like they are part of the film. This attracts many
audiences even now.
Graphic Information File Format (gif)
This is a file format that can feature animation. A GIF file format can be used in adverts more than
animation. GIFS are used rather a lot in advertising a product or a brand name within the animation.
A GIF only supports 256 colours within its colour pallet so this makes it easier on the colour scale but
not everyone prefers this as when savings pictures as a GIF files they do not always get supported.
XHTML
HTML has another partner known as XHTML. These two are very similar in the way they work but
XHTML is much pickier when it comes to the actual coding. HTML codes are simple and work at all
times when the codes are typed correctly. XHTML on the other hand picks out all the problems and
doesn't work until they are sorted. This is why most people prefer HTML as it works better with
slight mistakes. Tags are the pieces you use on HTML. If you happen to miss closing a tag on HTML it
is likely that HTML will close this tag for you and let it go. Whereas XHTML is much more stricter so it
won’t let it go and it will ask for corrections. This is why many people just use HTML as it is easier
and simple. XHTML is for the more advanced users in HTML who like a challenge. HTML features
different documents. HTML is used to create web pages as we already know. HTML also is there as a
language also for servers to understand and display on the internet. HTML is pretty much
instructions for the servers to know which content they should display. XHTML means you can’t
make mistakes.

7. Heather Lomas
Animation Techniques
Optical Illusion (Persistence of Vision)
Persistence of vision is commonly known as a way that the human eye continues to see an
image for a fraction of a second after it has been removed from the screen or moved onto
another image. Persistence of vision is used to create movies and television programs. For
the human eye to remember an image that previously has appeared means that the film or
video that they are watching becomes fluent and continuous. This is known as a
phenomenon that lets us have the ability to create a still image into a continuous moving
picture.
Persistence of vision is also a visual form of memory known as ‘Iconic Memory’. Like the
picture I have added to this slide, this photo is meant to test your persistence of vision. It is
said as a method to do this you should stare into the centre of the image directly on the
white dots and stare at it for a number of seconds, usually around 10.
Once you’ve done that you should close your eyes and still be able to see the image. This is
a prime example of Persistence of Vision. When it comes to using persistence of Vision
within creating animation the frames in which the images are displayed are usually
displayed in every two frames of recording. There are also cases such as when you stare at a
shining light bulb or the sun. When you view this you then look away and get a permanent
blob or smudge across your vision.
Claymation
Claymation is animation used in a clay form. Clay is a very easy substance that can be
moulded into anything that is needed. Claymation is an older form of animation that was
used before computers and other video technologies came around. Claymation is most
popular that I have seen in a series called Wallace and Gromit. Wallace and Gromit were
created by Aardman animations who took Claymation to a whole new level. With only a
small amount of episodes made overall they used Claymation to create a memorable set of
characters and episodes that kept everyone entertained. As well as this Claymation has also
been used to create films. Claymation is used in all sorts of media but not as popular these
days as there are a lot more computer generated animations about meaning Claymation is
decreasing since it takes so long to create and move claymation models.
Stop Motion
Stop Motion Animation is creating animation whilst stopping the frame to move the
characters. This type of filming is used in such programs as Wallace and Gromit. To make an
animation like this you have to take a sequences of photos or recordings where you set up
your characters and objects into a position and then continuously take photos or record the
sequences frame by frame as each object/character moves gradually creating an overall

8. Heather Lomas
stop motion animation. If you have used a camera to record this sequence then when you
go through the images at the end you can see how the pictures have created a sequence.
Also you will be able to see this in a smoother way by watching it on your video camera. This
is an advantage also as you can see how smooth your overall animation is and whether you
need to improve the gradual movements. This technique of stop frame animation was used
for some of the very first animated cartoons and other such animations that were used for
advertising or even shows. Creating stop motion animation is a long and tricky process.It
takes a lot of concentration and you have to be focused topick up from where you left off.
When it comes to actually putting a programme together it takes months to put
togethersomething that lasts only 30 minutes and when it comes tomaking a film it can take
years.
Computer Generated (Frame Rate, Frames, Key Frames, Onion Skinning, Tweening)
Computer generated animation includes all of the above sections in different modes. All of
these are included when creating an animation on the computer and below I am going to go
into detail about each one.
Frame rates are used in Macromedia flash. Frame rates are used in the settings and when
animating your creation frame rates are basically the speed it takes to view the animation.
The average frame rate is around 24 frame rates per second, this leaves enough time on
each frame to make the animation flow at a reasonable rate. The higher the frame rates the
animation becomes slower as each frame is viewed for longer. The less frame rates per
second that you have means that the animation will be much faster and end quicker.
A key frame is used within a timeline to add in other piece of multimedia such as an image
of a video. This can also be used to create buttons and other bits of multimedia that need to
be included. When it comes to key frames you can use them to link key frames together so
that if you want one page to go another it will do so.
Onion skinning is used to create an animation. Using a simple terms such as creating a ball
to bounce around a screen using onion skinning comes into account as you can switch on
onion skinning to show you the previous position in which the ball was previously. Onion
skinning is used to create animation as it is a handy tool to create the perfect animation.
Tweening is used to create motions between key frames. By adding in a motion tween you
are allowing the animation to all come together. By having key frames with all the necessary
moves on you can then create a tween between each frame that will link them all together
to make an animation.

9. Heather Lomas
Digital Animation
Vector Animation
Vector animations are created and made up of paths and nodes. These paths and nodes
mean that no matter how much you choose to edit the animation by stretching it or resizing
it, it will always stay in the same quality and focus. Vector animations are only used within
certain programs. This is a vector image file format which is used based on a video file.
Raster (bitmap) Animation
Raster animation is animation that is made up of lots and lots of raster images. The way this
works is that raster images are made out of thousands of pixels that hold all different
colours and shades to create an image which can then be used in an animation. The only
problem with raster animation is that if the animation is viewed in a screen that’s too large
for the file, it will then stretch to fit the screen and pixelate.
Compression
There are two sorts of compression, lossy and lossless, both of these are important and
below I have gone into detail about each one.
Lossy compression is when you get a high quality graphic that then begins losing quality
every time you save the image. This is because when you open the graphic it begins to lose
data as it compresses. Every time you save it into a smaller file size the graphic becomes
more and more compressed. The data that’s lost is the pixels which are needed to keep the
quality high. As the pixels reduce the graphic becomes poor and the remaining pixels
because more obvious so the quality has been reduced.
Lossless Compression is when you compress a file without the data being lost. Unlike Lossy
compression Lossless keeps all the necessary data that is needed when it comes to shrinking
a file. When it comes to saving a file Lossless compression then compresses the file where it
saves the data but keeps it and nothing is lost. Therefore the quality stays the same no
matter what the size of the video is.
File Formats (.fla, .swf, .gif, .mng, .svg)
File formats are important when it comes to exporting a file. Some files have to have a
specific format in order for the file to work when exported the file extensions above are
short for, flash files, shockwave files, graphic interchange formats, multiple image network
graphics and scalable vector graphics. Swf files are commonly used when exporting a
presentation into a separate files and flash is used when an animation is created and
exported in a viewable video file. Shockwave files are produced from flash and there is a
wide majority of animations on the internet that are swf files behind the scenes.

10. Heather Lomas
Animation Software and Web Player Plug-ins
Flash
Flash is a program used for creating animation and products. Macromedia Flash as it is also
known as is a program that we all use to create animations. Flash has a timeline built in
where you can change all the different components within it and then also link them to
other buttons and animations.
Director
Director is another way of creating animations. I have used director to create animations
but in my opinion I found it very confusing. Director uses a timeline a bit like flash but it is
harder to use and get everything into the right format. The problem with director is that you
need to ensure everything you do is recorded on the timeline. To create a new page you
need to mark it on the timeline. Everything you do is based on a timeline. Once you have
completed this animation you can export it into any file format you want but the most
popular such as ‘SWF’ is in the options bar.
Flash Player
Adobe Flash player is a piece of software just like the others above but in this case you can
view the multimedia through it. Adobe flash player is a multimedia viewing program that
most commonly runs SWF files that have been created in other Adobe multimedia makers.
Adobe flash can be used on mobile phones and is always available as a default setting to run
videos.
Shockwave
A shockwave player is needed for any animations that have been created in Director. As I
stated above Director is a very fiddly piece of software so knowing that you need a
shockwave player to view your overall creation is important. People who have shockwave
player are able to view games in 3D and also view interactive videos.
Real Player
Real player is not as popular as the above players. Even though it is within these categories I
have never really heard of it. From what I know Real Player is software where you can play
recorded media. This can include sound files such as music or speech. It can also play other
bits of recorded multimedia such as videos. Real player is compatible with other file
extensions such as MP3 and Windows Media Player this means you can use the same files
on each program.
Quick Time

11. Heather Lomas
Quick Time Multimedia player was created by Apple.inc, apple also created the range of
IPods, IPhones and other devices. This is a well-known and trusted company that you know
all their products will be acceptable. Quick time player was created to support all the
different types of multimedia that is created in Apple software, for example, video, pictures,
sound, and other types of software.