P5: Assignment 2 - Section C; Producing Animations for the Web

When you are creating an animation for the web, there are various aspects to consider to ensure the animation is appropriate and professional.

File

Resolution & File Size

When you create an animation, you need to consider how large the animations canvas size is. The larger the canvas size is a factor that will determine how large the file size is, and this will in turn determine how long it takes to load.

When you produce an animation the default canvas size (resolution, which is measured in pixels) 550x400 in Adobe Flash. This would be an appropriate size for an advert on a website, but any larger would be redundant, and not be shown unless the user viewed the animation outside the website. You would usually know where you would like your animation to be (on the web), so it is simple to figure out what to set the canvas size. this can normally be achieved by inspecting the “element” of the website you would like it to be.

Also the DPI (dots per inch) of the animation itself is key, this will vastly alter the file size, especially if you have a larger animation and more frames. The recommended DPI is 72; anything over the resolution would not be seen on the web, as a note 300 is the recommended DPI for printing.

Another factor that will determine the file size is the FPS (frames per second), the human eye only needs 12 FPS to notice Animation. But this will not be smooth enogh, it is recommended to keep it at least at 25 FPS (if not 30 FPS).

But you might want to set your animations FPS to 60 which will make it smoother. I would not recommend doing this, since this will increase the file size (or could make your animation too quick, depending on how you do it) and it will not be entirely noticeable.

Although FPS is a factor, if certain compression techniques are used this factor can severely be reduced. A tween in an SWF will be similar to how vector images are used to reduce the file size, and use calculations to draw the images (changes for tweens) instead of individual pixels.

Colour Mode
There are two main colour modes, and both could have an extra channel (for example Alpha for transparency, K for Key). These are RGB (Red, Green and Blue) and CMY (Cyan, Manganese and Yellow). When images are printed out, printers usually use CMYK (key being black), but on the web RGB colour mode is commonly used (since it will be viewed on displays which output in RGB mode).

If you save an image in CMYK, it will have 4 channels (which is obvious), but this will increase the size of the file will be increased by a significant amount (since it has to store more). So when producing a graphic (animation) for the web it is recommended to use RGB, this is since it stores the least amount of channels (unless it’s grayscale, or pure B&W) and how monitors display colour.
It is to be noted that colour modes can be converted (by the printer drivers from a RGB image to CYMK when printing), and show the same image (to the human eye). But it’s better to take note of it since it is a part of the file, and if altered incorrectly could increase the file size, or even render an image incorrectly.

YCbCr (luminance, blue-difference chroma and red-difference chroma) is also another colour mode to consider, it is usually only used in broadcasting, but it does have excellent compression.

Colour Depth

A pixel in an image is stored in binary components following a colour mode (as mentioned above). But these components for each of the colours can vary in size, usually they are stored in 8 bits (meaning 256 shades of a colour, and over 16 million combinations with a 3 channel pixel).
If you create an animation with very simple colours (such as black and pure red, without any gradients), you could lower the colour depth, this will decrease the file size by changing #FF0000 (red in hexadecimal, with 8 bits red reserve for each channel) to #F00 (4 bits red reserve for each channel), halving the amount of space used by colours.

If you did have any gradients in your animation or a smooth transition of opacity when you have used the brush, you would not try and lower the colour depth to save size. This is due to a gradient needing more shades in-between the colours to ensure the transition is smooth, if you do lower the colour depth it will lower the quality of the animation/image.

Compression

Images can be quantised, which can lead to the lossless (BMP or PNG files usually are) or lossy parts of the file.

Lossless compression is when the file is compressed then when it is uncompressed, it is exactly the same, a simple lossy compression technique is AZ compression. AZ normally ia used in text, it uses pointers to refer back to repeated keywords, and these pointers are stored in two 8 bit numbers (but can be partitioned). There is one referring back to where the start of the repeated word starts, then one where it ends. This can save a considerate amount of space, for example you could repeat a 8 character word (8 bytes), but only use 2 bytes to repeat it (compressed by 400%).

Lossy compression is usually the form of compression used in images (which can be used in animation). This means when the image is uncompressed after the compression it is not exactly the same, but to the human eye it is barely noticeable, and it allows for far more compression.
Lossy compression is used in the YCbCr colour mode, this is achieved by down sampling, usually it is downsampled by a factor of two (meaning 400% compression, being that you’d have 1 luminance pixel instead of 4 (2x2)). You can do this by a much higher factor, such as 10, and it still won’t be noticeable to the human eye, this works due to the human eye noticing grayscale more than
luminance.

Looping of animation

Depending on where you are using your animation, you might decide to loop it, this usually is effective when there’s a smooth transition from the end too the start.

Looping is usually used for amusement on the web, but can be seen as unprofessional depending on where the animation will be. The things to consider are, is it any type of advertisement (which would usually loop), entertainment (such as animations used on Tumblr) and if it’s strictly professional (not likely to loop).

Loading/Rendering

Upload speed / Page Load Speed

Once you upload your animation to the web, it will take time to load, this is due to it basically being a video (no matter what format you use). The time it takes to load is essential, if it takes too long, views could grow impatient and decide not to view it, but since it’s loading with the site (depending on how it’s done in the HTML), they could choose not to visit your site at all.

Browsers 

When you produce an animation, you have different file types you can render it as, PNG is usually recommended, since it is compatible with most browsers, this is due to it being an image, instead of a video. If you export your animation as a SWF, it cannot be loaded on a large quantity of mobile devices (and whatever browser you use), this is due to it needing an add-on to render the unknown format.

Flash Transparency/Special effects

One feature that SWF animations have is transparency, although this is very useful, some browser do not support this, which is why you need to consider this factor when using transparency in SWF animations.

Also SWF animations are not stored the same as GIF animations (so they cannot be read the same), it does not just store images in a sequence, and it uses effects such as tweens to produce an animation. These effects allow the user to easily modify the animation again, instead of having to alter every frame, although this is usually done by calculations, it can increase the file size.

Social Context

Type of Images (culture/social)

Depending on your animation, you might need to first know about the culture, to aid this all cultures have 6 dimensions (Technological, Economic, Political, Institutional (social), Aesthetic-value, and Belief-conceptual).

For example some hand gestures are perfectly acceptable in some countries (okay in the UK/USA, being the thumb and index finger in a circle), whilst in others it could be seen as offensive (Brazil).

If you are going to have women in your animation, depending on where it is viewed it could be seen as male dominance, in large parts of the world it is acceptable for women to wear a bikini, but in Arab counties it will be seen as male dominance, and visa versa.

Also, you will need to know the social context, if your animation is appropriate for where it is posted, for example an adult site would NOT be advertised on the BBC. This is an extreme example, and obvious, but it is still a social issue (would be socially unacceptable) that needs to be considered when publishing your animation (where you would need to do research for, since there are many aspects).

Language

If you are going to use text in your animation, the usual language used is English, but depending on where your animation is going to be, you might want to use another language in the text. Especially since your animation is going to be on the internet, it does not restrict anyone that speaks another language (from another country) from seeing it, and not understanding the text.

You might just use the language that’s popular on that site (which might be English, but it’s good to check), but there are various other methods you could implement. If you are using an SWF animation, you could possibly use ActionScript to change the text depending on which language is set on the website.

Another point is who are you aiming your advert for, if you are aiming it towards children, you will use less complicated words than if it was toward adults. Also it depends on if the animation is professional, it will be unprofessional if you use informal language or slang (such as “U WOT M8”), in a formal/professional animation.

Parental Control

If you were advertising an 18+ game, or an adult site, parental control would be needed, since there could be a possibility that children could see these animated adverts. Although quite a few sites that do primary show content of adult nature do have warnings, not every one of them do have an 18+ warning (or even blocked, by the ISP or parental control software). Some sites do allow the option to state if your post contains adult content, not ever site does, so depending on where it going to be posted it's safer to produce animations with little adult content.

Target Audience

Depending on who your target audience is, you would suit your animation to fit that target audience. It would be seen as very unprofessional if you, for example, use too many colours (and vivid) on an animation for a business. If you were advertising a game (mobile) mainly aimed towards children, then you would use more vivid and bright colours.

The target audience also includes the other areas I have talked about in this “Social Context” section, such as when I explain that you would suit the text (language) in your animation to your desired target audience, and the nature of your animation (type of animation and age appropriateness).
Useful Links

Colourspaces (YCbCr): https://youtu.be/LFXN9PiOGtY
Compression: https://youtu.be/n_uNPbdenRs
LZ 77 Compression: https://youtu.be/goOa3DGezUA
In-depth Social and Culture in Animation: http://cec.vcn.bc.ca/cmp/modules/emp-cul.htm