The Sprite Control | Dynamic HTML in Action

If you are familiar with traditional animation techniques, you know that animations are composed of many separate images shown in rapid succession. Each image differs only slightly from the previous one. When the images are played back in rapid succession, the viewer has the impression that the image on the screen is moving.

The DirectAnimation Sprite control allows the Web developer to create animations out of a series of stills and achieve a high level of control over the playback and behavior of these animations. The stills are taken from a single graphics file that contains each of the individual pictures laid out in rows. Sprites give you far more control than is available with a traditional animated GIF. For example, you can seek a specified frame in the animation or change on the fly the time each frame should be displayed.

Like the other DirectAnimation controls, an <OBJECT> tag must be added to the page to use the Sprite control. Its CLASSID is as follows:

 CLASSID="CLSID:FD179533-D86E-11D0-89D6-00A0C90833E6"

The Sprite control supports many properties that control everything from the location of the source graphic to a color that should be displayed as transparent. Here are descriptions of some of the more commonly used properties.

Property	Description
AutoStart	Specifies whether the animation automatically begins playback when the page is loaded.
ColorKey	Sets the transparency color in the source image.
UseColorKey	Specifies whether the sprite's transparency information should be used.
Frame	Returns the current frame being played.
InitialFrame	Sets the number of the frame that should be displayed when the control first becomes visible.
FinalFrame	Sets the frame that should be displayed when the animation is stopped.
FrameMap	Sets the order in which the frames are to be played back, along with the amount of time each frame is to be displayed. The format is a list as follows: frame1, time1; frame2, time2, for example 1,.100;2,.100;3,.100.
NumFrames	Sets or returns the number of frames (stills) in the source.
NumFramesDown	Specifies or returns the height of the source image in number of frames.
NumFramesAcross	Specifies or returns the width of the source image in number of frames.
MouseEventsEnabled	Sets whether mouse events on the sprite will be processed.
PlayRate	Specifies the playback rate for the sprite. This property can be used to slow or increase the playback rate or even to make the sprite play backward.
PlayState	Returns one of three playback states for the sprite: play, paused, or stopped.
Repeat	Sets or returns the number of times the sprite should loop.
SourceURL	Specifies the URL that points to the source image.
Time	Returns the total elapsed play time for the sprite.
TimerInterval	Specifies the amount of time between frame updates, expressed in milliseconds.

Code Listing 19-6 demonstrates the Sprite control using a GIF containing images of Earth in different rotational positions to build a frame-based animation that will make it appear as if the Earth is spinning. The sprite in Code Listing 19-6 uses the file earth.gif, which contains 21 images of the Earth, as its source. Figure 19-4 shows a part of earth.gif.

Figure 19-4. Part of the file earth.gif. The file extends downward, containing many more pictures of the Earth.

Each one of the pictures of the Earth is used as a frame in the sprite. When all the frames are played in succession, the globe appears to spin. Notice that we also set the Repeat value to -1, which means that if the animation is playing, it should repeat, or loop, an infinite number of times. Figure 19-5 displays the results.

Code Listing 19-6.

 <HTML> <HEAD> <TITLE>Code Listing 19-6</TITLE> </HEAD> <BODY BGCOLOR="black"> <OBJECT ID="globe" STYLE="width:200;height:150"   CLASSID="clsid:FD179533-D86E-11D0-89D6-00A0C90833E6">   <PARAM NAME="NumFrames" VALUE="21">   <PARAM NAME="NumFramesAcross" VALUE="1">   <PARAM NAME="NumFramesDown" VALUE="21">   <PARAM NAME="ColorKey" VALUE="255,0,255">        <PARAM NAME="UseColorKey" VALUE="-1">   <PARAM NAME="SourceURL" VALUE="earth.gif">   <PARAM NAME="Repeat" VALUE="-1">   <PARAM NAME="InitialFrame" VALUE="1"> </OBJECT><P> <INPUT TYPE="button" VALUE="Play" onclick="globe.Play()"> <INPUT TYPE="button" VALUE="Pause" onclick="globe.Pause()"> <INPUT TYPE="button" VALUE="Stop" onclick="globe.Stop()"> <INPUT TYPE="button" VALUE="Frame" onclick="alert(globe.Frame)"> <INPUT TYPE="button" VALUE="Time" onclick="alert(globe.Time)"> </BODY> </HTML>

click to view at full size.

Figure 19-5. The sprite of the Earth can be manipulated with the on screen buttons.

The Play, Pause, and Stop buttons call the corresponding methods of the Sprite control. The Frame and Time buttons will display an alert showing the current frame number and the amount of time that the control has been playing.

Sprites can be used for more than just simple animation. Code Listing 19-7 uses specific frames of the sprite to allow the user to display various regions of the earth by clicking a button for the desired region. Figure 19-6 shows how Internet Explorer displays this page.

Code Listing 19-7.

 <HTML> <HEAD> <TITLE>Code Listing 19-7</TITLE> </HEAD> <BODY BGCOLOR="black"> <OBJECT ID="globe" STYLE="width:200;height:150"   CLASSID="clsid:FD179533-D86E-11D0-89D6-00A0C90833E6">   <PARAM NAME="NumFrames" VALUE="21">   <PARAM NAME="NumFramesAcross" VALUE="1">   <PARAM NAME="NumFramesDown" VALUE="21">   <PARAM NAME="ColorKey" VALUE="255,0,255">        <PARAM NAME="UseColorKey" VALUE="-1">   <PARAM NAME="SourceURL" VALUE="earth.gif">   <PARAM NAME="InitialFrame" VALUE="1"> </OBJECT><P> <INPUT TYPE="button" VALUE="South America" onclick="globe.FrameSeek(21)"> <INPUT TYPE="button" VALUE="Asia" onclick="globe.FrameSeek(12)"> <INPUT TYPE="button" VALUE="Africa" onclick="globe.FrameSeek(16)"> <INPUT TYPE="button" VALUE="North America" onclick="globe.FrameSeek(2)"> </BODY> </HTML>

click to view at full size.

Figure 19-6. Using the Sprite control to enable users to manipulate an image.

When a button is clicked, the FrameSeek method of the Sprite control is called and passed a number as the argument. This number is the frame in the sprite that corresponds to the location to be displayed. This causes the sprite to jump to the frame specified, which makes the specified region appear on the globe.

In addition to FrameSeek, the Sprite control supports the following methods, which behave as they do in other DirectAnimation controls: Play, Pause, Seek, Stop, and AddTime
Marker. Expected events are supported, including onclick, ondblclick, onframeseek, onmarker, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onpause, onplay, onplay
marker, onseek, and onstop. The onmedialoaded event is fired when the control and the graphic containing the source images are fully loaded. As mentioned in the note earlier in the chapter, it is best to capture events using a dedicated script block rather than an inline event handler.

The multimedia controls discussed in this chapter can provide lightweight, powerful ways to enhance a Web page and present exciting media content to the user. The Structured Graphics control lets you add small, scalable vector-based images to your Web page. The Sequencer control gives you precise control over the timing of actions on the page. The Path control provides a way to add sophisticated movement to screen objects. And the Sprite control adds the capability of including frame-based animations and images.

The next part of this book will take a look at some advanced Web development techniques, covering everything from working with data using data binding and XML to using DHTML behaviors and creating cross browser scripts.