ITIS 1210ITIS 1210Introduction to Web-Based Introduction to Web-Based
Information SystemsInformation Systems
Chapter 41Chapter 41How Animation on the Web WorksHow Animation on the Web Works
IntroductionIntroduction
Web animation works like other animationWeb animation works like other animation Series of still images displayed quicklySeries of still images displayed quickly Illusion of motionIllusion of motion Faster display means smoother animationFaster display means smoother animation
Web can be slow so different technologies Web can be slow so different technologies are neededare needed
Client PullClient Pull
An HTML page instructs the browser to An HTML page instructs the browser to request and load a document automaticallyrequest and load a document automatically Like an automatic slideshowLike an automatic slideshow
A A RefreshRefresh command is written into the command is written into the HTMLHTML
Instructs browser to use your PCs internal Instructs browser to use your PCs internal clock for timing purposesclock for timing purposes A specified intervals a new page is requestedA specified intervals a new page is requested
Client PullClient Pull
These documents could be anywhere on These documents could be anywhere on the Webthe Web
If a new document has its own Refresh If a new document has its own Refresh command a new HTML document is command a new HTML document is loaded when the time interval comes uploaded when the time interval comes up The HTML author controls how long each The HTML author controls how long each
page waits before requesting the next pagepage waits before requesting the next page
Client PullClient Pull
The sequence stops:The sequence stops: When a new HTML document does not have When a new HTML document does not have
a Refresh command – OR – a Refresh command – OR – The user clicks the browser’s STOP buttonThe user clicks the browser’s STOP button
Client pull is good for step-by-step Client pull is good for step-by-step instructionsinstructions
Not good for animation because a whole Not good for animation because a whole page has to be delivered and displayedpage has to be delivered and displayed Animation only requires a new cellAnimation only requires a new cell
Server PushServer Push
Server Push is more complicated than Server Push is more complicated than Client PullClient Pull However it enables online animation betterHowever it enables online animation better Because a whole new HTML page is not Because a whole new HTML page is not
required each time a new animation frame is required each time a new animation frame is neededneeded
Begins with the HTML source code Begins with the HTML source code referring to an animationreferring to an animation
Server PushServer Push
The browser recognizes the <img> tag The browser recognizes the <img> tag and requests the animation from the and requests the animation from the serverserver
However, instead of retrieving a single However, instead of retrieving a single image file, the reference is to a CGI scriptimage file, the reference is to a CGI script
At the server the CGI script is opened and At the server the CGI script is opened and executedexecuted
Server PushServer Push
Script takes advantage of a special MIME Script takes advantage of a special MIME type (Multi-purpose Internet Mail type (Multi-purpose Internet Mail Extension)Extension) Allows the script to send (push) a series of Allows the script to send (push) a series of
still images as if it were transferring a single still images as if it were transferring a single filefile
Each frame that arrives replaces the Each frame that arrives replaces the previous one giving the illusion of motionprevious one giving the illusion of motion
How Shockwave WorksHow Shockwave Works
Requires special authoring softwareRequires special authoring software DirectorDirector AuthorwareAuthorware
Animation designer assembles different Animation designer assembles different media typesmedia types Sound or sound effectsSound or sound effects StillsStills VideoVideo
How Shockwave WorksHow Shockwave Works
http://library.med.utah.edu/kw/pharm/hyper_heart1.html
How Flash WorksHow Flash Works
Flash uses vector graphicsFlash uses vector graphics Bitmaps are pixel-by-pixel representations of Bitmaps are pixel-by-pixel representations of
an imagean image Vector graphics uses mathematical Vector graphics uses mathematical
descriptions of shapesdescriptions of shapes
Vector graphics have advantagesVector graphics have advantages Smaller file sizesSmaller file sizes Easily scalable without loss of qualityEasily scalable without loss of quality
How Flash WorksHow Flash Works
Designer typically draws a series of Designer typically draws a series of framesframes Each one slightly different from the previousEach one slightly different from the previous
Frames are placed in a sequence along a Frames are placed in a sequence along a timelinetimeline By displaying one after t he other they appear By displaying one after t he other they appear
to moveto move The speed of frame display is the The speed of frame display is the frame rateframe rate
How Flash WorksHow Flash Works
The timeline can include:The timeline can include: SoundsSounds Links to Web pagesLinks to Web pages JavaScript commandsJavaScript commands Other types of interactivityOther types of interactivity
Completed movies are compiled into Completed movies are compiled into a .swf filea .swf file Posted to a Web sitePosted to a Web site
How Flash WorksHow Flash Works
Anyone with a Flash player can viewAnyone with a Flash player can view If you don’t have Flash installed you will be If you don’t have Flash installed you will be
prompted to download itprompted to download it Flash streams contentFlash streams content
Beginning of movie can be playing while the Beginning of movie can be playing while the rest loads in the backgroundrest loads in the background
How Flash WorksHow Flash Works
http://www.amarasoftware.com/flash-animations/bees-theme-animation.htm