Index



3.2 Animation & Flash


3.2.1 Animation


Animation is the rapid display of a sequence of images of 2-D or 3-D artwork or model positions in order to create an illusion of movement. The effect is an optical illusion of motion due to the phenomenon of persistence of vision, and can be created and demonstrated in several ways. The most common method of presenting animation is as a motion picture or video program, although there are other methods.

Illustration of GIF animation:


animation edit
The bouncing ball animation (below) consists of these six frames.

animation example
This animation moves at 10 frames per second.


Illustration of flsh animation

(Source of demo animation flash: provide by Macromedia for licensed user of Flash) :


3.2.1 Implementation with Html


3.2.1.1 Gif


Html Code for the first example in 3.1.1

<img
 style="width: 260px; height: 236px;" 
alt="animation edit" 
title="animation edit" src="session03/Animexample3edit.png" />

Tips for using flash:


Using gif is as simple as inserting a jpg image into the web page. Use the image insertion function provided by the html editor. However, to see the animation effect, you have to use the browser or preview function to invoke a program call to the defaut browser on your desktop.


3.2.1.2 Flash (swf or flv)


Html ode for the second example in 3.1.1

<object 
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
id="stars" align="middle" height="400" width="400">

<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="stars.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />

<embed src="stars.swf" 
quality="high" bgcolor="#ffffff" name="stars" 
allowscriptaccess="sameDomain" 
type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer" 
align="middle" height="400" width="400" />
</object>

Tips for using flash:


All flash authoring tools can generate the html code section for embedding a flash file (swf or flv) into an html document. Just clip the source code encripted by the tag pair of <object..> and </object>in the appropriate position in the source code of the intended web page. However, there is only one thing you must remember. Put the swf or flv file in the same folder where the html document resides. Instead, use an iframe to access to the html page generated by the flash authoring tool. Up to this very moment, in either case, you are not able to preview the animation within the html editor even it is claimed to be wysiwyg. Use the browser to inspect the effect.

References Links