Uses of web animation

Banner ads
The most common web banner is 728 x 90 pixels (leader
board) but there are tonnes of different sizes people use
such as 300x250 this is a medium rectangle, 180x150
rectangle, 160x600 this is a wide skyscraper. there are
companies that sell banners and some website allow you to
create them for free so all you must do is upload them
yourself. Here are some of the examples to the right.
The web banners look like they were created of photoshop
as they don’t seem to contain that mush detail like moving
images or text or anything that would be done on flash or
director.
I have also found web banners that are vertically up this makes it stand out in some ways, this
can be used to make different types of web banners which can lead to more designs.
People use web banners to advertise things within their own company or they collaborate
with other to make more money during advertising.
Animated interface element
An animated interface element is something that
isn’t static, and can be interacted with. This includes
things such as simple as rollovers, this is where the
mouse goes over something and it changes form this
can include the colour or the whole image. These are
on most websites as they are common especially
with the roll overs. An example of this is on the
Thomas Cook website there are roll over which go
from white to orange and it brings down a tab which
takes you to many other things, this happens on all
the taps.
These work the same as websites though as they
have the highlighted colour and a drop-down menu
aren’t just found on computer or websites they are
mainly found on iPhone or android smartphones,
these on it allows access to further things.
These animates interface elements are created on
things such as Adobe CS4 bone tools, and flash, these
are quite simple to make, but the coding will be hard for them to fit in the way you want to.
Linear and interactive animations
A linear animation is something that plays on its own, a good example of this is an advert, on
many devise such as smartphones, this happens a large amount of times on smartphones with
free games and they have sponsors that pay them to advertise what they want. People can
either keep watching the ads or skip them a few seconds in, that’s why people try and get
there point out with in the first few seconds on the ads.
YouTube is a good example of this as they are many adverts that appear on all videos, these
are scattered through the video as well, the more adverts
someone has the more money they make from the amount
of views.
Linear and interactive animations aren’t just videos, they can
be dynamic backgrounds, which can be any loads of things
from, gaming consoles to smartphones. These can include
things that is fully dynamic where everything is moving, or it
could be where there are some things that are partially
moving.
The image on the right is a small dynamic background, where the bitrd moves slighty up and
down even though its so little its still a linear and interactive animation.
Promotion
Promotion is the way you promote something to the public this includes things such as
adverts, web banners, posters and many other things
that get to the publi. The ,ost modern effective way if
through adverts as everyone is usesing some form of
technolagy, this means less effort for more money as it
doesn’t take that long to make an advert compared to
the desiigning, creating distrubution of posters or things
like that, but it costs lots more money as people need
to pay for it to be advitised to people the more views
the more money as they reach a higher amount of
customers buying the product.
Instruction

Instructions are given directly, they are on many things,

without them they could be confusing to people.
Instructions are everywhere, from games to appliances and
building, without them we would need some skill and
imagination on what to do. The instructions in a web banner
are brief as they are only like two words long like “click
here” for example this gives the user a very straight forward
answer. Things that take more time require more
instructions and details, for example cooking this can be a
long process and requires a lot more steps which can be
brief but direct.
Information
Information on a web banner is the most important thing as it gives the viewer facts on what
it is about, during the creation of a web banner people create information so it stands out
and looks appealing, this can be hard to do without some creativity or skill, but isn’t too hard
with tutorials and planning to help you get there a good way you can present your information
is by making it flash of go past the screen at a readable speed. This attracts the audience’s
attention and makes them want to read it.
Entertainment
Entertainment on a web banner isn’t in possible but is hard as they are many things you could
use but will consume file space meaning longer loading time. The main thing that entertain
people are games, and video as they are sources of distraction, depending on what your
advertising use different thing, although a game is a good way to keep someone busy,
something someone could interact with is a good way to entertain someone.

History of animation
Hand drawn animation
Hand drawn animation is known as many other
things from cell animation, classic animation,
traditional animation, and is quite common
among the Disney channel. Hand drawn
animation is quite simple but hard to achieve as
it requires many different free hand drawing for
them to work in chronological order so the create
an animation. In today’s day and age, it is
uncommon to see hand drawn animation as this
method of animation is time consuming and tedious.
Once there is a large amount of drawn characters with different designs and emotions they
are sent to the design apartments this is where they are turned into animations and linked
into one so they can be played as a movie.
Flick books
Flick books aren’t very common and they are
more own made one rather than official, a
flick book Is a small book with many pages
with different pictures on all of them,
through the pages the image slightly changes
to create what looks to be a moving image
when the pages are getting flicked through.
These arnt very entertaining or fun, there
excitement isn’t very good and very aren’t
very common. They are some flipbooks used for advertising things, in things such as a
magazine, this gives it a good purpose.
Animated cartoon
Animated cartoon Is created by a series of drawing like the
hand drawn animations, doing this will create a sequence,
which then can be turned into a video. These aren’t just
created from drawings there also created from computer
graphics or puppets. After all that they are turned into a
series of computer graphics that make a movie or episode.
The image on the right is a good example of the growth of
technology in computer graphics, as the people on the left
are in worse quality than the ones on the right.

Animation process
The process on the animation is quite simply if followed as they are steps which can be taken
to get where needed to be.

 1. The first thing to do is to create a story,

to do this you could use storyboards or
something like that, when creating this
keep it brief.
 2. The second thing to do is to start adding
little details in it, things that occur during it,
this will start to create a descriptive story.
 3. Now the story is complete you need to
add the dialogue, this will make the story
make sense and is an essential time for the
 step as further on the animators will need to time the words and lips movement into
one.
 4. After the dialog is recorded, a large amount of drawings needs to be done for the
whole movie/episode, when creating the characters, you need to make them
simplistic, as the people who deal with the things further up will deal with adding
detail.
 5. Once everything is done the drawing go to the inking department. This is where
they copy the drawing into a clear view onto a celluloid acetate.
 6. After the drawings have gone to the inking compartment they, then get a celluloid
which turns them crisp so the colour can be added.
 7. After everything above has been done, a background needs to be added, this is
normally created with water colours or tempera paint. In some older animations, they
used glass with colours in various places to give the illusion effect of movement.
 8. Now with everything done it can be photographed, but to do this you need a special
camera with the lens facing down.
 9. At this stage everything is done so the editing should begin.
 10. After all done it may be presented to the public.

GIF
A GIF is a file format of simply moving images that
take barely any space, during the making of my web
banner I didn’t use this because I didn’t have enough
time and the client didn’t specifically ask for one.

Animation techniques
Optical of illusion
Illusions are deceiving, they contain shapes and angles that
we don’t see in everyday life this makes it hard for us to
understand what’s happened, as you can see from the
images on the right, the top one looks like its vibrating or
moving forward if you look at it, the bottom one looks like
it’s turning right.

Claymation & Stop motion

Clay animation is stop start animations using
plasticise clay, this used to be a big thing because we
didn’t use to have technology as good as we have it
now so it was harder to record it, so stop start
animation was created to form the idea of a video.
Morph man is a good example of clay animation that
the older generation will have heard of, but a new
version of clay animation is Wallis and Gromit which
we be widely known by the older generation as it was on TV when they were young, this
was one of the very first clay animations and was popular as it was so unique.
Stop motion is pretty much the same as Claymation as the only difference is Claymation only
used tings such as plasticise, when stop motion can use anything, such as Lego, puppets. The
advantage of using plasticise clay is that it is malleable which means you can make more
expressions on their face, so it makes it look more like they have feelings, whereas Lego and
solid objects have a solid face so you will need multiply ones if you were to change the
expressions on them.
To make a clay modal people normally form it from the size that is around the size the
character is. You then rather than building each individual piece you form the main one into
the shape of the character, some characters have metal rods going through them so they are
tougher.
Computer generation
Frame rate & frames
Frame rate is the number of frames that pass by per second, there is around 29.97 frames per
second, in director it’s important to notice this so you can judge the speed of things. There
are different monitors and hardware that allow for more frames per second. For example, an
expensive computer runs games at 60 FPS (frames per second) where as an old one only runs
them as 30 FPS meaning lower quality.
Key frames
Key frames sound like they belong with the category of frame rate but they don’t entirely as,
key frames are used for editing, you use a key frame when you change a certain factor of
multiple frame edits, this requires a bit of getting used to but is an advantage from using
premier as it lets you customise it to your video, I used key frames in premier, but they can
be used in things such as photoshop on the timeline or flash player.

Digital animation web animation software

Raster images
Raster images computer graphics is a dot matrix data structure which normally represents a
rectangular grid of pixels making a solid recognisable picture this is created in a grid format.
Here is an example as you see the coding matches up with the picture, if you enter the code
one on a square a black dot will appear on the other graph that dot represents a pixel and the
colour of each dot can be controlled by using different number, for example, if you put one
its is a black dot but will be a different shade of black or just a different colour together its
just depends on the coding of the raster image.
Gif- this stands for graphics interchange format. A format for a file that
contains a graphic or image that is commonly used over the internet
e.g. website banners excreta.
Jpg- this stands for joint photographic experts group, these store more
colours but reduces the quality often used for images with high
resolution images on the web.
Bmp- this stands for best management practices, this is a image file
format which is often used to store bitmap images.
Tiff-this stands for tagged image format, a format for storing grey-scale
data.
Psd- this stands for photoshop image file, this is used on photoshop,
this format is made from layers which can be added together.

Compression
File size isn’t really an issue when it comes to creating the web banner as its mainly up to
the website capability, when doing this I will consider the amount of MB I use when creating
the advert, such as the effects I use as these can have a massive toll on the file space, With
my web banner.
Compressing video to a television format, I will be aware of the fact that some data could be
lot especially when using the Dolby digital as this compression can lose data, this will mainly
happen when converting my advert to a TV due to their size it could make the advert seem
bad quality, which would be bad for marketing.
Dolby digital (sound)
Dolby digital is the way in which sound audio is compressed, and was created by Dolby
laboratories; During the compression of the sound some date could be lost, that’s why they
give it the term ‘lossy’. The actual technology was introduced in 1992 on the film Batman
returns. Although the DTS software is better to use Dolby digital is easier to use and
available to most DVD software’s.
DTS (digital theatre system)
DTS is what’s used to maintain the good quality of sound in movies, this works by using a
LED reader and the time code data from the film so it’s all in time and it then it sends the
data to the DTS processor, The DTS processor then goes in trance with the sound and the
film. The largest investor in the DTS system is known as Steven Spielberg, he did this
because he wanted better quality from films he watched.
File formats
File size is due to the amount of space I’m taking up compared to my capacity, the more
things I have like videos, and images take a toll on my limits, the way to fix this is don’t use
as any, don’t use them or reduce the quality of them. The most effective way seems to be
reducing the quality, but not that low it’s pointless using it.
AVI
AVI
AVI is a simple video format which allows you to use videos in some software, I didn’t use
any video formats, but if I had to use one it would be quick time as it works in director.
GIF
A GIF is a file format of simply moving images that take barely any space, during the making
of my web banner I didn’t use this because I didn’t have enough time and the client didn’t
specifically ask for one.
HTML
HTML is a coding on a website and is used for websites this will be the one I will use a it is
needed for all of web based things, when creating my web banner I will have to export it in
this format for it to work.
JPEG
JPEGs are file format for things such as images, the good thing about them is that they allow
you to change the quality of the image reducing the quality and the space. I will be using this
format for all my images.
MP3
MP3 is the best compression for sound as it allows you to compress it to a very small
amount with high quality, this file format has caused pain for the music industry as they are
small enough to trade online. In my web banner, I will be a song which I will convert it to
MP3 so it can be played in the background of the web banner.

Web animation software

Authoring
The definition of authoring otherwise known as author ware, is a program that helps the user
write hypertext or multimedia applications. The authoring tool allows its user to create a
application simply by joining (linking together) other objects, this can include a paragraph of
text, a song, or an image. By explicating the elements (features) relationships to each other
and gathering them in order by doing the authors (people who own the software) can produce
more attractive and more handy information to their audience.
The difference that exists between ‘authoring tools’ and some programming tools isn’t
definite as ‘authoring tools’ don’t take as much ICT understanding to accomplish, they are
often used for software that use a chunk of graphical, textual and audio data.
An example of an authoring tool is the Adobe Technical communication suite, this is a e-
leaning authoring tool, this helps developers create and package their own e-leaning
content which they can then deliver to their ‘end users’. When I was researching,
‘Wikipedia’ said that the ‘authoring tool’ is used to develop its multimedia content for the
world-wide web.