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

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

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

10. How Shockwave Works  http://library.med.utah.edu/kw/pharm/hype r_heart1.html http://library.med.utah.edu/kw/pharm/hype r_heart1.html http://library.med.utah.edu/kw/pharm/hype r_heart1.html

11. 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

12. 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

13. 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

14. 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

15. How Flash Works  http://www.amarasoftware.com/flash- animations/bees-theme-animation.htm http://www.amarasoftware.com/flash- animations/bees-theme-animation.htm http://www.amarasoftware.com/flash- animations/bees-theme-animation.htm