ITIS 1210 Introduction to Web-Based Information Systems

1. ITIS 1210Introduction 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 <img> 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/hyper_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