## 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:

- JScript Samples Main Page
- VBScript Samples Main Page
- Control Samples Main Page
- Java Samples Main Page
- Visual Basic Samples Main Page
- C++ Samples Main Page

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.

- Samples Overview
- JScript Samples
- VBScript Samples
- Control Samples
- Java Samples
- How to Create a JScript Animation
- How to Create a VBScript Animation
- How to Build a DirectAnimation Java Applet or Application
- How to Write a DirectAnimation Java Applet
- How to Build the DirectAnimation C++ Samples that Render to DirectDraw Surfaces
- How to Build the DirectAnimation C++ Samples that Use the Windowed Control

### 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:

- Exercises: Illustrate basic use of DirectAnimation at an introductory level.
- Templates: Provide code that implements common DirectAnimation tasks, such as how to asynchronously download media, use the pixel construction mode, animate HTML and other controls, and sequence animation behaviors along a timeline.
- Showcase samples: Demonstrate the breadth of features in the system. Some of these samples have real-life applications, such as advertising or education.

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
- JScript Templates
- JScript Showcase 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
- VBScript Showcase 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 Templates
- Java Showcase Samples
- Chess Application

#### 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 (click any link to display the sample):

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.
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.
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.
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 (click any link to display the sample):

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 (click any link to display the sample):

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.

© 1997 Microsoft Corporation. All rights reserved. Terms of Use.