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 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.

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.

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.

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 Circa 1996

Disney Today

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

<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.

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’t necessarily 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 film produced at 60 FPS would be using unnecessary frames 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 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.

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.