ITIS 1210 Introduction to Web-Based Information Systems Chapter 41 How Animation on the Web Works

Introduction  Web animation works like other animation  Series of still images displayed quickly  Illusion of motion  Faster display means smoother animation  Web can be slow so different technologies are needed

Client Pull  An HTML page instructs the browser to request and load a document automatically  Like an automatic slideshow  A Refresh command is written into the HTML  Instructs browser to use your PCs internal clock for timing purposes  A specified intervals a new page is requested

Client Pull  These documents could be anywhere on the Web  If a new document has its own Refresh command a new HTML document is loaded when the time interval comes up  The HTML author controls how long each page waits before requesting the next page

Client Pull  The sequence stops:  When a new HTML document does not have a Refresh command – OR –  The user clicks the browser’s STOP button  Client pull is good for step-by-step instructions  Not good for animation because a whole page has to be delivered and displayed  Animation only requires a new cell

Server Push  Server Push is more complicated than Client Pull  However it enables online animation better  Because a whole new HTML page is not required each time a new animation frame is needed  Begins with the HTML source code referring to an animation

Server Push  The browser recognizes the tag and requests the animation from the server  However, instead of retrieving a single image file, the reference is to a CGI script  At the server the CGI script is opened and executed

Server Push  Script takes advantage of a special MIME type (Multi-purpose Internet Mail Extension)  Allows the script to send (push) a series of still images as if it were transferring a single file  Each frame that arrives replaces the previous one giving the illusion of motion

How Shockwave Works  Requires special authoring software  Director  Authorware  Animation designer assembles different media types  Sound or sound effects  Stills  Video

How Shockwave Works  r_heart1.html r_heart1.html r_heart1.html

How Flash Works  Flash uses vector graphics  Bitmaps are pixel-by-pixel representations of an image  Vector graphics uses mathematical descriptions of shapes  Vector graphics have advantages  Smaller file sizes  Easily scalable without loss of quality

How Flash Works  Designer typically draws a series of frames  Each one slightly different from the previous  Frames are placed in a sequence along a timeline  By displaying one after t he other they appear to move  The speed of frame display is the frame rate

How Flash Works  The timeline can include:  Sounds  Links to Web pages  JavaScript commands  Other types of interactivity  Completed movies are compiled into a.swf file  Posted to a Web site

How Flash Works  Anyone with a Flash player can view  If you don’t have Flash installed you will be prompted to download it  Flash streams content  Beginning of movie can be playing while the rest loads in the background

How Flash Works  animations/bees-theme-animation.htm animations/bees-theme-animation.htm animations/bees-theme-animation.htm