Using Transforms in DirectAnimation

This section assumes you are familiar with Microsoft® DirectAnimation® controls, Microsoft ActiveX® controls, and scripting.

Transforms are displayed on Web pages inside DirectAnimation control objects. They enable you to define the transform, set its properties, and specify how it should develop over time. It also enables transforms to interact with other DirectAnimation behaviors and objects to create time-varying graphics output.

To use a transform with DirectAnimation in a Web page, you typically follow these steps.

Create a DirectAnimation control object.
Create a SCRIPT block with a DirectAnimation library.
Create the transform.
Define the transform input(s).
Define a behavior for the transform.
Set the transform properties.
Apply the transform.
Assign the output to the DirectAnimation control.

To see the most basic use of a transform in DirectAnimation, you can view the source HTML of the Wipe transform sample. The following section shows how this sample file follows each of the preceding steps to use a transform in a Web page.

1. Create a DirectAnimation control object.

The output of the transform is assigned to a DirectAnimation control, which draws the image on the Web page. There are several kinds of controls you can use; the following example shows how to create the typical windowless control.

<OBJECT ID="DAControl_Wipe" 
	STYLE="width:200;height:200"
	CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D">
</OBJECT>

Notice that the dimensions of the image area are specified as STYLE attributes of the OBJECT tag.

2. Create a SCRIPT Block with a DirectAnimation library.

You define all the transform properties and inputs in script. This script must contain either a PixelLibrary or MeterLibrary object, which enables you to access the methods of DirectAnimation.

<SCRIPT LANGUAGE="JScript">
m = DAControl_Wipe.MeterLibrary;

</SCRIPT>

For the previous example, all script commands for the transform are located after the line that creates the MeterLibrary.

3. Create the transform.

Each transform must be created in script as an ActiveX control for the page, as shown in the following example, which uses the transform's programmatic identifier to identify which transform object to create. A programmatic identifier is a Component Object Model (COM) object identifier.

theTransform = new ActiveXObject("DXImageTransform.Microsoft.Wipe");

4. Define the transform input(s).

Each transform can use one or several image inputs. Inputs are stored in an array whose size is determined by the number of inputs you are using for the transform. The following script defines two inputs for the Wipe transform.

inputs = new Array(2);      
inputs[0] = m.ImportImage("../art/image/tigerstripe.jpg");
inputs[1] = m.ImportImage("../art/image/metablob.jpg");

Some transforms require a certain number of inputs, but others accept one or many inputs. For input information for a specific transform, see the Transform Reference.

5. Define a behavior for the transform.

If the transform is an animation, you need to define a DABehavior to produce the animation. This behavior specifies how a DANumber, which represents the transform Progress, will change its value over time.

In the following code, the forward variable is a DANumber that changes from 0 to 1 in 3 seconds, and back is a similar variable that changes from 1 to 0 in 3 seconds. Both use the DirectAnimation Interpolate function to create these behaviors. The Progress variable is created as a sequenced behavior of the forward and back behaviors, repeated forever.

forward = m.Interpolate(0, 1, 3);
back = m.Interpolate(1, 0, 3);
progress = m.Sequence(forward, back).RepeatForever();

6. Set the transform properties.

Transform properties are changed through script by referring to the property name as a property of the transform object and assigning it a value. The following example changes the transform properties of the Wipe transform.

theTransform.GradientSize = 0.5;
theTransform.WipeStyle = 1;

The Transform Reference lists two custom properties for the Wipe transform: GradientSize and WipeStyle. The default value for GradientSize is 0.25, but the previous code changes that value to 0.5. Changing the WipeStyle property to a value of 1 causes the transition region to sweep up and down, instead of left and right.

7. Apply the transform.

After you have defined the input images and the Progress property, you can now apply the transform to the inputs and retrieve the output image, as shown in the following:

theResult = m.ApplyDXTransform( theTransform, inputs, progress );

The ApplyDXTransform function accepts three input parameters: a transform object, an array of input images, and a DANumber for the Progress property. The value returned by the function contains the transform output.

If the transform is not an animation (such as BasicImage or Emboss), you can specify null for the Progress behavior.

8. Assign the output to the DirectAnimation control.

The last steps require that you assign the output behavior to the DAControl.Image property and start the control.

DAControl_Wipe.Image = theResult.OutputBvr;
DAControl_Wipe.Start();

Note To view this transform you must have Microsoft® DirectX® Media 6, Microsoft Internet Explorer 5, Microsoft Windows® 98 Second Edition, or Windows 2000 installed.

This is just one way that you can use transforms in DirectAnimation. For more examples, see the Transform Demos section.