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 |
Click on the headings at left for more information.
The Path Control allows you to define a path and move an object on that path. The object is called a target, and the target can be all different kinds of objects. The Path Control includes a neat variety of properties, methods, and events for you to play with. Be sure to give your objects a POSITION (either absolute or relative) in the source HTML if you plan to move them around! Check out the example of objects moving along a path, and then view the source code.
The Sequencer Control provides timing and sequencing services for action sets. Action sets are simply scripts, and the scripts can control any object on the page. You could, for example, use a sequencer to move an object across the page, rotate an object, etc. To use a sequencer control, add it to a page, and then initialize it using the onInit event. The initialization defines the action set script, the time interval between sequences, and other parameters of the At event. Check out all of the methods and events.
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 Client 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 |
| |
AutoStart |
Determines whether or not the path starts playback upon loading. |
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. |
Relative |
Determines whether the Path control starts playing from its current position or from the absolute position in the target object's coordinate space. |
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. |
TimeInterval |
Sets or returns the length of time, in seconds.milliseconds, between the path update. |
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 |
AutoStart |
Determines whether or not the sprite starts playback upon loading. |
ColorKey |
Sets the transparency color for a source image. |
FinalFrame |
Sets sprite to display designated frame when playback is stopped. |
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. |
OnMarker |
Occurs when a time marker has been reached either during sprite playback or when stopped. |
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. |
OnPlayMarker |
Occurs when a time marker is reached during sprite 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 |
FillSpline |
Creates a closed spline shape, defined by a series of points. |
Arc |
Creates a single circular or elliptical arc. |
Clear |
Clears the control (script only). |
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. |
PolySpline |
Creates an open spline shape, defined by a series of points. |
Rect |
Creates a rectangle. |
Rotate |
Sets the rotation of the world (script only). |
RoundRect |
Creates a rounded rectangle. |
Scale |
Sets the current scaling in the X,Y,Z axis for the world (script only). |
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 (script only). |
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. |
SetTextureFill |
Sets the texture source to be used to fill a structured graphics 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 (script only). |
Translate |
Sets the X, Y, Z location of the world (script only). |
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). |
HighQuality |
Turns anti-aliasing on or off. |
Image |
Fills the structured graphic shape with a DirectAnimation IDAImage (script only). |
MouseEventsEnabled |
Sets or returns whether MouseEvents are to be processed against the structured graphics object. |
PreserveAspectRation |
Sets or returns a value indicating if aspect ratio should be preserved when extents are set. |
SourceURL |
Enables the Structured Graphic Control to use an external file as the structured graphic primitive description. |
Transform |
Transforms the object using a DirectAnimation IDATransform2 behavior (script only). |
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:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <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>