ITIS 1210 Introduction to WebBased Information Systems Chapter

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

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 § http: //library. med. utah. edu/kw/pharm/hype r_heart 1. 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 § Java. Script 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 § http: //www. amarasoftware. com/flashanimations/bees-theme-animation. htm