<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>Button that Reacts to a Mouse</CENTER></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1><BR></TD></TR></FONT></TABLE>
<FONT CLASS=desc1> This applet shows a black button that starts to change colors with time<BR>
when the user's mouse moves over it. When the user clicks on the button with<BR>
the left mouse button, the applet takes a snapshot of the time-varying color.<BR>
When the user moves the mouse away from the button, its color returns to black.

<BR><BR>This applet illustrates the following:<BR><BR>
- creating a solid-colored square.<BR>
- making that square react to mouse over and left mouse button clicks.<BR>
<BR>
</FONT><BR>
<TABLE WIDTH=100%><TR><TD WIDTH=5%><TD><FONT CLASS=code>

<FONT CLASS=code>import com.ms.dxmedia.*;    </FONT><FONT CLASS=desc2> All DirectAnimation classes</FONT><FONT CLASS=code><BR>
</FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> ButtonPick is an applet that invokes ButtonPickModel which constructs a
 solid-colored square.</TD></TR></FONT></TABLE>
<FONT CLASS=code>public class ButtonPick 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 ButtonPickModel());<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV>}<BR>
</FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> In the ButtonPickModel class the createModel method is where you construct
 your animation.</TD></TR></FONT></TABLE>
<FONT CLASS=code>class ButtonPickModel extends Model {<BR>
<BR>
<DIV STYLE="margin-left: 0.125in">public void createModel(BvrsToRun blist)<BR>
{</FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create a detectable image and crop it to 100 by 100 pixels.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr detectImg = detectableEmptyImage.<BR>
</DIV><DIV STYLE="margin-left: 0.375in">crop(point2(mul(toBvr(-50),pixelBvr), mul(toBvr(-50),pixelBvr)),<BR>
</DIV><DIV STYLE="margin-left: 0.5in">point2(mul(toBvr(50),pixelBvr), mul(toBvr(50),pixelBvr)));<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Make the above created image pickable.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">PickableImage pickPImg = new PickableImage(detectImg);<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create an event that will trigger when the mouse moves over detectImg.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">DXMEvent pickEv = pickPImg.getPickEvent();<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create an event that will trigger when both the mouse moves over
 detectImg, and the left mouse button is clicked.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">DXMEvent clickEv = andEvent(leftButtonDown, pickEv);<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create a color behavior that changes its hue with time.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ColorBvr changeClr = colorHsl(add(mul(sin(<BR>
</DIV><DIV STYLE="margin-left: 0.375in">localTime),toBvr(0.5)),toBvr(0.5)),<BR>
</DIV><DIV STYLE="margin-left: 0.5in">toBvr(0.5),toBvr(0.5));<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create a color behavior that starts out as black, changes to changeClr
 when the mouse moves over detectImg (pickEv), and returns to black
 after the mouse is no longer over detectImg (notEvent(pickEv)).</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ColorBvr overClr = ColorBvr.newUninitBvr();<BR>
overClr.init(until(<BR>
</DIV><DIV STYLE="margin-left: 0.375in">black,pickEv,until(changeClr,notEvent(pickEv),overClr)));<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create an event that takes a snapshot of overClr when detectImg is
 clicked with the left mouse button.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">DXMEvent snapEv = clickEv.snapshotEvent(overClr);<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create two color behaviors.  One (snapClr) that starts out as overClr,
 and changes to whatever color overClr is when detectImg is clicked
 with the left mouse button. The second (totalClr) starts out as
 snapClr, and changes to black when the mouse is no longer over
 detectImg.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ColorBvr snapClr = (ColorBvr)untilNotify(overClr,snapEv,<BR>
</DIV><DIV STYLE="margin-left: 0.375in">new ButtonPickSnapshot());<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">ColorBvr totalClr = ColorBvr.newUninitBvr();<BR>
totalClr.init(until(<BR>
</DIV><DIV STYLE="margin-left: 0.375in">snapClr,notEvent(pickEv),totalClr));<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create a solid color image, crop it to 100 by 100 pixels,
 and apply the color behavior of totalClr to it.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr initImg = solidColorImage(totalClr).<BR>
</DIV><DIV STYLE="margin-left: 0.375in">crop(point2(mul(toBvr(-50),pixelBvr), mul(toBvr(-50),pixelBvr)),<BR>
</DIV><DIV STYLE="margin-left: 0.5in">point2(mul(toBvr(50),pixelBvr), mul(toBvr(50),pixelBvr)));<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Put the pickable Image on top of initImg.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr finalImg = overlay(pickPImg.getImageBvr(),initImg);<BR>
</FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1>Display the image on a blue background.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">setImage(overlay(finalImg, solidColorImage(blue)));<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV>}<BR>
<BR>
class ButtonPickSnapshot extends Statics implements UntilNotifier {<BR>
<DIV STYLE="margin-left: 0.125in"><BR>
public Behavior notify(Object eventData,<BR>
</DIV><DIV STYLE="margin-left: 0.25in">Behavior currentRunningBvr, BvrsToRun btr) {<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Returns the color of overClr when the left mouse button is clicked
 on detectImg.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">return (ColorBvr)eventData;<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV>}<BR>
</FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Thats all there is to it.  Happy animating...</TD></TR></FONT></TABLE>
</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>
</TABLE>
<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><TD WIDTH=30></TD></TR></DIV>

</BODY>
</HTML>
