Uses of web animation
Banner Ads-
Banner ads are small advertisements
that appear on all sorts of Web sites. They share a basic function: if you
click on them, your Internet browser will take you to the advertiser's Web
page.
Banner ads are usually relatively
simple pieces of HTML code, but their presence on the Web and their importance
in Internet-based business is huge. Banner ads come in a variety of shapes and
sizes. There is no universal file-size constraint for banner
ads, but most Web sites have their own limits on memory size,
which are usually something like 12K to 16K. This is because banner ads,
add to the total file size of the page they appear on, therefore increasing the
time it takes for a browser to load that page.
While surfing the Web you've probably
noticed that, actual graphic content, or creativity, varies a lot among banner
ads. The simplest banner ads feature only one, static GIF or JPEG image, which
is linked to the advertiser's home page. More common is the GIF-animated banner
ad, which displays several different images in succession, sometimes to create
the effect of animated motion. Then there are advance media banner ads, ads
that use audio, video, or Java and Shockwave programming. These banner ads,
which usually have larger file sizes, are often interactive beyond their simple
linking function.
On the Cineworld website http://www.cineworld.co.uk, Banner ads
are used to promote movies to persuade people to go to the cinema and watch the
movie they are Promoting. These banner ads are static images of the movies, in
a way kind of posters, and when you click on the banner ads, they lead you to
the web page on the Cineworld website were you can book the tickets for that
movie, look at the reviews, the timings of the shows and even view the trailer.
Other banner ads can be much more complex and have a lot of animations going on
with them unlike these ones, they have great graphics and show a lot more
complexity with their designs.
Animated interface elements-
Animation interface is simply when a computer,
laptop or smartphone are letting you know that they are doing something and are
communicating with you is some way or another.
The dictionary definition of ‘Interface’ is:
“Computing a device or program enabling a user to communicate with a
computer.
-a device or program for connecting two items of
hardware or software so that they can be operated jointly or communicate with
each other.”
An example of animated Interfaces can be widely found
on a Android Smartphone or I-Phones with the menus used on the phone or the
buttons that can be found on a website where when you hover over them they
will have a drop down menu or be highlighted when the cursor is above
them.
Programs that can be used to create these
interfaces are Adobe CS4 Bone Tools. Below is an image of a Smart Phone
Interface.
For example, when I go
onto the games on the cbbc website, the website uses animated interface
elements like the “loading” sighs, the computer is communicating and
interacting with the users by telling them that they have to wait as the game
is loading.
Linear and interactive animations-
Linear animation keeps going, you can’t stop it
till it ends, and you can’t interact with it.
Interactive animation, you can change what is going
on and interrupt the animation so like the Google doodles.
Compare different websites eg. Bing/yahoo with
Google…Comes with Happy Birthday when it is, links in with your calendar.
Linear animation is non-interactive. This means
that the animation does not require the user to scroll-over, click or press
anything to make it work. The animation is set on a continuous smooth loop. It
is important that the transition is smooth as the could affect the looks and
the idea of a linear animation. An example of linear animation will be a gif.
Linear animation goes through the same animation
continuously, yet it seems to be one action being played over and over again.
In simple terms, it is hard to establish when the beginning and end of the
animation is.
These animations range in a varirety of sizes. Each
different design will take different storage spaces. Lets take the two above
for example. The first one takes 932KB. The second animation takes 1.47MB. So
this just goes to show that they have a wide range. This, again like most
animations a designer must consider if they have a limit on how much data and
storage space their site takes.
Unlike linear animations, interactive animations
rely on the user of the site to do an action before the animation is performed.
Interactive animations are similar to other animations as they are generated by
computer programmes such as Flash. However, they only perform in real time, and
as motioned, they will only usually work once there is interaction between
computer and user.
Promotion-
Animation can also be used to be promotional advertisement, this
technique allows the designer to create an animation that
sells something to the user.
Unlike other animations such as banner ads,
animated promotional videos are more likely to grab the site user's
attention. They will would want to watch a video which would result in the user
gripped onto that site a little longer.
By positioning a promotional video onto your home
page of your site, you are saving the user's bother of clicking and reading
through your website. You have a chance to grab their attention instantly by
communicate using a fruitful mix of pictures, motion, text, voice, sound
effects and music in a short amount of time. It’s an efficient use of time and
condenses information.
Overall, I believe that this type of animation allows
you to get very creative-either promoting your site, business or even
advertising others. Whilst videos will take more space and it will really
engage the user.
Instruction-
Today's technology has allowed companies and
businesses to create instructional animations. These can range from little stop
frame animations to lengthy videos. This of course depends on how big the task
in hand is.
informative animations can also aid the user-friendliness
of a site. In simple terms, an animation can make complex
subjects, such as the brain's anatomy, much easier to understand.
In particular 3D animations are much more useful. Depending on what
kind of site you have, depends on how useful an informative animation can
be. For example, if you're site is science based and full of fascinating yet
very complex facts and statistics, then by using this type of animation you are
able to make this seem less complex, and complement these given facts in a
modern and unique way.
One problem you may have using videos on a site is
not only the storage space used but if your not careful your user may
get bored if the video is too long. Whist it is important to ensure every
detail is included in an informative animation, you don't want to bore the
user. It is best to keep is concise as much as possible to avoid this issue.
Weather on a web site or on TV, animations can be a very entertaining piece of media.
As mentioned stop-frame animation is the most
common technique used for animations to entertain. Stop-frame animation
consisits of many pictures being taken of an object, which is moved slightly
per frame (hence why it is called stop-frame). This si to give the effect of
the object moving on its own. It is a very simple technique, but sometimes can
have problems. For example, lighting is a major issue here. If for example
you take a frame with the sun out, but then you take one when it is behind a
cloud, the difference will likely be noticed in each of the shots. This
will make your work look untidy, uneven and less professional. To control this,
a studio or somewhere where the light is persistent would be beneficial
for this kind of animation.
In particular stop-motion animation can be
most effective. The use of house-hold objects or even sometimes humans,
can add a comic effect on the animation, thus the audience will be entertained.
The quality has to be to a 'near-professional'
standard. If your animation is created to this standard, your site has more
potential to be interactive with your audience. This will entertain all ages,
although this style of animation may suite children and a younger audience
best.
ADOBE Flash (which has the basics to create a
simple stop-frame animation) is one of many softwares used to create stop-motion animation. And, at an estimate, at a rate of 12 stops
per second of movie time, a 30-minute clay animation movie requires 21,600
still pictures! A full-length (90-minute) clay animation movie would require
64,800 still pictures! As you can see it is very time-consuming to make stop-motion animation.
History of animation:
Hand drawn-
Hand drawn animations may seem like an old-fashion
and long process to create an animation. However, it is one of the most common
techniques used by the BIG companies in the world of Animation. One constant
user is Disney, who use this technique to create the classic movies. This goes
to show just how effective a hand drawn animation can really be.
This is commonly know as 'cel animation'. This
technique has been around since 1915, so why has been used in recent decades? Well,
financially this technique is cheaper to produce, and arguably less complicated
to design. This technique is mainly based on how well the sketches and drawings
have been made. This contrasts with other techniques as they mainly rely on
computer skills.
With this kind of technique, comes a disadvantage.
If the drawings are at poor standard then the animation will ultimately be
unsuccessful. This technique will also take a considerable amount of time to
complete in contrast to other techniques out ther
Even the most famous cartoons and characters have
all been created using this technique. From the Simpsons, to Mickey Mouse! Of
course it will take very artistic skills and knowledge to get an animation to
this kind of standard. However, if you have the creativity (which is a vital
skill to have in animation design) this old technique will certainly help.
Before this technique was established, everything
was drawn on one single sheet of paper resulting in time, money
and materials been used too much. Instead of drawing on a single
sheet of paper, and then redrawing the entire scene for every frame (12 for
every second), the scene was drawn in parts, on a thin 'cel'. For example, the
background would be drawn on the first layer, then the body of a character
would be drawn on the next layer ect. This made it easy to change an expression
without having to redraw everything.
The first feature length film to use this technique
was Snow White- and the seven dwarves.
Flick books-
A flick book animation isn't one you would usually
see used in the professional industry. This technique is something
commonly created by the average person, for either fun or for a past-time.
Whilst you can be creative with your designs, this technique isn't so good as
it takes time and can become very difficult to show a large scene-certainly
almost impossible to create more than one scene effectively.
It is similar to cel animation, as you create each
action on separate piece. You draw each movement on a sperate sheet of paper
and then you flick through using your hand through the booklet. This is
basically how computers operate stop-frame animation. They play through each
image to give the illusion of the object moving.
Here is a great little example of a flip book that
is in a Gangnam Style Animation I personally think that
this animation is amazing and a lot of hard work would have gone into making
it. http://www.youtube.com/watch?v=8D0kG4URfxs
Digital animation:
History
of animation:
Hand
drawn-
Hand drawn animations may seem like an old-fashion
and long process to create an animation. However, it is one of the most common
techniques used by the BIG companies in the world of Animation. One constant
user is Disney, who use this technique to create the classic movies. This goes
to show just how effective a hand drawn animation can really be.
This is commonly know as 'cel animation'. This
technique has been around since 1915, so why has been used in recent decades? Well,
financially this technique is cheaper to produce, and arguably less complicated
to design. This technique is mainly based on how well the sketches and drawings
have been made. This contrasts with other techniques as they mainly rely on
computer skills.
With this kind of technique, comes a disadvantage.
If the drawings are at poor standard then the animation will ultimately be
unsuccessful. This technique will also take a considerable amount of time to
complete in contrast to other techniques out ther
Even the most famous cartoons and characters have
all been created using this technique. From the Simpsons, to Mickey Mouse! Of
course it will take very artistic skills and knowledge to get an animation to
this kind of standard. However, if you have the creativity (which is a vital
skill to have in animation design) this old technique will certainly help.
Before this technique was established, everything
was drawn on one single sheet of paper resulting in time, money
and materials been used too much. Instead of drawing on a single
sheet of paper, and then redrawing the entire scene for every frame (12 for
every second), the scene was drawn in parts, on a thin 'cel'. For example, the
background would be drawn on the first layer, then the body of a character
would be drawn on the next layer ect. This made it easy to change an expression
without having to redraw everything.
The first feature length film to use this technique
was Snow White- and the seven dwarves.
Flick
books-
A flick book animation isn't one you would usually
see used in the professional industry. This technique is something
commonly created by the average person, for either fun or for a past-time.
Whilst you can be creative with your designs, this technique isn't so good as
it takes time and can become very difficult to show a large scene-certainly
almost impossible to create more than one scene effectively.
It is similar to cel animation, as you create each
action on separate piece. You draw each movement on a sperate sheet of paper
and then you flick through using your hand through the booklet. This is
basically how computers operate stop-frame animation. They play through each
image to give the illusion of the object moving.
Here is a great little example of a flip book that
is in a Gangnam Style Animation I personally think that
this animation is amazing and a lot of hard work would have gone into making
it. http://www.youtube.com/watch?v=8D0kG4URfxs
Animated cartoon-
Animated cartoons are pieces of digital theatre
designer and produced for cinema, TV or computer. They tend to follow some sort
of plot or storyline, which initially keeps the audience gripped and/or
entertained. In adition to this, they are commonly made up of professional
drawings (simialr to many other techniques of animation).
There are plenty of different techniques used to
create cartoons. However, one thing that they all have in common is that they
are all 'traditional animations'.
Traditional animations are basically types of
animations that are hand-drawn. This was a common technique used before
computer animation was introduced.
One of the earliest animations was the
'Phenakistoscope'. Belgian Joseph Plateau
invented it in 1832.
The first part of the term
'phenakistoscope' comes from the root Greek word φενακίζειν - phenakizein,
meaning "to deceive" or "to cheat", as it deceives the eye
by making the pictures look like an animation. The phenakistoscope was an early
animation device that used the phenakistoscope of motion principle to create an
illusion of motion. I think the phenakistoscope was used for entertainment,
just like T.V for us.
The phenakistoscope works
when, there are 2 discs that face each other, one is a mirror and one is a
piece of card with a sequence of still image drawn onto it. There is a pole,
that the discs are joined to the pole. The person would spin the disc and look
through the moving slits at the disc's reflection in a mirror.
GIF’s-
Animated GIF'S are another simple and basic type of
animation. GIF stands for Graphic
Information File format. They are made up of gif files with multiple frames
that are played in a sequence to create the motion. They are examples of linear
animations, as they are non-interactive and continuously repeat the sequence. Again,
they do take space, and the bigger/longer the animation the more space it will
take. Nevertheless, animated gifs tend to be only short. To create an animated
gif, you could use 'Scratch'. Or for a more professional approach, ADOBE Flash
is a software I would recommend.
Dynamic
Hypertext Markup Language (dHTML)-
This is a combination of web development
technologies used to create dynamically changing sites.
This is a very useful aspect as it allows the user
to dynamically change the web page content and other settings such as colurs
and fonts.
While dHTML ehances the user-friendlyness of the
site, the technology used can sometimes be frustrating for users when it is
used incorrectly. For example, a website menu with flashy dHTML animations can
easily confuse user navigation, therefore doing the opposite to what it is
supposed to do! It can be very difficult to develop and debug the site due to a
lack of Web browser and technological support. In addition to this, dHTML
scripts may not work correctly in various Web browsers (which means some users
will beinfite from HTML whilst others will stuggle to navigate).
Java
Applets-
A Java applet is a type of Java programme that a
browser (enabled with Java technology) can download from the internet and run.
An applet is typically embedded inside a web page and runs in the context of a
browser. This is usually used to run the HTML of a site.
Today, many designer tend to avoid using Applets.
This is because technology has advanced so far that it is capable of doing the
functions an applet would do itself. The only problem on relying on modern
browsers is the potential risk of security issues.
Previously browsers were not as useful as they are
today; there was a need to turn
to a more-capable platform. This is no longer the case, and as such, applets
rarely have a place in modern web designing.
Animation:
Optical
illusion of motion-
An optical illusion is an image designer in a
clever and creative way, using shapes and colours that simply trick the mind to
think the object or images is moving.
This example above is a simple imported png
(portable network graphic). The shapes used and the complex design behind this
image basically fools us all! Although, if you look at it enougth times, your
mind does get used to it and you may notice that the mootion has either slowed
down or has stopped all together. This is an issue you would have by placing
this on a site. Whilst this will entertain the user by how unique the image is,
the novelty is likely to wear off, and due to the bright colurs (that are
sometimes needed to make the illiusion) they may clash with your site colour
scheme and themes. Therefore, this may become an eye-sore to the user. This is
something a designer must consider if they was to use this type of animation.
Computer
Generation:
Frame rate-
Frame rate is simply the frequency (rate) at which
an electrical device produces unique consecutive images called 'frames'. They
cover the frames in video games, TV programmes and of course animations. The
frame rate is often measured in FPS (Frames per Second). We can process around
10 separate images per second, recognising them separately.
Key Frames-
Most animations have key frames.
A key frame in animation is a drawing that outlines
the starting and ending points of any smooth transition. The drawings are
called "frames" because their position in time is measured in frames
on a strip of film. A sequence of keyframes defines which movement the viewer
will see, while the position of the keyframes on the animation outlines the
timing of the movement.
Tweening-
It is the method of generating transitional
frames between two images to give the illusion that the first image progresses
smoothly into the second image.
Onion
Skinning-
This technique is used during the editing of an
animation. It is particularly useful for animated gifs or any small animations.
In the process of editing, it is important that you make only the smallest
changes in each image on each frame. This can be difficult to complete, but
that's where this tool becomes useful. Onion skinning basically layers each
frame over each other. For example, you edit the image in frame one, and once
you move onto frame two you will have a faint outline of frame one. This makes
it more easier to make the slight changes in each frame. This is only
effective when working with 2D animations.
Above, is an example of an animation in the
creation process. You can see the different layers outlined beneath the layer
currently selected.
Digital animation:
Vector
Animation-
This is a term used to refer to animation. The
transition and motion of the animation is controlled by vectors rather than
pixels. The advantages result in smoother animations. This is because images
are displayed and/or resized using mathematical values instead of stored pixel
values, allowing the designer to get one step closer to the 'near professional
standards'.
There are few programmes out there that allow
a designer to do this ask, however one of the most commonly used programmes is
Macromedia's 'Flash'.
There is an opposite to vector animations, which is
raster (bitmap) animations. Unlike vectors, raster animations are made up of
pixels. This results in the loss of qulaity when zoomed in. If for example you
needd to shrink you animtion to a certain size, you may loose qulity in your
design if it is a bitmap animation. This contrasts with vector animations as
they can be re-sized and scaled without degrading the quality. Below, is an
image showing the clear difference between a vector and bitmap image. This will
ultimately have the same effects with animations too.
Compression-
Compression is the reduction in size of data in
order to save space or transmission time. In digital media you have choices to
make, and one of them is what type of compression you would like. There is two
different types...lossy and lossless compression.
What is the difference between lossy and lossless
compression then? There's a little clue in the names....'lossy' results in a
loss quality in the graphics whilst 'lossless' compression doesn't downgrade
the quailty. However, one good point about 'lossy' compression is that it means
less storage will be taken by the image or animation. In contrast to this,
'lossless' compression would result in bigger files.
It can be a difficult challenge to decide which
type of compression to deal with, however, there is one ky factor thst could
actually help you decide. Professionals tend to use lossy compression for
audio, video and still images (especially when your're streaming media).
Lossless compression is usually used for compressing texty and data files. So,
if your making an animtion and wish to compress it to suite your site and to
make itrun that little bit faster, it will be best to go with lossless
compression, although as mentioned the qulaity can take a bad effect.
So why should you compress when making a web site
with animations on? Well, lossless compression will allow you to cut down on
the amount of storage space used. The more space/data taken (the bigger the
file size), the slower your site will become, and will also effect the download
speed.. The user may then get impatient with your site and exit! Compressing is
a technique that allows you to stand a better chance on keeping those all
important user on board.
File
Formats-
There are many different file formats out there.
The formats of animations on a computer are .fla, .swf ,.gif, .mng and .svg. To
create these animations many companies will use programmes such as flash, swish,
Amara and director. Some of them have different features to each-other, so it
is important that a designer looks into the pros and cons behind each programme
to ensure they have chosen the right one for their animation.
Authoring-
Also known as ‘Authorware’ is a programme that aids
you to write hypertext or software applications. Authoring tools usually
enable you to create a final application simply by linking together objects,
such as a paragraph of text, an illustration, or a song. By defining the
objects' relationships to each other, and by sequencing them in an appropriate
order, the creator can produce attractive and useful graphics applications
(particularly on sites).
The difference between authoring tools and
programming tools is not precise. However, authoring tools require less
technical knowledge to master and are used solely for applications that present
a mixture of textual, graphical, and audio
data.
No comments:
Post a Comment