Creating Custom XML Multimedia Elements

February 15, 1999

Custom Extensible Markup Language (XML) elements provide an easy mechanism for Web authors to include custom multimedia elements in HTML files without writing complex scripts every time. Instead, authors can write one script implementing the new element and reuse it as necessary. The element itself can be made highly customizable by creating properties, methods, and events associated with it.

This article shows you how to create your own custom XML elements, using a combination of existing technologies along with new ones introduced in Microsoft® Internet Explorer 5. Although brief explanations are provided, you will need an in-depth understanding of these technologies to create your own multimedia elements. In particular, you will need to have a working knowledge of scripting with Microsoft DirectAnimation™. For more information, consult the Related Topics at the end of this article.

Building a Sample Element

Suppose you want to create an XML element that represents a simple rotating image. This section explains how to create and use this new element, named IMAGESPIN, by following these steps:

Step 1: Create the HTML Component File

To create the custom IMAGESPIN element, you must create a reusable HTML component file. This file, named with the extension .htc, includes declarations for any properties, methods, and events to be supported by the new element. For example, you can declare a property and its default value using the following syntax:

<PUBLIC:PROPERTY NAME="propertyName" VALUE="defaultValue" />

The following table lists the properties that will be supported on the custom IMAGESPIN element:

Property	Type	Description	Default Value
border	Boolean	Adds a solid border around the DirectAnimation control area.	false
rotation	long	Specifies the rate at which the image rotates counterclockwise, in degrees per second.	0
src	URL	Specifies the URL of the image to display and rotate.	none

Step 2: Add Script to the Component File

Next, place the script needed to perform the element's function within a SCRIPT tag in the HTML component file. For this particular sample, the script must create an instance of the DirectAnimation control on the HTML page and apply a rotation behavior to the image, as shown in the sample code below.

<!-- imagespin.htc -->
<!-- Declare element's properties and default values -->
<PUBLIC:PROPERTY NAME="border" VALUE="false"/>
<PUBLIC:PROPERTY NAME="rotation" VALUE=0/>
<PUBLIC:PROPERTY NAME="src" />

<SCRIPT LANGUAGE="JScript">
// Create a DirectAnimation object
var oDA = document.createElement("OBJECT");
oDA.classid="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D";
oDA.height=250;                        // Height of control area
oDA.width=250;                         // Width of control area
if (border.toUpperCase() == "TRUE") {
    oDA.style.borderWidth=1;           // Set border if specified
    oDA.style.borderStyle="solid";
}
// Add the DirectAnimation object to the HTML page
window.document.body.insertBefore(oDA);
// Create a reference to the statics object (meter construction mode)
var m = oDA.MeterLibrary;                

if (src != null) {
    var fileImg = m.ImportImage(src);  // Convert into a DAImage
    if (rotation > 0) {
        // Apply a rotation behavior to the image
        var rotImg = fileImg.Transform(m.Rotate2RateDegrees(rotation));    
    }
    else {
        var rotImg = fileImg;
    }
    oDA.Image = rotImg; // Display the new rotating image
    oDA.Start();        // Start the control
}
</SCRIPT>

Although the use of DirectAnimation shown here is relatively simple, it is important to note that DirectAnimation provides a rich programming model for manipulating two-dimensional images, vector graphics, text, three-dimensional geometries, movies, and sounds. DirectAnimation also supports behaviors that encapsulate timing and event relationships between objects.

Step 3: Use the New Element in an HTML Page

Now that a component file has been created to implement the IMAGESPIN element, an HTML page can use it. The HTML file must use an XML namespace to declare the prefix the new element is defined with. Also, the HTML Component file must be associated with the new element as an Internet Explorer 5 behavior. The example shown below uses the new element to display an image that spins at a rate of 60 degrees per second.

<HTML>
<HEAD>
<XML:NAMESPACE PREFIX="da" />
<STYLE>
    @media all {
       da\:IMAGESPIN    { behavior:url(imagespin.htc); }
    }
</STYLE>
</HEAD>
<BODY>
<H2>Custom XML Element</H2>
<da:IMAGESPIN ROTATION="60" SRC="../art/da.gif" BORDER="true" />
</BODY>
</HTML>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Step 4: Add Timing to the Element with HTML+TIME

With a few modifications, the new IMAGESPIN element can be modified so that it directly supports timelines created with the new HTML+TIME technology. Using HTML+TIME, you can easily add timing and synchronization relationships between multimedia and HTML elements on a Web page.

To support timing on the IMAGESPIN element, the HTML Component file must apply the HTML+TIME timeline to the DirectAnimation control through the use of the SubstituteTime function. In effect, this function replaces the default timeline (which plays the rotation behavior forever) with an HTML+TIME timeline that contains a specific starting time and duration. The required changes appear in bold in the sample code below:

<!-- imagespin.htc -->
<!-- Declare Element's properties and default values -->
<PUBLIC:PROPERTY NAME="border" VALUE="false"/>
<PUBLIC:PROPERTY NAME="rotation" VALUE=0/>
<PUBLIC:PROPERTY NAME="src" />

<SCRIPT LANGUAGE="JScript">
// Create a DirectAnimation object
var oDA = document.createElement("OBJECT");
oDA.classid="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D";
oDA.height=250;                        // Height of control area
oDA.width=250;                         // Width of control area
if (border.toUpperCase() == "TRUE") {
    oDA.style.borderWidth=1;           // Set border if specified
    oDA.style.borderStyle="solid";
}
// Add the DirectAnimation object to the HTML page
window.document.body.insertBefore(oDA);
// Create a reference to the statics object (meter construction mode)
var m = oDA.MeterLibrary;
// Get the object that contains the HTML+TIME timeline.
// This sample assumes only one IMAGESPIN element exists on the page,
// so the variable uses first occurrence of the custom tag.
var oTime = window.document.getElementsByTagName("IMAGESPIN").item(0);               

if (src != null) {
    var fileImg = m.ImportImage(src);  // Convert into a DAImage
    if (rotation > 0) {
        // Apply a rotation behavior to the image
        var rotImg = fileImg.Transform(m.Rotate2RateDegrees(rotation));    
    }
    else {
        var rotImg = fileImg;
    }
    // Apply the new timeline to the animation
    var finalImg = rotImg.SubstituteTime(oTime.TimelineBehavior);
    oDA.Image = finalImg; // Display the new rotating image
    oDA.Start();          // Start the control
}
</SCRIPT>

By using this modified HTML Component file, you can apply HTML+TIME attributes to the IMAGESPIN element. This allows you to control when the image begins spinning, and how long it remains spinning. The following HTML sample uses HTML+TIME attributes on the element to make the image start spinning five seconds after the page is loaded and keep spinning for ten seconds. Note that to support HTML+TIME attributes, the custom element must be associated with the time behavior (#time) in addition to the HTML Component file.

<HTML>
<HEAD>
<XML:NAMESPACE PREFIX="da" />
<STYLE>
    @media all {
       da\:IMAGESPIN    { behavior:url(imagespin.htc)
                                   url(#time);}
    }
</STYLE>
<OBJECT ID="time" CLASSID="CLSID:476C391C-3E0D-11D2-B948-00C04FA32195">
</OBJECT>
</HEAD>
<BODY>
<H2>Custom XML Element</H2>
<P>Five seconds after the page loads, this image rotates for ten seconds.
</P>
<da:IMAGESPIN ROTATION="60" SRC="../art/da.gif" t:BEGIN="5" 
    t:DUR="10" />
</BODY>
</HTML>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Suppose you wanted the new IMAGESPIN element to spin in response to a user event, such as a mouse click, rather than following a predetermined schedule. Again, this is easily accomplished using HTML+TIME attributes. In this case, no changes need to be made to the HTML Component file. The following HTML sample shows how to make the image spin for five seconds when the user clicks the heading on the page.

<HTML>
<HEAD>
<XML:NAMESPACE PREFIX="da" />
<STYLE>
    @media all {
       da\:IMAGESPIN    { behavior:url(imagespin.htc)
                                   url(#time);}
    }
</STYLE>
<OBJECT ID="time" CLASSID="CLSID:476C391C-3E0D-11D2-B948-00C04FA32195">
</OBJECT>
</HEAD>
<BODY>
<H2 ID="head1">Custom XML Element</H2>
<P>Click the preceding heading to rotate this image.</P>
<da:IMAGESPIN ROTATION="60" SRC="../art/da.gif" 
    t:DUR="5" t:BEGINEVENT="head1.onclick" />
</BODY>
</HTML>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.