Guide to Samples


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.

Samples Overview

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.

JScript Samples

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

JScript Exercises

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.

JScript Templates

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.

JScript Showcase Samples

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.

VBScript Samples

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

VBScript Templates

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.

VBScript Showcase Samples

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.

Control Samples

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.

Java Samples

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

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

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

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.

Java Chess Application

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.

How to Create a JScript Animation

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.

  1. In your HTML file, declare your DAViewerControl object. The object's name can be anything. Here it is DAControl. The CLSID must be as shown:
    <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>
    
  2. Define your script language.
    <SCRIPT LANGUAGE="JScript">
    <!--
    
  3. Extract either the <PixelLibrary or MeterLibrary from your control.
       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.

  4. Write your code. When you have created the image or sound you want to display (which can be as elaborate as you like), set it to the DAViewerControl's Image property or Sound property. In this case, the Image property is set to a solid blue plane that covers the screen:
       DAControl.Image = m.SolidColorImage(m.Blue);
    
  5. Render the image or sound with the DAViewerControl subroutine Start():
       DAControl.Start();
    
  6. Close the JScript scripting section:
    //-->
    </SCRIPT>
    

How to Create a VBScript Animation

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:

  1. In your HTML file, declare your DAViewerControl object. The object's name can be anything. Here it is DAMyCtl. The CLSID must be as shown:
    <OBJECT ID="DAMyCtl"
       STYLE="position:absolute; left:30%; top:100;width:300;height:300" 
       CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D">
    </OBJECT>
    
  2. Define your script language.
    <SCRIPT LANGUAGE="VBScript">
    <!--
    
  3. Extract either the PixelLibrary or MeterLibrary from your control.
       Set m = DAMyCtl.PixelLibrary
    

    — or —

       Set m = DAMyCtl.MeterLibrary
    
  4. Write your code. When you have created the image or sound you want to display (which can be as elaborate as you like), set it to the DAViewerControl's Image property or Sound property. In this case, the DAViewerControl Image property is set to a solid blue plane that covers the screen:
       DAMyCtl.Image = m.SolidColorImage(m.Blue)
    
  5. Render the image or sound with the DAViewerControl function Start:
       DAMyCtl.Start
    
  6. Close the VBScript scripting section:
    -->
    </SCRIPT>
    

How to Build a DirectAnimation Java Applet or Application

This section discusses two methods you can use to build a DirectAnimation Java applet or application.

In Microsoft Visual J++™:

  1. From the File menu, choose New.
  2. From the dialog box that appears, choose the Projects tab.
  3. Select Java Project as the project type, type a name into the Project name text box, type a path into the Location text box, and then click OK. The Java project is created.
  4. From the Project menu, choose Add To Project, and then choose Files from the submenu that appears.
  5. In the Insert Files into Project dialog box that appears, browse for your .java files, select the files you want to add, and then click OK.
  6. From the Build menu, choose Build MyApp where MyApp is your project's name. The .class files are built, and a test HTML file is generated automatically.

With the Jvc compiler from the command line:

The Jvc.exe Java compiler is delivered with Visual J++ and the Microsoft SDK for Java.

  1. Set your environment path to include the location of Jvc.exe. For example:
    
    	set path=c:\"program files"\devstudio\sharedide\bin
    

    or:

    
    	set path=c:\java\sdk\bin 
    
  2. Go to the directory containing the .java files.
  3. At the command line prompt, type:
    
    	jvc *.java 
    

    The class files will be generated. No test HTML will be generated.

With NMAKE and a sample or template makefile

  1. Set your environment path to include the location of NMAKE.exe. For example:
    
    	set path=c:\"program files"\devstudio\vc\bin
    
  2. Set your environment path to include the location of Jvc.exe. For example:
    
    	set path=c:\"program files"\devstudio\sharedide\bin
    
  3. Go to the directory containing the makefile.
  4. At the command line prompt, type:
    
    	NMAKE
    

How to Write a DirectAnimation Java Applet

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.

  1. Import the media libraries.
    
    	import com.ms.dxmedia.*;
    

    If you import multimedia files using URLs, you must also import the Java libraries with:

    
    	import java.net.*;
    
  2. Define the applet class. This class extends the DXMApplet class. Then, set the model in the init method. Always call the superclass' init first to ensure the base URL of the applet (the directory in which the applet is located) is set. The model you set with the setModel method is the model that is displayed.
    
    	//
    	// Class: MyApplet
    	//
    	class MyApplet extends DXMApplet {
    
    		public void init() {
          		super.init() ;
    
        		// Now set the model.
        	setModel(new MyModel());
       		}
    	}
    
  3. Define the model class. This class extends the Model class. You construct your animation with the createModel method. The following code example constructs a solid blue image.
    
    	//
    	// Class: MyModel
    	//
    	class MyModel extends Model {
    
       		public void createModel(BvrsToRun blist){
    	// Set the image that actually gets displayed
          	setImage(solidColorImage(blue));
       		}
    	}
    
  4. Compile the code with the Jvc compiler.
  5. Insert the applet in an HTML page.
    
    	<title>
    	My Applet
    	</title>
    	<hr>
    	<applet code=MyApplet.class width=200 height=200>
    	</applet>
    	<hr>
    

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