Uses of web animation

Banner ads:
Banner ads are usually pop ups, when going online to different sites they
usually pop up on screen and start to play an animation that advertises a
product, below is an example:
Banner ads are usually bright including a lot of
colour and are eye catching, this is so people will
notice them, banner ads also include strap lines
or buss words or cover lines, an example of this
is on the image to the right in the green banner
the yellow words read Download your copy
today! this is a cover line as it is trying to get
people to download the application.
Normally banner ads will appear in places like
YouTube as there will be an advert at the start of
the video, then there will be a pop up banner ad at the bottom of the
video.
Animated interface elements:
These elements are interactive with the user and can be changed with the
user, this can be with the mouse as some animated interface elements
change colour or move then clicked on with the mouse. Animated
interface elements can be used on all web pages and they make the page
interactive as the user can change/interact with the changeable elements.
These elements are all over smart phones, tablets and any touch screen
device as all the elements on screen can be moved or enlarged (image
below)

Linear and interactive animations:

Interactive animations are similar to animated interface elements as they
both change when they are clicked on or pressed (pressed on touch
screen device). Both animated interface elements and linear however just
change where Linear and interactive animations is animated so instead of
a colour change they will begin to play the animation cycle, this is the key

difference between the two. The image below is a gif, the http link next to
it
is a link to the gif and what the animation cycle looks like:
http://media.pyweek.org/dl/8/csl-2/char_guitar.gif
By using linear and interactive animations the web advert or web
page becomes interactive as it has content that users can interact
with/use.
Promotion:
Web promotion is in a lot of different forms, there are pop ups, banner
ads, thumb nails and suggestions.
Pop ups are when a new tab will load in to the computer when you click on
a website, this is often to advertise an online sale or a new site that is
something to do with online casinos (image examples below)
Some pop ups can also be scams that can
infect the computer with viruses once
clicked on, the Congratulations pop up is a
scam, these pop ups usually have the same
pop up lines like: You are the 1,000,000
viewer of this site or You have won a.
The prises in the pop ups are usually
something big like a new gaming pc or a car
etc.

Banner ads can be in the form of pop ups as when on a web page a
banner ad can appear and start playing an advertisement for a product or
another website. There is more information above on banner ads under
the section labelled banner ads
Thumb nails and suggestions are usually the same as these can be found
on sites like Amazon and EBay as hey use cookies to see what products
you view then create adverts suited to you on what they think you want
these are suggestions like People who bought this also bought, this line
is also used on the online play station store as there are suggestions there
too, however this pages suggestions are different as they have a page
called Just for you where there is there are rows of different games with
the titles over them saying Because you played. (Image below is
example of thumb nails on YouTube which also collect data via cookies and
tailor video suggestions based on what you watched previously.)

The red box is outlining the suggestions made

by YouTube, these are on the main page of
YouTube so as soon as you load it up there are
videos that you have been suggested straight
away.

Instructions:
There can be a lot of instructions online, for example Click here for
more information or just click here, these are usually found on
hyperlinks or hyperlinked assets that are used to load in a pop up with
additional information on or load in the main site to an advert.
The images to the right are often used in banners as
they give the user instructions, they can also be used in
scam pop ups as well as example from above: (Image
below first image) is a scam pop up and most of them
will say click here to claim prize, then the scam will be
ether infecting the computer with viruses or then
instructing the user to use banking information to claim
the prize or to pay for shipping.

Information:
The internet is a good source of information as when searching something
there can be millions of results all with similar and different information
(screen shot example below)

In
this search for the word information 8.59 million
results appeared, the screen shots above also show how long it took to
gather all of the links and this took 0.37 seconds which is a bit slower than
the searches that are more refined as it takes less time to gather the http
links as there wont be as many links.
The most commonly used site on the internet for information is Wikipedia
(screen shot of main page below) the downside to Wikipedia is that

anyone can go onto the site and edit the content so the website isnt
reliable.

Entertainment:
There is a lot of entertainment online as there are shows, films, games,
music etc. Some entertainment websites include: Amazon prime, Netflix,
Put locker, Couch turner, YouTube etc. Some of these have to be
subscribed to like Amazon Prime and Netflix, this costs, others like put
locker and couch turner do not need to pay for. The examples above are
websites for shows and films. (The images below are the different logos
for the examples above)

There are also other types of entertainment online as there are online
downloadable/playable games, for example Windows Is connected with
Xbox, meaning you can get Xbox games on Windows devices, below is a
screen shot of the Windows 10 All apps drop down list:
(The red boxes) These
highlight the Xbox
symbols/links, the smaller
one is the drop down list
where the larger one is
because the application has
been opened recently and
has been pasted to the main
area.

And last on the list is music, this is from a variety of different websites
including: YouTube, Spotify and a lot of different websites that have music
content. YouTube is for both videos and music as most of the music is in
mp4 format/includes a video. Below are logos of both YouTube and Spotify:

History of animation:
Hand drawn animations:
Hand drawn animation is drawings on a notebook that when flicked
through create a short animation cycle, below is an image of Disney hand
drawn animation:

These are early ideas for an animated movie by

Disney, showing that before an animated film is
made there is a lot of story boards and mood
boards etc, this includes concept art, the image to
the right is some content art for the Disney film
ratatouille. The image shows to the right that
even larger animating companies will still use
hand drawn work to create a film.
Hand drawn animation can also be played on a projector as one image
that is almost identical to the last is played one after another, this is to
make to look like motion instead of a lot of separate still images. (Link to
a Wikipedia entry of a hand drawn animation from 1919:
https://en.wikipedia.org/wiki/Traditional_animation)
Hand drawn animation isnt used any more as it takes far too long to
create and it is much quicker and easier to create digitally through
software such as Adobe flash or director (Screen shot logos of director and
flash below)

With these software it is easy and quick to produce an animation, if a full

length film were to be created in hand drawn style it would take far too
long and there would be thousands of images as the current screen rate is
around 30 frames per second so there would need to be 30 images per
second 1.3 hours * 60 = 90 minutes *60 = 5,400 seconds, so 5,400 * 30
= 162,000 images needed to create a film in hand drawn animation, this

would take far too long and the profit wouldnt even cover the cost of all
the raw materials to create the film.

Flick book:
Flick books are similar to hand drawn animation as they are very similar
images being played one after the other to look like movement instead of
separate images. Flick books are not played on a projector/screen as they
are drawn on pages of a book and flicked through to show the animation.
(Below is an image and link to a flick book animation)
(Image of illustration of flip book) Link to video with flip book:
https://www.youtube.com/watch?v=ud8dSDy5lB4
The link above shows an example of a flip book and the images
also shows an example of a flip book.
Just like the hand drawn animations it would take far too long to create a
full length animated film in this method as the hand drawn film would
need over 160,000 images to be a full length film, instead software like
Adobe Flash and director is used so it takes a lot less time to create and
costs a lot less as there are no raw material costs (paper, pen, pencil etc)
(Images of flash and director logo below)

Animated cartoons:
Animated cartoons usually were made from hand drawn animations as the
characters were drawn and drawn again in a slightly different way and so
on until there was thousands of drawings that all looked very similar
slightly different in each one, then when put together and shown one after
the other (like the flip book it would reveal an animation. The first link is to
an original black and white animated cartoon:
https://en.wikipedia.org/wiki/Animated_cartoon#History. In later years the
cartoons became a lot more advanced as sound and colour were
introduced, the animations are now made on computers as it is a lot
easier than drawing the same things out thousands of times over for 5
minutes of footage. Software like Adobe Flash professional 2015 can be
used to create animations (Adobe flash professional logo below)

The older animated cartoons did not include sound, instead there was cut
scenes with captions of what was being said so people could follow the
story along. Newer/modern include colour, sound etc so captioning is not
needed.
Animation process:
The animation process has changed a lot since it was first invented, the
original method was to draw hundreds or thousands of images that are all
slightly different then playing them fast to make it look like an animation
cycle where modern animation is mostly created digitally, this is because
it is a lot easier and quicker to create and it looks a lot better than
drawings as the resolution of the images is a lot higher and there is colour
and sound etc. (Below is an image of an old black and white animation
to the left and a modern colour animation to the right)

There is a lot of difference

between the two, for example
the older animation is blurred
and grainy where the newer
animations arent, there is
also colour on the newer animations and the films include sound, if there
was a full length film created in the hand drawn style it would take far too
long and wouldnt be worth making as it would cost far too much to pay
all the writers to hand draw thousands and thousands of different images.
Graphic information:
Graphic information refers to the file type of the animations. The file type
is important as it means that the animation is compatible and
incompatibles with certain software, most early on animation can be made
into gifs as there isnt any sound only images which means it is perfect for
gifs. The newer animations can be saved as mp4 format, this is because
mp4 is accepted by most software and can be edited on a lot of different
programmes, the images are usually saved as .PNG or .JPEG files.

This is the file of all the examples I used in this

document, these are all ether .JPG or .PNG as it is
a common file type. GIF and MP$ are also
common file types that can be imported/used in a
lot of editing programmes/software. The most
common editing software is Adobe: Photo shop,
Flash and Fireworks. (Below the file screen shot is
an image of the Adobe logo)

Animation:
Optical illusion of motion:
Some images are an optical illusion that look like they move, below is an
examples of this:
This is a still image, it looks like it is
moving but it is a still image, this is
proven with the file type as the format is
not gif it is a .JPG which is a still image file
format, not a animation, screen shot
below optical illusion example:

(Screen shot to the right) This is the end of the

details of the image, this shows that it is a still
image)
https://www.google.co.uk/search?
q=optical+illusions&biw=559&bih=411&site=webhp&tbm=isch&tbo=u&s
ource=univ&sa=X&ved=0ahUKEwiv37DhncDLAhXIPBoKHZNoDoIQsAQIKQ
(This is a link to google images, on the link there is a lot of different
examples of optical illusions).

Optical illusions can look like they are moving (like the example above or
they can look 3D like the example below:
This is done with shading, on the right of the
cylinder the colour becomes faded/lighter, this is to
give a 3d effect the tiles to at the bottom right also
look more shaded than the rest as it looks like a
shadow is being cast by the cylinder where the red
arrow is pointing, this is to add the 3d perspective to
the image.
As well as 3d there is optical illusions that show
depth in the image, below is an example of this:

This shows depth because the image looks

like a tunnel and the centre looks further
away than the edges, this is also created with
shading as the edges are lighter towards the
edge of the image where the centre is darker.

Claymation:
Claymation is a form of animation. Claymation is using clay sculptures or
figures and a camera to create animation, just like flip books and hand
drawn animation, the clay is moved slightly, picture taken, moved again
slightly, another picture taken etc. until enough footage is captured, below
is a link to a Claymation video:
https://www.youtube.com/watch?v=GnkB21NEI4g
(To the right) This is a screen shot of the linked
video, this is a good example of Claymation as
it the figures have been moved slightly and all
the images were then used to make an
animation.

A popular Claymation is Wallace and gromet, the easiest was to tell they
are clay is the fingerprints on the clay as after each picture the clay is
handled and moved slightly, by doing this some finger prints are left and
the models might become misshapen, this is because they are being

moved and stretched slightly after every image. (Below is an image of

Wallace and gromet.)
The good thing about clay motion is it doesnt need
a budget/a lot of money to produce, the best
example of this are the two above as Disney
produces Wallace and Gromet, meaning they could
spend a lot on it and the YouTube clip is just one
person with a camera, both of the animations are about the same
considering the difference in budget. Because it doesnt need a lot of
money to produce a lot of people are able to create Claymation.
Claymation is a form of stop motion animation as there are lots of still
images that are all very similar, they are all played together quickly so
that it looks like the images are moving instead of just lots of still images.
Stop motion:
Stop motion is a form of animation, in films they use motion stop to get
objects to move on their own, for example in horror films where doors
slam or objects fall over it is done in stop motion as they take a lot of
pictures with the object slightly moved each time Below is a couple of
links to the video of stop motion:
https://en.wikipedia.org/wiki/Stop_motion and
https://en.wikipedia.org/wiki/Stop_motion
The second link shows the object moving with stop motion, this is by
moving them a bit, taking a photo, moving a bit more, another photo etc.
(Below is a screen shot of both of the videos linked above:

Both of these clips are stop motion animation, the top

video is clearly older than the bottom as it is in black
and white where the bottom one (still looks quite old
resolution bad) is in colour.
The top clip was made in 1908 and the bottom clip
was made in 1925, this shows that stop motion was
made sometime around 1900, since then it has
improved a lot as image resolution, size, speakers and
displays have all been improved a lot, as well as this
colour and sound have been included in the
animations and Wallace and Gromit are another good
example of this as they have both new stop motion animations and old
stop motion animations. (image of Wallace and Gromit below videos
screen shot)

Computer generation:
Currently, most animation is done digitally. There is
software for creating animation, this includes things like
Adobe flash, Adobe fireworks and director (logos below)

On flash there are a lot of different features such as frame rate, key
frames, onion skinning and Tweening, below I will describe each of them
and screen shot the software:
Frame rate: Frame rate is the amount of frames play each second, this can
be seen at the bottom of the page (screen shot below)
(Image to the right blurred) the image shows the
default frame rate which is 24 frames per second
(fps) meaning every 24 frames is the equivalent to
1 second of footage, in stop motion this is 24
images, even though this number can be
changed, 24 images per second is the main reason there arent many
amateur stop motion films as they wouldnt have the budget to store the
amount of images (calculations: e.g. 30 fps normal rate. (regular film 1.5
hours/90 minutes/5,400 seconds) 5,400 * 30 = 162,000) In the brackets
the calculation shows a full stop motion film would average at around
162,000 images, if this was one person it would take weeks to take all of
the images and even more time to upload all of the imagers and import
them all to flash then export the document.
Key frames: In flash there is a timeline at the bottom, in there you can add
key frames, key frames clear whatever is currently on screen and start the
thread again blank, below is a timeline example of blank timeline with
options when right click, then under that is a close up of a key frame on
the

timeline:

(Highlighting the key frame option on the list above)

(Below is a close up of a key frame on the timeline.) the image below is

what a key frame looks like.
The rectangle at the left is the end of the assets currently on
screen and the circle is the new frame without any of the old
assets that were before the key frame. Two key frames can be
used to create a motion tween or create a classic tween this is
where an asset can be moved around (Tweening) Tweening refers
to creating classic motion tweens or motion tweens the difference is the
motion tween is an updated version of classic motion tweens where
classic motion tweens are the same as the old version of flash. Below are
two key frames with a motion tween added in-between.
(pasted an asset to the document as I ned an asset to link the motion
tween to)
When a motion tween is added the space the tween
occupies turns blue to show there is a motion tween, a
classic motion tween shows up purple, this is so it is
easy to tell the difference, this is like a code.

Onion skinning refers to the different layers, this is because onions have
layers and on the bottom left of the page the flash document also has
layers:

The red box is showing the layers and where all the
different layers are displayed.

The red box to the right shows what button is used to

add extra layers to the flash document.

The more
the project
can also be
seen to the

layers added the bigger

becomes, these layers
moved and re named as
right:

Digital animation:
Vector animation:
In images there are two main types, bitmap and vector. Bitmap is made
up using pixels, the higher quality the more pixels, the lower quality
means less pixels. Low resolution images have less pixels which causes
pixilation whereas vector uses lines and point.
The main difference between the two is bitmap images can become
pixelated easily, ether the original file is too small or they get compressed
or they become enlarged too far, whereas vector uses lines and points
and not pixels so it cannot pixelate when enlarging the vector animation
or image all aspects of the image/animation enlarge too so quality is not
lost.
A good example of vector animation is on the following link (note not all
of the gifs on this site are vector the one hyperlinked to is)
http://giphy.com/gifs/2d-animation-vector-art-JyMC8xiMB4EtG (Below is a
still image of the vector animation:
Vector animations are a lot better than bitmap/raster
(same thing) as they dont drop quality if/when
enlarged, this is good as the vector animations are used
online, if a bitmap animation is used online so if the
animation is too small it can be scaled to a small logo or
a jumbotron and still have the same quality throughout.

Bitmap/raster animations:

As specified above bitmap animations are made with pixels, this isnt as
good as raster animations as if/when they are scaled down or up the
resolution of the animation will downgrade as the aspect ratio is being
stretched (example below)
The image to the left is a perfect example
of the top two categories (bitmap and
vector) as on the left there is an enlarged
bitmap image which is low quality and on
the right is no change between the
enlarged and smaller vector image.
The pixilation on the left image is a lot
better than if it were an animation, this is
because animations have a lot more data in
them therefore when compressed they lose a lot more resolution than
images do, compressed (lossy compression) happens when saving or
exporting documents this is to lower the size of the file in order to save
space, the bigger the file the more it will be compressed, with an
animation there is a lot of data compared to an image so it would
compress a lot more and ruin the animation.
Compression:
Compression is only mentioned and roughly explained in the two
paragraphs above. There are two forms of compression, lossy and
lossless, first I will explain lossy and then lossless underneath and finally
how they both affect download speeds.
Lossy compression is where an exported file Adobe for example will
lower the resolution of the project when exporting the file, this is to lower
the file size and try and save space on the computer, the higher the file
size the more the file is compressed, this is so smaller files arent
compressed as much. (Below is an example of this)
The image to the right shows the
effects of lossy compression, this will
happen when editing an image on
photo shop, however there is a pop up
when exporting a file from photo shop
(Screen shot below image to the left)
(Screen shot under first image to the
right) This shows a scale slider, when
set to 100% it will only compress the
image slightly, but when set to 10% it
will compress the image a lot.
Compression isnt too bad for smaller low resolution images as they are
already pixelated, and due to the file size wouldnt get compressed much

anyway, compression affects larger HD/1080p images as the file size is

quite large and is heavily compressed and the image becomes pixelated.

Lossless compression is similar to

lossy compression as it will lower a
file size, but the main difference is
that lossless compression does not
lower the quality but it lowers the file
size, this is good as it gives the
benefit of lossy compression but it
does not pixelate the image in the
process, lossless compression came a few years after lossy
compression most programmes/software still use lossless compression,
lossless will compress the data but allow it to be perfectly reconstructed
after compression, this is so none of the quality is lost
This image to the right describes the lossy
and lossless compression well as lossless
doesnt lose anything whilst lowering the
file size where lossy will compress the file
but lose detailing/pixels in the process and
become distorted/pixelated.

Compression (both lossy and lossless) affects download speeds a lot as

the bigger the file size the longer it will take to download, e.g. a film will
take a few minutes/much longer to download (depending on the
specifications of the computer being used) than a image which would take
much less time this is because the film would be a at least a GB
(gigabyte) where the image may only be a few KB (kilobyte) the difference
between the two is kb *1024 *1024 is the equivalent to a GB. If the file is
compressed a lot it is a smaller file and takes less time to download, if
nether compression types are used on the file the file will take longer to
download as it hasnt been compressed.
File formats:
There are a lot of different file formats, below is a list of them all:

(Image to the right) This image shows

and illustrates all of the different file
formats, all the image and animations
formats are the top row of the image,
then there is all of the windows
documents on the second row e.g. .doc
is a word document and .ppt is a power
point document etc. The third row is all
music type files, the most well-known is
mp3. The 4th row is all the different
video/video and sound files the most
well-known is mp4- same type as mp3.
The bottom row is all adobe and online,
for example html is online and fla is a flash document.
As specified above all of the different file formats are in different
categories and are used for different purposes. The image above does not
specify all of the file formats, however it does give a clear illustration of
some of the different file formats, they are missing some adobe file
formats, smaller file formats, Apple file formats etc. The smaller file
formats are not mentioned because there would be hundreds and the
image would be too big (regarding the last paragraph if all the file types
were specified on this one image it would be far too big and compression
would pixelate it so much each word would be a pixel.).
In the image most of the large/important file formats are included, also
there is windows formats and not apple formats, however windows have a
lot more text based documents file types than apple so it is better to
mention them instead of the few apples have.

Web animation software:

Authoring:
Authoring means when someone creates a computer application or
programme or multimedia product examples of these are: Programme:
Windows, Apple, Lynx etc. Applications: Adobe, Microsoft, Apple etc. and
multimedia products: Facebook, Twitter etc.
By authoring the app/programme/ multimedia product it protects the work
and ensures that people are able to create product like google and
Facebook etc. an example of this is:
view-source:https://www.google.co.uk/webhp?hl=en
When pasting the strand of text above in the search bar the coding to
Google will show up (screen shot of first paragraphs below)
(Image to the right) is Googles html coding, authoring software is used in
programmes like Adobe, Macromedia and code building pages, this is to

allow people to create their own images,

videos, games, music files, gifs, websites,
operating systems and programmes.
Some of these software is very easy to use
and use programming features to help
people learn the basics of coding, a good
example of this is Scratch, (Logo/images
below) http to scratch link:

https://scratch.mit.edu/

This is a screen shot of the home page of scratch (Screen shot to the left)
in the top right there is a video, there is a screen shot of the opening to
this video below the image to the left.

Because this is an authoring software that is

easy to use there is also a video included to
ensure it is easy to use and understand.

Director is also an example of authoring as it allows people to create

software and other products, director is more complex than scratch but
also has more features and can create more advanced content (below is a
screen shot of the home page of director) Here is a http link to director
home page: http://www.adobe.com/uk/products/director.html.

(image to the left) This is a screen shot of

director main page, there is images of the
software and information on the software
such as what version is currently operating,
its features, how much it costs to download
for an amount time.

QuickTime:
Quicktime is a multimedia framework developed by apple. QuickTime
allows users to create videos/films etc.
(Image to the left) this is a screen
shot of the quick time application,
it does not work on the computer
as it is developed by Apple and
only compatible with Apple iOS.
Quicktime can also be used for viewing films and videos, below is an
image of quick time player:
(Image to the left) This image proves that quick player
is able to play video/films. Quick time was initially
released, August 28, 2009; 6 years ago.