<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>Using DirectAnimation to Jump to another Website</CENTER></FONT>
<FONT CLASS=code>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1><BR>
 There are two main pieces to any DirectAnimation applet, the DXMApplet
 class and the Model class. To use the DirectAnimation classes, import
 the media libraries like this:</TD></TR></TABLE></FONT>
<FONT CLASS=code>import com.ms.dxmedia.*;<BR>
import java.awt.*;<BR>
import java.net.*;     </FONT><FONT CLASS=desc2> gets URL.</FONT><FONT CLASS=code><BR>
import java.applet.*;  </FONT><FONT CLASS=desc2> gets getAppletContext.</FONT><FONT CLASS=code><BR>
<BR>
public class JumpURL extends DXMApplet  {<BR>
<BR>
<DIV STYLE="margin-left: 0.125in">public void init()  {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">super.init() ;<BR>
JumpURLModel newJump = new JumpURLModel();<BR>
setModel(newJump);</FONT>
<BR>
</DIV></TABLE><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Call AppletContext() and set _getAppContext to its return.
 _getAppContext will be used to call showDocument().</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">newJump.appLink(getAppletContext());<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV>}<BR>
</FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Then create a class that extends the Model class.  In this class the
 createModel method is where you construct your animation.  This example
 will make use of two of the primary media types supported by
 DirectAnimation: images and sound.</TD></TR></TABLE></FONT>
<FONT CLASS=code>class JumpURLModel extends Model  {<BR>
<BR>
<DIV STYLE="margin-left: 0.125in">public void createModel(BvrsToRun blist)  {</FONT>
<BR>
</DIV></TABLE><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create bases for importing images and sounds.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">URL mediaBase = getImportBase();<BR>
URL imgBase = buildURL(mediaBase,"image/");<BR>
URL sndBase = buildURL(mediaBase,"sound/");<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Import seattle.jpg.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr seattleImg = importImage(buildURL(imgBase,"seattle.jpg"));<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Import the sound that will be played when the mouse moves over
 seattleImg.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">SoundBvr pickSnd = importSound(buildURL(sndBase,<BR>
</DIV><DIV STYLE="margin-left: 0.375in">"etherial.mp2"),null).loop();<BR>
</DIV><DIV STYLE="margin-left: 0.125in"></FONT>
<BR>
</DIV></TABLE><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Make seattleImg pickable.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">PickableImage pickPImg = new PickableImage(seattleImg,true);<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create an event that will trigger when the mouse moves over detectImg.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">DXMEvent pickEv = pickPImg.getPickEvent();<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Get the image part of pickPImg.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr pickImg = pickPImg.getImageBvr();<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create a string that contains the URL to Seattle Sidewalk.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">StringBvr urlStr = toBvr("http:</FONT><FONT CLASS=desc2>seattle.sidewalk.com");</FONT><FONT CLASS=code><BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create the tip box (tipImg), which consists of a black
 backgroud (tipBackIm), and white text (tipTxtIm).</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">FontStyleBvr font = font("Arial",12,white).bold();<BR>
ImageBvr tipTxtImg = stringImage(<BR>
</DIV><DIV STYLE="margin-left: 0.375in">"Click the red dot to go to Seattle Sidewalk", font);<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">Bbox2Bvr txtBB = tipTxtImg.boundingBox();<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">ImageBvr tipBackImg = solidColorImage(black)<BR>
</DIV><DIV STYLE="margin-left: 0.375in">.crop(txtBB.getMin(),txtBB.getMax());<BR>
</DIV><DIV STYLE="margin-left: 0.5in"><BR>
</DIV><DIV STYLE="margin-left: 0.25in">ImageBvr tipImg = overlay(tipTxtImg,tipBackImg);<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create a detectable image (jumpImg)and crop it to 6 by 6 mm.
 This image will be made pickable and used to jump to Seattle Sidewalk.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr jumpImg = solidColorImage(red).crop(point2(-0.003,-0.003),<BR>
</DIV><DIV STYLE="margin-left: 0.375in">point2(0.003,0.003));<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.5in">jumpImg = jumpImg.transform(translate(toBvr(0),<BR>
</DIV><DIV STYLE="margin-left: 0.75in">mul(toBvr(-50),pixelBvr)));<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Make detectImg pickable.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">PickableImage jumpPImg = new PickableImage(jumpImg,true);<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create an event that will trigger when the mouse moves over jumpImg.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">DXMEvent jumpEv = jumpPImg.getPickEvent();<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create an event that will trigger when both the mouse moves over
 jumpImg, and the left mouse button is clicked.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">DXMEvent jumpClickEv = andEvent(leftButtonDown, jumpEv);<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Get the image part of jumpPImg.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr jumpPointImg = jumpPImg.getImageBvr();<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Combine the pickable images with the tip box and pair them
 with sound.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">TupleBvr compTup1 = pairBvr(pickPImg.getImageBvr(),silence);<BR>
ImageBvr finalImg = overlay(jumpPointImg,overlay(tipImg,pickImg));<BR>
TupleBvr compTup2 = pairBvr(finalImg,pickSnd);<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create a behavior (pickTup) that start out as a detectable empty
 image with no sound.  When the mouse moves over it, the sound
 changes to pickSnd, and the tip box is displayed.  When the mouse is
 no longer over it, it returns to the original behavior.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">TupleBvr pickedTup = TupleBvr.newUninitBvr(pairBvr(emptyImage,silence));<BR>
pickedTup.init(until(compTup1,pickEv,until(compTup2,<BR>
</DIV><DIV STYLE="margin-left: 0.375in">notEvent(pickEv),pickedTup)));<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create a behavior that starts out as pickedTup, and that jumps to the
 Seattle Sidewalk site when the user clicks on pickPImg using the left
 mouse button.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">TupleBvr finalTup = (TupleBvr)untilNotify(pickedTup,<BR>
</DIV><DIV STYLE="margin-left: 0.375in">jumpClickEv,new JumpURLLink(urlStr));<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Display the final image.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">setImage(overlay((ImageBvr)finalTup.nth(0),<BR>
</DIV><DIV STYLE="margin-left: 0.375in">overlay(seattleImg,solidColorImage(black))));<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Start the sound.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">setSound(mix((SoundBvr)finalTup.nth(1),silence));<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.125in">public void appLink(AppletContext appGet)  {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">_getAppContext = appGet;<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
public static AppletContext _getAppContext;<BR>
</DIV>}<BR>
<BR>
class JumpURLLink extends Statics implements UntilNotifier  {<BR>
<BR>
<DIV STYLE="margin-left: 0.125in">public JumpURLLink(StringBvr url)  {</FONT>
<BR>
</DIV>
</TABLE><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Convert urlStr into an URL.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">try  {<BR>
</DIV><DIV STYLE="margin-left: 0.375in">_clickDest = new URL((String) url.extract());<BR>
</DIV><DIV STYLE="margin-left: 0.25in">}<BR>
catch(MalformedURLException mal)  {<BR>
</DIV><DIV STYLE="margin-left: 0.375in">System.out.println("Malformed URL: Check Applet Tag.");<BR>
</DIV><DIV STYLE="margin-left: 0.25in">}<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.125in">public Behavior notify(Object eventData,<BR>
</DIV><DIV STYLE="margin-left: 0.25in">Behavior currentRunningBvr, BvrsToRun btr)  {</FONT>
<BR>
</DIV>
</TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Use the Java showDocument method to load the Seattle Sidewalk page
 in the parent frame.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">JumpURLModel._getAppContext.showDocument(_clickDest,"_parent");<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Return currentRunningBvr to keep the UntilNotify happy.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">return currentRunningBvr;<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
URL _clickDest;<BR>
</DIV>}</FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Thats all there is to it.  Happy animating...</TD></TR></TABLE></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>
</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><TR><TD WIDTH=30></TD></TR></TABLE></DIV>

</BODY>
</HTML>
