DirectX Media SDK DirectAnimation Tutorial

Using AFC Menus
This sample shows how to use DirectAnimation with the Applet Foundation Classes (AFC). The menu is created by using AFC methods. The animation of the image (scaling, translating, rotating) is done in DirectAnimation.

It illustrates the following:
- using DirectAnimation along with AFC.
- creating menus and buttons in AFC.
- The use of ModifiableBehaviors.

import com.ms.dxmedia.*; All DirectAnimation classes
import com.ms.ui.*; The AFC classes
import java.awt.*; The event handle classes
import java.net.URL; The Java URL classes

public class AFCMenus extends AwtUIApplet {

public void init() {

setLayout(new FlowLayout(FlowLayout.LEFT,5,5));

Use AFC's AwtUIApplet to construct the applet.

UIPanel ctrls = new AFCControls();

Get the AFC (menu and button) part of the Applet.

Canvas cv = new DXMImage();

Get the DirectAnimation part of the Applet.

add("North",ctrls);
add("South",cv);

Position both parts.

cv.setSize(getSize().width - 25,

getSize().height - 25);

setBackground(Color.white);

}

The resize the DirectAnimation part, otherwise it will take over the entire viewport.

class AFCControls extends UIPanel {

The menu gets created in the AFCControls Class.

AFCControls() {

setLayout(new UIGridLayout(1, 1));
UIMenuList xformMenu = new UIMenuList();
UIMenuButton xformButton = new UIMenuButton("Apply Transform",
UIPushButton.RAISED, xformMenu);
add(xformButton);

Create the menu by using AFC's UIMenuList and UIMenuButton classes.

_scale = new UIMenuItem("Scale");
_translate = new UIMenuItem("Translate");
_rotate = new UIMenuItem("Rotate");

Create the "Scale", "Translate", and "Rotate" menu items.

xformMenu.add(_scale);
xformMenu.add(_translate);
xformMenu.add(_rotate);

}

Place the above mentioned items on the menu.

public boolean action(Event e, Object arg) {

if (arg == _scale) {

ImageModel.setXform(ImageModel.SCALE);
return true;

} else if (arg == _translate) {

ImageModel.setXform(ImageModel.TRANSLATE);
return true;

} else if (arg == _rotate) {

ImageModel.setXform(ImageModel.ROTATE);
return true;

}
return false;

}
UIMenuItem _scale, _translate, _rotate;

}

class DXMImage extends DXMCanvas {

DXMImage() {

setModel(new ImageModel());

}

Handle relevant events when the user interacts with the menu.

class ImageModel extends Model {

public void createModel(BvrsToRun bvrs) {

In the ImageModel class the createModel method is where you construct your animation.

URL mediaBase = getImportBase();
URL imgBase = buildURL(mediaBase, "image/");

ImageBvr img = importImage(buildURL(imgBase, "pretzel.gif"));

Import the image.

_xf = new ModifiableBehavior(identityTransform2);

Create a ModifiableBehavior (_xf) which will be linked to the menu item the user selects. This behavior will then be used to transform the image (img).

img = img.transform((Transform2Bvr)_xf.getBvr());

Apply _xf to img.

_scaleXf = scale2(add(toBvr(1), mul(sin(localTime), toBvr(0.5))));

_translateXf = translate(mul(sin(localTime),

mul(toBvr(100),pixelBvr)), toBvr(0));

_rotateXf = rotate(localTime);

Define the three transformations, that will be mapped to the respective menu items.

setImage(overlay(img, solidColorImage(white)));

}

Display the image on a white background.

static void setXform(int xformType) {

switch (xformType) {
case SCALE:

_xf.switchTo(_scaleXf);
break;

case TRANSLATE:

_xf.switchTo(_translateXf);
break;

case ROTATE:
default:

_xf.switchTo(_rotateXf);
break;

}

static Transform2Bvr _scaleXf, _translateXf, _rotateXf;
static ModifiableBehavior _xf;
final static int SCALE = 1;
final static int TRANSLATE = 2;
final static int ROTATE = 3;

}

This method is used in the AFCControls class to change _xf.

That's all there is to it. Happy animating...