<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 AFC Menus</CENTER></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1></TD></TR></TABLE></FONT>
<FONT CLASS=desc1> 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.<BR><BR>
It illustrates the following:<BR>
- using DirectAnimation along with AFC.<BR>
- creating menus and buttons in AFC.<BR>
- The use of ModifiableBehaviors.<BR>
</FONT><BR></TABLE>
<TABLE WIDTH=100%><TR><TD WIDTH=0%><TD>
<FONT CLASS=code>
import com.ms.dxmedia.*; </FONT><FONT CLASS=desc2> All DirectAnimation classes</FONT><FONT CLASS=code><BR>
import com.ms.ui.*;      </FONT><FONT CLASS=desc2> The AFC classes</FONT><FONT CLASS=code><BR>
import java.awt.*;       </FONT><FONT CLASS=desc2> The event handle classes</FONT><FONT CLASS=code><BR>
import java.net.URL;     </FONT><FONT CLASS=desc2> The Java URL classes</FONT><FONT CLASS=code><BR>
</FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Use AFC's AwtUIApplet to construct the applet.</TD></TR></TABLE></FONT>
<FONT CLASS=code>public class AFCMenus extends AwtUIApplet  {<BR>
<DIV STYLE="margin-left: 0.125in">public void init()  {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">setLayout(new FlowLayout(FlowLayout.LEFT,5,5));<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Get the AFC (menu and button) part of the Applet.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">UIPanel ctrls = new AFCControls();<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Get the DirectAnimation part of the Applet.</TD></TR></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">Canvas cv = new DXMImage();<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Position both parts.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">add("North",ctrls);<BR>
add("South",cv);<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> The resize the DirectAnimation part, otherwise it will take over the
 entire viewport.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">cv.setSize(getSize().width - 25,<BR>
</DIV><DIV STYLE="margin-left: 0.9375in">getSize().height - 25);<BR>
</DIV><DIV STYLE="margin-left: 0.25in">setBackground(Color.white);<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV>}<BR>
</FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> The menu gets created in the AFCControls Class.</TD></TR></TABLE></FONT>
<FONT CLASS=code>class AFCControls extends UIPanel  {<BR>
</FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create the menu by using AFC's UIMenuList and UIMenuButton
 classes.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.125in">AFCControls()  {<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">setLayout(new UIGridLayout(1, 1));<BR>
UIMenuList xformMenu = new UIMenuList();<BR>
UIMenuButton xformButton = new UIMenuButton("Apply Transform",<BR>
UIPushButton.RAISED, xformMenu);<BR>
add(xformButton);<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create the "Scale", "Translate", and "Rotate" menu items.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">_scale = new UIMenuItem("Scale");<BR>
_translate = new UIMenuItem("Translate");<BR>
_rotate = new UIMenuItem("Rotate");<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Place the above mentioned items on the menu.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">xformMenu.add(_scale);<BR>
xformMenu.add(_translate);<BR>
xformMenu.add(_rotate);<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Handle relevant events when the user interacts with the menu.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.125in">public boolean action(Event e, Object arg)  {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">if (arg == _scale)  {<BR>
</DIV><DIV STYLE="margin-left: 0.375in">ImageModel.setXform(ImageModel.SCALE);<BR>
return true;<BR>
</DIV><DIV STYLE="margin-left: 0.25in">} else if (arg == _translate)  {<BR>
</DIV><DIV STYLE="margin-left: 0.375in">ImageModel.setXform(ImageModel.TRANSLATE);<BR>
return true;<BR>
</DIV><DIV STYLE="margin-left: 0.25in">} else if (arg == _rotate)  {<BR>
</DIV><DIV STYLE="margin-left: 0.375in">ImageModel.setXform(ImageModel.ROTATE);<BR>
return true;<BR>
</DIV><DIV STYLE="margin-left: 0.25in">}<BR>
return false;<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
UIMenuItem _scale, _translate, _rotate;<BR>
</DIV>}<BR>
<BR>
class DXMImage extends DXMCanvas  {<BR>
<DIV STYLE="margin-left: 0.125in">DXMImage()  {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">setModel(new ImageModel());<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV>}<BR>
</FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> In the ImageModel class the createModel method is where you construct
 your animation.</TD></TR></TABLE></FONT>
<FONT CLASS=code>class ImageModel extends Model  {<BR>
<DIV STYLE="margin-left: 0.125in">public void createModel(BvrsToRun bvrs)  {<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Import the image.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">URL mediaBase = getImportBase();<BR>
URL imgBase = buildURL(mediaBase, "image/");<BR>
</DIV><DIV STYLE="margin-left: 0.5in">ImageBvr img = importImage(buildURL(imgBase, "pretzel.gif"));<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> 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).</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">_xf = new ModifiableBehavior(identityTransform2);<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Apply _xf to img.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">img = img.transform((Transform2Bvr)_xf.getBvr());<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Define the three transformations, that will be mapped to the respective
 menu items.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">_scaleXf = scale2(add(toBvr(1), mul(sin(localTime), toBvr(0.5))));<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">_translateXf = translate(mul(sin(localTime),<BR>
</DIV><DIV STYLE="margin-left: 1.8125in">mul(toBvr(100),pixelBvr)), toBvr(0));<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">_rotateXf = rotate(localTime);<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Display the image on a white background.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">setImage(overlay(img, solidColorImage(white)));<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> This method is used in the AFCControls class to change _xf.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.125in">static void setXform(int xformType)  {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">switch (xformType)  {<BR>
case SCALE:<BR>
</DIV><DIV STYLE="margin-left: 0.375in">_xf.switchTo(_scaleXf);<BR>
break;<BR>
</DIV><DIV STYLE="margin-left: 0.25in">case TRANSLATE:<BR>
</DIV><DIV STYLE="margin-left: 0.375in">_xf.switchTo(_translateXf);<BR>
break;<BR>
</DIV><DIV STYLE="margin-left: 0.25in">case ROTATE:<BR>
default:<BR>
</DIV><DIV STYLE="margin-left: 0.375in">_xf.switchTo(_rotateXf);<BR>
break;<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">static Transform2Bvr _scaleXf, _translateXf, _rotateXf;<BR>
static ModifiableBehavior _xf;<BR>
final static int SCALE = 1;<BR>
final static int TRANSLATE = 2;<BR>
final static int ROTATE = 3;<BR>
</DIV>}<BR>
</FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> That's all there is to it.  Happy animating...</TD></TR></TABLE></FONT>
</TABLE><BR>
<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></DIV></TABLE>
</BODY>
</HTML>
