Web Animation

Animation is widely used on the internet. Why? Well, what would most likely catch your attention? A still image of a building with dull colours, or a moving image with a brightly coloured bird flying around rapidly? Obviously, a moving image would capture your attention instantly. This is the main reason for including animation on web pages, to draw the viewers attention to something, to provide a demonstration or to entertain. 

The need for movement or an animation on a page depends on the purpose and content of the page. A financial institute would not really need animations on their pages, while an entertainment site obviously would have such movement.

Animation on a web page is any form of movement of objects or images. Animations are usually done in Adobe Flash, although Java and GIF animations are also used in many websites. Streaming video in Flash is coming increasingly popular.

Animated banners

 

Banner ads are all over the internet. On a lot of websites, you come to watch a video or get some information and are instantly bombarded with ads. Websites are paid to display these ads, so this is how they keep their services running.

A lot of these types of ads include animations. The animations in the ad are intended to attract your attention and entice you to take an action, like clicking on the banner to see more about the product or service. Another example is an animated company logo. Its movement draws your attention to the logo.

SWAG

Applications in Interactive Media

In recent years, technology has advanced so hugely, that ideas that were once thought to be impossible are now as easy to access as water. Moving images are no longer restricted to the cinema and TV, changes in technology mean that people expect to be able to watch and share movies online and on the move. As the proportion of internet users on broadband continues to grow, it becomes increasingly possible to view, upload and download video clips, ranging from user generated content to popular films.

As devices like mobile phones at portable media players are always being refined and improved, it has become increasing easy to share videos with the world. People are now using their portable players to play games, games consoles to watch movies and phones to use the internet – the entire industry has become interlinked. Also, with DVD replacing VHS as the home video standard, most popular formats have become digital.

There are many ways videos are used in Interactive media. Some of these are:

·         Promotional Videos – These are used to promote products/services such as events, films, games, music, etc.

·         Standard Advertising – Advertising that is generally seen on television, promoting products or shows, etc.

·         Interactive Advertising – Advertising that relies on the user’s input, usually found on the internet.

·         User general content – videos created by users of the internet, spread by video sharing websites such as youtube.com. This is an extremely easy, effective and quick method of sharing videos, as the internet is accessed by millions of people daily. 

·         Viral advertising - Viral advertising is a type of advertising that use pre-existing social networks to produce increases in brand awareness or to achieve other marketing objectives. 

·         Games – with the introduction of flash, internet surfing became introduced to an entire new level of interactive entertainment. Flash allowed websites to incorporate games into their websites. These games, also known by their related technology as "Flash games" or "Java games", became increasingly popular because older games (e.g Pacman) were recreated, attracting other audiences. 

·         E-learning – with the internet being a dominant platform for acquiring information, a lot of people have taken advantage of this by using online methods to learn things like languages, skills etc. There are countless websites and online services where you can learn practically anything. A lot of the time, the content is user generated, for example – tutorial videos on Youtube.

Platform

The range of digital media platforms on which interactive products can be experienced is constantly evolving. In broad terms, though, they fall into four overlapping categories. These should be thought of as 'content platforms', rather than technical ones. Each is typically associated with one or more delivery platforms, which may apply to several content platforms and may change over time.

These platforms are:

·         Web & Platform - This is delivered to a user through various means, including (but not limited to) Desktop Computers, Mobile Devices, TV’s via set-top boxes, Broadband Hubs, and Wireless networks. 

·         Interactive Platform - This is the idea that the program, itself, might change based on viewer input. (e.g BBCs Red button service)

·         Electronic Games - These are forms of interactive entertainment and can be delivered on various platforms, such as Desktop Computers, TV's, Consoles or mobile devices via CD-Rom, DVD or online. 

·         Offline multimedia – Any type of device that can function without the internet. TVs, PCs, Kiosks, Games consoles, DVD/CDs etc.

Technology

Video compression

Way back in the day when digital video was first being born, video was stored in its pure, uncompressed format, much like digital audio. This meant that it took a LOT of space. Then along came video compression. Probably the earliest and truly successful video codecs (CODEC stands for COmpressor/DECompressor) was MPEG1. The actual standard for MPEG1 video is over a decade old. Also, the MPEG2 standard used in DVDs is more than half a decade old!
But how does compression work? Well like with any kind of compression there are two kinds: lossless and lossy.

Lossless compression

Lossless compression, as the name implies, means that after compressing the video, and then decompressing it, you wind up with the exact same data as you put in. This is comparable to something like ZIP or RAR (In fact, the most common lossless codec out there, Huffyuv, basically uses the same compression algorithm as ZIP on each frame of video to achieve its compression). Lossless has the advantage that no matter how many times you compress it, you still haven't lost any video data.

The bad part is that most often you don't save nearly as much space as you would with other lossy compression algorithms. There are many different lossless codecs these days, but lossy codecs and formats are more popular as they save memory space and are easy to distribute over the internet.

Lossy compression

This is the form of video compression most people are familiar with. 95% of all video codecs out there are lossy, meaning that when you compress the video and then decompress it, you do not get back what you put it. Now, this isn't as bad as it may sound. Obviously if you're compressing something like a text document, you don't want to lose any of the data, but with something like a picture, even if a few bits and pieces aren't quite right, you can still make out the generally gist of the image, which is similar with audio. Famous lossy codecs include MPEG1, MPEG2, MPEG4 (AKA DivX3.11, DivX4/5, XviD, Quicktime MPEG4), DV (and its variants DVCAM, DVCPRO, DVCPRO50, Digital-S, etc), Windows Media Video, RealVideo, Sorenson, Indeo, and the classic Cinepak.

A pixel (or picture element) is a physical point in a raster image, which is made up of a number of these small physical points.  Typically, you cannot see the individual pixels, because they are so small, as more pixels create better quality images. The amount of pixels is dependent on the resolution of an image. The convention used to describe the pixel resolution of an image is by measurement of a grid. 

For example, an image that has a resolution of 640x480 is basically a grid of 640 pixels by 480 pixels, therefore containing 307,200 individual pixels. That’s 307,000 little dots that make the image! However, to the naked eye, these pixels would blend together creating a smooth image.

The number of pixels in an image is sometimes called the resolution. If we are using the term to describe pixel count, one convention is to express resolution as the width by the height, for example a monitor resolution of 1280x1024. This means there are 1280 pixels from one side to the other, and 1024 from top to bottom.

Another convention is to express the number of pixels as a single number, like a 5 megapixel camera (a megapixel is a million pixels). This means the pixels along the width multiplied by the pixels along the height of the image taken by the camera equals 3 million pixels.

The more pixels that the image consists of, the higher the quality will be. For example, an image that has a resolution of 240x240 will be blocky and distorted when enlarged, however an image with a resolution of 1000x1000 will be smooth and look a lot more appealing.

A video monitor is made up of many millions of pixels arranged in a grid. Monitors also have a bit depth, which controls how many greys or colours each pixel is capable of displaying. In an 8-bit display, for example, each unit can display 8 bits worth of colour, equal to 256 colours. With 24-bit displays, like most modern monitors, each of the pixels can display in excess of 16 million colours.

A bit is a ‘Binary Digit’, the smallest piece of information on a computer. It is the building block for the numbers, languages, and almost every aspect of computer operation, and can only have to values or states – 0 or 1. The values could also be 'Off' and 'On', 'False' and 'True' or 'No' and 'Yes'.

Bit rate is the speed that information can be transferred between two locations. The standard unit of this rate is bps (bits per second) but this is often prefixed with kilo- or mega-  (kbps, mbps) to recognize the high rates of data transfer.

RGB

RGB (red, green, and blue) refers to a system for representing the colours to be used on a computer display. Red, green, and blue can be combined in various proportions to obtain any colour in the visible spectrum. Levels of R, G, and B can each range from 0 to 100% of full intensity (100% intensity creates white, 0% creates black). Each level is represented by the range of decimal numbers from 0 to 255 (256 levels for each colour).

Bit Depth




Each primary colour is often referred to as a "colour channel" and can have any range of intensity values specified by its bit depth. The bit depth for each primary colour is termed the "bits per channel." The "bits per pixel" (bpp) refers to the sum of the bits in all three colour channels and represents the total colours available at each pixel. 

Bit Depth	Colours Available
1-bit	2 colours (Black and White)
2-bit	4 colours
4-bit	16 colours
8-bit	256 colours
8-bit greyscale	256 shades of grey
16-bit	32768 colours
24-bit	16.7 million colours
32-bit	16.7 million + 256 Levels of transparency

Raster Images




A raster image, also called a bitmap, is a way to represent digital images. The raster image takes a wide variety of formats, including the familiar .gif, .jpg, and .bmp. A raster image represents an image in a series of bits of information which translate into pixels on the screen. These pixels form points of color which create an overall finished image.

When a raster image is created, the image on the screen is converted into pixels. Each pixel is assigned a specific value which determines its colour. The raster image system uses the red, green, blue (RGB) colour system.



There are many types of raster image formats:

JPEG (Joint Photographic Experts Group)

JPEG image files enjoy wide support across many applications, computer platforms, and digital cameras. The most prominent feature of JPEG is its compression scheme, which can reduce file size to a fraction of other formats. This compression scheme makes the JPEG format particularly useful for sending images, such as digital photographs, using email or for viewing on the internet.



PNG (Portable Network Graphics)

The PNG format was developed for transferring images efficiently over the world wide web without data loss. Like JPEG, PNG does use compression, but it is a non-lossy variety that is free from artifacts.




TIFF (Tagged Image File Format)

The TIFF file format is often used to exchange files between applications and computer platforms (Mac and Personal Computers). There are a large number of variations to the TIFF format available, and therefore TIFF might not be as universally accessible as other formats such as PNG and JPEG. 



BMP (Bitmap)

The BMP file format was created for Microsoft Windows operating systems primarily as the format used for the Microsoft Windows clipboard and for viewing (especially as wallpaper). BMP does not use compression. Therefore, BMP can be useful for creating temporary files to be further modified in other applications. However, BMP tends to create very large files that are not suitable for archive, web, and email use.

Bitmap/Rasters images are very useful for the following reasons:

• They are very easy to create. Take a picture with a digital camera, or scan something in, and you’ve got one.
• They are fairly simple to output, as long as your RIP or printer has sufficient memory.
• They are easy to come by.
• They are very cost effective. You can take a picture or scan in a drawing, and easily show it on the Internet or send in an email.
• A bitmap image uses solid color pixels, which can be identified and recolored easily.
•  The geographic location of each cell is implied by its position in the cell matrix. Accordingly, other than an origin point, e.g. bottom left corner, no geographic coordinates are stored.

Vector Images

Vector images are made up of many individual elements or 'vector objects'. These objects can be lines, curves, circles, rectangles or any other shape connected by paths and points. Because each object is defined not by pixels but by mathematical instructions, it is fully scalable and you can transform, resize or reshape it without losing quality.

A vector image is described in mathematical terms such as "plot a line from A to B" or "draw a circle with a diameter of X". The actual maths is a bit more complicated than this, but it is useful to think of vectors in terms of instructions, coordinates and units of measurement, in comparison to the raster method of describing the location and colour of every single pixel.



CMYK

CMYK is a type of colour model used in colour printing, Cyan Magenta Yellow and Key (Black). As opposed to RGB which is colours made from light, CMYK is used when mixing colours using paints, dyes, ink etc. The most common machine to use this colour model is a modern printer.



CMYK cannot reproduce any colour that exists in the world, but it can produce a great number. It's impossible to match things like a parrot feather, rose petal, or oak leaf, but the colour system can get remarkably close.