This topic contains descriptions of all the templates, exercises, and showcase samples, plus step-by-step procedures describing how to perform basic Microsoft® DirectAnimation tasks.
To go directly to the main sample page for each of the three languages and the DirectAnimation controls, select one of the following:
On the sample main pages you will see a list of all the samples available of that type. To return to the DirectAnimation documentation, choose the Documentation button in the left-hand table of contents.
You can also access individual DirectAnimation samples from this topic by clicking the name of the sample. This will display the sample, but will not take you out of the DirectAnimation documentation and will not display a table of contents listing all the language samples.
See the following sections for descriptions of the samples and step-by-step instructions for building animations.
DirectAnimation comes with a wide variety of samples that show you how to use DirectAnimation from different host languages. The samples are heavily commented and can be used as an extension to the documentation. The samples come with a pool of media files, including MIDI, 3-D model, image, video, and sound files. These are used by the SDK samples, and are available to use in the DirectAnimation content only. You are not allowed to use these media files in any other fashion.
For each host language, there are three categories of samples:
The DirectAnimation SDK also contains a set of samples illustrating the DirectAnimation controls, and one demonstrating the ActiveMovie control.
In addition, the DirectAnimation SDK provides tutorials. Some of the Java showcase samples and most of the Java templates have tutorials that show step-by-step details of their construction. Samples that have associated tutorials include a button labeled Info on the main HTML page of the sample. This button launches a new instance of the browser, so that it is possible to see the narration side-by-side with the running animation.
All the examples discussed are in one of the subdirectories in Samples\DA.
This section describes the JScript Samples included with DirectAnimation. Click the link to display the sample.
The JScript exercises samples are in the Samples\DA directory JScript\Exercises. The following table lists the available JScript exercises and the concepts that they illustrate:
JScript Exercise Name | Description |
HelloWorld.html | Demonstrates simple text rendering. |
StartTime.html | Demonstrates how to use numbers, colors, and string behaviors together. Also demonstrates a cyclic color behavior. |
ColorSwitch.html | Demonstrates using Visual Basic buttons to color an animation. Also illustrates ModifiableBehaviors. |
ColorArray.html | Demonstrates an array with a time-varying index that is used to change colors. |
Image.html | Demonstrates importing an image and rotating it. |
ImageOsc.html | Demonstrates an oscillating structured graphics image with corresponding MIDI sound. |
MeterCoords.html | Demonstrates 2-D structured graphics that use the MeterLibrary (instead of the PixelLibrary). |
PixelCoords.html | Demonstrates 2-D structured graphics that use the PixelLibrary (instead of the MeterLibrary). |
Collage3D.html | Demonstrates how to combine 2-D and 3-D transformations. The transforms include scaling, rotation, translation, and shear. |
Movie.html | Demonstrates playing a movie in a variable-sized playback window and varying the movie volume with the size of the playback. |
Geometry.html | Demonstrates how to import and display an animated geometry (rotating cube), including camera, light, rendering, and 3-D transforms. |
AnimatedGlow.html | Demonstrates a glow filter on a vector graphic using a montage. |
The JScript template samples are in the Samples\DA directory JScript\Templates. The following table lists the available JScript templates and the concepts that they illustrate:
JScript Template Name | Description |
Basic.html | Demonstrates a simple animation (rotating oval) using the core DirectAnimation library. This is useful as a starting point for writing new content. |
BasicDS.html | The same animation as Basic but written using the drawing surface API, an API with a slightly different style. |
HelloWorldJS.html | Demonstrates basic text animation as a windowless control. |
Resize.html | Demonstrates a DirectAnimation control that sizes itself to fit in the browser window. |
Cropping.html | Demonstrates a a cropped animated image that overlays another variation of itself. |
Bounce.html | Demonstrates text bouncing in the browser window even if the window is resized. |
Shapes.html | Illustrates a variety of 2-D structured graphics primitives and fill styles. |
AnnotatedLogo.html | Demonstrates how to animate HTML text in a coordinated fashion. |
Rotational.html | Demonstrates applying 3-D transforms to 2-D structured graphics models. |
Sequencing.html | Demonstrates the mechanisms for sequencing and animation along a timeline. Uses Duration, Repeat,Sequence, and various kinds of transforms. Sequences the transforms with a cooresponding text annotation. |
CoordsAndPaths.html | Demonstrates the Pixel construction mode, in which the positive Y axis points downward. Shows SlowInSlowOut interpolation and overlays on an HTML page. |
AnimatedProperties.html | Demonstrates animated strings, numbers, and script callbacks. |
Random.html | Demonstrates how to incorporate periodic randomness into scripting. |
JumpURL.html | Demonstrates a image that interacts with the mouse. When the mouse moves over it, a tip box pops up and a sound plays. When the mouse clicks on it, it takes you to another Web page. |
BrowserDetect.html | Demonstrates how to detect the type of browser viewing the sample, and to adapt the sample to the browser. |
PerspectiveImg.html | Demonstrates how to render a rotating image in 3-D perspective, while preserving the aspect ratios of the image. |
The JScript showcase samples are in the Samples\DA directory JScript\Showcase. The following table lists the available JScript showcase samples and the concepts that they illustrate:
JScript Showcase Name | Description |
DxMLogoDots.html | Shows animation that is coordinated with HTML images specified by IMG tags, using dots that follow the outline of the images. Also demonstrates how to relate between the meter and pixel coordinate systems. |
DxMLogoGeo.html | Same as DxMLogoDots except that the dots are 3-D spotlights. |
LightBox.html | Shows how to animate objects along 2-D motion paths. Attaches 3-D spotlights shining into a room. Pressing the left mouse button shows the paths. Two animate points control the audio volume and pan parameters of a looping MIDI sound. |
LightBoxBG.html | A variation of LightBox, where only the image of the lit room is tiled and used as a background for an HTML page. |
Tile.html | Shows animate cropping, tiling, and gradient fill colors. |
Async_Load.html | Shows how to use an animation to mask download time for a large media file. |
Plane3D.html | Demonstrates how to construct paths and objects that follow the path. The speed of the object depends on where it is on the path. Also demonstrates the PixelLibrary. |
WebVCR.html | Demonstrates a custom VCR for starting and stopping audio and video playback in a web page, using Dynamic HTML. |
Eyes.html | Demonstrates an animation that tracks mouse movement. |
This section describes the VBScript Samples included with DirectAnimation. Click the link to display the sample.
The VBScript template samples are in the Samples\DA directory VBScript\Templates. The following table lists the available VBScript templates and the concepts that they illustrate:
VBScript Template Name | Description |
HelloWorldVBS.html | Demonstrates basic text animation as a windowless control. |
Basic.html | Demonstrates a simple animation (rotating oval) using the core DirectAnimation library. This is useful as a starting point for writing new content. |
BasicDS.html | The same animation as Basic but written using the drawing surface API, an API with a slightly different style. |
Movie.html | Demonstrates how to play a movie. |
AudioMixing.html | Demonstrates how to mix audio. The volume and panning of three sounds are controlled by the positions of the scrollbars. |
ButtonSwitch | Demonstrates how to use modifiable behaviors and buttons. |
ScrollSwitch | Demonstrates how to use modifiable behaviors and scrollbars. |
SplineLogo.html | Demonstrates a spline that is used both as a boundary of a shape and as an animation path. |
Callback.html | Demonstrates how to use a scripting with two buttons and a piece of HTML text. Pressing the buttons animates in 3-D, emits a sound, and moves the HTML text in corresponding direction. |
AnimatedProperties.html | Demonstrates animated strings, numbers, and script callbacks. |
The VBScript showcase samples are in the Samples\DA directory VBScript\Templates. The following table lists the available VBScript showcase samples and the concepts that they illustrate:
VBScript Showcase Name | Description |
Runners.html | Demonstrates instantiating and sequencing two structured graphics models. |
Coffee.html | Illustrates how to use montages (2.5-D images). |
Pick3.html | Demonstrates animated and interactive 3-D .X models rendered as windowless controls over the HTML page. |
Clock.html | Illustrates time-accurate animation of a clock with a radially filled background. |
Curves.html | Illustrates time-varying cubic B-spline curves that are used to clip an image whose opacity is also time-varying. The end result is a windowless control on top of HTML text. |
MsCubes.html | Constructs 3-D animate cubes with motion GIF texturing. A button press stops and starts one aspect of the animation. |
DancingTrapzoids.html | Shows rectangles with time-varying colors that chase each other along a trajectory. |
All of the Control samples are contained in the Samples\DA directory Controls. The available controls samples are:
Control Sample | Description |
AniFilt.htm | Illustrates how to use dynamic filtering for a cut-out effect on text. |
Buttons.htm | Illustrates three-state buttons using sprites. |
Clock.htm | Illustrates time-accurate animation of a clock with a radially filled background. |
Complex.htm | Illustrates structured graphics. |
Count.htm | Illustrates using structured graphics and sequencing to control multimedia event timing. |
Filter.htm | lllustrates using filters including filter information. |
Globe.htm | Illustrates user-interaction with sprites. |
Mega.htm | Illustrates a splash page using structured graphics. |
Path.htm | Illustrates path controls that move objects around a page. |
SG-DrawingSurface.htm | Illustrates using the DirectAnimation library for DrawingSurface operations. |
SG-Preserve.htm | Illustrates how to preserve aspect ratio of an image as the window is resized. |
SpinIE.htm | Illustrates spinning the letter E in 3-D. |
Textmask.htm | Illustrates how to use text for clipping animate structured graphics on an image background. |
Yoyo.htm | Illustrates mouse interaction with a sprite. |
This section describes the Java Samples included with DirectAnimation. Click the links to display the sample.
Java exercises provide the Java class files and an HTML file to display the applet. You can run the samples without compiling, but if you modify a sample for your own uses you will need to recompile the Java class files. These samples are subdirectories contained in the Samples\DA directory Java\Exercises. The following table lists the available Java exercises and the concepts that they illustrate:
Java Exercise Directory | Description |
Apple | Imports three images, tiles one for the background, and animates the transform and opacity of a second, and layers the three images on top of one another. |
Geometry | Imports and spins a cube on a blue background. |
Hello | Displays a "Hello, World" message on a blue background. |
HelloBvr | Displays a "Hello, World" message with a time-varying color. |
HelloCycle | Displays a "Hello, World" message with a color that cycles between a time-varying color and a red color when the left mouse button is pressed. |
HelloRBvr | Displays a "Hello, World" message with a time-varying color that reacts to a left mouse button press by switching to red. |
Image | Imports an image and spins it on a blue background. |
Import | Imports a media file (an image) and displays the result. |
Movie | Imports and plays a movie repeatedly. |
Sound | Oscillates an image on a black background and attenuates a looping sound. |
Switch | Demonstrates the switcher/switching functionality, in this case an image and a sound behavior that are switched to new values in reaction to external events. |
Java templates provide the Java class files and an HTML file to display the applet. You can run the samples without compiling, but if you modify a sample for your own uses you will need to recompile the Java class files. These samples are subdirectories contained in the Samples\DA directory Java\Templates. The following table lists the available Java templates and the concepts that they illustrate:
Java Template Directory | Description |
Async_Load | Demonstrates how to use an animation to mask download time for a large media file. |
BasicApplet | Demonstrates a minimal applet. |
ButtonPick | Demonstrates a button that changes color when the mouse pointer is over it or when the user clicks a mouse button. |
ExtendedApplet | Demonstrates a basic applet with an animated two-dimensional (2-D) image. This includes initialization, creating the model, and scaling the image to fit the size of the applet's window. |
GeoApplet1 | Demonstrates a basic applet with an animated geometry. It includes the use of viewport dimensions to scale the geometry, and basic camera settings to render an animated geometry. |
GeoApplet2 | Demonstrates an applet that self-controls the frame generation through the tick interface and animates primarily through switching behaviors. Effectively this will look like a traditional retained mode API such as Direct3D Retained Mode. |
GeometryDrag | Demonstrates a draggable geometry. |
IE4_Windowless | Demonstrates how to construct a windowless control based on a DirectAnimation Java applet. |
ImageDrag | Demonstrates a draggable image. |
JumpURL | Demonstrates how to create a pickable image that jumps to a website when clicked, and plays a sound and displays a message when the mouse is over it. |
Splines | Demonstrates how to use splines as paths and as behaviors. |
Using_AFCMenus | Demonstrates using AFC (Applet Foundation Classes) to create menus in DirectAnimation. |
Using_AFCScrollBar | Demonstrates using AFC (Applet Foundation Classes) to create a scrollbar in DirectAnimation. |
Using_VBScript | Demonstrates using VBScript objects in conjunction with an animation applet. |
VCR | Demonstrates how to control the rate of video playback. |
Java showcase samples provide the Java class files and an HTML file to display the applet. You can run the samples without compiling, but if you modify a sample for your own uses you will need to recompile the Java class files.
These samples are subdirectories contained in the Samples\DA directory Java\Showcase. The following table lists the available Java showcase samples and the concepts that they illustrate:
Java Showcase Directory | Description |
Album3D | A sample for a 3-D photo album that allows you to flip through the pages. Shows a state machine that controls the interaction with the album, including the visual animation and corresponding stereo sound effects. |
Americana | Contrasts autonomous animation and interaction. Shows composition of sprites, how to use interactive sprite animation as a texture on 3-D objects, the use of Visual Basic buttons to interact with the animation. |
CityScape | Shows 3-D overlaying a sprite animation with hot spots, live URLs, and sound effects. |
Coffee | Shows animated montages with sound. |
Encarta | Illustrates a PointCast-style streaming advertisement. Features include 2-D/3-D interplay, including the use of interactive animations as textures in 3-D, punctuation of the advertisement with MIDI audio, and asynchronous download of media for fast startup time. Also illustrates 3-D animation with audio and camera, 2-D sprite animation with audio and affine transforms applied to sprites, 2-D vector graphics with interactivity, and video with a control panel for play, pause, fast forward, and rewind. |
FifteenPuzzle | Constructs a classic 15-image sorting puzzle using video, 2-D, and 3-D animations as images on the puzzle, which also has a 3-D mode. |
GeoImage | Shows 2-D/3-D interplay and the synchronization between a visual animation and a sound effect. |
Lighthouse | Illustrates the use of 3-D in a 2-D composition space by adding 3-D animate and interactive elements to a sprite animation background. This sample also illustrates the use of synthetic sound for the ocean ambient sound. |
Magnify | Integrates 2-D and 3-D images and sound, and creates a magnifying glass controlled by the user. Illustrates compound compositions in DirectAnimation, first in the magnifying glass and second in texturing the animations on the 3-D parts. |
MsCubes | Illustrates tumbling cubes textured with motion .gif files. Includes MIDI sound. |
Pick3 | Demonstrates 3-D picking on a significantly changing image. |
Solar | Shows several textured 3-D objects with sound sources, illustrates spatialization and mixing of sound, and a simple 2-D user interface for restricted manipulation of the camera. |
Tile | Demonstrates animated cropping and tiling. |
Union | Demonstrates a cluster of geometry with color and transform behaviors, and a simple looping background sound. |
The Java Chess application demonstrates how to import and view and animated playback of chess games from PGN (portable Game Notation) files. You can move forward and backward in the games, rotate the board, and zoom in or zoom out.
The DirectAnimation library works with the DirectAnimation integrated-media control (DAViewerControl). Library calls are made through a scripting language, such as JScript or VBScript, to construct an animation and play it from an HTML file.
The following steps show how to construct a simple DirectAnimation control in JScript.
<DIV ID=controlDiv> <OBJECT ID="DAControl" STYLE="position:absolute; left:10; top:10;width:500;height:450" CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D"> </OBJECT> </DIV>
<SCRIPT LANGUAGE="JScript"> <!--
m = DAControl.PixelLibrary;
or
m = DAControl.MeterLibrary;
The variable m is shorthand for the DAStatics Library. Every function and property that is in that library needs to be preceded by this variable so the interpreter knows where to find them.
DAControl.Image = m.SolidColorImage(m.Blue);
DAControl.Start();
//--> </SCRIPT>
The DirectAnimation library works with the DirectAnimation integrated-media control (DAViewerControl). Library calls are made through a scripting language, such as JScript or VBScript, to construct an animation and play it from an HTML file.
To construct a simple DirectAnimation control in VBScript:
<OBJECT ID="DAMyCtl" STYLE="position:absolute; left:30%; top:100;width:300;height:300" CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D"> </OBJECT>
<SCRIPT LANGUAGE="VBScript"> <!--
Set m = DAMyCtl.PixelLibrary
or
Set m = DAMyCtl.MeterLibrary
DAMyCtl.Image = m.SolidColorImage(m.Blue)
DAMyCtl.Start
--> </SCRIPT>
This section discusses two methods you can use to build a DirectAnimation Java applet or application.
In Microsoft Visual J++:
With the Jvc compiler from the command line:
The Jvc.exe Java compiler is delivered with Visual J++ and the Microsoft SDK for Java.
set path=c:\"program files"\devstudio\sharedide\bin
or:
set path=c:\java\sdk\bin
jvc *.java
The class files will be generated. No test HTML will be generated.
With NMAKE and a sample or template makefile
set path=c:\"program files"\devstudio\vc\bin
set path=c:\"program files"\devstudio\sharedide\bin
NMAKE
See the BasicApplet.java file in Samples\DA\Java\Templates\BasicApplet.
Every DirectAnimation applet has two main pieces: the DXMApplet class and the Model class. The following steps show how to construct and initialize a simple DirectAnimation applet.
import com.ms.dxmedia.*;
If you import multimedia files using URLs, you must also import the Java libraries with:
import java.net.*;
// // Class: MyApplet // class MyApplet extends DXMApplet { public void init() { super.init() ; // Now set the model. setModel(new MyModel()); } }
// // Class: MyModel // class MyModel extends Model { public void createModel(BvrsToRun blist){ // Set the image that actually gets displayed setImage(solidColorImage(blue)); } }
<title> My Applet </title> <hr> <applet code=MyApplet.class width=200 height=200> </applet> <hr>
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.