J O S H G I B S O N 1

CONTENTS

The contents for this eBook are split up into sections, there are sections for:

• Animation types

• Creating animations for the web

• Animations for different formats

• Techniques for reducing the file size for animations

• Software packages for animation

J O S H G I B S O N 2

ANIMATION TYPES

There are many animation types , one of most well known ones are animated GIF

files.

I Graphical Interchange Format file or GIF file for short, is a file format that is used for

saving still images or a small frame by frame animation, which is referred to as

an animated GIF.

GIF files are found in a number of uses from images of a web site to old 2D video

games that use sprite graphics.

For more information regarding the GIF file extension see:

http://www.fileinfo.com/extension/gif

J O S H G I B S O N 3

ADVANTAGES AND LIMITATIONS OF GIF FILES

Advantages

• GIF files use lossless compression so the image doesn’t lose any of its quality.

• It can be a moving image (animated GIF).

• GIF files compatible with the internet.

• Due to only consisting of up to 256 different colour the file size is very small and can used on devices with little graphics processing power e.g. mobile phones.

J O S H G I B S O N 4

Limitations

• GIF files can only contain up to 256

different colours

• Doesn’t support sound

(according to

http://www.fileinfo.com/extension/gif)

OTHER TYPES OF ANIMATIONS

Others types of animations on the internet can consist of:

• Adobe flash animations

• MOV / MP4 animations

• Java script animations

• Animated PNG files

• Silverlight files

J O S H G I B S O N 5

ADVANTAGES AND LIMITATIONS OF FLASH

ANIMATIONS Advantages:

• Allows for professional animations

• compatible with the internet

• Supports action script that allows for

coding and even game creation

• Some use of vector graphics

• Supports sound

J O S H G I B S O N 6

Limitations:

• Requires a plugin

• Plugin not available for

some devices

ADVANTAGES AND LIMITATIONS OF MOV / MP4

ANIMATIONS

Advantages:

• Supports high definition images

• Relatively small file size

• Compatible with the internet

• Supports sound

J O S H G I B S O N 7

Limitations:

• Requires the correct codec

(usually installed on most

computers with the operating

system)

ADVANTAGES AND LIMITATIONS OF JAVA

ANIMATIONS Advantages:

• Supports JavaScript

• Compatible with a lot of devices

including mobile phones

• Compatible with the internet

• Supports sound

J O S H G I B S O N 8

Limitations:

• Java animations are difficult to

make

• Requires a plugin

(according to

http://www.java.com/en/download/hel

p/new_plugin.xml)

ADVANTAGES AND LIMITATIONS OF PNG

ANIMATIONS Advantages:

• Compatible with the internet

• More colours available than an

animated GIF file

J O S H G I B S O N 9

Limitations:

• Not compatible with all web browsers

• Doesn’t support sound

ADVANTAGES AND LIMITATIONS OF

SILVERLIGHT ANIMATIONS Advantages:

• Supports high definition video

• Supports Microsoft .NET code

J O S H G I B S O N 10

Limitations:

• Requires a plugin

• Only works in web browsers

• Silverlight products can only

be developed on computers

running windows

Information acquired from:

http://www.theregister.co.uk/2008/08/18/s

ilverlight_pros_and_cons/

CREATING ANIMATIONS FOR THE WEB

When creating animations for the web there are some factors that need to be taken

info account they are:

• Size

Loading an animation from the internet takes a lot longer than loading it rom a hard

drive, so the file size for an animation should be kept as low as possible without

compromising quality.

• Dimensions

Show advertisements come in the form of animations that are placed inside of

websites (usually on the side or at the top of the web page), in these cases the

animation much be able to fit in to the webpage without taking up so much room that

there is little room for the main article.

J O S H G I B S O N 11

CREATING ANIMATIONS FOR THE WEB

(CONTINUED) • Quality

In this modern age of 3D and high definition content people have come to expect high quality products and will be disappointed is the product they get isn’t very good, that product will be unlikely to be purchased almond with anything else from the manufacture because poor quality of the product will give the manufacture a poor reputation.

• Compatibility

In the case of animations on the internet, compatibility may be an issue for example both with java and flash animations requiring a plug-in download and in some cases the relative plugin may not be available e.g. on a network where users aren’t permitted to download anything.

• Complexity

Although animations need be of high quality, making an animation to complex can be potentially problematic, for example in adobe flash, if you have too many small animations put inside your main animation, it can course the animation to run slowly and not at it’s appropriate frame rate when displayed on the internet.

J O S H G I B S O N 12

CREATING ANIMATIONS FOR THE WEB

(CONTINUED) • Appropriate

An animation needs to be appropriate for the subject they are regarding, for example

it your trying to advertise a car, you wouldn’t create an animation that for saving

wildlife, that has nothing to do with cars.

• Expectations

As was mentioned with quality, the viewer will be expecting a good quality as well as

other expectations. For example if the company Nintendo made poor advert that

didn’t promote one of there games consoles or software, the poor advert would

negatively affect their reputation and probably loose them potential customers.

J O S H G I B S O N 13

ANIMATIONS FOR DIFFERENT FORMATS

Animations can be created for several different formats they are:

• The internet

Animations for the internet are usually created with adobe flash and are usually for promoting a product (often put on web sites or as popups), education (usually found on educational web sites e.g. http://www.bbc.co.uk/schools/gcsebitesize/) or entertainment (usually found to entertainment based web sites e.g. http://www.newgrounds.com/)

• TV

Animations for television are often in the form of special effects (e.g. some of the characters featured in the TV series “Doctor Who” are generated by 3d computer animations) also there also programs and films that consist solely of computer animation (e.g. Toy Story) that are created using 3d computer animation packages like Autodesk Maya.

• Mobile devices

Animations for mobile devices aren't complicated as those found on the internet or on TV (mainly due to mobile devices not having the same level of processing power as a normal computer or a high end computer that is likely used for creating the animations seen on TV.) . Most animations for mobiles come in the form on simple animated GIF files for screen savers although recently mobile devices (specifically phones) are becoming a lot more powerful and can display videos meaning that the animations viewed on mobile devices will gradually get to the same point as the animations seen on the internet and TV.

J O S H G I B S O N 14

TECHNIQUES FOR REDUCING THE FILE SIZE FOR

ANIMATIONS Since animation consists of multiple frames shown at speed the file sizes can become quite big if

the appropriate steps aren’t taken, here are a few way to reduce the file size for and animation:

• Avoid using bitmap images

(vector graphics typically have a much smaller file size than the bitmap alternative)

• Use Tweening when ever possible

(actually drawing every frame takes makes the file size bigger where as Tweening make it so that you only have to draw the image twice at the first keyframe and at the second keyframe and the computer takes the first image and manipulates it into the second image while the animation plays, this means that only two images need to be saved for the tween whereas the alternative would result in an image for each frame.)

• Reusing assets

In adobe flash all symbols (graphics, movie clips and buttons) are stored in the library (which is relative to each animation created) this means that the symbol in question can be reused in the animation multiple times with little or no effect the file size.

For more information see: http://www.aaronrussell.co.uk/blog/reducing-flash-file-size/

J O S H G I B S O N 15

SOFTWARE PACKAGES FOR ANIMATION

The software packages covered in this section will be:

• Blender (3D animation) (freeware)

• Autodesk Maya (3D animation)

• Pivot Stickfigure Animator ( 2D animation) (freeware)

• Adobe Flash (2D animation)

J O S H G I B S O N 16

3D ANIMATION PACKAGES

Blender is a freeware computer animation package that it used to create 3D computer animations.

Like Autodesk Maya blender has some special features like physics and particle simulation (also found in Autodesk Maya)

For more information regarding blender’s special features see: http://www.blender.org/features-gallery/features/

J O S H G I B S O N 17

Autodesk Maya is a computer

animation package that is used to

create 3D computer animations.

It has a lot of special features to make

the animations created with look

realistic e.g. Fluid effects which

simulates liquid objects. Unlike Blender

it’s proprietary software meaning it has

to be bought.

For more information see:

http://en.wikipedia.org/wiki/Autodesk_

Maya

Better software

package:

Autodesk Maya

due to it’s larger

amount of

features.

2D ANIMATION PACKAGES

Adobe Flash is a 2D animation package that comes with Adobe’s creative suite series. It has a number of special features like the ability to use Tweening to allow you to make your animation faster and the use for action script that lets you control your animation with relative ease and you can even make basic games.

The only downside to adobe flash is that it is extremely difficult to pick up at first and learning how to use it can be a donating task, however once the skills have been learned and practiced adobe flash can be a powerful tool.

J O S H G I B S O N 18

Pivot Stickfigure Animator is a

Freeware 2D animation software

package. Unlike adobe flash it

doesn’t have any special features

e.g. Tweening and it doesn’t

support sound, due to it’s

simplicity the user interface is

very easy to under stand and it

can be used without any practice.

Better software package:

Adobe Flash, because it

has more features than

Pivot Stickfigure Animator

and can even be used to

make video games.