Flash
Overview
Vector and Bitmap Graphics
Computers display digital images in two different formats: bitmap (also called raster) and vector. Understanding the differences between the two will enable you to optimize the performance of your Flash movies. [Note: Use of the term bitmap shouldn't be confused with the .BMP (bitmap) image format. We'll use 'bitmap' as a generic term that includes all file types that format images using pixels.]
Bitmap Graphics
Bitmap formats that are acceptable for use on the Web are JPEG, GIF, and PNG. Bitmap images are composed of pixels, which are tiny squares of colour arranged on a grid. Because the pixels are tied to the size of this grid and in turn the resolution of a computer monitor, bitmaps are referred to as 'resolution-dependent'. What this means in practical terms is that when a bitmap image is resized, the pixels are redistributed along the grid, resulting in a deterioration of quality and a 'blocky' look to it.
JPEG/JPG (Joint Photographic Experts Group)
The JPEG format supports up to 16 million colours and is ideal for full-colour photographs. It uses a lossy compression scheme which can result in noticeable deterioration of the image quality if too much compression is applied. The more times a JPEG is resized and/or saved with compression, the greater the loss in quality.
GIF (Graphics Interchange Format)
The Compuserve GIF format is a lossless, compressed format suitable for images containing few colours, such as simple illustrations like banners, logos or cartoons. It is palette-based, meaning that a palette is generated when the file is saved. The colours in the image are mapped to this palette which can contain from 1 to 256 colours. There are two GIF standards: 87 and 89a. 89a allows for transparency and simple animation.
PNG (Portable Network Graphics)
A change in Compuserve's GIF licensing policy sparked the development of the PNG format. It uses a lossless compression and can be palette-based or full-colour. Full-colour PNG files tend to be quite large compared to a JPEG or GIF equivalent. Transparency is supported in the PNG format.
Vector Graphics
Vector graphics are always perfectly crisp and smooth regardless of changes in size or magnification. This is because vector images are generated mathematically rather than being tied to a fixed grid. Therefore, vector graphics are considered 'resolution-independent'. The smooth edges of vector graphics are due to a setting within Flash called anti-aliasing. Flash will anti-alias (smooth the edges of) vector graphics and text as well as smooth the rendering of bitmap images. This feature can be turned off, if desired.
Vector images load more quickly on slower computers than bitmap images. Generally, the file size of vector images is much smaller than that of bitmaps. Simple graphics such as illustrations that don't contain too many colours are ideal candidates for vector rendering. Photoshop 6 and Paint Shop Pro 6 and higher both handle vector graphics while creating content, but images will change to bitmaps when you add effects like shadows.
There are times when using bitmaps is desirable and they can be imported into Flash. Complex photographs are an example of appropriate use of a bitmap. Images such as photos that contain hundreds to millions of colours should not be converted into vector images because the resulting file size may be larger than the original bitmap. Overall, though, the use of vector images should predominate when designing in Flash.
SVG (Scalable Vector Graphics)
SVG is a new graphics file format and programming language that is predicted to revolutionize the WWW in the near future. It is capable of generating vector graphics that can be enhanced with alpha effects, transformations, filters, etc. All of this is accomplished by using plain text. Currently, a plug-in is required to view SVG but browser manufacturers have stated their intention to build SVG viewing capabilities right into their browsers. This would provide an advantage over Flash. On the other hand, Flash can support sound and some aspects of animation and interactivity that SVG can't.
Flash Example
View an interactive Flash movie that demonstrates how vector and bitmap images are affected by increasing the magnification.
Vector and Bitmap Graphics Summary
There are two image formats compatible with display for the WWW: vector and bitmap.
Vector images create smaller file sizes that load faster into browsers. They are superior to bitmaps in that they can be scaled with no loss of quality and they always display with crisp, smooth edges. Vector images are resolution-independent, meaning that their display is not tied into the resolution of a computer monitor.
Bitmap images have a place in Flash design when they contain hundreds to millions of colours. Although bitmaps can be converted to vectors, it's usually not advisable to do so as sometimes the resulting vector image size can be larger than the original bitmap.
Flash - TOC - Introduction - Books -
Lectures - Links - Questions - Quiz -
1 - 2 - 3 - [ 4 ] -
