1. The uses of web animation
Task 1
Animation can be a very useful and powerful element that can be added to any website to generally
enhance it. In most cases animation will be used to make the website look more professional when
compared to competitors, as it gives the website a bespoke and original look as web animation can
be extremely diverse and will vary greatly. Companies will spend thousands on creating a bespoke
website using Flash or a similar web animation package as it will give them a distinct business
advantage over competitors.
Web animation can come in many formats, sometimes it is used to create programs to enable the
user to create a product to their needs, and this will then give the user a clear look as to how the
product they intend to buy looks. For example McLaren uses an extremely good looking interactive
animation to allow users to create a custom car to their likings.
Each element of the car is customizable, and this will change once the user choses a different colour
or a different component. The way you can configure the car and the user interface associated with
it is extremely fluent and works very well. When you chose a different component it comes out as an
exploded view and comes away from the car so you can assess it better. There are also subsidiary
animations when the screen changes or you go to customize another part of the car.
Another way in which animation can be used is
banner ads, these can appear anywhere around a
website and are typically used to advertise a
product on a different website to their own. They
are usually designed to be eye catching and
original to entice people in, they sometimes have
video and sometimes use games. Sometimes
banners can also feature interactive animation.
For example, last year Ikea created a banner which
allowed users to assemble their own banner; this
was a truly unique and original banner which was characteristic of the company. At the end of
2. creating the frame for the banner you were greeted with an advertisement which stated “you have
done your bit, now it’s our turn” and displayed a deal on furniture.
The advert also tied into the companies selling point by claiming “assemble banner yourself and save
money” meaning if you do the same with furniture you will also save money.
Commonly the animations used to advertise things on the web are more quirky and original than the
ones used to show things on the website, this is because the company who has created the banner
wants people to become interested in their product and intern their company.
On the Apple website there are
a number of banner
advertisements used to show
products and services, most of
these animations only have very
subtle and clean animations it
also features some linear
animations once the user gets
onto the site. This is in the form
of a banner which switches
between new and featured
products. Adverts such as the
ones on the Apple website are
not used to entertain or provide
something for the user to do,
instead they are there purely to
showcase their products and eventually lead to a sale. Again these products match the companies
ethos and style they typically use when advertising their products. This brand consistency is typical
of Apple and also reflects in their products.
Linear animations are animations that happen on a website without the user doing anything or
needed to interfere or play with it. For example a video playing in the banner at the top of a website
would be considered to be a linear animation, as it does not require any interaction between its self
and the user. For example on the top of the YouTube page there is a Guinness advert which displays
a video besides some text.
This advert is there to promote a product due to the Guinness logo and the fact the theme is part of
the company’s colours and general theme. Another example of this kind of linear animation is the
loading screen of The Simpsons website.
3. The website features a spinning donut when the website is loading. This is done to break up the
monotony of a loading screen and get the user excited for the website.
It is a donut with the text “Mmmm… More Loading” as this is something one of the main characters
of The Simpsons says, and is a form of branding associated with the program, again this fits into the
theme of the website.
On the same website there is a selection screen
which gives the user a choice of different
segments of the website such as news, pictures,
videos and characters. When the user presses a
button at the bottom of the screen the camera
pans out and moves to a different booth
featuring animations that match the specific
section, like Kidz Newz which shows two
children characters reading the news.
In any case, animation on a website will generally enhance it, and also make it easier for people to
navigate around it. However, the exception to this would be when the animation used is not done
well and can actually result in the website being more difficult to use. Advertisements that also use
animation will have a unique and original dimension over the typical still graphics thus making the
advertisement more effective and therefore selling more.
Task 2
Animation has been used for thousands of years for various
different purposes, there are a large number of different ways in
which things can be animated and what techniques used to
animate it can vastly alter the final result, so it is important to find
the right medium after reviewing what the animation will be used
for before starting. The very earliest animations were extremely
short and primitive; they only featured mundane and timid things
such as two people dancing, or a horse running.
4. The very first animations were created thousands of years ago by the ancient Egyptians. The
animations were drawn on a tablet of clay, they had no way of animating the drawings but the
drawings were done in such a way it is clear that they were trying to indicate the fact the animations
were moving. It was not until 180 AD when the first animation device was created, in the form of a
Chinese zoetrope-type device. These devices used a sequence of images in order to create the
illusion of movement. It was not until the creation of cinematography that animation made any
significant changes.
In 1886 the introduction of the flick book changed the minds of everyone interested in animation by
introducing the concept of persistence of vision, this is the reason that all of the pages in a flick book
merge together to create an illusion of movement. A flick book
is a sequence of images drawn in a bound book. Each of the
pages has a slightly differing drawing to the last, that once
flicked will appear to come to life and move. The good thing
about a flick book is that it is very simple to do, and can give
professional looking results. Over the years they have had
many different variations and evolved as time has gone on to
include things such as photographs as opposed to drawings.
Usually these animations are not given their own books and
are placed on other books in the page corner. Flick books were a very important step in the
development of animation as it opened up people’s minds to different concepts of animation, and is
still being used to this day, albeit in different formats/styles.
After flick book animation a process known as stop motion was introduced - a very simple way of
animation is to simply take photographs of a real life object and then move it slightly and repeat.
This is a technique that has been around since the very first animation and gives the animator a very
easy method of advancing each frame due to the fact it is there in front of them. Also referred to as
stop-motion animation, there have been hundreds of extremely iconic films and shorts that have
been animated in this way. Perhaps the most famous stop-motion animation is the Wallace and
Gromit. This method of animation is good because it gives the artist a wide variety of different
resources in order to make characters appear life-like and more realistic. Because models and
characters are modelled in real life you are able to create incredibly realistic and believe able
movements and animations making this style particularly fitting to animations that desire more true
to life movement and style.
Another style of animation that has been around for hundreds of
years is animated cartoons, which have come about in several
different styles and formats. The first of which was the
phenakistoscope, developed by Antoine Ferdinand Plateau, a
Belgian physicist. Plateau was the first person to show the illusion
of a moving image. He did this by using counter rotating disks with
repeating hand drawn images in very small increments of motion
on the first, and regularly spaced slits in the other disk. He named
this device the phenakistoscope.
5. The actual phenakistoscope used a spinning disk vertically attached to a handle. Around the centre
of this disk a series of pictures was drawn in correspondence to the frames of the animation. Above
this was a series of radial slits. The user would spin the disk in front of a mirror and view the
reflection which would appear to be moving.
It was not until the advent of motion picture film that animation made another big advance. One of
the very first and most successful animated cartoons was Gertie the
dinosaur (1914), The appearance of a true character distinguished it from
earlier animated "trick films", such as those of Blackton and Cohl, and
makes it the predecessor to later popular cartoons such as those by Walt
Disney and Max Fleischer.
At the advent of the computer age animated graphics were none
existent. It was not until the .gif was created that animation would be
present on the internet, after this point near enough every website had a
large number of different animations in lots of different forms – at this
point they were extremely advanced and were considered the very peak of technology, however by
today’s standards they appear extremely primitive and tacky. They would be used in all different
scenarios, such as headers, buffers for pages and for links.
The images below show a transformation from the original Disney website, to how it looks today.
Disney Today
Disney Circa 1996
As you can see by the first Disney website, there was very little in the way of graphics or animation.
The only button on the whole home page that was animation is the picture of the girl dancing at the
6. top. However in the modern day Disney website there are lots more interactive buttons, linear
animations and things that make the website interactive.
Dynamic hypertext mark-up language (dHTML) is
a term used to describe a number of different
technologies that are used together to create
web animations it uses things such as static
markup language (HTML), JavaScript and CSS
and the document object model. dHTML is good
because it can bring a once static website into an
animated and interesting website; however, this
only works after a web page has been loaded.
The dynamic characteristics of a dHTML website
are viewable once the page has loaded. The
object model that is provided with Dynamic
HTML gives web developers the ability to
dynamically update content, style and structure
whist providing detailed control over the
appearance, interactivity and multimedia elements required for a professional and polished
application. An example of a good use of dHTML would be for websites requiring higher
aesthetic merit, such as an online portfolio or website for a company, you do not typically
find lower end websites being made in dHTML as it requires more skill and in most cases
wouldn’t be necessary.
Before getting to know XHTML it is important to know what XML is, as XHTML is a mark-up
language written in XML, this makes it an XML application. There is a big difference
between HTML and XML, this is the fact XML was designed to transport and store data,
whereas HTML was designed to display data – it wasn’t used to try and replace HTML, it
was created with a different goal in mind. When creating tags in XML there is no
predetermined way in which you can write them, like HTML. Instead you are able to
“invent” any tag you desire. In HTML you are only able to use tags which are predefined in
the the HTML standard, such as <p>, <h1>, etc…
When using XHTML it is important that all code is correctly formatted in order for the
website to function properly. Key things to remember are:
XHTML DOCTYPE is mandatory
The XML namespace attribute in <html> is mandatory
<html>, <head>, <title>, and <body> is mandatory
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
An example of correct code would be:
7. <p>This is a paragraph</p>
< p>This is another paragraph</p>
This is because the code is closed, an example of an incorrect piece of code would be:
<p>This is a paragraph
< p>This is another paragraph
This is because code always needs to be closed when creating a XHTML document.
Task 3
Persistence of vision is the time in which the retina retains the “afterimage” after the
image was initially shown. This is approximately one twenty-fifth of a second. It is useful to
know in animation because it means animators can get a smooth flawless image as the
brain and eyes are using the persistence of vision to create a “fill” in-between each frame
to give the impression of continuous motion. This results in a smoother, better looking
picture without any flaws which would otherwise be present if not for “The Persistence of
Vision”.
The original discovery of the persistence of vision is credited to the Roman poet Lucretius;
however he only mentions it in connection with images he saw in a dream. In the modern
day, Peter Mark Roget’s experiments in 1825 were also named as the basis for the theory.It
was originally believed that the human perception of motion (brain cantered) is the result
of persistence of vision (eye centred). However, in 1912 this was debunked by Max
Wertheimer.
It is taught that the persistence of vision is the reason humans perceive motion in such
things as Zoetrope’s and classically projected films, however, in reality it is not connected
with motion perception, it is simply the reason we do not see “Black Frames” in-between
the space between each “real” frame whilst watching a movie.
Stop frame, or stop motion as it more commonly known is the process of creating a sense
of movement in a scene. Typically this is done by altering a figure or moulding plaster into a
different shape. Normally the object is moved very slightly from the last frame. The
reasoning behind this means the animation will look very smooth as the model is only being
adjusted extremely subtlety to make the action appear smoother when each frame is
played back at a suitable frames per second. Commonly clay figures are used to create stop
motion pictures as they can be manipulated very accurately and precisely which will intern
make a smoother and better looking end result. This is often referred to as clay animation
or Claymation, and is well known for its use in such pictures as Wallace and Gromit and
Chicken Run.
8. The History of Stop Motion:
Stop motion has a long and rich history in film. Commonly it was used to show objects
moving by what appeared to be magic, with the first instance of stop motion being credited
to Albert E. Smith and J. Stuart Blackton in the movie “The Humpty Dumpty Circus” in 1897.
In this movie they made a toy circus of acrobats and animals come to life.
After this Clay Animation became more apparent when in 1912 “Modelling Extraordinary”
was released and was warmly welcomed by viewers. In the 1960s-1970s, independent
animator Eliot Noyes refined the technique of “free-form” clay animation in his film “Clay or
the Origin of Species”. Noyes also used stop motion to animate sand lying on glass in his
animated film “Sandman”.
In the 1970s and 80s Industrial Light and Magic often used stop motion models for films
such as the original Star Wars Trilogy, for example the AT-AT walkers in The Empire Strikes
Back.
An individual who found fame in modern day clay animation is Nick Park who is notable for
his work on Wallace and Gromit and Chicken Run, both of which has found a very broad
audience.
Frame rate is the frequency (rate) at which a series of unique images are displayed the rate
at which these frames are played will change how the resulting animation will look; this is
because the human eye will perceive frames over 12 FPS as a constant movement. In
animation FPS is very important as it is how animations are brought to life, and how they
are given movement.
Relation between Frame Rate and the Actual Visible Frame Rate:
The human visual system doesn’t see in terms of frames, it works with a continuous flow of
light, meaning that the FPS of an animation isn’tnecessarily a determining factor on how
smooth the animation is, although the visible frame rate can be investigated and the
consequences of these changes in frame rate for the human observer. A famous example of
this is “The Wagon Wheel” effect, where a rotating object such as a wheel appears to be
going backwards. Although it is commonly believed the rate at which a human can detect
no difference is 30 FPS
Standards in Frame Rates:
Frame rates around the world vary depending on how they are coded. In England the
standard is PAL, this runs at 25 FPS. 25FPS is a common frame rate for cinema and TV as is
thought to be a “Sweet Spot”. It’s a frame rate at which the human visual system can see
the picture as a smooth continuous motion without large productions costs, for example a
9. film produced at 60 FPS would be using unnecessaryframes and would increase the
production costs without adding anything to the finished product as the human wouldn’t
be able to tell the difference.
Task 4
Vector Graphics use “geometrical primitives” and mathematical equations to keep the
quality extremely consistent, not matter how much zoom or expansion is placed on that
particular image. Vectoring does this by applying mathematical equations to ever shape
placed into the particular image, to constantly resize the shape and create a smooth
undeviating line whenever it is resized or expanded. Since these formulas can produce an
image scalable to any size and detail, the quality of the image is limited only by the
resolution of the display, and the file size of vector data generating the image stays the
same.
Vectors can be particularly useful as there is never a loss of quality, and a consistent image
is always portrayed, no matter what zoom or stretch is applied to the image.
The drawback to using vector graphics is that they are more processor intensive than raster
images, meaning this inherently limits the functionality for large data sets. Points are a
mathematical plot in the vector image. These are saved in relation to where the other
points are. They are used to bridge the gap between another point and the lines that join
them. Lines are the items used to go in-between the points, these are called paths and they
are determined by where the points are.
Compression techniques are ways in which a file can be shrunk to make it more suitable for
the web, this will decrease download speeds by decreasing the size of the animation, thus
making download speeds faster. There are many ways in which you can compress
animation, some of which will decrease the quality of the animation as they actually
remove information in order to make it smaller. Typically this type of compression is called
lossy, as it actually loses data – this is found when compressing raster animation. The good
thing about vector animation is the fact you can rebuild the final product resulting in a
perfect and untouched animation when compared to the original (Lossless compression).
Generally this type of compression will result in a smaller file size which again gives it an
advantage over lossy compression.
There are many different File formats which can be used to create animation. There are a
few formats, however, that are more commonly used than others. This is due to the fact
they are more widely compatible therefore making them more suitable for use as more
people can watch them. The formats are:
.fla
This is the flash format “Macromedia Flash FLA Project File Format. It is the format that the popular
10. animation suite, Flash uses. It is one of the most advanced and popular formats for creating
animations due to its small file size and wide compatibility.
.mng
Multi Image Network graphics are another popular choice when creating web animation. They are
similar to .gif files in that they do not support sound or video, but has some other more sophisticated
features which makes it more advanced than .gif, this also helps it achieve smaller file sizes than you
would associate with .gif.
.swf
This is the format that files exported with flash will use it is used to store animations and
supports sound so that they are able for presentation on a wide array of different formats,
such as the web. It is much more advanced than just an animation tool, as it can even build
full websites. There must be a flash plug-In present when users wish to view a flash
animation online.
.gif
Perhaps the oldest form of animation on the web, the .gif was developed by CompuServe
for storing bitmaps. A gif can support transparency and very primitive animations with
animations on a loop or a timed sequence. This format is also known as an animated gif.
Task 5
Authoring Packages
Animations are creating in authoring packages, but many also need players to be viewed –
especially when on a browser. The main authoring package is Flash, however there are
many others that perform roughly the same task.
Swish
Swish is a program that creates cross-platform presentations, although it has many features
that appear in flash making it easier to switch from Flash to Swish, whist also being a lot
cheaper than Flash. You can even export in a .swf format, like in Flash. The main
disadvantage to using Swish as opposed to Flash is the fact has a few more features and
cannot open or save a .fla file which stops an exchange between the two programs.
Amara
Amara has become more standard for website animations. Not as powerful as flash, Amara,
like Flash exports as a .swf format and is a lot cheaper than Flash. However, Amara is made
up of separate applications that are used to carry out certain animations such as banner
and photo animation. The advantage of this over Swish is that you can open and save .fla
files.
11. Director
Originally built for online animation, Director has become associated with 3D games. The
script featured on the program is called ‘lingo’, which will encourage some users to choose
this application over others. It has support for vector graphics and also 3D.
Players
Flash Player
A product made by Macromedia, it is essential to run any .swf files in a web browser. The
name ‘player’ it is simply a program that plays files that are created in authoring
applications. Originally it was used to display simple 2-dimensional vector animation, but
has become popular for the playing of right internet applications, and also streaming video
and audio.
Shockwave
Shockwave was created by Macromedia as their first and most successful multimedia
player, before flash. It was widely used to create online movies and animations; however,
now it is mostly used in game development, this is due to the faster rendering engine with
hardware-accelerated 3D to match. The only disadvantage to using this player is that it is
not available for Linux, but there are workarounds.
Real Player
Real player is a cross-platform media player; it supports and plays a number of multimedia
formats, such as MP3, MPEG-4, QuickTime and Windows Media.
QuickTime
Developed by Apple, it can play many formats such as digital video, media clips, animation,
text and music.