Prototype Animation after Testing

This is my prototype nursery rhyme animation for ‘A sailor went to sea, sea, sea’. I have tested it at 30, 15 and 1 FPS to ensure that it plays correctly without error befor converting it to a GIF and uploading it.

aimaton1 30FPS



Bussiness and organisations often want to include some animation into their website and they have to consider some important things. Compatability is a big issue, websites are often view on different devices and animations that are compatible on a computer may not be compatible with a mobile phone. Bussiness should choose formats such as GIFs which are compatible with a wide range of devices. For the same reasons, the size of an animation has to be considered, they should be large enought to be easily view on a computer monitor but also small enought to be view on a mobile device.

When sending animations by e-mail the are different, but similar, things to consider. Often the size of files that can be attached to an e-mail is restricted (normally 25Mb), this means that you will be unable to send larger files. Using file size reduction methods like auto croping and frame disposal to reduce the file size. Again you will also need to consider compatability, the person you are e-mailing may not have the correct software to run particular formats.

Minimising the Size

Animated files can have quite large file sizes, large files can take a while to load esspecially on websites an so there are different widely used techniques for reducing file size.

Image Quality: Reducing the quality of the animation is a simple way to reduce its size, you may find that your animation dose not need to be in full 1080p High Deffinition, for instance, and that a much lower quality will be just as good. It may be possible to compress the image in order to save space, this may also lead to a reduction in image quality. Reducing the image quality reduces the file size as it does not need to store as much information.

Frame Disposal: Frame disposal is when animation programs and files dispose of the current frame in the animation before loading the next frame. This is quite an effective method of reducing file sizes. A few methods exist for frame disposal but one of the most common is frame transparency this is where the frame quickly fades away behind the next frame, this disposes of the frame but at the same time gives a smooth flow between frames.

Auto Crop: Often animation and normal images have allot of wasted space around the main image, this still uses up file space and therfore increase the file size. Auto crop is a feature of most animation programs, it finds unused space and physically reduce the size of the image by removing it. Reducing the size of the frame again reduces the ammount data that is stored.

File Formats

There are many different file formats used for computer animations some better than others and some tailored to different purposes than others.

The most comon types include the (Animated) Graphics Interchange Format [.gif], the Small Web Format [.swf], the ‘.mov’ format, MPEG-4 [.mp4], and Windows Media Video [.wmv]

Each type of file is better suited to different applications than others and therefore they all have different features,

GIF files support transparency and have lossless compression so that image quality is not lost when the file is compressed. GIFs are commonly used for animations on webpages but have a litmited colour palete of 256 bits.

SWF files can be created using Adobe Flash and are often used for online applications such as on ‘YouTube’. They are uneditable once they have been produced but the files are already compressed so they have quite a small file size.

The MOV format is used Apple’s QuickTime multimedia software, they are quite a simple file type with no special features. They support graphics, video and audio.

MP4s are mainly used by Apple software as a replacement for the aging MOV format, again they can contain graphics, video and audio. A large range of different hardware and software such as iTunes, Xbox 360 and PlayStation 3.

WMV files are a common format for animation and video created by Microsoft software such as Widows Movie Maker. These files can cantain graphics, audio and video and are supported by almost all Micosoft software. A High Definition veriant of the format is also avalible.

Converting Files

It is often nessary to convert from one format to another, this is often quite difficult, essesially if the format uses comppresion. Special software is often employed to do this conversion but quite often some quality is lost in the proccess. When creating animations using animation software it is normally possible to save it in many different formats.

Importing Files

Often people wish to include images and other animation into their animations. Normally the animation software such as Adobe Flash will import the file (and convert it if nessary).

Exporting Files

When you have finished creating an animation using computer software it is important that you export the file so that it can be watched without using the editing software. Exporting saves the file into an uneditable format ready to be uplioaded to the internet for instance.

File Managment

In eveything you do using a computer it is very important to keep your files organised correctly and easily. You should keep all of the components for the animation you are working on in one folder which is completely seperate from folders for other animaions. Doing this will make it easier for you to work and easier for other people to find what they are looking for should they need to. To save space you should keep files compressed and delete anthing you are not using or is no longer usefull, it is also a good idea to keep back ups. Remeber to save your work often as you may lose hours of work if the computer of software was to crash.


Animated GIFs are not the only way of putting animations on the internet, other formats are available. Dynamic HTML, Flash, Shockwave, Quicktime, Realplayer and Silverlight offer ways of putting more advanced animation in a webpage.

Dynamic HTML allows a website to modify itself and animate itself depending on the situation. One of the advantages; it only loads the sections of the pages that need to be changed so saving time and it does not need plug-ins.However it has its disadvantages; the software required to use dynamic HTML can be very expensive and not all internet browsers support it.

Flash is one of the most popular animation formats used on the internet, it is used to power websites such as ‘YouTube’. Flash has advantages; it is installed on almost all internet browsers worldwide, and offers a range of features including fully interactive website features as well as animation and video, but it also has some downsides; it is updated very frequently which can make some websites flash animations out of date and requires users to update regularly, and videos have to be converted from a normal video format such as ‘.wmv’ or ‘.avi’ to the format that flash players use ‘.flv’ and ‘.swf’

Shockwave is an animation format that allows people to crate and play interactive applications and games on a website. The ‘pros’ of shockwave; shockwave allows users to create detailed and complicated games and utilities for use on a website. However it does have disadvantages; shockwave requires the web browser to have various plug-ins installed such as ‘Active-X controls’.

QuickTime is a multimedia format developed by ‘Apple’ mainly for use on it’s computers but also available on Microsoft’s ‘Windows’. It is often imbedded into websites to run multimedia such as video and music but has lost favour as Flash begins to take hold. Quicktimes advantages; Large video files play quickly and use buffering to allow the video to play while it is loading, and QuickTime players are free to download and install on a website.Quicktiem’s disadvantages; they require videos to be streamed from a server to the user, they have a lower quality than other more modern formats such as flash.

RealPlayer is a collection of multimedia formats and a multimedia player, ‘RealPlayer’, that is available for most operating systems. Advantages; it plays the formats designed for it (.rm and .rmv) files perfectly without any errors and it is freely available to download. Disdavantages; it can be very slow and it can lag when loading other multimedia formats and often requires a reasonably good computer to run it reasonably.

Silverlight is a multimedia animation format released by Microsoft and is very similar to Flash in it’s uses and functions. Silverlight does have some advantages; it support cross domain applications and the plug in is only 1MB. But it also has disadvantages; it requires a plug in that not all computer and browsers support and having to download a plug in often puts people off.

Advantages and Limitations of GIFs

Animated GIFs are animated images often used on the internet.

Animated GIFs have some advantages:

They are simple to make using an animation program and a series of images, If you have a series of images such as frames from a film you can easily make a GIF.

They do not require your web browser to have a plug-in, Flash animations require the user’s computer to have the necessary plug-ins installed but GIFs are treated as normal images.

They have lossless compression so that the file size can be reduced without too much distortion, When you want to reduce the file size not too much quality is lost when compressing them.

Animated GIFs have a relatively small file size, Flash files often have very large files and can slow a website down, however too many GIF on a webpage will also slow it down.

GIFs are easy to use when creating a webpage, No special coding of formatting is required when adding a GIF to a webpage as they are normal image files.

And they are supported by all web browsers, there are very few web browsers that will not support animated GIFs.

But they do have disadvantages:

They have a maximum colour depth of 256 bit, Other image and animation formats have much larger bit depths but 265 bit is normally well suited to a webpage.

They can slow a webpage down, If large numbers of them are used on a webpage it can take a very long time for them all to load.

The often have a ‘Blocky’ or ‘Pixely’ appearance, GIFs can give a blocky quality to images that are animated reducing the overall quality.

Their use of ‘Dithering’ to prevent harsh colour contrast restricts how much the file can be compressed, Dithering takes up quite a lot of file space and there fore restricts how much the can be compressed.

Too few frames in the animation results in a jerky animation, Often the frame rate on GIFs is quite low and using to few frames will result in a jumpy and jittery appearance to the animation not a smooth image.

If not done well they can make a website visually unappealing, If they are not used well or too many are used the can give the site  an unproffessional look.