Web Animation Article

Uses of Web Animation

These small rectangular advertisements appear on all sorts of Web pages and vary considerably in appearance and subject matter, but they all share a basic function: if you click on them, your Internet browser will take you to the advertiser's Web site. 

But how do they work and why are they there?

This new medium of education and entertainment has revolutionized the economy and brought many people and many companies a great deal of success. But where is all this money coming from? There are a lot of ways Web sites make money, but one of the main sources of revenue is advertising. And one of the most popular forms of Internet advertising is the banner ad.

A banner ad is simply a special sort of hypertext link.

A bit of HTML code instructs a Web server to bring up a particular Web page when a user clicks on a certain piece of text. Banner ads are essentially the same thing, except that instead of text, the link is displayed as a box containing graphics (usually with textual elements) and sometimes animation.

Because of its graphic element, a banner ad is somewhat similar to a traditional ad you would see in a printed publication such as a newspaper or magazine, but it has the added ability to bring a potential customer directly to the advertiser's Web site.

This is something like touching a printed ad and being immediately teleported to the advertiser's store A banner ad also differs from a print ad in its dynamic capability. It stays in one place on a page, like a magazine ad, but it can present multiple images, include animation and change appearance in a number of other ways.

Like print ads, banner ads come in a variety of shapes and sizes. The Internet Advertising Bureau (IAB) specifies eight different banner sizes, according to pixel dimensions. A pixel is the smallest unit of color used to make up images on a computer or television screen. The IAB's standard banner sizes are:

 

• 486 x 60 Pixels (Full Banner)
• 392 x 72 Pixels (Full Banner with Vertical Navigation Bar)
• 234 x 60 Pixels (Half Banner)
• 120 x 240 Pixels (Vertical Banner)
• 125 x 125 Pixels (Square Button)
• 120 x 90 Pixels (Button 1)
• 120 x 60 Pixels (Button 2)
• 88 x 31 Pixels (Micro Button)

The full banner (468 x 60) is by far the most popular, but you will see all these variations all over the Web. These are not the only banner ad shapes and sizes, either, but they are a good representation of the range of common banner ads. 

There is no universal file-size constraint for banner ads, but most Web sites impose their own limits on memory size, usually something like 12K to 16K. This is because banner ads add to the total file size of the page they appear on, therefore increasing the time it takes for a browser to load that page.

As you've probably noticed while surfing the Web, actual graphic content, or creative, varies considerably among banner ads. The simplest banner ads feature only one, static GIF or JPEG image, which is linked to the advertiser's home page. 

More common is the GIF-animated banner ad, which displays several different images in succession, sometimes to create the effect of animated motion. Then there are rich media banner ads -- ads that use audio, video, or Java and Shockwave programming. These banner ads, which usually have larger file sizes, are often interactive beyond their simple linking function.

Linear animation

There are significant differences between the art of animating for linear media such as film and video and the art of animating for interactive media such as computer and video games. In particular, these differences arise from the shift from linear characters to autonomous interactive characters. 

linear animation and interactive animation in several areas of character design -- character intelligence, emotional expressiveness, navigation, transitions among animations, and multi-character interaction. These differences provide insight into the processes of both forms of animation and the final products that they create, and may provide a starting point for linear animators interested in becoming familiar with interactive animation.

Interactive animation

Interactive animation is not linear and the narrative does not have to be controlled by the animator. In digital media the narratives can be transferred to spectator either in linear or in circular structure. In the geometric shape of the circle there is neither a start nor an end. Start, middle or end can be any point that composes the circle.

He or she can reach sequence of events or return to previous sections and by this way he/she re-visits the narrative sections. On the basis of these explanations we can say that interactive animation sets up the events that enable mutual relationship between narrative and user.

Interactive animation is used in various areas such as; entertainment, web, computer and video games.

Traditional animation and interactive animation have very different narration structures. Especially in 3D character animation based computer and video games, interaction tremendously affects the storytelling. For example, in Quake, the player chooses a character among different ones and control of the character totally belongs to the player. Player can run, walk, crouch, turn, jump, pick items through the corridors moreover can fight various monsters awaiting for assault. The saving feature in the game and various ends enable completion of levels or gaining experience many times.

Additionally, the tools which are used in the two different forms of animation are dissimilar. While traditional animators use tools like paper, pencil and paint, interactive animators have to use 2D and 3D animation software and work with the complex systems like procedural animation and motion capture which contain widely computer and mathematical principles to add interactivity.

Persistence of vision

Persistence of vision is the phenomenon of the eye by which even nanoseconds of exposure to an image result in milliseconds of reaction (sight) from the retina to the optic nerves. This is because persistence of vision depends on chemical transmission of nerve responses, and this biochemical hysteresis is much slower than the light transmission.

The myth of persistence of vision refers to the mistaken belief that human perception of motion (brain centred  is the result of persistence of vision (eye centred). The myth was debunked in 1912 by Werther but persists in many citations in modern texts.[citation needed] Motion perception has been shown to be the result of the Beta Phenomenon.

A visual form of memory known as iconic memory has been described as the cause of this phenomenon. Although psychologists and physiologists have rejected the relevance of this theory to film viewer ship  film academics and theorists generally have not. Some scientists nowadays consider the entire theory a myth.

Persistence of vision should be compared with the related phenomena of beta movement and phi movement. A critical part of understanding these visual perception phenomena is that the eye is not a camera: there is no "frame rate" or "scan rate" in the eye; instead, the eye/brain system has a combination of motion detectors, detail detectors and pattern detectors, of which each output is combined to create the visual experience.

The measure of the number of frames displayed sequentially per second of animation in order to create the illusion of motion. The higher the frame rate, the smoother the motion, because there are more frames per second to display the transition from point A to point B.

Frames

A frame is uniquely defined by a combination of the image to be displayed and the time the image is to be displayed. A sequence of frames makes an animation. Each frame is displayed on the screen until the next frame overwrites it. Since each frame remains displayed on the screen for a tiny but finite time period, you can think of an animation as frames displayed at discreet intervals of time in a continued sequence.

Any scene change happens by drawing a whole new frame. Even changing a single pixel requires drawing the next frame in its entirety. Furthermore, even if the image of the scene remains constant, identical content must be drawn in subsequent frames as long as the still scene is needed.

In practice, the time needed to refresh the screen must be negligible compared to the time the frame remains on the screen. If this were not so, the viewer would notice the individual scene changes, which would be an awful animation experience. In the case of a movie projector, the refresh time is the time that the shutter remains closed while the next frame of film is loaded. In case of the computer monitor, it is the time required for the monitor's electron gun to traverse the entire screen from left to right and up to down to draw each pixel on the screen.

The content of the frame is the image (every pixel on the screen) to be displayed. It is possible for one monolithic function in an animation engine to draw all the pixels of each frame. The movie projector is like this kind of monolithic function, as it loads an entire image for each frame. The movie projector can do this because the content of each frame is available as a separate image. However, it is a completely different situation in a video game. Let's say that the player is sitting still in a closed room. The screen will display a still image of the room view. 

Now the player gives some input to turn around the room gradually. For example, right-click-and-drag in SPORE turns the player gradually, at the speed of the mouse. The view of the virtual world needs to change as the turn progresses. It would be impossible to store every possible image of the virtual world and then load the right image for each part of the turn. Instead, the content of each frame, while turning, must first be computed and before it is copied into video memory. The term for this computation is Rendering the frame.

Like a From/To/By animation, a key-frame animation animates the value of a target property. It creates a transition among its target values over its Duration. However, a From/To/By animation creates a transition between two values, but a single key-frame animation can create transitions among any number of target values.

Unlike a From/To/By animation, a key-frame animation has no From, To, or By properties with which to set its target values. Instead, you describe a key-frame animation's target values by using key-frame objects. To specify the animation's target values, you create key-frame objects and add them to the animation's KeyFrames property. When the animation runs, it transitions between the frames you specified.

In addition to supporting multiple target values, some key-frame methods even support multiple interpolation methods. An animation's interpolation method defines how it transitions from one value to the next. There are three types of interpolations: discrete, linear, and splined.

To animate with a key-frame animation, you complete the following steps:

•  Declare the animation and specify its Duration, as you would for a From/To/By animation.
• For each target value, create a key frame of the appropriate type, set its value and KeyTime, and add it to the animation's KeyFrames collection.
• Associate the animation with a property, as you would with a From/To/By animation

Tweening

"Tween" is actually short for "in-between", and refers to the creation of successive frames of animation between key frames. In computer animation, the term is most commonly used for Flash's "shape tweening" and "motion tweening" processes, where the user can define two key frames and Flash will automatically create the in-between frames, either morphing one shape into another over a set period of time or else moving a shape or shapes from point A to point B over a set period of time. 3D animation programs also have their own method of "tweening".

Here is an example video of how tweening works.



Applet Browsers: Java applets cannot be viewed by all web browsers. Sun created a special browser (written in Java) called HotJava, which can be used to view Java applets. Sun claims that this browser can present any image, program, etc. to the user even in new formats, that may be created in the future, which the user's other software does not recognize. This is supposed to be enabled if the server, from which the object to be viewed comes from, has a few Java lines which "teach" the browser how to display the object.

Java applets can run on the user's computer so freeing up server's resources as explained above. Applets may have access to resources on the host machine that the user may not want them to play around with. The simplest solution would be to restrict all access of downloaded applets to any resources on the host machine. This solution sounds very simple, but the applet may very well have no use if it cannot access basic resources. For example, suppose the applet helps you draw pictures. It would not be very useful if you cannot save the drawing when it is ready.

Applet Browsers: Java applets cannot be viewed by all web browsers. Sun created a special browser (written in Java) called HotJava, which can be used to view Java applets. Sun claims that this browser can present any image, program, etc. to the user even in new formats, that may be created in the future, which the user's other software does not recognize. This is supposed to be enabled if the server, from which the object to be viewed comes from, has a few Java lines which "teach" the browser how to display the object.

Java applets can run on the user's computer so freeing up server's resources as explained above. Applets may have access to resources on the host machine that the user may not want them to play around with. The simplest solution would be to restrict all access of downloaded applets to any resources on the host machine. This solution sounds very simple, but the applet may very well have no use if it cannot access basic resources. For example, suppose the applet helps you draw pictures. It would not be very useful if you cannot save the drawing when it is ready.

An applet must begin with init() and end with destroy(). There are four other methods but an applet does not necessarily need all of them. Here are all six methods:

init() - this method is called immediately after the applet begins to execute, when an applet is reloaded or when the user returns to the applet's page. This method is used to set up any data structure or perform tasks that help you get ready to run the applet.

start() - this method performs the real execution of the applet. It is called after the init() method. This method is called whenever the applet can be seen on the user's screen (i.e. it is not called when the user is looking at another page, for example). So, if there is any code that should be executed every time an applet is restarted, this is where to put it.

paint() - this method deals with the applet's display. In the HelloWorld example it is used with the Graphics parameter (this parameter is defined in the java.awt.Graphics class). There is a lot more about the java.awt.Component class which is the super class of java.awt.Graphics.

update() - this method in java.applet.Applet clears the applet and repaints it again by calling repaint(). If you want to avoid the flickering that results from this, you might try overriding the update() method with a new one that includes only the paint(g) method. (Both paint() and update() can be overloaded with paint(Graphics g) and update(Graphics g) respectively.)

stop() - this method is called when the user leaves the applet's page. It should usually stop all unnecessary activities which will probably not interest the user when s/he returns to view the applet (such as displaying cartoons). On the other hand it should not stop important calculations which the user will probably want to know the results of.

destroy() - this method is called after the stop() method and before the applet is unloaded completely, to release the applet's resources. If the user returns to the page the init() method is called again.

Digital Animation

.Fla

To get the best out of the web you will need Flash. Research shows that around 99% of internet users now have it. It is a popular player for video and animation.

Flash is popular with web designers as it allows them to create animated websites containing graphics, games, cartoons or movies. It allows for more interactivity.

And it has the added advantage of being quick to load, thanks to very small file sizes, and the ability to ‘stream’ media. Streaming means that the animation will start to play before the whole file is loaded, thus saving time.

Macromedia has had a great deal of success with two closely related formats, Flash and Shockwave. Flash is now the standard format for rich animation on the Web, and Shockwave is a very popular format for presenting more complex animated content. 

.SWF

The .SWF Flash media container extension is one of the most popular available on the Internet. SWF stands for Small Web File. .SWF was originally created as a file extension for Flash-based vector graphics and simple sequential animations and it used to stand for ShockWave Flash. 

Later, the .SWF extension became more complex and now it is a dominant file format which contains all types of Flash media (including audio and video). The .SWF file can be used for showing Flash animation based on vector and raster graphics, for different forms of interaction with the end user - Flash menus, Flash buttons, Flash banners, and more. Also, it can contain Flash applets which provide control for other Flash elements. 

For example, it can contain a Flash player applet which will provide advanced timeline and volume controls for a Flash-based .FLV movie clip.

GIF's

Typically, Web sites post these sorts of images as either JPEG files or GIF files.

Animation is just a series of still images shown in sequence, so the most obvious way to add animation to a Web site is to post a series of bitmap images that the user's browser displays in sequence. This sort of animation, called GIF animation, or GIF89, was the first Web animation to catch on, and it is still very popular today.

The main advantages of GIF animation are that it is incredibly simple to work with and it is automatically recognizable to most Web browsers. With a shareware program, such as GIF construction set for Windows or Gif builder for Macintosh, all you have to do is provide the individual bitmap images that make up the frames of your animation. You then post the file and code the tag for the image, just as you would with an ordinary static GIF.

The disadvantage is that you have to keep the animation pretty simple to keep the file size down. After all, each frame is a full bitmap image. Four simple frames transmit very easily to most users, but when you get up to something like 20 frames, your file size could be too big. And you can't even accomplish very much with 20 frames -- the fluid animation we see in movies includes at least 24 still images every second -- so animated GIFs are fairly limited. To create a movie of any substantial length, you have to make pretty big jumps between each frame, which means the animation is not very fluid. 

Web Animation Software

Quicktime

What Is QuickTime?

QuickTime is Apple’s multiplatform, multimedia technology for handling video, sound, animation, graphics, text, interactivity, and music. As a cross-platform technology, QuickTime can deliver content on Mac OS and Windows computers. Many applications, including Final Cut Pro, use the powerful architecture of QuickTime to view, create, import, and export media.

QuickTime supports most major video, audio, and graphics file formats. It works with local disk-based media, media accessed over a network, and streams of real-time data. QuickTime supports a wide variety of video and audio codecs and can be extended with third-party codecs.

QuickTime technology is composed of:

• A suite of applications (most notably, QuickTime Player) 
• An environment for media authoring 
• A movie file format

Using an application like QuickTime Player Pro or Final Cut Pro, you can import, edit, and export every file format that QuickTime supports. This allows you to create movies for the web, for DVD, or for output to videotape. You can also create movies including video, audio, text, still images, and interactive layers.

There are various resources for learning more about QuickTime technology and architecture.

Flash & Shockwave

Unlike Real Player and QuickTime files, Flash and Shockwave movies actually appear as part of the Web page and include a high level of interactivity, just like a straightforward HTML page. The Shockwave player not only plays animation, but also recognizes user input and then controls how the browser responds.

Macromedia has had a great deal of success with two closely related formats, Flash and Shockwave. Flash is now the standard format for rich animation on the Web, and Shockwave is a very popular format for presenting more complex animated content. Unlike Real Player and QuickTime files, Flash and Shockwave movies actually appear as part of the Web page and include a high level of interactivity, just like a straightforward HTML page. The Shockwave player not only plays animation, but also recognizes user input and then controls how the browser responds.

It's also easy to update the plug-ins, allowing Macromedia to continually develop and then distribute new technology. The company intentionally designed the Flash and Shockwave players to adapt to future modifications, so the user doesn't have to do anything to update the player but download the file. And since these files are fairly small in size, it doesn't take much time to do this. Additionally, if a site detects that you don't have the newest version of the plug-in, your browser will tell you, and direct you to the Macromedia site to download the update.

The different animation formats on the Web all have particular strengths and weaknesses. But many webmasters end up using Flash, even when another format might be better suited to their needs, simply because they know that most Web users already have Flash capability; and if they don't, it's really easy for them to get it. The universality of Flash and Shockwave leads more webmasters to include Flash content, which further spreads the acceptance of the formats.

Comparison between Flash & Shockwave

Flash and Shockwave software applications cover a lot of the same ground, and they are produced by the same company, but there are a few significant differences. Most of these are directly related to the origins of the two file formats. Director, the software application used to create Shockwave files, has been around for a long time, longer than the Internet in its current form. It was originally developed to create dynamic content for CD-ROMs, and it is still used for this purpose. As dynamic content has become more popular on the Internet, however, updated versions of Director have included more features that tailor Shockwave files for use on the Web.

Flash, on the other hand, was built from the ground up for use on the Web. Macromedia adapted Flash from Future Splash Animator, a vector art animation program. Macromedia's version was tailored specifically for transmission over phone line connections. So at their heart, Flash and Shockwave have two different specialties. Consequently, they have a number of contrasting strengths and weaknesses:

Flash files load more quickly than Shockwave files.

• Shockwave is more versatile. You can create more complex games, more elaborate interactivity and more detailed animation.

• You can use more types of files with Shockwave. You could, for example, import a Flash file into a Shockwave movie, but it doesn't work the other way around.

• Flash is more universal. More than 90 percent of Web users have the Flash plug-in installed, while a little less than 60 percent have the Shockwave plug-in.

• Flash creation software is cheaper. Director costs a little less than $1,000, while Flash costs about $400.

 

• Flash is an open-source format. Anybody can see how it works and is free to adapt it for their own purposes. Director uses a compiled file format, so it is extremely difficult to modify the program.

With each software update, the two formats move closer and closer together. Shockwave has better Web capability with each version, and Flash gets more versatile. Eventually, the two formats will probably be merged into one comprehensive format that encompasses the best qualities of each.