Unit 65 assignment 1

Unit 65 – Assignment 1
Task One: Investigate the uses of Web Animation

Banner Ads:
This is the banner for the JD
sports website. The banner
animates as a slide show of four
different screens, doing this allows
them to express various different
bits of advertisements but using
less space. The banner slides
back and forward depending upon
which page or arrow the user
clicks on, however it has an
automatic setting which the banner scrolls without the user clicking the arrows, but if the
mouse is hovered over the banner it stays on the current one being shown. It is quite a
brightly designed animation which suits its purpose as a fashion/clothing website for children
up to young adults. It involves the audience by being an interactive banner as it allows the
user to navigate through the four banners using the arrow buttons and the page numbers.

Animated Interface Elements:
The Topman website contains a navigation row which
contains animated interface elements. The menu is
organized in different categories ranging from
‘Clothing’ to ‘Shoes’, which when hovered over with
the mouse they activate a drop down menu with
various links which are relevant to the category. For
example, the drop down menu for clothing contains
links to more specific clothing items such as T-Shirts,
Jackets, etc. The colour scheme for the menu is very
basic with just a black background and white writing
however this sort of drop down menus doesn’t need to
be over complicated as it may confuse the audience
and make it harder for them to navigate around the
site.

Kyle Mckendrick
Page 1

Linear and Interactive Animation:
An example of linear animation is
the intro to the Simpsons website,
as soon as you open the web page
an animation is activated, showing
cut scenes of various characters as
if the screen is a television then a
blurred screen effect occurs which
then fades into the main interactive
menu. The intro animation gives
you the option to skip it however
you cannot pause or mute it. The
idea of a linear animation as an
introduction to the site draws the reader in and grabs their attention before viewing the actual
site. It’s a very bright animation which is expected from a cartoon program.

An example of interactive animation is also on the Simpsons website, after the linear intro
there is a screen with buttons underneath which once clicked on they scroll to various booths
which contain different information, one of the booths is a file cabinet with various letters of
the alphabet which the user can navigate around to find the character they want to know
information about, clicking on the letters activates a draw to open, then you can look through
the different character files and when clicked on them a book is opened containing the
character profile. The positives of this is that the user can interact with the site differently
compared to just navigating through ordinary menus, this keeps the user busy and draws
them into the site to make them want to navigate around more to see what else there is.

Promotion:

An example of promotion is the BMW website; they promote the cars using elements of flash
with a ‘build your own BMW’ application which allows the user to choose the model of BMW
they want and customize it to all the specifications they’d like (colour, leather interior, alloys,
etc.) then it gives them a quote on how much this specific model would cost them. This is a
successful way to promote BMW and its models to give the user an option to design their
own car from scratch so that if they do go down the route of buying on of the cars everything
is done specifically to what they want. Another positive of this application is that the user can

Kyle Mckendrick
Page 2

create various different variations of
their BMW model and receive price
quotes without the need of ringing up
the company and having to keep
explaining their specifications over
and over again, it saves a lot of hassle
and effort for the customer. However
the downside is that the aesthetic side
of the application is very basic and
quite boring, maybe brighter colours
may draw the customer’s attention a
little more, however sometimes a very
simple design can be a more successful way to advertise.

Instruction:
An example of interactive instructive
animation is the Flash Synergy
Learning application which explains
different stages of creating a flash
animation, it allows the user to go at
their own pace and whenever they
are ready to go to the next stage
they can click to do so, instead of a
video instruction which would carry
on playing and the user would have
to keep replaying to get back to the
stage they were on. Another good
positive about this application is that
it replicates the Flash software
window and uses different areas as
buttons as if the user was actually on Flash which makes it more realistic. The only negative
is that when they point out a tool or menu which you need to click on sometimes the arrow
isn’t very visible as it is light blue which doesn’t really stand out compared to the colour of
the screen, the image above shows the arrow pointing at the text tool, maybe if it was bigger
or a brighter colour the arrows would be a lot more visible to the user.

Information:
An example of information animation is
again the Simpsons website; it shares
various different elements information with
us regarding the characters, episodes, air
time of the program, etc. the site basically
provides the audience with all the
information they need to know regarding the
cartoon series. The positives of the
Simpsons website is that it is a highly
illustrative site splitting all large blocks of text up with images which is more inviting for the
audience to read it, nobody would feel tempted to read the text if it was a long page full of

Kyle Mckendrick
Page 3

block text. A negative of the site is that
the navigation system could be quite
complex for somebody who isn’t
experienced using computers, however
for someone who is experienced it is a
very unique site which looks good
aesthetically. I think they present their
information successfully, without letting
the audience get bored with random bits
of linear information hiding around the
site, on the characters section
inbetween switching to file cabinates a linear animation is activated at random showing a
character from the show.

Entertainment:
Yet again, an example of
entertainment animation is the
Simpsons website, as it is a
cartoon animation series of
entertainment the website will be
expected to be packed with
entertainment which is done in all
the random bits of linear animation
around the site which are activated
at random when navigating around
the site. Also there is a section on
the site which has recent episodes available for the audience to access; this is a successful
way for drawing in the audience as if they miss an episode on television they will
automatically want to visit the website. The only negative to this is that less people will
actually tune in on television as they can just watch it on demand when they visit the
Simpsons website which would result in less TV viewing figures.

Kyle Mckendrick
Page 4

Task Two: Investigate the development of animation

Cel Animation:
Cel animation is an animation technique where
each frame is drawn by hand. The technique
was the dominant form of animation in cinema
until the invention of computer animation. This
technique was developed massively over a long
period of time. It all started in 15,000 – 13,000
BC when people painted Paleolithic Paintings
on their cave walls, these were the first ever
examples of images trying to capture motion. It
wasn’t until 65 BC when Roman poet Lucretius
discovered the persistence of vision which is when the retina keeps an image for a short
split-second after we actually see an image, it is related to animation by creating an illusion
of motion when we see images in fast sequence to one another. We don’t notice the change
of images because the persistence of vision fills in the gap between images to create the
flow of motion.

After this various different techniques were invented with most of them being developments
from the previous technique. Some of these techniques include the Phenakistoscope (1831),
the Zoetrope (180 AD; 1834), the Flip book (1868), etc. It wasn’t until the 1990s when
computerized animation took over the cinematic industry
which was a much faster and better quality technique in
creating animation.

Flip Books:
A flip book is a book with a series of images that each
has minor changes to the previous drawing on each
page, which then eventually the pages would be flipped
rapidly to make the images appear to animate by
simulating motion. Flip books were very popular with
children; however they can also target adults as novelty products showing humorous
animation. Flip books are often used in magazines as a nice little extra, also there is such
thing as a digital flip book which would basically be an animation of a book showing a
sequence of images. The first ever flip book was invented in 1868 by John Barnes Linnet
which at the time he named a kineograph. They are the first technique to employ a sequence
of animation in a linear sequence rather than circular.

Animated Cartoons:
An animated cartoon is a film which can be shown in the cinema, on the television,
computers, etc. They all hold some sort of story and are created using various sequences of
drawings. There were various attempts to create animated films and cartoons over the years
in the late 1800s, however it wasn’t until 1914 when Gertie the Dinosaur was created by
Winsor McCay, this was one of the very first successful animated cartoons. It wasn’t until
1926 until animation actually developed sound as well, My Old Kentucky Home was the first
ever animation to use a soundtrack which was created by Max Fleischer. An animated
cartoon is always a good idea for a website as it adds a little bit of entertainment compared

Kyle Mckendrick
Page 5

to the ordinary text based site, an example of a site
which uses animation is The Simpsons website which I
explained in task one, it introduces the site with a linear
animation showing various characters. It may be a good
idea to add some sort of animation as an intro to the
website however it is hard to do this without over doing
it or adding something completely irrelevant to the
purpose of the site. As the website I am making is
based on travelling around Australia it may be a good
idea to use an animation of a kangaroo hopping across
the screen greeting the audience to add a little humor.
Some sites use random interactive animation to
introduce their website, an example of this is the Warehouse Project site, it has a very basic
design of images of doves that fade in with lights behind them, with a roll over button in the
center of the page which when rolled over a standby button appears inside it for them to click
on to navigate to the home page. It is completely irrelevant to a music gig however it does
add a nice urban effect to the site.

Animation Process:

XHTML:
The purposes of HTML documents are to create web pages and to write a coding language
which servers and the internet can understand it in order to display as a working web page.
HTML in short, is basically instructions for the different browsers to show specific content on
a page. The only different between HTML and XHTML is that XHTML has a more strict
coding allowance which means that if you make any mistakes with the coding then the page
simply will not work. With HTML, there is more flexibility, which means that if you do make
any mistakes, for example, if you forget to close a tag correctly then the web page will still
probably work, whereas XHTML coding needs to be perfectly written. XHTML gives the
feature of making sure that the coding is perfect and that the site is fully functional in order to
be displayed on a web page, also it will allow the site to be much better in terms of search
engine ranking.

DHTML:
Dynamic HTML is an term for a collection of technologies combined together to create
interactive and animated web sites, this is done by using a combination of different coding
such as HTML, client-side scripting language and design and presentation coding (CSS).
DHTML enables scripting languages to vary in a web page’s definition language, which
affects the look and functions of page content; this is after the page has been loaded whilst
the user is viewing it. The characteristic of DHTML is the way it functions whilst a page is
viewed.

Graphics Interchange Format (GIF):
The Graphics Interchange Format (GIF) is a bitmap image format that was founded in 1987
by CompuServe and ever since it has been the main format for images used on the World
Wide Web, this is because of its wide support and portability. The format supports up to 8

Kyle Mckendrick
Page 6

bits per pixel which means it enables up 256 different colour shades to be available to a
single image. These colours are chosen from the RGB colour space which is a 24-bit format.
GIF images are most suitable for the World Wide Web as they cover most of the simple
graphics such as logos, areas of solid colour (Website layout), etc. These graphics don’t
need a massive range of colour as they aren’t built up of many colour shades; they are also
a small file size which makes it suitable for the web as they will load fast for the user. GIF
format isn’t suitable for any colour photographs or high detailed images as they will require
more colour shades in order to build the image without being pixelated.

Because of their small file sizes, GIF format was the first type of animated imagery to be
used on the World Wide Web, however these animations were very basic and short, most of
them were a loop animation. Another positive about GIF images is that you can have parts
as transparent, for example if I had an circular graphic I could make the outer of the circle
transparent so that once it is applied online the audience can only see the circular graphic
and not the background from around the image. This is something which makes GIF images
more suitable for the web as they are good to use for the design of a site, whilst if I was to be
using JPEG images, there will be lots of different backgrounds of images around graphics
which aren’t meant to be a square or rectangle anyway. Example below:

JPEG Image: GIF Image:

Java Applet:
A Java applet is a plug in which is used on a web page to help operate animation, they are
quite cross platform compatible which makes it unlike DHTML. This is because Java
interpreters are not available on all platforms and don’t always agree about what they
consider to be proper code. Java applets are mainly used to provide interactive features to
web applications that cannot be done with HTML; they support many forms of animation.
One thing that all Java applets have in common is that they create motion on screen by
drawing frames at a high speed of around 10 – 20 frames per second to show a smoothly
running animation.Java applets might be a good idea for my website as I will be displaying
some kind of animation.

Kyle Mckendrick
Page 7

Task 3: Investigate animation techniques
Persistence of vision:
‘Persistence of Vision’ is when the retina keeps an
image for a short split-second after we actually see an
image, it is related to animation by creating an illusion of
motion when we see images in fast sequence to one
another. We don’t notice the change of images because
the persistence of vision fills in the gap between images
to create the flow of motion.

An example of ‘Persistence of vision’ is when we stare at
a bright light for a couple of seconds, when we look away
we still see a bright blurred light image which is the retina keeping the image of the light.

Claymation and Stop motion:
Stop –frame (Stop-motion) animation is an
animation technique used to make objects
appear as if they’re moving on their own. The
object is moved in small measures between
separate a photographed frame, which creates
the illusion of movement when all of the frames
are played as a flowing sequence.

Clay (Claymation) is one of the most common
materials used for stop-frame animation as it is
very easily shaped and can be moved for next frames without complication, however
sometimes when moving the clay after each photo there maybe finger prints or dents in
which was caused by handling it.

Computer Generated:

A frame is the term for one of many photographic images that are played in an animation
sequence. ‘Frame rate’ is the term for how fast the frames are being played, frame rate is
mostly measured by how many frames played per second (FPS). You can change the speed
of the frame rate to suit your animation but obviously a slow frame rate would expose the
space between frames and a really fast frame rate would make it look as if the animation is
in ‘fast forward’.

A key frame in animation and filmmaking is a drawing that defines the starting and ending
points of any smooth transition. The drawings are called frames because their position in
time is measured in frames on a strip of film or timeline. A sequence of keyframes defines
which movement the viewer will see, whereas the position of the keyframes on the film,

Kyle Mckendrick
Page 8

video or animation defines the timing of the movement. Because only two or three keyframes
over a second do not create the illusion of movement, the remaining frames are filled with
gaps.

Onion skinning is a technique used in creating 2D
animated cartoons and editing movies to see several
frames at the same time. This way the animator can
determine what they are going to do in the current frame
based on the past few frames.

In traditional cartoon animation, the individual frames of a
movie were drawn on thin onionskin paper over a light
box; the animator would have various pages of onionskin
paper underneath each other viewing the other frames whilst editing the top one. This would
eventually contribute to making a smooth motion.

Tweening is the process of generating frames between two images to give the appearance
that the first image evolves smoothly into the second image. Inbetweens are the drawings
between the key frames which creates the illusion of motion. A Classic Tween is used to get
a smooth motion out of a shape or character, the way it is used is so that there is two key
frames spaced apart from each other and the first key from shows the shape on one side of
the page whilst the other shows it in a different location around the page. The classic tween
helps fill in the gap by creating a smooth movement; this is a really useful tool when creating
basic animation or different parts of advanced animation.

A motion tween is a tween that can be used to create movement with a character, the
creator can create a path where the character will walk or how they’re going to walk and
when the motion tween is activated the character will move in the path it has been assigned.

Investigate Digital Animation:
Vector Animation:

Vector animation is animation that has been built up of different lines, shapes and polygons
which effectively work as a mathematical formula. This is what makes vector images
different from others as they aren’t built up of pixels like raster images, the fact that they are
built up of this special formula allows it to be enlarged without the loss of quality or the event

Kyle Mckendrick
Page 9

of pixilation, it can be stretched and stretched and it will always appear to be the same.
Vector animation is a good aspect to use on a website as you can stretch the size of it to fit
whatever on the page, also it could be shown in a certain window size but have an enlarge
button for the audience to choose to enlarge it.

Raster Animation:
Raster animation is a type of animation that
uses raster graphics which are built up of
thousands of pixels which all hold different
colours and shades to create the image, the
amount of shades available is down to the
bit depth of the imagery being used. The
downside to raster animation is the fact that
the more the screen is enlarged the more
the animation will pixelate. This is why most
animation used is a vector format however
for smaller basic animation raster is probably
best to use due to smaller file size. The amount the animation pixelates is depending on the
bit depth of the images used, the higher the bit depth the more colour space used, which
means the less it will pixelate. The lower the bit depth, the more it will pixelate.

Compression:
Fortunately files can be compressed to lower the storage size of it, however the higher the
quality of the file the larger the file size is, so you could imagine that if I compress a file then I
am going to lose some of the quality. Lossy compression is a data encoding method that
compresses files by lowering the quality. A smaller file size is easier to handle with storage,
sending, or even sharing over the internet. Some slower computers will take longer to
display a file online if it has a large file size. There is a percentage as to what you compress
the file down to, for example, if I didn’t want to lose too much of the quality but I wanted to
shed a little bit of the file size I would only compress it by about 10%. It is up to the user as
to how much the file is compressed.

Lossy compression is most commonly used to compress multimedia data (Audi, video and
images), especially for displaying techniques such as streaming media and internet display.
Lossless compression is data compression technique that allows the original data to be
reconstructed from the compressed data. Lossless compression is used in many
applications; one way in which it is used is in a ZIP file.

Low compression
(84% less information
Than uncompressed
PNG, 9.37 KB)

High compression
(98% less information
than uncompressed PNG, 1.14 KB)

Kyle Mckendrick Page
10

Scalability:
Scalability is where files can be enlarged or contracted to suite a systems light or heavy
loads, this is suitable for vector graphics as they can be enlarged because of their build-up of
mathematical formula which enables it to be stretched without pixilation. Whilst it wouldn’t be
as suitable for Raster graphics as in the event of them being enlarged, they pixelate and
loose quality massively due to them being built up of pixels. An example of scalability is
YouTube, on their video menus they give the user the option to enlarge to medium or full
screen which then makes the video pixel depending on which option is selected.

File Formats:
There are various different file formats which can be used for both vector and raster
graphics, all of them enable different compression settings which makes them all different in
file size. File formats can also determine what software the file should be used in; some of
this software includes Adobe Photoshop and Adobe Flash. A file can be saved in various
formats, if I was to be using Adobe Flash I would save the file as a ‘.FLA’ which is the main
format for flash which allows me to open it and edit it once saved which is what I would do in
the process of creating a project. I could also save it as a ‘.SWF’ file which is the shockwave
version which would be the final version of the product that can’t be edited. The same would
go for Photoshop, I could save a file as a ‘.PSD’ (Photoshop Document) which is an editable
document, or I could save it as a ‘.PDF’ (Portable document format) which is the final
version.

A ‘.GIF’ (Graphics Interchange Format) file format is used to create a small animation that
consists of a sequence of different images which when combined together looks like a
moving image.

11

12

Unit 65 assignment 1

More Related Content

Viewers also liked

Similar to Unit 65 assignment 1

More from kylemckendrick

Unit 65 assignment 1