Internet Explorer 4.0 includes four powerful multimedia controls that help you create stunning web pages and channels.

Path Control
Sequencer Control
Sprite Control
Structured Graphics Control

© 1997 Microsoft Corporation. All rights reserved. Terms of use.


Sprites use a base image that contains frames of an animation. The images are read in order, left to right and top to bottom, and then played as an animation using the Play event. You can arrange them all in one row or column, or in multiple rows and columns -- whatever makes the most sense for your animaton. You can adjust the rate, sequence, and other aspects of the animation during playback by setting various properties. Be sure to check out this source code, as well as the properties (listing 1, listing 2), methods, and events associated with this control.

The Structured Graphics control provides client-side, vector-based graphics. Unlike large, bitmapped graphics (such as GIF and JPG files), structured graphics are small (check out source for a sample graphic) and download quickly. They are then rendered on the fly on the client side for high performance. The rendered graphic is transparent to the background of the page, and it can be controlled in a script by various methods (see listing 1 and listing 2). The Internet SDK includes a Windows Metafile Converter that converts existing Windows metafiles into Structured Graphics so that you can use them with the Structured Graphics control. Be sure to check out the properties and events, too.

There are two objects shown here: one moving on an oval path, and one moving on a saw-tooth polygonal path.

<IMG ID="imgOval" SRC="images/oval.gif" STYLE="position:absolute;LEFT: 20; TOP: 80">
<IMG ID="imgPoly" SRC="images/poly.gif" STYLE="position:absolute;LEFT: 20; TOP: 80">

<OBJECT ID="pthOval"  
CLASSID = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6">
	<PARAM NAME="AutoStart" VALUE="-1">
	<PARAM NAME="Repeat" VALUE="-1">
	<PARAM NAME="Bounce" VALUE="1">
	<PARAM NAME="Duration" VALUE="10">
	<PARAM NAME="Shape" VALUE="Oval(50,50,400,200)">
	<PARAM NAME="Target" VALUE="imgOval">
</OBJECT>

<OBJECT ID="pthPolygon"  
CLASSID = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6">
	<PARAM NAME="AutoStart" VALUE="-1">
	<PARAM NAME="Repeat" VALUE="-1">
	<PARAM NAME="Bounce" VALUE="0">
	<PARAM NAME="Duration" VALUE="10">
	<PARAM NAME="Shape" VALUE="Polygon(8, 50,100, 50,150, 100,100, 100,250, 50,250, 50,275, 25,150, 0,150)">
	<PARAM NAME="Target" VALUE="imgPoly">
</OBJECT>

Property

Description

Bounce

Sets the path behavior to either reverse direction and return to the beginning, or stop at the end of its playback, .

Direction

Sets the direction of the path playback.

Duration

Sets the duration of the path playback.

PlayState

Returns the path's current playback state.

Repeat

Sets the number of times the path loops during playback.

Target

Sets the object that is to follow the path.

Time

Returns the elapsed playback time from the start of the path.

Method

Description

AddTimeMarker

Sets a marker to fire an event when playback reaches the marker position.

Oval

Specifies an oval structured graphics primitive to be used as the path, with starting point at top center (12 o'clock)

KeyFrame

Specifies points along the path in X, Y coordinates and a designated time to reach each point.

Pause

Stops playback and maintains current elapsed time.

Play

Begins playback from the current elapsed time.

Polygon

Specifies a closed series of line segments to use a path.

PolyLine

Specifies an open set of line segments to be used as the path.

Rect

Specifies a rectangular structured graphics primitive to be used as the path, with starting point at top left.

Seek

Resets the current playback position to a new, specified position.

Spline

Specifies a spline to be used as the path.

Stop

Stops playback at current elapsed time and returns path to the beginning

Event

Description

OnMarker

Occurs when a time marker has been reached either during path playback or when stopped.

OnPause

Occurs when path playback is paused.

OnPlay

Occurs when path playback is played.

OnPlayMarker

Occurs when a time marker is reached during path playback.

OnSeek

Occurs when a seek call has been completed..

OnStop

Occurs when path playback is stopped.

There are two object here: a GIF image that is being moved by a Visual Basic Script, and a block of text that gets rotated.

Sub Seq_OnInit ' Called when sequencer initializes.
	call seq("ActionSet1").At(0.000, "RotateAll",-1, 0.050, 1)
	Call Seq("ActionSet1").Play
End Sub
Sub RotateAll ' Called by sequencer every 0.050 seconds.
	Call sgMSDHTML.Rotate(0,9,2,1)  ' Rotate the text block
	imgMove                         ' Move button image
End Sub
sub imgMove ' This function moves the button image from left to right.
  dim imgDirection
  imgDirection = 1
  imgRotate.style.left = imgRotate.offsetLeft + (imgDirection * 10)
  if imgRotate.offsetLeft > 660 or imgRotate.offsetLeft < 11 then
    imgDirection = - imgDirection
  end if
end sub
Sub Start   ' Called when button is clicked.
    Select Case Button1.Value
	Case "Play"
		Call Seq("ActionSet1").Play
		Button1.Value="Pause"
	Case "Pause"
		Call Seq("ActionSet1").Pause
		Button1.Value="Play"
    End Select
End Sub
' Here is an example of a declaration for a sequencer control.
<OBJECT ID="Seq"
	CLASSID="CLSID:B0A6BAE2-AAF0-11d0-A152-00A0C908DB96"
	STYLE="WIDTH:2;HEIGHT:2">
</OBJECT>
Sub Seq_OnInit ' Called when sequencer initializes.
	' The At method is used to define the characteristics of the sequence, including:
	'  - The name of the action set (ActionSet1)
	'  - The start time (0.000 seconds)
	'  - The script to execute (RotateAll)
	'  - Whether to loop the sequence (-1 is an infinte loop)
	'  - How often to repeat the sequence (every 0.050 seconds)
	'  - The priority for this action; lower numbers equal higher priority. 

	call seq("ActionSet1").At(0.000, "RotateAll",-1, 0.050, 1)
	' The Play method starts the action set playing.
	Call Seq("ActionSet1").Play
End Sub

Method

Description

At

Specifies a new action in the action set.

Pause

Stops action set playback at current position. Keeps time pointer and queue.

Play

Starts the action set (if stopped). Resumes sequencer playback if sequencer is paused. Ignored if sequencer is playing.

Seek

Changes the current playback position of the action set to a new, specified time.

Stop

Stops action set playback, resets its playback position to the beginning.

Event

Description

Parameters

OnInit

Occurs when sequencer is first completely loaded into memory

OnPause

Occurs when action set playback has been paused

Name of action set

OnPlay

Occurs when the action set has started playback. This event is only called when the action set starts playback from a stopped or paused state, not when a currently playing action set loops back to the beginning to repeat playback.

Name of action set

OnSeek

Occurs after the Seek method call has been completed.

Name of action set, new time

OnStop

Occurs when the action set playback ends or is stopped

Name of action set

The button at left is a sprite. Click it to see! Each click adds one more repetition to the animation contained in the sprite.

dim numRepeats
numRepeats = 1
Sub b1_OnMouseDown(b,s,x,y)
  b1.Repeat=numRepeats
  call b1.Play()
  numRepeats = numRepeats + 1
End Sub

<OBJECT ID="b1"
	Style="POSITION:relative;LEFT: 0; TOP: 0; WIDTH: 128; HEIGHT: 128"
	CLASSID ="clsid:FD179533-D86E-11d0-89D6-00A0C90833E6" STYLE="visibility:visible">
	<PARAM NAME="Repeat" value=1>
	<PARAM NAME="PlayRate" VALUE=2>
	<PARAM name="FrameMap" value="">
	<PARAM NAME="NumFrames" VALUE=10>
	<PARAM NAME="NumFramesAcross" VALUE=1>
	<PARAM NAME="NumFramesDown" VALUE=10>
	<PARAM NAME="SourceURL" VALUE="images/sbutton4.jpg">
	<PARAM NAME="MouseEventsEnabled" VALUE="True">
	<PARAM NAME=AutoStart VALUE=0>
</OBJECT>

Property

Description

ColorKey

Sets the transparency color for a source image.

Frame

Returns the sprite image frame currently displayed.

FrameMap

Sets or returns the order in which sprite frames play back and the length of time each frame is displayed.

Image

Sets or returns a DirectAnimation image from the sprite control.

InitialFrame

Sets or returns the frame number that the sprite displays when it becomes visible.

MaximumRate

Sets or returns the maximum rendering speed of the sprite (number of times the control will render per second).

MouseEventsEnabled

Sets or returns whether or not the sprite responds to mouse events.

Method

Description

AddFrameMarker

Sets a marker to fire an event when playback reaches the designated frame.

AddTimeMarker

Sets a marker to fire an event when playback reaches the designated time.

FrameSeek

Sets the sprite playback to a specific frame.

Pause

Stops playback at current frame and maintains current frame position.

Play

Begins playback from the current frame.

Seek

Sets the sprite playback to a specific elapsed time.

Stop

Ends playback at the current frame.

Event

Description

OnClick

Occurs when the user clicks the sprite once.

OnDblClick

Occurs when the user double-clicks the sprite.

OnFrameSeek

Occurs after the FrameSeek method has been called.

OnMediaLoaded

Occurs when a piece of sprite media is completely downloaded.

OnMouseDown

Occurs when the user depresses the mouse button over a sprite.

OnMouseMove

Occurs when the user moves the mouse across the non-transparent area of the sprite.

OnMouseOut

Occurs when the cursor leaves the non-transparent area of the sprite.

OnMouseUp

Occurs when the user releases the mouse button over a sprite.

OnMouseOver

Occurs when the cursor enters a non-transparent area of the sprite.

OnPause

Occurs when sprite playback is paused.

OnPlay

Occurs when the sprite begins playback.

OnSeek

Occurs after the Seek method is called.

OnStop

Occurs when the sprite stops playback.

NumFrames

Sets or returns the number of frames in the Sprite source.

NumFramesAcross

Sets or returns the width (in frames) of the Sprite Source.

NumFramesDown

Sets or returns the length (in frames) of the Sprite source.

PlayRate

Sets or returns the playback speed of the sprite. Can be used to speed up or slow down sprite playback or even play sprite backwards.

PlayState

Returns the playback state of the sprite, whether stopped, playing or paused.

Repeat

Sets or returns the number of times the sprite is to loop during playback

SourceURL

Sets or returns the URL that points to the sprite source image.

Time

Returns the elapsed playback time for the sprite, including looping.

TimerInterval

The length of time between frames, (in milliseconds) for the sprite's rendering.

UseColorKey

Sets or returns whether or not to use the sprite's transparency information.

Method

Description

Arc

Creates a single circular or elliptical arc.

Clear

Clears the control.

Oval

Creates an ellipse.

Pie

Creates a single circular or elliptical arc closed at the center of the bounding rectangle to form a wedge (pie) shape.

Polygon

Creates a closed polygon.

PolyLine

Creates a segmented line.

Rect

Creates a rectangle.

Rotate

Sets the rotation of the world.

RoundRect

Creates a rounded rectangle.

Scale

Sets the current scaling in the X, Y, Z axis for the world.

SetFillColor

Sets the foreground and background colors for graphic fills.

SetFillStyle

Sets the type of fill.

SetFont

Sets the font for the control.

SetGradientFill

Specifies the start and end points for a gradient fill.

SetHatchFill

Specifies whether the hatch fill is transparent.

SetIdentity

Set the object to its original state.

SetLineColor

Sets the line color for drawing graphics.

SetLineStyle

Changes the line style for the current shape.

SetGradientShape

Sets the shape of a gradient to be an outline of a polygon shape.

Text

Creates a string with the current font and color.

Transform4x4

Sets scaling, rotating, and translation information all at once, using a transform matrix.

Translate

Sets the X, Y, Z location of the world.

Property

Description

CoordinateSystem

Sets the coordinate system to use for the world

DrawingSurface

Sets or returns the drawing surface, the visible rendering of the control's contents for use in script.

ExtentHeight, ExtentWidth, ExtentLeft, ExtentTop Properties

Sets the height, width, left and top values of the structured graphic (in pixels).

MouseEventsEnabled

Sets or returns whether MouseEvents are to be processed against the Structured Graphics object.

SourceURL

Enables the Structured Graphic control to use an external file as the structured graphic primitive description.

Events

Description

OnClick

Occurs when the user has clicked the left mouse button on the element. A click event can also occur by hitting enter on an element with focus. The Click event follows the OnMouseUp event when it occurs as a result of a mouse button click.

OnDblClick

Occurs when the user has double-clicked on the element.

OnMouseDown

Occurs when the left button has gone down over the element

OnMouseMove

Occurs when the mouse has moved over the element.

OnMouseOut

Occurs when the mouse has exited the element.

OnMouseOver

Occurs when the mouse has entered the element.

OnMouseUp

Occurs when the left mouse button has gone up over the element.

<OBJECT ID=sgStarCenter2
STYLE="POSITION: absolute; HEIGHT:200;WIDTH:200;TOP:130;LEFT:215;VISIBILITY;VISIBLE; ZINDEX:1" 
CLASSID="CLSID:5FD6A143-372A-11D0-A521-0080C78FEE85">
<PARAM NAME="Line0001" VALUE="SetLineColor(255,255,0)">
<PARAM NAME="Line0002" VALUE="SetFillColor(255,255,0)">
<PARAM NAME="Line0003" VALUE="SetFillSTYLE(1)">
<PARAM NAME="Line0004" VALUE="SetLineSTYLE(1)">
<PARAM NAME="Line0005" VALUE="Oval(0,-4,75,75,0)">
</OBJECT>