1. Pooyan Amiri
Unit 65 Assignment 1
Task 1: Investigate the uses of web animation
Banner Ads: Banner advertisements are the most commonly used web animations out
there, they are used on all sorts of different webpages and their one and only use is to
promote the product of the advertiser. If you are a regular internet user, then you have
most probably seen your fair share of banner ads. They are usually flash based animations
that are present on websites as a way of advertisement. If you click on these animations,
you will be taken to the advertiser’s website.
Here are a couple of example banner ads that I have taken a screenshot of:
You can look at a variety of different banner ads on this webpage:
http://www.heybannerbanner.com/flash.html
Animated Interface Elements: Animated interface elements are interactive elements within
a flash website where you are actually interacting with the website and making choices
within that page, and the webpage changes accordingly to your choices. This is much more
1
2. Pooyan Amiri
fascinating and grabs the reader’s attention rather than them just reading a plain text.
Animated interface elements are used widely to customise a product, object etc. in order to
achieve what you prefer.
Here are a couple of examples for animated interface elements:
2
3. Pooyan Amiri
A website that lets you create and customise a face: (http://www.pimptheface.com/)
3
4. Pooyan Amiri
Converse website that lets you customise your very own preferred converse:
(http://www.converse.com/#/products/shoes/converseOne/scratch/all)
4
5. Pooyan Amiri
Linear and Interactive animation: Linear and Interactive animations are basically the two
different types of animations found online. Linear is the more basic one and does not have
any interactive abilities within the flash animation, so therefore it is a linear flash animation
that is on loop. Interactive animations on the other hand include interactive abilities and
changes depending on either if you move your mouse over the animation or if you click on
any designated location(s) within the animation.
Here are a couple of examples of Linear Animation:
Linear Butterfly animation that is on loop:
http://www.amarasoftware.com/flash-animations/butterfly-theme-animation.htm
5
6. Pooyan Amiri
Linear Falling coins animation that is on loop:
http://www.amarasoftware.com/flash-animations/falling-coins-animation.htm
And here are a couple of examples for Interactive animations:
Interactive animation of boxes that move and change colour by the movement of the
mouse:
http://www.traffikcone.com/math/tcd04c.swf
6
7. Pooyan Amiri
After moving the mouse over the animation:
Interactive Website that allows you to draw using its own unique brushes:
http://www.revoid.be/codebrush/
7
8. Pooyan Amiri
Promotion: Flash animations are widely used by companies to advertise and promote their
product. Their promotional flash animations could range from animations that are similar to
TV commercials to interactive mini games that grab the attention of the viewer. A
promotional animation is a great way of introducing a new product because a visual
representation of a product or an idea can help explain and showcase how the idea/product
works before actually making the product.
Here are some examples for promotional animations:
Promotional Lexus website that lets you customise a Lexus car:
http://www.lexus.eu/car-models/gs/gs-250/index.tmex#/CarConfigurator
8
11. Pooyan Amiri
Instructional (Educational): Instructional animations are used to show the viewer either
how to do something or teach them something. Flash animations have lately become a
significant part of the learning experience for the viewer because with flash, demonstrations
and simulations are easily shown and they are interactive so it is a highly reliable method of
learning.
Here are a couple of examples for instructional animations:
Instructional Website that covers some of the areas of using flash interactively:
http://vle.camsfc.ac.uk/mod/resource/view.php?id=19464
11
12. Pooyan Amiri
Instructional Website that shows the rock forming process on earth:
http://www.classzone.com/books/earth_science/terc/content/investigations/es0602/es060
2page02.cfm?chapter_no=investigation
12
13. Pooyan Amiri
Entertainment: Flash animations are commonly used for entertainment online, the types of
entertainment for flash could range anywhere from flash games that you can play to
websites that are full of cartoons, mini-games and etc.Flash games often cover areas in the likes
of education, promotion as well. The core advantage of flash games is that they can be easily placed
online for children and adults to play.
Here a couple examples for when flash is used for entertainment:
Interactive website that lets you play flash games:
http://edf.resn.co.nz/
13
14. Pooyan Amiri
The Simpsons website is a great example of a website using sketches, music, mini-games,
bios and etc. for entertainment purposes:
http://www.thesimpsons.com/
14
16. Pooyan Amiri
Task 2: Investigate the development of animations
Hand drawn (Cel animation): Cel animation is the type of animation that is used to make
films, TV shows, games and etc. look hand drawn. Hand drawn animations were one of the
first types of animation. However, throughout the years with the introduction of computer
technology, this type of animation is now created by using computer animation to give a
hand drawn look to animations. Programmes such as Flash are used to make this type of
animation due to this method being easier to produce and much less costly.
Example:
Hand drawn (Cel animation): Cel animation is the type of animation that is used to make
films, TV shows, games and etc. look hand drawn. Hand drawn animations were one of the
first types of animation. However, throughout the years as the introduction of computer
technology began, computer software(s) such as Flash were used to give a hand drawn look
to animations.
Animation using DHTML:
(Dynamic Hypertext Markup Language)is used to create small animations and dynamic
menus on web pages.The DHTML code is made up of HTML, CSS and Java Script. DHTML is
not very cross-platform compatible, even though not many people would use such old
16
17. Pooyan Amiri
platforms these days. However, DHTML animation well work fairly well on all platforms if it
is carrying out simple animation such as transitional effects, drop down menus, wipe effects
and other animations with a small duration. Animation using DHTML is an easy way of
making a site interactive for the user without the need of a lot of code and testing.
Animation using XHTML
(Extensible Hypertext Markup Language) is a spinoff of HTML used for creating Web pages.
It is based on the HTML 4.0 syntax, but has been modified to follow the guidelines of XML,
the Extensible Markup Language. Therefore, XHTML 1.0 is sometimes referred to as HTML
5.0. Because XHTML is "extensible," Web developers can create their own objects and tags
for each Web page they build. This gives the developers more control over the appearance
and organization of their Web pages. The only requirement is that the custom tags and
attributes are defined in a document type definition (DTD), that is referenced by the XHTML
page. XHTML pages must also conform to a more strict syntax than regular HTML pages.
While Web browsers are rather lenient and forgiving of HTML syntax, XHTML pages must
have perfect syntax. This means no missing quotes or incorrect capitalization in the markup
language. While the strict syntax requires more meticulous Web page creation, it also
ensures Web pages will appear more uniform across different browser platforms.
Java Applets
Java applets are small programs used on web pages to help operate animation. Unlike
DHTML java applets are quite cross platform compatible. 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 primarily are used to provide interactive features to web
applications that cannot be provided by HTML, many forms of animation are possible. What
they all have in common 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
17
18. Pooyan Amiri
Persistence of vision:A theory which states that when our brain is shown a static image, the
human eye retains that image seen for approximately a fraction of a second, and that image
persists on our retina until another image is shown. This theory is a frequently accepted
thought, yet a heavily controversial topic. When our brain is shown static images with a
brief period of time between them, the static image shown persists on our retina for about
0.1 seconds. In the film and video industry persistence of vision is known as the explanation
for our capability of perceiving a sequence of images for an illusion of movement in a video.
Stop Motion: is one of several names used to describe animation that is created by moving
models, puppets or any three dimensional objects frame by frame in front of a camera.
Other terms that are sometimes used include Stop Motion, Model or Puppet Animation,
Table Top or 3D, although nowadays 3D usually applies to Computer Animation. A stop
frame animation is a technique to make a physically manipulated object appear to move by
itself. This means that we will need to move the object of choice as mall amount between
individual photographs and hopefully when all of the photographs are put to gather, it will
create the illusion of movement.
Task 4: Investigate digital animations
18
19. Pooyan Amiri
Raster Images:
Raster Images often known as Bitmap images are made up of pixels
in a grid and each pixel has its own specific value that determines
its colour, raster images use the red, green, blue (RGB) colour
system. Raster images are usually created or captured images by a
person on their own and are digital in nature. When a raster image
is viewed it is usually smooth because it’s in its own size but due to
raster images being made up of pixels, when you zoom in they lose quality and the pixels that the
image has been made up of can actually be seen.
Vector Images:
Vector images distinct from raster images, do not use
pixels to form an image. Instead vector images are
made up of paths that have their own specific start
and end points defined. Points, lines, curves and
polygons are used in vector images to create paths.
These paths could be used to create anything from a
simple logo to very complicated and complex images
(e.g. the image on the left).
Points, generally a point can mark a position in space. In graphic a point can be described as a dot or
a visible mark. Tiny points with different sizes create shades of gray.
Lines – the graphics images are the combinations of lines and a line is a combination of an infinite
series of points. In the geometry a line is described with its length but Graphically, lines can be
describe in many weights like the thickness and texture. Lines can be created by pen, pencil, mouse
or digital code. Lines can be curved, straight, an arc of a circle, continuous or broken. In the other
word a line is a combination of an infinite series of points. In the geometry a line is described with its
length but Graphically, lines can be describe in many weights like the thickness and texture. Lines
19
20. Pooyan Amiri
can be created by pen, pencil, mouse or digital code.
Different file formats:
File extensions- Animations are designed, created and finally stored by using many different file
types and extensions. A few common Animation file types with their extensions are:
File File type Description
Extension
.fla Macromedia Flash The file format used in Macromedia Flash for authoring in. It is one of
FLA Project File the most popular and advanced authoring environments for creating
Format interactive websites, animations and digital experiences.
.swf SWF An Adobe Flash file format used for multimedia, vector graphics and
Action Script. It originates from FutureWave Software, and then
transferred to Macromedia. SWF files contain animations or applets
of varying degrees of interactivity and function.
.gif Graphics GIF is a popular image type used across the internet for its capability
Interchange of reducing file sizes vastly and also its capability of having animation
Format effects. GIF is an 8 bit palette with 256 colours at max. GIF is the most
chosen format for animation effects.
20
21. Pooyan Amiri
Task 5: Investigate web animation software and web player plugins:
Flash: The Adobe Flash Player is made by Macromedia, it is
essential to run any sort of .swf files in a web browser. It is
basically a flash player that plays the files that are created
by flash. The Adobe flash player is free of charge and is a
cross-platform browser plug-in.
QuickTime: QuickTime can play a different variety of
formats such as; digital video, media clips, animation, text,
music and etc. It is available for Mac and Windows
operating systems. Quick time is produced and distributed
by Apple.
21
