 | ||
|
| ||
| ||
|
| ||
February 15, 1999
Microsoft® DirectAnimation™ is a run-time application for building interactive, media-rich, animated content. DirectAnimation provides the ability to combine different media types (two-dimensional images, three-dimensional geometries, sounds, and movies) along a timeline and with events, either for deployment on the Web or for stand-alone applications. The integration of media is made easy because DirectAnimation presents a common and consistent programming model for all media types.
HTML authors can add multimedia and animation to their pages by using the DirectAnimation multimedia controls without programming at all. You can also animate HTML pages by using Microsoft Visual Basic® Scripting Edition (VBScript), Microsoft JScript® and Java applets. Finally, Java, Visual Basic, and C++ application programmers can develop Microsoft ActiveX® controls or full applications. Thus, DirectAnimation provides multimedia tools that scale from the HTML author to the C++ programmer.
DirectAnimation supports a broad set of functionality for mixed-media animation, including:
With DirectAnimation, you can create a rich interactive animation that draws on both synthetic media (such as 3-D graphics) and recorded media (such as audio and video). For example, you can navigate a 3-D space to inspect a collection of museum items or commercial products. You can implement spatial navigation by using position and orientation to index different items represented as images and video clips.
This guide contains suggestions on how to create your content. For complete information about DirectAnimation, see the DirectAnimation SDK documentation 
. After you become familiar with the basic programming concepts in the SDK, read the Animation
Primer section of the SDK, which discusses how to use animation features and addresses common issues and questions brought up by DirectAnimation developers.
For further help, consult the DirectAnimation newsgroup on the msnews.microsoft.com news server: microsoft.public.multimedia.directx.danimation.programming.
This article contains the following introductory sections.
By using DirectAnimation, you can create content that incorporates different types of media and provides an interactive experience accessible to a large number of Web users. With the features introduced with Microsoft Internet Explorer version 5, you can create content that pushes the creative envelope, both in terms of the animations you can create with your own geometries, shadows, texturing, movement, and timing, and in terms of how well you can control your animation to provide the highest performance and an optimal user experience in myriad environments.
To give you an idea of things you can do with DirectAnimation, consider the following example where every click on the green area causes a flower to grow. You can watch the progress of several animation behaviors over time, each initiated by user input. The example creates and reuses the same flower, inserting it into the animation at the location specified by the mouse click.
DirectAnimation was first released with Internet Explorer 4.0 and Microsoft Windows® 98. A second version was shipped as part of the Microsoft DirectX® media version 6.0 release. An update will ship with Internet Explorer 5 and Windows 2000. Newer versions are backward compatible, meaning that you can create content that runs on older versions as well as new versions. With each new version capabilities were added, bugs were fixed, and performance has steadily improved. The following list shows a breakdown of the capabilities.
The most common way to use DirectAnimation is to create an instance of one of the Microsoft ActiveX® controls for DirectAnimation, either windowed or windowless, in a Web page, along with some script to define the animation. The following code shows how to create the two types of controls.
<OBJECT ID="windowless"
STYLE="z-index: -1"
CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D">
</OBJECT>
<OBJECT ID="windowed"
CLASSID="CLSID:69AD90EF-1C20-11d1-8801-00C04FC29D46">
</OBJECT>
Note You can only use 3-D hardware acceleration with the windowed control.
You need to use the windowless control if you have dynamic HTML content that overlaps your animation content on the the same page (in terms of a region in the page). Otherwise, you will get better performance by using the windowed control. Usually, it is better to have just one control per page and share it among all your animation elements. DirectAnimation provides a robust set of operations for layout of elements.
Alternatively, you can create a custom ActiveX control (or Netscape plug-in) that calls the DirectAnimation run-time application directly from C++ or another high-level language that can interoperate with COM. For example, some developers do this to read in their proprietary file formats and then create the DirectAnimation model based on that.
When using the controls, the first step is to access the DirectAnimation library, in order to use its functions. In all the examples in the DirectAnimation SDK, the library is referred to by the variable m, as seen in the following short example.
<SCRIPT LANGUAGE="JScript">
<!--
// The DirectAnimation library
m = windowed.MeterLibrary;
// This example displays the DirectAnimation version number.
txtImg = m.StringImage(m.VersionString, m.DefaultFont);
// Assign the animation back to the control and start it.
windowed.Image = m.Overlay(txtImg,m.SolidColorImage(m.White));
windowed.Start();
-->
</SCRIPT>
In the preceding example, m.VersionString gives you back a string containing the version of DirectAnimation. When creating content that takes advantage of new features, you need to make sure you use the VersionString property to check for the version number of the DirectAnimation run-time application and use only the capabilities available on that version, as shown in the following example.
if( m.VersionString == "5.01.15.0828") {
// This is the Internet Explorer 4.0
} else if( m.VersionString == "5.01.15.1106") {
// This is the Internet Explorer 4.01 and Windows 98 release.
} else if( m.VersionString == "6.00.03.0518") {
// This is the DirectX 6.0 release
} // else version numbers 6.00.06.xxx and higher
// are Internet Explorer 5/Windows 2000 versions
DirectX media version 6.0 introduced a new DANumber behavior, ViewFrameRate, which represents the frame rate of the animation. You can use this behavior to regulate the complexity of your animation to achieve a certain frame rate, or to determine whether you should add or remove objects from the scene. This helps you create content that takes advantage of the capabilities of high-end hardware, giving users with those machines an optimal experience while still enabling users with older machines to experience your site.
As a simple example, you could apply textures to a 3-D object only when the frame rate is more than 15 frames per second, as shown in the following code.
simpleGeo = m.ImportGeometry("car.x");
texturedGeo = simpleGeo.TextureImage(carImg);
finalGeo = m.Cond( m.GT(m.ViewFrameRate, m.DANumber(15)),
texturedGeo, simpleGeo)
If the frame rate is greater than 15 frames per second, finalGeo is set to texturedGeo, the geometry with texture. If the frame rate is less than 15, finalGeo is set to simpleGeo.
The resulting geometry behavior, finalGeo, contains the logic that determines which geometry will be used, based on the frame rate of the animation.
You can use this same construct to turn anti-aliasing off for 2-D primitives, as shown in the following code.
smartStyle = m.Cond( m.GT(m.ViewFrameRate, m.DANumber(15)),
m.DefaultStyle.AntiAliasing(1),
m.DefaultStyle);
rectImg = myRectPath.Draw(smartStyle );
If the frame rate is greater than 15 frames per second, use anti-aliasing. If the frame rate is less than 15, don't use anti-aliasing and increase the speed.
You can also rely on the same mechanism to decide whether to display shadows for 3-D geometries, by controlling whether the shadow is added to the scene. There are many other situations where you can apply this same construct, depending on the content you are building.
There are two basic ways to change an animation while it runs. You can build the change as part of the animation itself, by using Until or Cond statements. Or, you can use behavior objects created with ModifiableBehavior, along with the SwitchTo call.
Typically, it is better to build the changes as part of your animation, relying on Until or Cond, because this leads to more efficient execution and has less overhead. The preceding examples illustrated the use of Cond. Until is very similar to Cond, except that it is based on events (and as such is evaluated only once).
UntilNotify and UntilNotifyScript are derived from Until and cause the animation to call back into your notifier function when the specified event occurs. From within your notifier, you can return a different behavior; or, after making changes to the model or updating some data specific to your content, you can return the same behavior that was passed in. UntilNotifyScript does involve the overhead of loading and calling the script engine. In general, if you are not executing a lot of script, this is not very costly.
The following example shows a notifier used in conjunction with UntilNotifyScript.
function handleEvent(eventData, currentBehavior, View){
// Change something external to the animation, in this case DHTML.
document.all["Status"].innerText = "Event Received";
// Don't change the animation in this example, but could pass back
// a different behavior if desired
return currentBehavior;
}
In some cases, when using Until, you might need to trigger changes external to the animation. You can do this by using AppTriggeredEvent, which fires an event whenever you call the TriggerEvent function from code outside the animation.
Finally, you can use modifiable behaviors. After you have constructed a behavior with ModifiableBehavior, you can change it at any time by calling the SwitchTo function on the behavior.
Did you find this article useful? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top