Unit 65 – Uses and Principles of Web Animation for Interactive

Media (Task 4-Investigate Digital Animation)

Vector AnimationComprises of objects that are drawn by using traditional and updated software design packages for example, Freehand or Illustrator where it uses overlapping vector content such as, line points and polygons that are automatically placed in order to displays the order of the vector objects. The authoring application then picks up whether the object will be displayed on top or underneath. Every vector object has its own line, point and location for information which means that the vector object can move by itself where it is overlapping other objects that are involved within the animation.

On the other hand, the overlapping vectors drawn within the Flash software application are joined or merged together with their overlapping counterparts. Which means that if we were to relocate one of our vector drawings in derivation from the one that is overlapping it would then take a `chunk` out from the one that is overlapping. The main advantage of vector animation is that the computer can efficiently pick up the drawing instructions in exchange for the frame by frame images. The main disadvantage of vector animation is that photo realistic graphics are not possible due to the diagrams or cartoon type images.

Raster (Bitmap) AnimationRaster Animation is a more popular animation method which is mainly controlled by pixels. Animations are very detailed like photographs but due to this they lose quality when scaled or zoomed in upon. Another common aspect for the Raster Animation is the program called after effects that is used to effectively modify the quality of the animated image. Notice shading and detail of a raster animation. Zoom in upon this animation to notice the loss of quality. The main advantage of Raster Animation is that it gives the animator control over how the image itself is going to appear and less memory is needed for this type of file format as well. However, the main drawback of this is that scaling can be an issue because the image tends to be more pixelated on the computer screen.

Compression (File Size)Is more often than not used to shrink the file size of the animation so that it can be uploaded to the web etcetera where this can also help to improve the download speeds as well. Many methods tend to sacrifice the quality of the animation by detracting data in order to achieve a smaller file size which is generally known as `lossy compression`, especially when compressing a Raster Animation. However, with Vector Animations the initial information can be reconstructed which means that it results into being perfect where this is known as `lossless compression`. As a whole, vector animation will sustain a more reduced file size than that of a Raster Animation, therefore this will accommodate for more lower bandwidths.

Compression (Download Speeds)Like wise compressing an image will immediately have an impact on how responsive the download speeds are for uploading graphics through the web. For instance, a PNG document was exported as an Animated GIF and a HTML the file size would be significantly reduced from about 274 KB (Kilobytes) to about 18 and 1 once they have been exported. The main advantage of compression download speeds is that with carrying out these processes you can upload images more quickly on the internet. However, the main drawback of this is that computers may not instantly display the image due to slow responses from some of the PC.

ScalabilityThe Vector Animation is managed by vectors themselves instead of pixels where images are displayed and resized easily by using mathematical values rather than the values of the pixel without any loss of the quality meaning that all of the picture elements within the animation is sustainable. In other words this means that vector animation produces cleaner and smoother results. The Macromedia Flash software package is one of the most popular vector animation programs.

Notice the lack of detail and shading with vector animation. Note when the animation is zoomed by using the CTRL and + keys on your keyboard where it views upon the quality that is not lost.

File Formats (FLA)The `Adobe Flash Animation` is mainly used to create project files which is more often than not, kept within a compressed SWF (Shockwave Flash Player) format that is compatible through the internet and through the websites that obtain vector-based graphics by using a external device called `Flash Plug-In`. The document that it is used in is called a `ActionScript` which is used for multimedia purposes in order to form a illusion of movement throughout the Animation which is constructed within the `Adobe Professional CS4`. It can also be embedded within other devices such as, Mobile Phones, Games and Movies etc. The main benefit and drawback of having a SWF file it that the file is condensed to a small size, so therefore the downloads times are much more quicker when accessed through the WWW (World Wide Web). However, if it is too compressed the motion picture quality will be abominable meaning that the visibility will become repulsive towards its viewers.

For instance, these graphics taken from `Flash Optimizer` website and the `Mac.Eltima.com` site shows the process you go through to compress the SWF file formats.

File Formats (SWF)The term “Shockwave Flash Movie” is one that is used quite a lot for the output of the FLA document and for authoring all of the content in relation to putting together an animated product. It can be used to obtain animations that may even include sound so that it can be integrated and displayed as part of the animation for an online source such as, the web. It can involve more than just animations where you can process forms or even developing your own website. So in order to play and view the SWF file online, you need to install the Flash player plug-in for your web browser.

File Formats (GIF)Is a `Graphic Interchange Format` that takes place for the TIFF (Tagged Image File Format) in terms of the way it integrates palette-based indexing and the compressing of LZW (Limpel-Ziv-Welch). A GIF graphic can hold up to a maximum of 256 colours along with an 8-bit palette which takes a lead of exploiting fewer colours at lower bit-depth’s as well. Due to the fact that the number of colours are limited where this ultimately suits the standard flat-colour of the GIF. The LZW (Limpel-Ziv-Welch) dictionary can be initialised prior to the compression starts from a range of 2 to 256 symbols are very much dependent on the selected bit-depth. The main advantage of the GIF format is that the background image is transparent meaning more than one colour can be used within the background of a GIF format. The main disadvantage of a GIF format is that it has a low colour-palette of only 256 colours maximum. It also has a low level of transparency which means that it doesn’t integrate as many colours as other formats such as, PNG. In addition to this, it has patent restrictions meaning that ownership issues restrict the use of GIF images.

For example, this flower image extracted from the `Personal.psu.edu` website illustrates they way in which colours constraints are adapted to the overall theme of the GIF image.

File Formats (mng)Is a format that is used for obtaining multiple bitmaps and animations in which it can be identified as the “Multiple Image Network Graphics”. On the other hand, the MNG format does not enable the use of audio or video, however it does include more complex animated features in comparison to the GIF format where this can also help to keep the file smaller. The main advantage of the MNG format is that within some web browsers plug-ins for the MNG file format are available such as, Mozilla and Netscape. However, the main disadvantage of the MNG format is that it is not supported on a widely scale unlike the PNG file format.

These illustrations above show how you modify the exporting process of an MNG file format and they way it is integrated within the MNG player itself.

File Formats (SVG)

Stands for “Scalable Vector Graphics” in which is formed as part of the whole of the specifications for the XML (Extensible Mark-Up Language) for two-dimensional vector graphics for both static and dynamic for example, interactive or animated. It is an open standard that has been undergoing development by the World Wide Web Consortium (W3C) since 1999. The SVG format enables three different kinds of objects which are vector graphics, raster graphics and text. Since 2001 SVG as of now is currently updated to a 1.2 version where it stills maintains to be a working draft. The main advantages of the SVG format is that it is text-based when you use a graphics editor to create an image. It can be part of the vector technology where this uses effective mathematical processes in order to modify the image. Another benefit of SVG is that it can be easily edited as well. The main disadvantages of SVG is that it is very time consuming in terms of loading the application due to a bigger file size. You can not use every possible vector graphic features within the SVG format.