1. Tre Wallace
Unit 65 – assignment 1
Uses and principles of web animation
Task 1 - Investigate the uses of Web animation
Banner ads
Banner ads are
used to promote items and boost sales. A banner ad is a form of advertisement on the World Wide
Web, usually used on the website that the product is from. Banner ads normally contain a slight
amount of information to let you know the little but main objectives of the product, a banner ad
normally consist of pictures of t the product. As you can see in the banner I have chosen from
www.maximuscle.co.uk there is an image of the results of the product which may increase the
chance of promotion working. A banner ad is also used as a link to go to that page. A banner ad is
usually designed to fit in with the page as it won’t stand out as it goes with the theme of the
website. The size of a banner ads will normally/always make you notice it is there as they are mostly
used at the top of a website and can also animate as the images/advertisement may change.
Animated interface elements
An
animated interface is an animation that would change as you go over it such as a rollover button.
The image above has a navigation bar made up of rollover buttons. The rollover buttons on this
navigation bar change to a darker shade of the colour used to show which button you are on and to
stand out. An animated interface element much like a banner ad takes you to the page that is either
named of related to the image text that is the interface.

2. Tre Wallace
Linear and interactive animations
A linear animation is an
animation that is consistent until the animation has either finished. This image shows a linear banner
animation as the banner will change about every 7 seconds to promote different products on the
same banner. The banner is also interactive an each promotion that comes is the link to that
product.
The animationis also interactive as it has a bar at the top which tells you which page of the banner
that you are on and lets you click on the boxes to go to the page that you want to go on. This could
also be linked to an animated interface element.
Promotion
A
promotion is a form of advertising such as a banner. A banner can only be a promotion only if
showing/promoting a product that the website sells. A promotion is normally made up of the best
facts about the product, images of the product and the deal that promotion is promoting. As you can
see in the image above it has the images of the product and a deal. The images are for the products

3. Tre Wallace
that are on the deal promoted. The promotion being on a banner means that people will see it just
as they go onto the site as it will be on the top of the page.
Instruction
An instruction is a command for
example it is a programme, book or list you have to follow to learn how to do something correctly.
This image has an example of an instruction to use flash. The first thing it says is what you have to
follow which is create a new folder and then you to press enter to continue so it’s telling you what to
do to help you learn more.
after clicking enter to
continue it then came up with the next set of instructions to follow to carry on learning how to use
flash. Pressing enter again will carry onto the next set of instructions of telling you what to do. And
this will carry on till you learn.
Instruction can also come in the form of a book.

4. Tre Wallace
Information
Information is found on near enough everything such as packaging, websites and books.
The site Wikipedia is an
information site as if you type in something you need to know the definition off it provides you the
information. For example I have searched what the definition of instruction to provide information
on my work. The site has a list of information choices and I chose instruction set and it came up with
paragraphs of what it means and what it is.
Other sites that
store information are clothing shops as they will have information on the clothes website and details
to the store. As you can see on the picture it has a privacy policy statement which is full of
information of returning and ordering. It also provides the email address and number.

5. Tre Wallace
Entertainment
Entertainment
can be found on many websites such as the Simpsons website. The Simpsonswebsitehas games that
you can play online for entertainment. You can also interact with the loading pages as they have
little games that you can play. Simpsons also contains episode of the programme to watch so it’s
mainly an entertainment website.
Another
site that shows entertainment is YouTube as you can watch videos of your choice that may entertain
you. YouTube also contains educational videos and other categories.

6. Tre Wallace
Task 2 - Investigate The development of animation
Animated cartoons;
Tv animation – A rapid display of a sequence of images of 2-D or 3-D artwork or models positioned in
order to create an illusion of movement. Most TV animations are cartoons. An animated cartoon is a
short, hand-drawn (or made with computers to look similar to
something hand-drawn) film for the television.
Here's a list of popular TV animation shows:
Family guy
American dad
The Simpsons
Futurama
TMNT
Super Mario bro’s etc...
Nicktoons are animated television series produced by and aired on
Nickelodeon. Until 1991, the animated series that aired on
Nickelodeon were largely imported from foreign countries, and some
original animated specials were also featured on the channel up to that point as well. Nicktoons
continue to make up a substantial portion of Nickelodeon's line-up, with roughly 6–7 hours airing on
weekdays and around nine hours on weekends including a five-hour weekend morning block.
Animation process, graphic information file format (gif);
(Graphics Interchange Format) GIFs are image files that are compressed to reduce transfer time.A gif
is a form of computer images that move as an animation, because it consists of frames, like a movie
with no sound. You normally find gifs on websites that are cartoon related or are trying to promote a
product through entertainment (mainly applies to children)
Dynamic hypertext mark-up language (dHTML);
DHTML (Dynamic Hypertext Mark-up Language) is a small programme for making quick animations
and dynamic menu’s on web pages. It isn’t as popular as flash/shockwave for ait’s work but has
largely been recognised for its work in the past. A Dhtml code is made up of html, CSS and
JavaScript. Dhtml has a limit of speed that it can go but should still work smoothly. It also works well
on platforms if it is carrying out simple animation such as transitional effects, drop down menus,
wipe effects and other animations with a small duration. Dhtml is also an easy way of making a site
interactive without all the coding and testing that comes with others.
Extensible hypertext mark-up language (XHTML);
XHTML (Extensible Hypertext Mark-up Language) is the next step in the evolution of the Internet.
The XHTML 1.0 is the first document type in the XHTML family. The evolution of HTML has
essentially stopped. Instead, HTML is being replaced by a new language, called XHTML. XHTML is in
many ways similar to HTML, but is designed to work with the new extensible Mark-up Language, or
XML, that will soon serve as the core language for designing all sorts of new Web applications, in
which XHTML will be only one of many "languages." But, XHTML is designed to work with these
other language, so that different documents, in different languages, can be easily mixed together

7. Tre Wallace
XHTML is almost identical to HTML 4.01 with only few differences. This is a cleaner and stricter
version of HTML 4.01. If you already know HTML then you need to give little attention to learn this
latest variant of HTML.
Java applets
An applet is a small Internet-based program written in Java, a programming language for the Web,
which can be downloaded by any computer. The applet is also able to run in HTML. The applet is
usually embedded in an HTML page on a Web site and can be executed from within a browser.
Unlike DHTML java applets are quite cross platform compatible, this is because the interpreters are
not available on all platforms as they don’t always believe the code is correct. Java applets are
mainly used to provide interactive features to web applications that cannot be provided by HTML>
what they all have in common though is that they create motion on screen by drawing successive
frames at a high speed of around 10 – 20 times per second.
Task 3 - Investigate Animation Techniques
Optical illusion (persistence of vision)
Persistence of vision is where an image is kept in the eye for
a short while, creating an illusion of continuous motion in film and video. Our eye has ability to
persist the detail of the object for a time equal to 1/16th seconds after the removal of the object.
Stop motion

8. Tre Wallace
Stop animation is a cinematic
process/technique that makers still objects look as there moving. This technique is mostly used in
Claymation and puppet based animation. The objects are films by breaking the figure into
increments and taking one frame per increment of the figure moving.
Computer generation
Frame rates are the number of frames or
images that are projected or displayed per second. The frame rate says how many frames in a movie
are displayed every second a movie is played. The rate of frames is 24, 25 and 30 frames per second.
This makes the animation look real as the human eye can only see 10 – 12 frames per second.
onion skinning, tweening
Claymation

9. Tre Wallace
Claymation is a form animation
used in frame but with images of clay figures moved on each image to make a motion picture. Also
like stop animation it is a video made through frames and images. When played back at a frame rate
greater than 10–12 frames per second, a fairly convincing illusion of continuous motion is achieved.
Task 4 - Investigate Digital Animation,
Raster images
Raster images also known as a bitmap is a way to define digital images. The raster image has a big
variety of formats including the well-known files .gif, .jpg, .bmp. A series of bits of information
translated into a pixel on a screen is represented by a raster image. The pixels represented by a
raster image are the colour that is used to finish an image. The pixels created from a raster image
are assigned a specific value to analyse its colour. The raster image system uses the (RGB) red, green
and blue colour system. An RGB has certain values to make a colour such as 0, 0, 0 would be the
value of the colour black. The values in this system go all the way up to the value of 256 for each
individual colour. When a raster image is viewed the image would smooth out for the image to be
clear for the viewer to see. When the image is blown up the image will blur and become very unclear
to see at a large size. Depending on the resolution of the image, some raster images can be enlarged
to a very large size. The smaller the image resolution is the
smaller the file is. For this reason the people who work on
computer graphics must find the balance between the
resolution of an image and the images size.
The image to the right will show what a raster image is as
you can see the image clearly and when the image is
enlarged it then pixelates. There’s a circle of an enlarged bit
of the image and when you look it you can see there is a big
difference between the enlarged bit and the actual image.
Vector images
Vector images are the same as object-orientated graphics
that appeal to software and hardware that use geometrical formulas to define images. Another way
of defining graphical images is bit map, in which the image is made up of a pattern of dots. This idea
is also sometimes called raster images. Vector images are a lot more flexible than bit map images

10. Tre Wallace
because they can be resized and stretched. Images stored as vector look better on monitors with a
high resolution, whereas bit-mapped images always look the same on any monitor with any
resolution. An advantage of vector images also is that they require less memory than bitmapped
images.
Animation software and many printers use vector images, the
font used by vector images are called vector fonts.
Most output devices are raster devices. This means that all
objects even vector objects must be changed into bit maps before
being output. The difference between vector graphics and raster
graphic is that vector graphics are not translated into bit maps
until the last possible moment, after all sizes and resolutions have
been specified.
The image to the right side of the page is an example of a vector
image being stretched out 7x as a vector image. As you can see
the vector image doesn’t change as it’s stretched as it has a high
resolution.
Compression
Lossy compression
Lossy compression is like data compression, as if compressed, it will lose some amount of data. The
technology of lossy compression attempts to try get eliminate information that is just not needed in
the document. The procedure aims to minimize the amount of data this is held by the computer.
Lossy compression is mostly used in multimedia data such as audio, video and still images. Most
video compression technologies such as MPEG use a lossy technique.
The image to the right is an example of lossy compression
as you can see the first image and how it says original
image to show that is the uncompressed image. The image
next to it has been compressed which means it less
information so the image will not be as clear. The image
next to that has been compressed a little more but still has
enough information it to say clear and detailed. The last
image is compressed enough to ruin the image but is
compressed enough to get rid of some detail, if you look
closely at the images you will notice the last image doesn’t
have the shading and lines in the bread. This is because it
has been compressed to a size that is not clear and doesn’t
hold enough information to show this.
Lossless compression
Lossless compression is data compression but where no information is officially lost which gives
better compression rates. For most types of data, lossless compression techniques can reduce the
space needed by only 50%. For greater compression use lossy compression but note only certain
types of data can use it. You must use a lossless compression technique when compressing data and

11. Tre Wallace
programs. So it is also used as a
component within lossy compression.
Lossless compression is used in many
applications such as being used in a ZIP
file format.
The image to the right is an example of
lossless compression.
You may notice each image is
practically the same even though one
of them has been compressed from the
original.
The lossless technique makes the
images stay the same and keep the
same amount of information as the
image is compressed has less bytes.
As you may notice though is that each
image is in a different file as each file
hold up to a certain amount of bytes.
Scalability
Scalability is the ability to improve your computer to be better/faster. You scale a system by adding
extra hardware or by upgrading the existing hardware without changing much of the applications on
the system.
There are two key primary ways of scaling web applications:
“Vertical Scalability” – Adding resources within the same logical unit to increase capacity; An
example of this would be to add CPUs to an existing server or expanding storage by adding
hard drive on an existing RAID/SAN storage.
“Horizontal Scalability” – Adding multiple logical units of resources and making them work as
a single unit. Most clustering solutions, distributed file systems; load-balancers help you with
horizontal scalability.
Scalability can be further sub-classified based on the “scalability factor”.
If the scalability factor stays constant as you scale. This is called “linear scalability“.
But chances are that some components may not scale as well as others. A scalability factor below 1.0
is called “sub-linear scalability”.
Though rare, it’s possible to get better performance (scalability factor) just by adding more
components (I/O across multiple disk spindles in a RAID gets better with more spindles). This is
called “supra-linear scalability“.
If the application is not designed for scalability, it’s possible that things can actually get worse as it
scales. This is called “negative scalability“.

12. Tre Wallace
File formats
BMP: a bmp document, also known as a bitmap is a type of image file format that is used for
computer and digital graphics. It’s an image of lots of tiny bits and pieces that fit together to make
one image.
PNG: a PNG document, also known as a portable network graphic is a bitmapped image format that
employs lossless data compression. A PNG supports palette based images and RGB(A).
PNG was also designed for transferring images from the internet.
GIF: a gif document, also known as a graphics interchange format is a bitmapped image, introduced
CompuServe that was spread and now is used on the World Wide Web due to its wide support and
portability.
TIFF: a tiff document, originally known as tagged image file format is a file format for storing images
of mainly graphic images, publishing industry, and both amateur and professional photographers.
JPG: a jpg document is for photo images in very small files such as images for a website or an email.
The jpg document is mainly used in digital camera memory cards
PSD: a PSD document is Photoshop’s file format. PSD supports all the available image modes such as
bitmap, RGB, grey scale, duotone and others. Photoshop can convert PSD files into other formats
such as bmp, PNG, jpg and tiff.
Task 5 - Investigate Web Animation Software and web player plugins
Flash
Adobe Flash (formerly Macromedia Flash) is a multimedia platform used to add animation, video,
and interactivity to web pages
Most websites today use flash. If you see a moving advertisement or a game that can be played
directly in your browser, then it's flash.
Flash can be a website, a video, a game, or any of the above for broadcast.
Director
Adobe Director (formerly Macromedia Director) is a multimedia application authoring platform
created by Macromedia—now part of Adobe Systems. It allows users to build applications built on a
movie metaphor, with the user as the "director" of the movie. Originally designed for creating
animation sequences, the addition of a powerful scripting language called Lingo made it a popular
choice for creating CD-ROMs and standalone kiosks and web content using Adobe Shockwave.
Adobe Director supports both 2D and 3D multimedia projects.
Flash Player
The Adobe Flash Player is software for viewing multimedia, Rich Internet Applications (RIA)’s, and
streaming video and audio, on a computer web browser or on supported mobile devices.Flash player
is one of the most important components a computer has to have, if you go onto the internet. Many
games, YouTube, interactive forms and many other types of web applications use flash player to run.

13. Tre Wallace
Shockwave
Shockwave, developed by Macromedia, is a family of multimedia players. Web users with Windows
and Mac platforms can download the Shockwave players from the Macromedia site and use it to
display and hear Shockwave files. Shockwave is especially popular for interactive games. However,
Macromedia has identified over 2,000 sites that offer Shockwave files, including sites for General
Motors, Nissan, Kodak, Microsoft, Intel and Apple. To create Shockwave files, you use Macromedia
Director and several related programs.