Web Animation for Interactive Media

Hello again, my final blog will be about Web Animation for Interactive Media.

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. Web Animation Software that is used to create web animation is Flash, Swish, etc and the Software used to play the animation is either: Flash Player, Shockwave, Real Player and Quick time.

Uses of Web Animation

Web Animation can be found Banner Ads, which are generally used for promotion of a product/business somewhere on a websites, which might appeal to the visitor of those sites.

In the past the size used for a Banner Ad is 468 x 60 pixels (Full Banner). The recommended size for the banner is 300×250 (Medium Rectangle), 180×150 (Rectangle), 728×90 (Leader board), and 160×600 (Wide Skyscraper).

Animated Banner Ads are made to be more appealing and more interesting to look at in hopes of catching the attention of the visitors that are visiting the sites.

Animated interface element:

An example of animated Interfaces can be widely found on a Android Smartphone or I-Phones with the menus used on the phone or the buttons that can be found on a website where when you hover over them they will have a drop down menu or be highlighted when the cursor is above them.

Promotion:

Promotion is a method of making people aware of a product or organisation such as a business and to increase sales and public awareness. Animation can also be used as a form of promotional advertisement and can be best found in Massive Multiplayer Online games, especially in anime styled games.

Animation can also come in the form of optical illusion of motion (persistence of vision), stop motion and computer generation (frame rate, frames, key frames, onion skinning, and tweening).

Animation

Animation is the rapid display of a sequence of images in order to create an illusion of movement. In fact you could say that animation is the process of bringing still images to life.

Animation is used in a variety of ways in a range of multimedia products, for example; on websites, adverts, television, presentations, films, billboards, in demonstrations etc. Using animated instead of static images can be extremely effective and visually convincing.

The type of animation technique you decide to make will largely depend on the software available to you. There are a number of different file formats for animation. Two of the most widely used of these are animated GIFs and Flash/Shockwave (SWF) movies.

Stop Motion:

Stop motion animation is animation that is captured one frame at time, with physical objects that are moved between frames. When you play back the sequence of images quickly, it creates the illusion of movement. If you understand how 2D drawn animation works, stop motion is similar, except using physical objects instead of drawings.

The basic process of animation involves taking a photograph of your objects or characters, moving them slightly, and taking another photograph. When you play back the images one after the other, the objects or characters appear to move on their own.

Also called Claymation, clay animation is a type of stop motion animation that uses clay figures and objects. Cell animation is a 2D animation.

An example would be Wallace and Gromit.

Frame Rate:
This is the amount of the number of frames showed chronologically per second of animation in order to create the motion illusion. The higher the frame rate the smoother the motion. This is because there are more frames per second to show the transition from A to B.

Key Frames:

A key frame shows the starting and ending points of any even animation. A sequence of key frames shows which movement the viewer will see, whereas the position if the key frame shows the timing of the movement.

Computer Generated:
With Computer generated animation there isn’t much difference between producing animation by hand (cell) and by computer as the method is the same, however the animation is process and created on a Program.

Computer generated animation can allow for more difficult animation such as 3D animation and CGI animation and produce a much higher and finer quality animation.

Onion Skinning:
Onion Skinning is an option that you can turn on that shows a range of frames both before and after your current frame, progressively fading them out as if they're layered on translucent paper on top of each other, or "onion-skinned". By dragging the edges of the greyed out block in your timeline you can expand or reduce the number of frames displayed in onion-skin mode, to let you better follow and track your animation.

The buttons for onionskin mode can be found at the bottom of the timeline, to the far left before the division marking the layer control area. There are two buttons--one for onionskin, and to the right of that, one for onionskin outlines. Onionskin mode displays the solid images layered on top of each other, while onionskin outlines only shows the outlines of the objects on each layer. Outline mode is recommended for long or detailed animations, as it's easier to render and scrub in real time.

Tweening:
Tweening is the process of generating in between frames between two images to give the appearance that the first image evolves smoothly into the second image. Tweening is a key process in all types of animation, including computer animation. Sophisticated animation software enables you to identify specific objects in an image and define how they should move and change during the tweening process.

Cell Animation

Hand drawn animation (cell) were mainly used in the past and are highly valued by collectors of original animated cell from series such as the Simpsons as many of the animated series have turned over to computer generated animation so increasing the rarity and value of original cell.

Types of digital animation:

Digital Animation is another form of animation that comes in the form of vector animation, raster (bitmap) animation, compression (file size, download speeds), scalability and file formats such as .fla. gif. Etc.

.FLA

Movie Authoring File

The FLA file extension is associated with the movie-authoring program called Flash. Made by Adobe Systems, Flash is the first application for creating mobile content and interactive websites that make use of video, graphics and animation.

The FLA extension is associated with the working movie file in Flash, meaning the basic document file used in content development. When a movie is complete, the FLA file is exported from Flash as an .swf file. The .swf movie file is played in the Flash Player and cannot be edited. Flash Player is available in most Web browsers. SWF purposes as the leading format for displaying "animated" vector graphics on the Web. It may also be used for programs, normally browser games using Action Script.

SWF files can be generated from within several Adobe products: Flash, after Effects etc. 

GIF

A GIF file extension means the item is a graphic image, or graphics interchange format. It has become a popular image format, along with JPG and the less common PNG.

A GIF image can handle a palette of as many as 256 colors. It is, therefore, unsuitable for photographs, which are larger and more commonly stored as JPG images. But GIF is perfect for many of the simpler images found online.

Raster Animation:

Raster based animation frames are made up of individual pixels. These pixels each contain information about the color and brightness of that particular spot on the image. Raster animation is used for showing realistic representations of people, animals or places, rather than the more anime-style animation you might get with vector graphics. Raster animation is also use to create animation for logos and banners based on photos or drawings.

A major difficulty with working with raster-based animation or images is that they are not infinitely enlargeable. This means that if you create a raster based animation at a certain size (400x300, for example); you will not be able to enlarge it to any significant extent without loss of resolution in the images. Vector graphics do not have this problem.

Flash

Future Wave Software, a small software company whose first product, Smart Sketch, was a vector-based drawing program for pen-based computer, developed Future Splash Animator. Later on the company decided to add animation capabilities to their product and to create a vector-based animation platform for World Wide Web.

Flash Player

Adobe Flash, indications to both a multimedia authoring program and the Adobe Flash Player, written and spread by Adobe, that uses vector and raster graphics, a built-in scripting language called Action Script etc., of video and audio. Flash is a common format for games, animations etc.

The Flash Player is available as a plugin for recent versions of web browsers on selected platforms.

QuickTime

QuickTime is available free of charge for both Mac OS X and Windows running systems. Some other free player requests that rely on the QuickTime framework provide features not available in the basic QuickTime Player.

For example: iTunes can export audio in WAV, AIFF, MP3, AAC, and Apple Lossless. In Mac OS X, a simple AppleScript can be used to play a movie in full-screen mode. Since version 7.2 the QuickTime Player now also supports full-screen viewing in the non-pro version.

RealPlayer

Many users would have originally faced RealPlayer as a plugin to watch streaming video or listen to streaming audio.  With RealPlayer, you can watch high quality live video anytime and anywhere. Whether you’re downloading music, burning CDs or watching a live sporting event, RealPlayer gives you greater control of your media than any other media player out there. You can control your media streams, pause, rewind and fast-forward through live audio or video clips while they are playing.