Previous Topic Tutorial Home Page Next Topic
Draggable Image

This applet shows a red square that can be dragged around the applet.
Dragging actually consists of three parts: grabbing, dragging and releasing
Grabbing occurs when the left mouse button is pressed and held down over the
red square. Dragging happens when the mouse moves within the applet. During
this process, the color of the square changes to blue. Releasing happens when
the left mouse button is released, and the square is dropped in that position,
with its color returning to red.


It illustrates the following:

- making a square image draggable.
- getting events that trigger when the image is grabbed and released.
- changing the color of the square when it is being dragged.
- returning the square to its original color when it is released.


import com.ms.dxmedia.*;
All DirectAnimation classes
import utility.*;
the DraggableImage class

public class ImageDrag extends DXMApplet {
public void init() {
super.init() ;
setModel (new ImagePickTestModel());
}
}


class ImagePickTestModel extends Model {
public void createModel(BvrsToRun listBvrs) {

In the ImagePickTestModel class the createModel method is where you construct your animation.
ColorBvr clr = ColorBvr.newUninitBvr();

Create an uninitialized ColorBvr (clr).
ImageBvr blockImg = solidColorImage(clr).
crop(point2(toBvr(0), toBvr(0)),
point2(toBvr(0.005), toBvr(0.005)));

Create cropped square, and apply clr's color behavior to it.
DraggableImage grabImg = new DraggableImage(blockImg, origin2);
Make blockImg draggable by creating a DraggableImage class object (grabImg).

clr.init(until(red, grabImg.getGrabEvent(),
until(blue, grabImg.getReleaseEvent(), clr)));

Initialize clr. Let it start out as red, change it to blue, when the square is grabbed, and return to red when the square is released. The grab and release events are obtained from the getGrabEvent() and getReleaseEvent() methods of the DraggableImage class respectively.
ImageBvr pickableBlockImg = grabImg.getImageBvr();

Get the ImageBvr part of grabImg, by calling the getImageBvr() method of DraggableImage.
setImage(overlay(pickableBlockImg, solidColorImage(black)));
}
}

overlay pickableBlockImg on a black background.

That's all there is to it. Happy animating...
© 1998 Microsoft Corporation. All rights reserved. Terms of Use.

Previous Topic Tutorial Home Page Next Topic