unit 65 ass 1

25
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: 1

Upload: inwill12

Post on 07-Dec-2014

3.315 views

Category:

Documents


2 download

DESCRIPTION

 

TRANSCRIPT

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

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

Pooyan Amiri

A website that lets you create and customise a face: (http://www.pimptheface.com/)

3

Pooyan Amiri

Converse website that lets you customise your very own preferred converse:

(http://www.converse.com/#/products/shoes/converseOne/scratch/all)

4

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

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

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

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

Pooyan Amiri

Promotional Reebok website that has a flash based search for products:

http://www.reebok.com/en-US/#!/

9

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

10

Pooyan Amiri

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

Pooyan Amiri

Instructional Website that shows the rock forming process on earth:

http://www.classzone.com/books/earth_science/terc/content/investigations/es0602/

es0602page02.cfm?chapter_no=investigation

12

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

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

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.

15

Pooyan Amiri

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

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,

16

Pooyan Amiri

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

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.

17

Pooyan Amiri

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

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:

18

Pooyan Amiri

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

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

Extension

File type Description

.fla Macromedia Flash

FLA Project File

The file format used in Macromedia Flash for authoring in. It is one of

the most popular and advanced authoring environments for creating

19

Pooyan Amiri

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

Interchange

Format

GIF is a popular image type used across the internet for its capability

of reducing file sizes vastly and also its capability of having animation

effects. GIF is an 8 bit palette with 256 colours at max. GIF is the most

chosen format for animation effects.

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,

20

Pooyan Amiri

music and etc. It is available for Mac and Windows operating systems. Quick time is

produced and distributed by Apple.

21