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

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


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


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


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


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


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


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


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


http://www.amarasoftware.com/flash-animations/bees-theme-animation.htm

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

Documents

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