James Clayton

Unit 65 assignment 1 Report

Uses of web animation

Banner ads:
Banner ads are most often found on websites either along
the top of the page in a horizontal format, or down the
side(s) of the website in a vertical format. The resolution of
a normal banner advert which may be used on a website is
468x60, this means the banner is 468 pixels horizontally
and 60 vertically giving the banner a total of 28,080 pixels.
The vertical version of a banner which is known as a
skyscraper is 120x600 meaning it is 120 pixels horizontally
and 600 vertically giving it 72,000 total pixels.
Web banners most commonly involve animations as it
makes the advert more interesting than a static one that does nothing.
The most common animations used are to make the text appear from the
side of the banner, or if the advert is more creative like on this
Volkswagen advert the user can interact with it causing animations to
occur. On the example advert Ive used you click on a piece of road to
rotate it, once youve rotated all of the road pieces into the correct place
the car will drive to the end and the information about the car will appear.

Animation interface elements:

An interface is anything that the user can see or interact with, for example
on most programs when you hover over a button it will change colour to
show it has been interacted with, this is an interface element. On mobile
devices when you press on the keyboard the letters change colour to shop
theyve been pressed, this is also an interface element as it only occurs
when the user interacts with the interface of the device. Animation
interface elements are also used on web banner but not just on buttons,
they could be that when the user moves their mouse onto the advert it
will start playing a sound track and possibly a video on the advert. Some
adverts do this as theyre not allowed to instantly play the sound track
when the advert loads as it would annoy the users, so instead they use an
animation interface element to play the sound or video once the user
moves their mouse somewhere.
This example of an interface element is off Microsoft
Word, the button on the left has been selected by the
mouse so it changed colour to show that whilst the button on the right
stays the same because it hasnt been interacted with.

James Clayton

Linear and interactive animations:

Linear animations are different to interactive animations in that theyre
used for things such as films and videos whereas interactive animations
refer to ones used in games. Any animations
which was produced with the intent to be
shown on television, shown in cinema or
used in a video are classed as Linear
animations, this means that all animated
movies use Linear animations. An example
of a movie which uses Linear animations is
Horton Hears A Who.
Interactive animations are used in all games
where the user can make inputs into the
game, theyre called interactive animations
because they require the users interactivity
to run. Mario Kart is an example of a game
which uses interactive animations, they are
used in the menus to make them more
interesting and also to flow better. For
example when the user switches between
different character using the joystick or thumb pad the characters will
move on and off the screen rather than just disappearing and then
appearing. Also the characters move whilst on screen as it looks much
better than just having a stationary figure. To play the game the user uses
the joystick and other buttons to control what the characters do, they
respond to these inputs by doing different actions and animations which
are all done using interactive animations.
Some adverts may use Linear animations if they contain a video and
others may use Interactive animations for buttons and moving text.

Promotion:
The promoting of a product or new movie can be done in many different
ways, the most popular and successful is through TV adverts. One of the
most successful TV advertising campaigns was for a shampoo called Old
Spice. It had a very unique advertising strategy which tried to confuse and
shock the viewer by making the man in the advert seamlessly change
between scenes. By making several different versions of the advert they
made it more interesting because It wasnt the same advert all the time,
doing this made people pay attention to the advert making it very popular.

James Clayton

In about two days the company had churned

out 186 personalized scripted video responses
featuring Mustafa responding to fans online,
doing this allowed the company to gain even
more publicity. These small video responses
got almost 11 million views, and Old Spice
gained about 29,000 Facebook fans and 58,000 new Twitter followers.
TV adverts are usually the most effective as the viewer isnt able to skip
them so theyre almost forced to watch them, other forms of advertising
such as web banner dont have this. To try and make them more effective
at attracting the user to look at them audio can be used, this works most
of the time as the user will look for the advert to mute it but doing this will
make them un-intestinally look at the advert therefor getting their
attention.

Instruction:
Instructions on web adverts refer to things such as short sentences which
instruct the viewer to do something, these instructions could be
something like Click here, Try our new product. Theyre called
instruction or commands as they arent asking the viewer if theyd like to
do it theyre telling them to do it. Using an instruction like this is more
effective than saying Why not click here? as it doesnt reinforce the idea
of not clicking on the advert.
If the user does click on the advert as it has
instructed it will take them to the
advertisers page in a new tab, or if the
advert is asking them to sign up for
something such as an E-newsletter it may
open up a tab window where they can enter
their details.
If a person was to click on this example
advert it would take them to the website
which is being advertised where they could then sign up if they wanted
too.

Information:
When an advert is being created such as this broadband advert the
designer/s will try and get as much information onto the advert as
possible, for example on this advert it has lots of terms and conditions at
the bottom which take 1/5 of the advert, adverts like this need this
information for legal reason. How an advert gets its information across to

James Clayton

the viewer determines how effect it will be

at getting attention. If an advert is just a big
block of text the viewer will most likely just
ignore it as they wont be interesting in
reading lots of information, instead they
want it as quickly as possible so a short
sentence which talks about what the advert
is would work much better.

Entertainment:
Adverts which have the intention to entertain the viewer are also the ones
which people are most likely to pay attention to due to the bright colours
that they use. Another way they entertain the viewer is through videos,
animations and audio. To make them the most effective they need to be
entertaining right from the beginning of the advert otherwise if the viewer
looks at the advert then and sees its boring they may move on.
The types of animations these entertaining adverts may use are ones
which make text move around the advert, text come on and off the
screen, images move about and possibly some gif animations.
Entertaining adverts should also have a sense of humour to them as a
funny advert is more entertaining to watch than a formal serious advert.
This example here is a Cadburys advert
which advertised their chocolate. In the
advert theres a gorilla playing the drums to a
famous song, this is a very unique advert as it
was one of the first to do something like this.
Due to its strange and funny nature the
advert went viral on the internet showing that
an entertaining advert (if done right) can be
very successful at its job.

History of animation
Hand drawn:

James Clayton

Hand drawn animations were the first ever

animations made, the first ever movie made
using hand drawn animations was created in
1908 and is called Fantasmagorie.
Hand drawn, or traditional animation, are
made by drawing a sequences of animation on
sheets of transparent paper perforated to fit the peg bars in their desks,
once the paper is secured on the desk the animator then draws out one
picture or "frame" at a time. A peg bar is an animation tool that is used in
traditional animation to keep the drawings in place. Creating a hand
drawn animation is very time consuming as the animator has to draw out
every single animation frame by hand, this means they have to draw an
almost identical picture every time but just add a small amount of
movement to the character. Once the frame has been drawn it is given to
another animator who then adds colour (Older animations which were just
black and white didnt need this last step).

Flick books:
Flick books are another early form of animation, they are made by
drawing a frame of an animation on each page of a book (usually in the
bottom right corner) The person holding the book then flicks through the
books pages using their thumb, this is why its called a flick book.
Flick book animations are only short as theyre
restricted to the amount of pages in a book, the
books could be made thicker but then it would be
harder for the user to flick through the book making it
pointless as the animation would keep getting
interrupted. Flick books are still quite common today
but are mostly used for kids entertainment as its
fascinating for a child to see a book come to life.
Here is a very short flick book animation showing the
15 different drawings which are each on separate
pages. This flick book is of a volcano erupting
although anything can be drawn on a flick book animation.

Animated cartoons:
An animated cartoon is usually a short film for the cinema, television or
computer screen, which is made using hand drawn animations, clay,
puppet and other means. One of the very first successful animated

James Clayton

cartoons was Gertie the Dinosaur by Winsor McCay which was made in
1914. It is considered the first example of true character animation. At
first animated cartoons were black-and-white with no audio, as they kept
progressing musical sound tracks were added to the cartoons which was
also a big selling point of them.
The first cartoon to use a soundtrack was Max Fleischer's My Old Kentucky
Home which was made in 1926. However, the sound system and the
sound was not completely synchronized with the film due to it being
completely new. Walt Disney's 1928 cartoon, Steamboat Willie starring
Mickey Mouse, was the first to use a click track during the recording
session, which produced better synchronization between the sound track
and the movie. "Mickey Mousing" became a
term for any movie action (animated or live
action) that was perfectly synchronized with
music.
Bugs Bunny is an animated
cartoon character created by
Leon Schlesinger Productions
which is now known as Warner
Bros. Cartoons. The character
was originally voiced by the Mel
Blanc, also known as "Man of a
Thousand Voices". Bugs
Bunny is best known for his
starring roles in the Looney
Tunes and Merrie Melodies
series of animated short
films, produced by Warner Bros. during the golden age of American
animation. Since his debut the animated character Bugs Bunny has
appeared in various short & feature films, compilations, TV series, music
records, comic books, video games, award shows, amusement park rides
and commercials. He has also appeared in more films than any other
cartoon character.

Animation process:

James Clayton

The process of making an animation, no

matter what technique is used, can take a
very long time. This is because every
single frame has to be created from
scratch and then replicated and change
slightly for the next frame making it a
very long and repetitive process, For example a typical full length
animated movie can take up to 6 years to create as they first have to
come up with all of the designs.
One of the most famous animation companies is Pixar, this is their
animation process:
Pixar's process is based on a few simple approaches. Films are visually
developed, meaning their process is one that celebrates visual
presentation rather than narrative. They use traditional skills, like drawing,
painting, sculpture and storytelling in their planning process. They work
on their films as a team, collaborating together to create the animations
faster and more efficiently. Part of their ability to collaborate comes from a
design process that involves the routine exchange of design products
between the designers and animators.
Once all of the designs and story have been
produced animators can begin to create the
characters, they do this by creating a mesh
of the character which theyre then able to
move allowing them to animate. Once the
base character shape has been made they
can then apply details such as fur and hair.

Graphic interchange file format (GIF):

The Graphics Interchange Format, best known as GIF is, a bitmap image
format that was introduced by CompuServe in 1987 and has since come
into widespread usage on the internet due to its wide support and
portability. Theyre often used for simple animations such as this rotating

James Clayton

globe, or more technical animations which show how

the internal components of machines work.
The format supports up to 8 bits per pixel for each
image, allowing a single image to reference its own
palette of up to 256 different colors. It also supports
animations and allows a separate palette of up to 256
colors for each frame. These palette limitations make
the GIF format less suitable for reproducing color
photographs and other images with continuous color, but it is well-suited
for simpler images such as graphics or logos with solid areas of color. GIFs
do not work very well with shading due to the minute change in a colour
which would quickly take up the 256 colours limit. GIF images are
compressed using the Lempel-Ziv-Welch which is a lossless for of data
compression to reduce the file size without degrading the visual quality or
the graphics.

Animation
Optical illusion of motion:
Motion illusion is an optical illusion in which a static image appears to be
moving due to the cognitive effects of interacting colour contrasts and
shape position. Apparent motion is the most common type of illusory
motion and is perceived when images are displayed in succession at a
specific frame rate such as in a movie.
In a movie when a large object such as a plane or ship needs to be shown
as moving a technique used induced motion is used. Induced
movement works instead by moving the background around a fixed object
instead of the object itself moving. Films such as Airplane! and Top
Secret! used a fixed prop and moved the background props to give the
effect of induced motion. This technique is used when making movie as it
is much easier that having to move a plane for example, it also means
scenes where a plane is flying can be filmed
in a large hanger or warehouse making it
much cheaper than having to film a flying
plane.
This image here is an optical illusion called
Rotating Snakes and was made by Kitaoka
Akiyoshi. Staring at different points on the
image will make the outer rings on each
snake look like theyre rotating slowly even
though theyre stationary.

James Clayton

Claymation:
Clay animation also known as claymation is one of many forms of stop
motion animation used for the production of films and other forms of
video. Each animated object such as a character or background is easily
changeable due to the soft moulding clay theyre made from. To produce a
clay animation a photograph is taken at every frame of the animation,
once hundreds of pictures have been taken they can be played back
creating the motion of the characters.
Each character or object is sculpted from clay or a similar material such
as Plasticine, these materials are used as they are available in lots of
different colours, theyre easy to shape and also hold the finished shape
very well. The clay or Plasticine is usually built up around a wire skeleton
called an armature. Once the character or object has been moulded it is
placed on the scene and shaped into the correct position where it is then
photographed once before being slightly moved by hand to prepare it for
the next shot. This process of slightly moving the character is repeated
until the animator has achieved the desired amount of film. When the
pictures are played back usually at around 24 frames per second the
human brain translates these pictures into motion due to the quick
succession that theyre shown.
One of the most popular Claymation
shows to ever be produced is
Wallace and Gromit. The first short
film was called A Grand Day Out and
was first released in 1990. It is still
very popular to this day.

Stop motion:
Stop motion is an animation technique that physically manipulates an
object making it appear to move on its own. The object is moved in small
increments between individually photographed frames which creates the
illusion of movement when all the separate photographs are played back
together, usually at 24 frames per second. Dolls with movable joints
or clay figures are often used in stop motion for their ease of

James Clayton

repositioning, this is because the animator can easily move the character
but it will also retain the new shape it has been put in. Stop motion
animation using Plasticine is called Claymation. Not all stop motion
requires figures or models, many stop motion films can involve using
humans, household appliances and other things for comedic effect. Stop
motion using objects is sometimes referred to as object animation. The
types of animation involving objects you cant really manipulate are the
simplest because all the animator can do is move the object around.
Stop motion is often confused with the time lapse technique where still
photographs of a live surrounding are taken at regular intervals, the
length between each interval usually depends on whats being
photographed. For example if the growth of a plant was being
photographed a picture might be taken every 5 hours for a couple of
weeks, whereas if a time lapse of a city was being taken the intervals
might only be 10 seconds.
Stop motion is mostly used in the
production of short animation
sketches which are often made
using Lego, this is because the
animator/s can easily move the
Lego characters around and then
take another photograph. Stop
motion is also very simple to do as it only requires a camera and some
editing software on a computer.

Computer generation:
Computer animation also known as CGI animation is the process used for
generating animated images on a computer. Modern computer
animation usually use 3D computer graphics although 2D computer
graphics are still used for faster real-time renderings. Computer animation
is just a digital successor to the stop motion techniques used in traditional
animation with 3D models and frame-by-frame animation of 2D
illustrations. Instead of the characters and objects being physical models
that animators move theyre now all on the computer where the animator
uses software to edit the characters. Computer-generated animations are
more controllable than other physically based animation techniques such
as Claymation because it allows the creation of images that would not be
possible using any other technique. Computer generated animations also
remove the need for lots of different people in the production process as
the animator can do it all them self on the computer without the need for
lots of clay modellers. To create the illusion of movement in computer
animation an image is displayed on the computer screen and then

James Clayton

repeatedly replaced by a new image that is very similar to it, this replica
image is advanced slightly in time.
The only downside to computer generated animations is that everything
has to be created from scratch, this could be the characters to the sets. To
create an animated character the animator will be given a drawing of the
character which would have been drawn out by one of the sketch artists.
The animator then begins to create the character in a 3d editing program.

The frame rate refers to how many frames are shown every second, for
example if a movie is made at 30 frames per second (fps) it will have 30
different frames for every second of movie shown.
Most modern animated movies are made at 30 fps
as it looks smooth but keep the final size of the
movie down compared to if it was made at 60 fps.
For computer animated movies producing them at
30 fps is a lot of work because the animators have
to smooth out animations over 30 different frames
in each second which is a very time consuming
process. Animations which arent made on the
computer generally arent made at 30 fps as its too
much work for the final result, instead animations
made using Claymation are usually around 12-15
fps as this roughly halves the amount of frames required in the animation.
Homemade stop motion animations are often around 5-10 fps, once again
as it reduce the total amount of work required to create one second of
footage.
In animation a key frame is a
drawing that defines the starting
and ending points 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
animation defines the timing of the movement. Because two or three key
frames over a second dont create the illusion of movement frames are
added between the key frames, these are called in-betweens as they fill in
between the key frames.
Onion skinning is a technique used by animators to see different stages of
an animation all at the same, they use this so they can see if an animation
is correct before they move onto the next stage in the animation process.
This example shows how it is done. The more dominant horse is the
current frame the animator is looking at and the other less visible version

James Clayton

of the horse are the other frames which are being

displayed using the Onion skinning technique.
Tweening is the process
of generating
intermediate frames
between two
images to give the
appearance that
the first image evolves
smoothly into the
second image. Software
may be used
to manually render or
adjust transitional
frames. The free
program Synfig specializ
es in automated
tweening of animations.
An example of
tweening are the in between frames used to fill the gap between two key
frames, these frames are added in to make the movement of an object or
character look smoother and more refined. Depending on how smooth the
animator wants the animation to be they will either have more tweening
or less. If they wanted their animation to be smooth they would have a
higher amount of generated tweening frames compared to a rougher, less
smooth animation, which wont have as many.

Digital animation
Vector animation:
Vector animation is simply animations made
out of vector images instead of raster
images. This means that they arent made
out of pixels so can be enlarged or shrunk
down without losing any image quality,
unlike with raster images which become
pixilated. Like raster images raster
animations require a piece of software designed to create them. Theyre
mostly used for simpler animations where high levels of details such as
shading arent used. On this horse you can see its made from Vectors
because of the sharp defined edges it has and the minimal amount of
colours used to create it.

Raster animation:

James Clayton

Raster animation is simply animations

made out of Raster images. Raster
animation are more common than Vector
animations due to the extra level of
colour detail the animator can add to the
characters or background, raster
animations also allow for amazing lighting detail due to the thousands of
different colour shades it allows for. Unlike Vector animations, Raster
animations dont require a special piece of software to create they can
simply be made on a normal piece of animation software. One of the
downsides of raster animations over vector ones is that they produce
much larger file sizes due to the extra information they have to hold, this
is mostly all the different colours and colour shades used on animations.
Another downside to raster animations is that if theyre resized they will
lose quality and become pixilated.

Compression:
Compressing a finished animation is very important as it reduces the final
file size making it easier to store and move about. Whilst compression is
good because it makes the files smaller is can lower the quality of the
animations which is why theyre shouldnt be compressed too much. The
compression of an animation is done once it has been rendered, the
animator can choose what rendering settings they want before it has
begun rendering, here they can choose things such as the frame rate,
what file type it will be and other more detailed and complicated settings.
The file size of an animation directly
changes the speed of which it can be
downloaded. The bigger the file the
longer it will take to download, and the
smaller the file the faster it will download. File size doesnt always affect
the speed in which a file is download the internet it is being downloaded
with also matters.

File formats:
SWF (Small Web Format) is a file format used for multimedia, vector
graphics and ActionScript, they can also contain video and vector based
animations and are designed for efficient delivery over the web. The small
company FutureWave Software originally defined the file format with one
primary objective of creating small files for displaying entertaining
animations which would work on all operating systems even with a slow
internet connection. Some of the advantages that the SWF format offers

James Clayton

are that it is very fast loading and uses a

very smooth type of compression called
DEFLATE.
When you create a new
Flash file in the Macromedia
Flash authoring program
you are creating a FLA file.
This contains all the
elements which make up the
finished product, including
graphics, animation
instructions, actionscript
code and comments. FLA files can only be opened in Flash, excluding the
flash player though. The FLA file is similar to the PRPROJ file used in Adobe
Premiere. The FLA file does not play or execute, Instead the user exports
a SWF file which is what the end user sees. You can preview the resulting
SWF file at any time from the FLA file.

Web animation software

Authoring:
Adobe Flash is a piece of multimedia software
developed by Adobe and enables users to create
animations, games and vector graphics. Flash is
used to animate text and graphics, It also has
the ability to record any bidirectional streaming
such as keyboard, mouse, microphone, camera,
and audio/video inputs. Flash allows the user to
slowly move the characters by manipulating the
in-programme layers. A disadvantage of using Adobe Flash is that it is
difficult to learn how to use correctly and efficiently but once the user has
got the hand of the program they can create animations with relative
effort using Flash. Another problem with the Flash software is that on older
computer systems such as Windows Vista or XP Flash can crash
unexpectedly, a way to get around this problem would be for the user to
upgrade their Windows version although that costs money so the best way
to reduce the impact this has is to keep saving their work every 5 minutes
or so to an external hard drive or the cloud.

Director is mainly used in the production of animated interactive products,

For example I used this piece of software to create an interactive DVD
menu for a company called GapTravel. Director uses a scripting language
called Lingo which is why its so popular for creating things such as CD-

James Clayton

ROMS or information Kiosks. Director is

much easier to use than Flash is due to its
simple menus and easy to use timeline.
Director is able to publish products which
are usable online and also are able to be
embedded into websites using its
Shockwave plug-in.

Players
Media players are programs used to playback multimedia files such as
mp3 audio file or mpeg4 video file. They are most common on computers
and other electronic devices such as mobile phones or tablet computers.
Other forms of media players like portable media players do exist but they
arent as common now because everything can be accessed via the
internet on a tablet for example. These portable media players only took
DVDs so unless what you wanted to watch was on a DVD they would be
useless.
The latest version of Adobe Flash Player is
available on all popular desktop platforms
such as Windows, Linux, Solaris and Mac OS
X. The Flash Player plugin can be downloaded
via a web browser for free. Flash Player uses
SWF files which are an Adobe Flash file format
used for displaying animated vector graphics
on the Web. Once files are created they can be played by the Adobe Flash
Player either through the browser plugin or on the program which user
can download onto their computer so they can use it even if they dont
have an internet connection. It was first created by Macromedia in 1996
but in 2005 it was taken over by Adobe Systems and by 2005 it was the
most popular media player.

James Clayton

QuickTime is a popular media player which is

mostly used on apple products such as Apple
Macs and was first released to the public in
1991. QuickTime player uses a very simple
user interface which is why its so popular as
anybody any can use it without getting
confused. With QuickTime 7 Pro you can
convert files to different formats and also
record and edit them too. QuickTime is a very
useful media player as it works with both Mac OS and Windows computers
unlike some other media players which arent compatible with different
operating systems. This means more people will be able to use the
program therefor making it more popular. QuickTime also supports lots of
different audio and video file formats and codecs such as AVI, DV Stream,
Mpeg-2, Mpeg-4, QuickTime movie, mp4, mp3, WAVE and several other
formats.