<HTML>
<HEAD>
<TITLE>DirectX Media SDK DirectAnimation Tutorial</TITLE>
<LINK REL=STYLESHEET HREF="../../../../../webcd/da/tutorial.css">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso8859-1">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">
</HEAD>
<BODY BGCOLOR="WHITE" LINK=#0033CC TOPMARGIN=0 LEFTMARGIN=20>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->

<DIV CLASS="flush">
<TABLE WIDTH=100% BORDER=0 BGCOLOR=#000000>
<TR ALIGN=RIGHT><TD VALIGN=TOP><FONT CLASS=desc1 SIZE=2>
<IMG SRC="../../../../../media/image/d_prev.gif"
 WIDTH=71 HEIGHT=16 BORDER=0 ALT="Previous Topic">
<A HREF="../../../../../webcd/da/tutorial_main.htm" TARGET="_top">
<IMG SRC="../../../../../media/image/d_home.gif" WIDTH=48 HEIGHT=16 BORDER=0 ALT="Tutorial Home Page"></A>
<IMG SRC="../../../../../media/image/d_next.gif" WIDTH=48 HEIGHT=16 BORDER=0 ALT="Next Topic">
</FONT></TD><TD WIDTH=30></TD></TR></DIV></TABLE>
<FONT CLASS=title><CENTER>Draggable Image</CENTER></FONT>
<BR>
<FONT CLASS=code>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1><BR></TD></TR></FONT></TABLE>
<FONT CLASS=desc1> This applet shows a red square that can be dragged around the applet.<BR>
Dragging actually consists of three parts: grabbing, dragging and releasing<BR>
Grabbing occurs when the left mouse button is pressed and held down over the<BR>
red square. Dragging happens when the mouse moves within the applet. During<BR>
this process, the color of the square changes to blue.  Releasing happens when<BR>
the left mouse button is released, and the square is dropped in that position,<BR>
with its color returning to red.<BR>

<BR><BR>It illustrates the following:<BR><BR>
- making a square image draggable.<BR>
- getting events that trigger when the image is grabbed and released.<BR>
- changing the color of the square when it is being dragged.<BR>
- returning the square to its original color when it is released.<BR>
</FONT><BR>
<FONT CLASS=code><BR>
import com.ms.dxmedia.*;    </FONT><FONT CLASS=desc2> All DirectAnimation classes</FONT><FONT CLASS=code><BR>
import utility.*;           </FONT><FONT CLASS=desc2> the DraggableImage class</FONT><FONT CLASS=code><BR>
<BR>
public class ImageDrag extends DXMApplet  {<BR>
<DIV STYLE="margin-left: 0.125in">public void init() {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">super.init() ;<BR>
setModel (new ImagePickTestModel());<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV>}<BR>
</FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> In the ImagePickTestModel class the createModel method is where you construct
 your animation.</TD></TR></FONT></TABLE>
<FONT CLASS=code>class ImagePickTestModel extends Model  {<BR>
<DIV STYLE="margin-left: 0.125in">public void createModel(BvrsToRun listBvrs)  {<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create an uninitialized ColorBvr (clr).</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ColorBvr clr = ColorBvr.newUninitBvr();<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create cropped square, and apply clr's color behavior to it.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr blockImg = solidColorImage(clr).<BR>
</DIV><DIV STYLE="margin-left: 0.375in">crop(point2(toBvr(0), toBvr(0)),<BR>
</DIV><DIV STYLE="margin-left: 0.5in">point2(toBvr(0.005), toBvr(0.005)));<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Make blockImg draggable by creating a DraggableImage class
 object (grabImg).</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">DraggableImage grabImg = new DraggableImage(blockImg, origin2);<BR>
</FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> 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.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">clr.init(until(red, grabImg.getGrabEvent(),<BR>
</DIV><DIV STYLE="margin-left: 0.375in">until(blue, grabImg.getReleaseEvent(), clr)));<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Get the ImageBvr part of grabImg, by calling the getImageBvr() method
 of DraggableImage.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr pickableBlockImg = grabImg.getImageBvr();<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> overlay pickableBlockImg on a black background.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">setImage(overlay(pickableBlockImg, solidColorImage(black)));<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV>}<BR>
</FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> That's all there is to it.  Happy animating...</TD></TR></FONT></TABLE>
<BR>
</FONT><FONT CLASS=link><A ID=cpslug HREF="../../../../../help/da/dalegal.htm" TARGET="_top">&#169; 1997 Microsoft Corporation. All rights reserved. Terms of Use.</A></FONT>

<BR>
<BR>
<DIV CLASS="flush">
<TABLE WIDTH=100% BORDER=0 BGCOLOR=#000000>
<TR ALIGN=RIGHT><TD VALIGN=TOP><FONT CLASS=desc1 SIZE=2>
<IMG SRC="../../../../../media/image/d_prev.gif"
 WIDTH=71 HEIGHT=16 BORDER=0 ALT="Previous Topic">
<A HREF="../../../../../webcd/da/tutorial_main.htm" TARGET="_top">
<IMG SRC="../../../../../media/image/d_home.gif" WIDTH=48 HEIGHT=16 BORDER=0 ALT="Tutorial Home Page"></A>
<IMG SRC="../../../../../media/image/d_next.gif" WIDTH=48 HEIGHT=16 BORDER=0 ALT="Next Topic">
</FONT></TD><TR><TD WIDTH=30></TD></TR></DIV></TABLE>

</BODY>
</HTML>
