P5 M3

Describe factors that need to be taken into account when creating animations for the web.

When animating for the web you must ensure that they fit into the page you are developing them for. Items such as rollovers can distract users if they are not placed on the website correctly and disrupt the layout. It is therefore important when attempting to make an interactive experience with a rollover that you design the animation to fit in with the house layout of the website. Animations are also often attached to e-mails as an addition to a message or as an advertising technique. When using animation in e-mail the size of the file is important as many e-mail providers place a limit on the size of an attachment. In today's technological world where many people receive their emails through a smartphone it is also important to use a format which can be opened by anyone as some smartphones operating systems do not support animation file types. An e-card is a modern alternative to conventional paper based cards. Animations are often used in e-cards as they are interesting and exciting especially if you add sound to the card. Similar to the issues with email attachments, e-cards can have problems too if they have too large a file size or the owners device cannot support the format they are sent in.

Although most animations will be made on a personal computer they could then be displayed through a number of different devices: mobile phone, tablet, PDA or projector. To fit on a mobile phone, tablet or PDA the animation must be able to adjust to the workings of a smaller screen. Many personal devices also run on their own operating systems and factoring this into your web animation is important. For example Apples iOS which does not support Flash files so creating an animation using the HTML5 format would be better suited for Apple devices. Even when running animation on a computer with a standard large screen can cause issues as the monitor resolution varies between different screens. Many animators thus design animations for the resolution which is most commonly used at the time. Creating an animation with a high number of dots per inch (dpi) is usually the best solution as it will prevent a loss in quality if the animation is put onto a larger screen such as a projector screen.

Explain particular techniques that are used to minimise the file size of animations.

The quality of an image and an images file size are directly related. Images with a high resolution are of a good quality but will also have a large file size. Frame disposal is the discarding of frames from an animation in order to reduce file size, reduce the amount of pixels and stop frames overlapping. It is done by deleting the current frame before a new one is displayed. However frame disposal does affect an images quality as it can delete a frame which is important and thus make the entire animation out of sync. Auto-crop is a tool which automatically cuts out the white space around an image on photo editing software such as Adobe Fireworks where it is known as 'fit to canvas'. The removal of this space reduces the file size as it makes the physical size of the image smaller.

Frame disposal settings in Adobe Photoshop -

Animations with different frame disposal settings -



Dispose

Do not dispose

Auto crop in Adobe Fireworks -

Other factors affecting animation file size -

Number of colours

With an animation saved in GIF format is it possible to reduce the file size by changing the colour depth. The standard colour depth for an animated GIF is 256 which means each colour in the animation is assigned 1 of 256 colours. However you can change the settings to 128, 64, 32, 16, 8, 4 or 2 colours. This therefore assigns, for example, only 16 colours to the animation. This will make the image appear blocky and as there is less information about individual pixel colours the file size will be smaller.

Vector or Bitmap graphics

Vector animation generally have smaller file sizes that Bitmap files. This is because it vector files store the image as a code. This is like a mathematical formula for how to draw the image and the file size is therefore smaller as it text. Vector files will also be smaller as it is only possible to make geometric shape animation in vector format and they are therefore more basic images.

Physical size of the animated image

The physical size of an image concerns the number of pixels it contains. An image with a large number of pixels e.g. 3000 x 1500 will have a much larger file size than an image with less pixels e.g. 500 x 250.

Resolution

Images with a high resolution will have larger file sizes as there are more pixels making up the image that need coding store for. An image with a resolution of 400 x 400 will have a file size double that of an image with a resolution of 200 x 200 as coding information must be stored for double the amount of pixels.

The number of frames  in the animation

Animations with more frames will usually appear to run smoother than those with less images. As there are more separate images the file size will contain coding for more images e.g. an animation with 20 frames will have double the file size of an animation with only 10 frames.

Dithering

Dithering will increase an animation file size because you do not get runs of colour coding that you are able to compress. Images are dithered because the computer is unable to produce a certain colour such as grey. To create the grey the animation must mix and match 'dither' black and white. The coding for 50 pixels of grey when compressed would simply be 'grey 50'. However for a dithered image it is not possible to do this and 'black, white, black, white' etc. must be written out 50 times.