DirectAnimation Animated Header --Guide to Samples DirectAnimation Animated Header --Guide to Samples* Microsoft DirectAnimation SDK
 *Index  *Topic Contents
*Previous Topic: Getting Started
*Next Topic: How to Create a JScript Animation

Guide to Samples


This article 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 five 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 Docs button below the left-hand table of contents.

You can also access individual DirectAnimation samples from this Guide to Samples 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. The sample paths refer to the default sample directories create when you install the DirectX Media SDK. You can also access the samples on this Web site by clicking on the links.

When you open a sample it creates a new browser window. Only one sample window will be open at one time. If you minimize the sample window or place the sample window in the background, you have to click the sample window to bring it on top again. You would need to do this, for example, to see the sample window when you open another sample.

Samples Overview

DirectAnimation comes with a wide variety of samples that show you how to use DirectAnimation from different languages. You can cut and paste portions or all of these samples for your own animations. The samples come with a pool of media files, including MIDI, 3-D model, image, video, and sound files. These media files are used by the SDK samples, and are available for use in the DirectAnimation content only. You are not allowed to use these media files in any other fashion.

For each language, there are three categories of samples:

The DirectAnimation SDK also contains a set of samples illustrating the DirectAnimation controls.

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 sample's main HTML page. This button launches a new instance of the browser, so that you can see the narration side-by-side with the running animation.

All the examples discussed are in one of the subdirectories in Samples\DA.

JScript Samples

This section describes the JScript Samples included with DirectAnimation. Click any link to display the sample.

This section describes the following types of samples:

JScript Exercises

The JScript exercise samples are in the Samples\DA\JScript\Exercises directory. The following table lists the available JScript exercises and the concepts that they illustrate (click any link to display the sample):
JScript exercise name Description
HelloWorld.html The HelloWorld JScript sample demonstrates simple text rendering.
StartTime.html The StartTime JScript sample demonstrates how to use numbers, colors, and string behaviors together. It also demonstrates a cyclic color behavior.
ColorSwitch.html The ColorSwitch JScript sample demonstrates using Visual Basic buttons to color an animation. It also illustrates modifiable behaviors.
ColorArray.html The ColorArray JScript sample demonstrates an array with a time-varying index that is used to change colors.
Image.html The Image JScript sample demonstrates importing an image and rotating it.
ImageOsc.html The ImageOsc sample demonstrates an oscillating structured graphics image with corresponding MIDI sound.
MeterCoords.html The MeterCoords JScript sample demonstrates 2-D structured graphics that use the MeterLibrary (instead of the PixelLibrary).
PixelCoords.html The PixelCoords JScript sample demonstrates 2-D structured graphics that use the PixelLibrary (instead of the MeterLibrary).
Collage3D.html The Collage3D JScript sample demonstrates how to combine 2-D and 3-D transformations. The transforms include scaling, rotation, translation, and shear.
Movie.html The Movie JScript sample demonstrates playing a movie in a variable-sized playback window and varying the movie volume with the size of the playback.
Geometry.html The Geometry JScript sample demonstrates how to import and display an animated geometry (rotating cube), including camera, light, rendering, and 3-D transforms.
AnimatedGlow.html The AnimatedGlow JScript sample demonstrates a glow filter on a vector graphic using a montage.

JScript Templates

The JScript template samples are in the Samples\DA\JScript\Templates folder. The following table lists the available JScript templates and the concepts that they illustrate (click any link to display the sample):
JScript template name Description
Basic.html The Basic JScript sample 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 BasicDS JScript sample is the same animation as Basic but written using the drawing surface API, an API with a slightly different style.
HelloWorldJS.html The HelloWorldJS JScript sample demonstrates basic text animation as a windowless control.
Resize.html The Resize JScript sample demonstrates a DirectAnimation control that sizes itself to fit in the browser window.
Cropping.html The Cropping JScript sample demonstrates a cropped animated image that overlays another variation of itself.
Bounce.html The Bounce JScript sample demonstrates text bouncing in the browser window, even if the window is resized.
Shapes.html The Shapes JScript sample illustrates a variety of 2-D structured graphics primitives and fill styles.
AnnotatedLogo.html The AnnotatedLogo JScript sample demonstrates how to animate HTML text in a coordinated fashion.
Rotational.html The Rotational JScript sample demonstrates applying 3-D transforms to 2-D structured graphics models.
Sequencing.html The Sequencing JScript sample demonstrates the mechanisms for sequencing and animation along a timeline. It uses Duration, Repeat, Sequence, and various kinds of transforms. It sequences the transforms with a corresponding text annotation.
CoordsAndPaths.html The CoordsAndPaths JScript sample demonstrates the pixel construction mode, in which the positive y-axis points downward. It shows SlowInSlowOut interpolation and overlays on an HTML page.
AnimatedProperties.html The AnimatedProperties JScript sample demonstrates animated strings, numbers, and script callbacks.
Random.html The Random JScript sample demonstrates how to incorporate periodic randomness into scripting.
JumpURL.html The JumpURL JScript sample demonstrates a image that interacts with the mouse. When the mouse moves over it, a tip box appears and a sound plays. When you click the mouse on the box, it takes you to another Web page.
BrowserDetect.html The BrowserDetect JScript sample demonstrates how to detect the type of browser viewing the sample, and to adapt the sample to the browser.
PerspectiveImg.html The PerspectiveImg JScript sample demonstrates how to render a rotating image in 3-D perspective, while preserving the image's aspect ratios.

JScript Showcase Samples

The JScript showcase samples are in the Samples\DA\JScript\Showcase folder. The following table lists the available JScript showcase samples and the concepts that they illustrate (click any link to display the sample):
JScript showcase name Description
DxMLogoDots.html The DxMLogoDots JScript sample shows animation that is coordinated with HTML images specified by IMG tags, using dots that follow the outline of the images. It also demonstrates how to relate between the meter and pixel coordinate systems.
DxMLogoGeo.html The DxMLogoGeo JScript sample is the same as DxMLogoDots except that the dots are 3-D spotlights.
LightBox.html The LightBox JScript sample shows how to animate objects along 2-D motion paths. It 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 The LightBoxBG JScript sample is 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 The Tile JScript sample shows animated cropping, tiling, and gradient fill colors.
Async_Load.html The Async_Load JScript sample shows how to use an animation to mask download time for a large media file.
Plane3D.html The Plane3D JScript sample shows how to construct paths and objects that follow the path. The speed of the object depends on where it is on the path. It also demonstrates the PixelLibrary.
WebVCR.html The WebVCR JScript sample demonstrates a custom VCR for starting and stopping audio and video playback in a web page, using dynamic HTML.
Eyes.html The Eyes JScript sample shows an animation that tracks mouse movement.
MSWorldLogo.html The MSWorldLogo JScript sample shows how DirectAnimation can be used to create Web banners or Web-based advertisements using 3-D objects and vector graphics in an intuitive way.

VBScript Samples

This section describes the VBScript Samples included with DirectAnimation. Click any link to display the sample.

This section describes the following types of samples:

VBScript Templates

The VBScript template samples are in the Samples\DA\VBScript\Templates folder. The following table lists the available VBScript templates and the concepts that they illustrate (click any link to display the sample):
VBScript template name Description
HelloWorldVBS.html The HelloWorld VBScript sample demonstrates basic text animation as a windowless control.
Basic.html The Basic VBScript sample 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 BasicDS VBScript sample is the same animation as Basic but written using the drawing surface API, which has a slightly different style.
Movie.html The Movie VBScript sample demonstrates how to play a movie.
AudioMixing.html The AudioMixing VBScript sample demonstrates how to mix audio. The volume and panning of three sounds are controlled by the positions of the scroll bars.
ButtonSwitch The ButtonSwitch VBScript sample demonstrates how to use modifiable behaviors and buttons.
ScrollSwitch The ScrollSwitch VBScript sample demonstrates how to use modifiable behaviors and scroll bars.
SplineLogo.html The SplineLogo VBScript sample demonstrates a spline that is used both as a boundary of a shape and as an animation path.
Callback.html The Callback VBScript sample demonstrates how to use a scripting callback with two buttons and a piece of HTML text. Pressing the buttons animates the buttons in 3-D, emits a sound, and moves the HTML text in direction the button indicates.
AnimatedProperties.html The AnimatedProperties VBScript sample demonstrates animated strings, numbers, and script callbacks.

VBScript Showcase Samples

The VBScript showcase samples are in the Samples\DA\VBScript\Showcase. The following table lists the available VBScript showcase samples and the concepts that they illustrate (click any link to display the sample):
VBScript showcase name Description
Runners.html The Runners VBScript sample demonstrates instantiating and sequencing two structured graphics models.
Coffee.html The Coffee VBScript sample demonstrates how to use montages (2.5-D images).
Pick3.html The Pick3 VBScript sample demonstrates animated and interactive 3-D .x models rendered as windowless controls over the HTML page.
Clock.html The Clock VBScript sample demonstrates time-accurate animation of a clock with a radially filled background.
Curves.html The Curves VBScript sample demonstrates 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 The MsCubes VBScript sample constructs 3-D animate cubes with motion GIF texturing. A mouse click stops and starts one aspect of the animation.
DancingTrapzoids.html The DancingTrapzoids VBScript sample shows rectangles with time-varying colors that chase each other along a trajectory.

Control Samples

All of the control samples are contained in the Samples\DA\Controls folder. The following table shows the available controls samples (click any link to display the sample):
Control sample Description
AniFilt.htm The AniFilt DirectAnimation control sample demonstrates how to use dynamic filtering for a cut-out effect on text.
Buttons.htm The Buttons DirectAnimation control sample demonstrates three-state buttons using sprites.
Clock.htm The Clock DirectAnimation control sample demonstrates time-accurate animation of a clock with a radially filled background.
Complex.htm The Complex DirectAnimation control sample demonstrates structured graphics.
Count.htm The Count DirectAnimation control sample demonstrates using structured graphics and sequencing to control multimedia event timing.
Filter.htm The Filter DirectAnimation control sample demonstrates using filters, including filter information.
Globe.htm The Globe DirectAnimation control sample demonstrates mouse interaction with sprites.
Mega.htm The Mega DirectAnimation control sample demonstrates a splash page using structured graphics.
Path.htm The Path DirectAnimation control sample demonstrates path controls that move objects around a page.
SG-DrawingSurface.htm The SG-DrawingSurface DirectAnimation control sample demonstrates using the DirectAnimation library for Drawing Surface operations.
SG-Preserve.htm The SG-Preserve DirectAnimation control sample demonstrates how to preserve an image's aspect ratio as the window is resized.
SpinIE.htm The SpinIE DirectAnimation control sample demonstrates spinning the letter E in 3-D.
Textmask.htm The TextMask DirectAnimation control sample demonstrates how to use text for clipping animate structured graphics on an image background.
Yoyo.htm The Yoyo DirectAnimation control sample demonstrates mouse interaction with a sprite.

Java Samples

This section describes the Java Samples included with DirectAnimation. Click any link to display the sample.

This section describes the following types of samples:

Java Exercises

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\Java\Exercises folder. The following table lists the available Java exercises and the concepts that they illustrate:
Java exercise directory Description
Apple The Apple Java sample imports three images, tiles one for the background, animates the transform and opacity of a second, and layers the three images on top of one another.
Geometry The Geometry Java sample imports and spins a cube on a blue background.
Hello The Hello Java sample displays a "Hello, World" message on a blue background.
HelloBvr The HelloBvr Java sample displays a "Hello, World" message with a time-varying color.
HelloRBvr The HelloRBvr Java sample displays a "Hello, World" message with a time-varying color that reacts to a mouse click by switching to red.
HelloCycle The HelloCycle Java sample displays a "Hello, World" message with a color that cycles between a time-varying color and a red color when the user clicks the left mouse button.
Image The Image Java sample imports an image and oscillates an image on a black background.
Import The Import Java sample imports a media file (an image) and displays the result.
Movie The Movie Java sample imports and plays a movie repeatedly.
Sound The Sound Java sample oscillates an image on a black background and attenuates a looping sound.
Switch The Switch Java sample 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

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\Java\Templates folder. The following table lists the available Java templates and the concepts that they illustrate:
Java template directory Description
Async_Load The Async_Load Java sample demonstrates how to use an animation to mask download time for a large media file.
BasicApplet The BasicApplet Java sample demonstrates a minimal applet.
ButtonPick The ButtonPick Java sample demonstrates a button that changes color when the mouse pointer is over it or when the user clicks a mouse button.
ExtendedApplet The ExtendedApplet Java sample 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 The GeoApplet1 Java sample 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 The GeoApplet2 Java sample demonstrates an applet that self-controls the frame generation through the tick interface and animates primarily through switching behaviors. Effectively, this looks like a traditional retained mode API such as Direct3D Retained Mode.
GeometryDrag The GeometryDrag Java sample demonstrates a draggable geometry.
IE4_Windowless The IE4_Windowless Java sample demonstrates how to construct a windowless control based on a DirectAnimation Java applet.
ImageDrag The ImageDrag Java sample demonstrates a draggable image.
JumpURL The JumpURL Java sample demonstrates how to create a pickable image that jumps to a Web site when clicked, and plays a sound and displays a message when the mouse pointer is over it.
Splines The Splines Java sample demonstrates how to use splines as paths and behaviors.
Using_AFCMenus The Using_AFCMenus Java sample demonstrates using AFC (Applet Foundation Classes) to create menus in DirectAnimation.
Using_AFCScrollBar The Using_AFCScrollBar Java sample demonstrates using AFC (Applet Foundation Classes) to create a scroll bar in DirectAnimation.
Using_VBScript The Using_VBScript Java sample demonstrates using VBScript objects in conjunction with an animation applet.
VCR The VCR Java sample demonstrates how to control the rate of video playback.

Java Showcase Samples

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\Java\Showcase folder. The following table lists the available Java showcase samples and the concepts that they illustrate:
Java showcase directory Description
Album3D The Album3D Java sample constructs a 3-D photo album that enables you to flip through the pages. It shows a state machine that controls the interaction with the album, including the visual animation and corresponding stereo sound effects.
Americana The Americana Java sample contrasts autonomous animation and interaction. It shows composition of sprites, how to use interactive sprite animation as a texture on 3-D objects, and the use of Visual Basic buttons to interact with the animation.
CityScape The CityScape Java sample shows 3-D overlaying a sprite animation with hot spots, live URLs, and sound effects.
Coffee The Coffee Java sample shows animated montages with sound.
Encarta The Encarta Java sample illustrates a 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. It 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 The FifteenPuzzle Java sample 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 The GeoImage Java sample shows 2-D/3-D interplay and the synchronization between a visual animation and a sound effect.
Lighthouse The Lighthouse Java sample 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 The Magnify Java sample integrates 2-D and 3-D images and sound, and creates a magnifying glass controlled by the user. It illustrates compound compositions in DirectAnimation, first in the magnifying glass and second in texturing the animations on the 3-D parts.
MsCubes The MsCubes Java sample illustrates tumbling cubes textured with motion .gif files. Includes MIDI sound.
Pick3 The Pick3 Java sample demonstrates 3-D picking on a significantly changing image.
Solar The Solar Java sample shows several textured 3-D objects with sound sources, illustrates spatialization and mixing of sound, and has a simple 2-D user interface for restricted manipulation of the camera.
Tile The Tile Java sample demonstrates animated cropping and tiling.
Union The Union Java sample demonstrates a cluster of geometry with color and transform behaviors, and a simple looping background sound.

Chess Application

The Java Chess application demonstrates how to import and view an 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 out.

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

*Top of Page