Unit 65 task

Unit 65 Leeanne Hibbert

Investigate the uses of web animation

Banner Ads

Banner ads are banners on any website which are advertising something in particular. Many banner
ads will be advertising the latest deals or offers of their certain products on whatever website the
banners also advertising. A website I come across which has a banner ad is the New Look clothes
website http://www.new look.com/.

This screenshot above is the banner ad which is on the New Look website. This banner ad as you can
see is advertising a £10 offer off shoes and dresses; if you were to click the ‘shop the offer’ then it
would direct you to another page. This particular banner will still direct you to a page on the New
Look website but other banner ads may even direct you to a complete different website depending
entirely on what it is actually advertising, it could even be advertising a new website.


Information

Near enough every website will have some type of information added to them, but one that I have
come across which seems full of information is the official next website http://www.next.co.uk/

Info

Info

Info

This screenshot above is taken from the page ‘terms and conditions’ and this page is literally just full
of information about anything to do with the next store and website. As you can see the part I have
cropped is basically telling you all the information on delivery charges and offers etc.


Promotion

Promotions on websites are either selling or putting something in front of the public’s eye. So it
could even be somebody’s online CV because they are promoting themselves. A website that I think
is good for promoting things is the cbbc website http://www.bbc.co.uk/cbbc/ this is because
itsbasically promoting all of the shows which are on the cbbc channel as you can play games or do
activities on that particular site.

These 4 buttons are
promoting CBBC and BBC
BBC Channel

Watch episodes

The Shows

This screenshot above is just the home page of the cbbc website and already its promoting quite a
lot. It shows at the top of the page just to the left the channel that cbbc is on which is ‘bbc’ so
straight away it is promoting BBC.As you can seeI have pointed to all the promotions on this page
just so you can see how much is actually being shown to you.


Entertainment

A website which I have come across that is basically full of entertainment is
http://www.youtube.com/ this is a website where you can watch or upload videos. These videos can
be music videos; movie trailers; programmes or parts of films. This is also a very popular site and is
used all around the world, so you can watch videos that are of anything even if the movie or music
video isn’t out yet in the particular country you’re in at the time you’re on this website.

This screenshot above is YouTube. I searched din the search bar for Beyoncé’s music video single
ladies and it gave me a list of different videos of this. I clicked the official music video and now I can
watch the whole of this video. Also on the right hand side it gives a list of other related videos so it
may be more of Beyoncé’s music or just songs that came out around that time.


Linear and interactive animations

Linear animations are animations that you have no control over, so basically say you click on a
certain page of a website usually if there’s an interactive animation then it will only play when you

Clouds move

roll over the button or click it but once you take your mouse away from it then it will stop. Linear
graphics are when you go on a page and the animation will start but you have no control at all, so
linear animations you have no control to stop it but interactive you can stop it and you do have
Sea moves control. A website that I have a linear animation on is the BMW website http://www.bmw.com/

This banner above is a linear animation as the clouds in the sky and the blue sea move and whatever
you do you cannot stop this from happening you have no control. A website that is interactive
animation is the Simpson’s website.http://www.thesimpsons.com/

This image above is an interactive animation as you have control over it. The draw is animated and
pulls out but the tabs inside that have the characters names do light up when you rollover but once

you click them it brings up a book on that character. So again you do have control over these
animations as they only move if you click on whatever it is that starts them of.


Instruction

Instructions on websites are when they help you do something step by step.

What you will
achieve to do

This screen shot above is from synergy learning and is an interactive instruction based task. This is
showing you how to work with layers. It even gives you a ‘lesson overview’ which means what you
will have achieved throughout this exercise. If you click to being this then it will instruct you on the
buttons you need to click and exactly what to do to complete the tutorials.

The instructions

This screenshot is once you start of the instruction exercise, as you can see straight away it tells you
what to do.


Animated interface elements

animated interface elements are anything that basically makes the page that you are on change.An
example of this is say if you hover your mouse over them then a drop down menu will appear and
you can scroll down onto the different options and click them, these will then direct you to a
different page. Another example is this screen shot below. This screenshot was taken from the
marks and spencer’s website http://www.marksandspencer.com

Clicking this
will make
the main
show zoom
so you can
look closer
at it

Clicking this
will make the
main shoe
black

This is an animated interface element as you can click on things on this page that will change how
you see it now. So anything on a website can be an animated interface element as long as it changes
the screen your viewing so basically if you click on something and a box appears up or you hover
over something and something else appears these are all animated interface elements.


The development of Animation

Task 2: Investigate The development of animation, such as hand drawn (cel) animation; flick books;
animated cartoons; animation process, graphic information file format (gif); dynamic hypertext
mark-up language (dHTML); extensible hypertext mark-up language (XHTML); Java applets

Hand Drawn animation – hand drawn animation is obviously animation that has been drawn by the
human hand. This technique was the dominant form of animation in the cinema until computer
animation came about.

Flip Books –A flip book is a book with a series of pictures that gradually move each time you flick a
page, this then makes the pictures on that certain page look like they are actually moving. So an
example of this say your series of pictures is a horse and each time you flick a page it looks like the
horse is galloping, this is a form of hand drawn animation. The first ever flip book appeared in
September, 1868. It was created by a man named John Barnes Linnett, he named it the ‘kineograph’
meaning a moving picture. Flip books are now considered a novelty or toy for children and were
once a common price in Cracker Jack and cereal boxes

Animated Cartoons- Animated cartoons can be for a film, programmes or even for the computer.
They usually feature some kind of story or plot, plus many old animated cartoons may be very short
and last up to five minutes if that. Animated cartoons are also made by the creation of drawings.
Although cartoons can use many different types of animation, animated cartoons come under the
‘traditional animation’ category.

Graphic Information File Format (GIF) – Graphic information file format known as ‘GIF’ is a bitmap
image format what was introduced by ‘CompuServe’ in the year of 1987. Since 1987 it has become
very popular and used throughout the World Wide Web due to its portability and support. The GIF
format supports up to 8 bits per pixel meaning it allows a single image to reference a palette of 256
distinct colours each time, these colours are chosen from the 24-bit RGB colour space. GIF also
supports animations and allows a separate palette of 256 colours for each frame.

Dynamic hypertext mark-up language (dHTML) – Dynamic hypertext mark – up language also
known as ‘dHTML’ is a term meaning a collection of technologies that are to used together to create
animated and interactive websites, by using mark up language , one example of this is HTML. DHTML
allows scripting languages to change variable in a web pages definition language. This then effects
the look and function of static HTML page content after the page is fully loaded and during the
viewing of the page. So there for the ‘dynamic characteristic’ of DHTML is the way it functions whilst
the page is being viewed.


Animation Techniques

In this task five I am going to be explaining what the different techniques of animation are. I will
explain what the following are and how they work:

.The optical illusion of motion (persistence of vision);

.Claymation

. Stop motion

.Computer generation (frame rate, frames, key frames, onion skinning, tweening)

Optical illusion of Motion (Persistence of vision) – Optical illusion is when a static image appears to
look like its moving due to the ‘cognitive’ effects of shape position and colour contrasts. Apparent
Motion is the most common type of illusory motion and it formed when images are displayed in
success at a different frame rate such as in a film.

Claymation – Claymation also known as clay animation is one of the many forms of stop motion
animation. Every single animated piece either background or character is ‘deformable’ meaning it is
made of malleable substance, usually always plasticine clay. Basically all traditional animation is
produced in a similar way whether done by stop motion or cel animation. Each still picture or frame
is recorded on a film or digital media, and then played back very rapidly.

Stop Motion - Stop motion which can also be known as stop frame is an animation technique to
make a physical object appear to move on its own. The object is moved in small amounts between
individually photographed frames, which are then creating the illusion of movement when the series
of frames is played continuous. Dolls or clay figures are mostly used in stop motion as it is easier to
reposition them. Stop motion animation using plasticine is called clay animation or ‘Claymation’ as I
have previously said above. Not all stop motion has figures or models, as many stop motion films can
actually involve using humans, house appliances and other things for effect.

Computer generation (frame rate, frames, key frames, onion skinning, tweening) - There are five
more important things about computer generation that is highly needed these are listed above so I
am going to explain them each in more detail.


Frame rate - Also known as frame frequency is the rate at which an imaging device produces unique
constant images known as frames. This term also applies well to both video and film cameras,
motion capture systems and computer graphics. Frame rate is often known and expressed as frames
per second (FPS) they are also expressed in ‘progressive scan monitors’ as hertz.

Key Frames - Key Frames in film making and animation are a drawing that shows the start and
ending points of any smooth transition. These drawings are known as ‘frames’ because there
position in time is measured in frames on a strip of film. A sequence of key frames show the
precisely that the viewer will see, where as the position on the key frames on the video, film or
animation shows precisely the timing of the movement. This is because only two or three keyframes
over a second do not create the illusion of movement, the remaining frames are filled with ‘in-
betweens’.

Onion Skinning - Onion skinning is a graphics term which is used in creating animated cartoons and
editing movies to see many frames at once. This meant that this way the editor or animator can
make decisions on how to change or create another image based on the previous image in that
particular sequence. In traditional cartoon animation the individual frames of a movie were first
drawn on thin onion skin paper over a light source. The animators would put the previous and then
next drawings perfectly beneath the working drawing so that they could draw the ‘in – between’ to
give a smooth motion.

Tweening – Tweening which is shot for in-betweening is the process of generating frames between
two images to give the appearance that the first image shows smoothly in to the second one.
Tweening is the key process in all types of animation, even computer animation. More up to date
animation software enables you to identify specific objects in an image and precisely show how they
should change and move during the tweening process.


Digital Animation

In this task I will be investigating all of the different types of digital animation. I will be explaining the
more known types of digital animation, these are listed below:

.Vector animation

. Raster (bitmap) animation

.Compression (file size, download speeds);

.Scalability

.File formats, e.g. .fla, .swf, .gif, .mng, .svg

Vector Animation – Vector Animation is a term that is used to refer to animation where motion or
art is controlled by vectors rather than pixels. Vector animation allows cleaner and smoother
animation simply because images are displayed or resized (if needed) by using mathematical values
instead of stored pixel values. One of the most commonly used vector animation programmes is
‘Macromedias Flash’.

Raster (bitmap) animation – Raster based animation is created using a lot more detailed images
similar to shapes or photos. Although there are both advantages and disadvantages of using raster
based animation. Raster based animation frames are made up of individual pixels; these pixels each
contain information about both the colour and brightness of that exact spot on the image. This is
similar to pointillism in painting, with the sum of points making up the totality of the frame or
picture.

Compression – Image compression may be either lossy or lossless. Lossless compression is used for
more archival purposes and often for medical imaging, technical drawings, comics and clip art. This is
because the lossy compression methods especially when used at low bit rates introduce
‘compression artifacts’. Whereas Lossy methods are used for more natural images such as
photographs of things where minor loss of fidelity is acceptable to achieve a decent bit rate.

Scalability - Scalability is the ability of a system, process, or network to handle a growing amount of
work in a capable way. For example it can refer to the capability of a certain system to increase the
total under an increased load when resources (usually hardware) are added.


File Formats- File formats are standard ways where in which information is encoded for storage in a
computer file. A file format specifies how bits are used to encode information in a digital storage
place. File formats can either be published or opened and may be either free or proprietary. Here
below are a few file formats and information on these.

FLA – the FLA file format is known as the ‘master’ document format for Flash projects. When you
create a flash file in the flash programme you create a new FLA file. This file contains all the
elements which make up the finished product, including the graphics, action script code, animation
instructions and comments etc. An FLA file does not play or execute so you have to export it to a
SWF file, which is what end users see.

SWF – The SWF file format is an adobe flash file format used for multimedia, action script and vector
graphics. Currently SWF is the most dominant format for displaying animated vector graphics on the
web. It is also used for programmes and is also common for browser games using action script. The
term SWF did originally stand for ‘Shock wave file’, but then changed to ‘small web format ‘to stop
confusion with a different technology.

GIF – The GIF file format is a bitmap image format file which was introduced by CompuServe in 1987.
The GIF format supports up to 8 bits per pixel, allowing a single image to reference a palette of up to
256 distinct colours. This file format can be used for small animations and low resolution clips.

MNG – The MNG file format also referred to as multiple –image network graphics, is a public
graphics file format for animated images. MNG is closely related to PNG image format. When PNG
fist started in early 1995 the developers decided not to incorporate support for animation because
the majority of PNG developers felt that it was over loading this single file type with both animation
and still is a bad design. So then MNG started as an animation support version of PNG. This was
released on 31st January 2001.

SVG – The SVG file also referred to as scalable vector graphics is the family of an XML – based file
format for two dimensional vector graphics. All popular modern web browsers such as Mozilla
Firefox, Internet Explorer 9, Google Chrome, Opera, and have at least some support for SVG . SVG
file formats can be searched, scripted, indexed, and if need be compressed. SVG files can also be
edited and created in any text editor, although it is easier to create them in drawing programmes
like ‘inkscape’.


Web Animation Software

In this task I am going to be investigating all of most popular web animation software. I will then
explain a list of them in detail. The ones I will be explaining are:

.Flash

.Swish

.Amara

.Director

.Players e.g. flash player, shockwave, real player, QuickTime

Flash – The programme flash is a macromedia multimedia platform used to add Interactivity,
animation and video to web pages. Flash is used mainly for games, advertisements and flash
animations for broadcast. It has just recently been named as a tool for ‘rich internet applications
(RIAs). Flash influences vector and raster graphics to provide animation of text, still images and
drawings. Flash contains an ‘object-orientated language’ which is called ‘action script’ and this
supports automation meaning via the java script language.

Flash content is displayed on most computer devices and systems, if you are using Adobe flash
player, this also doesn’t cost a penny for common web browsers, some mobile phones (not all) and
some other electrical devices.

Swish – The programme swish is a flash creation tool that is used to create interactive and cross
platform animations, movies and presentations. It is developed by ‘swishzone.com’ and it is based in
Sydney Australia. Swish outputs to the SWF format which is under control at the moment by adobe
systems.

Swish is basically known to be a much simpler and less costly flash creation tool comparison with
adobe flash, although swish does not support some adobe flash features such as action script 3.0,
bitmap drawings and shape tweens. But it does include flash creation features such as motion
tweens, vector drawings and symbol editing. Swish also has a number of effects and transitions
which makes building certain graphics like buttons, advanced transition effects and interactive flash
sites a lot simpler.


Amara - Amara is software which allows you to create web animations for a website. It is actually
rather easy to use people find, plus this software saves your creations as SWF file format meaning
that once your creation has been saved it can be used in any website without having to use any
special HTML coding. You don’t even have to have any HTML knowledge to be able to create an
animation within this Amara software.

With Amara you can create more than just animations, you can make animated flash slideshows,
news tickers, Buttons, menus, banners, virtual tours and flash intros all in this popular adobe flash
format.

Director – Director also known as ‘adobe director’ is a multimedia programme that is created by
macromedia, now part of adobe systems. Director was originally designed for creating animation
sequences and also uses both 2D and 3D multimedia projects.

Director has quite a powerful script language and this is named ‘Lingo’, this allows interaction with
external files and some windows API’s that has been used to create graphical user interfaces and
create applications. Director can export projects for embedding using the ‘shockwave’ plug in, these
files have a DCR file extension.

Players – Certain software programmes allow you to listen to music or watch certain films and
programmes, there are quite a few of these. I am going to explain five of the most popular used
players below.

Flash Player – Flash player also known as ‘adobe flash player’ is software for viewing

multimedia and RIA applications plus streaming video and audio. You will find flash player on a web
browser or some mobile phone devices. Flash player runs

SWF files that can be created by the ‘adobe flash’ authoring tool plus a number of macromedia third
party tools.

Shockwave – Shockwave player also known as ‘adobe shockwave player’ is Again software
programme for viewing multimedia playback. The shockwave player allows you to view interactive
web content such as web presentations, games, entertainment and advertisements from your
browser.


Real player – Real player is a ‘cross platform’ software which is software simply made so that you
can play or record. The first version of real player was introduced to the public in April 1995 as ‘real
audio player’ this was also one of the first media players that were actually capable of streaming
things over the internet.

QuickTime – Quick time is an ‘apple’ software player, again it is a powerful multimedia technology
which has a built in media player. Quick time lets you view HD movie trailers, Internet video and
personal media in a wide range of file formats. You can also watch them all in remarkable high
quality.

Unit 65 task

More Related Content

What's hot

Similar to Unit 65 task

More from leeanne123

Unit 65 task