<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 Scrollbars</CENTER></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1><BR></TD></TR></TABLE></FONT>
<FONT CLASS=desc1> This sample shows how to use DirectAnimation with the Applet Foundation<BR>
Classes (AFC). The scrollbar is created by using AFC's UIScrollBar class.<BR>
The speed of the rotation of the geometry is mapped to the position of the <BR>
scrollbar in DirectAnimation.<BR>

<BR>It illustrates the following:<BR>
- using DirectAnimation along with AFC.<BR>
- creating a scrollbar in AFC.<BR>
- The use of ModifiableBehaviors.<BR>
</FONT><BR>
</TABLE><FONT CLASS=code>
<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 AFCScroll extends AwtUIApplet  {<BR>
<DIV STYLE="margin-left: 0.125in">public void init()  {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">setLayout(new UIBorderLayout());<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Get the AFC (scrollbar) part of the Applet.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">UIPanel ctrls = new AFCControls();<BR>
</FONT>
<BR>
</DIV></TABLE><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Get the DirectAnimation part of the Applet.</TD></TR></TABLE></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",cv);<BR>
add("South",ctrls);<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 - 15,getSize().height - 15);<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">setBackground(Color.orange);<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV>}<BR>
</FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> The scrollbar 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 scrollbar using AFC's UIScrollBar class.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.125in">AFCControls()  {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">setLayout(new UIGridLayout(1, 1));<BR>
_speedBar = new UIScrollBar(0, 0, 30, 3, 1, 15);<BR>
_speedBar.setBackground(Color.orange);<BR>
add(_speedBar);<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 scrollbar.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.125in">public boolean handleEvent(Event e)  {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">switch (e.id)  {<BR>
</DIV><DIV STYLE="margin-left: 0.375in">case Event.SCROLL_LINE_UP:<BR>
case Event.SCROLL_LINE_DOWN:<BR>
case Event.SCROLL_PAGE_UP:<BR>
case Event.SCROLL_PAGE_DOWN:<BR>
case Event.SCROLL_ABSOLUTE:<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> The position of the scrollbar sent to the setSpeed() of the
 ImageModel class.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.375in">ImageModel.setSpeed(_speedBar.getScrollPos());<BR>
return true;<BR>
</DIV><DIV STYLE="margin-left: 0.25in">}<BR>
return false;<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
UIScrollBar _speedBar;<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 cube.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">URL mediaBase = getImportBase();<BR>
URL geoBase = buildURL(mediaBase, "geometry/");<BR>
GeometryBvr geo = importGeometry(buildURL(geoBase, "cube.x"));<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create a ModifiableBehavior (_speed) which will be linked to the
 position of the scrollbar.  This behavior will then be used to set
 the speed of rotation for the cube.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">_speed = new ModifiableBehavior(toBvr(4));<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">NumberBvr spinYRate = (NumberBvr)_speed.getBvr();<BR>
NumberBvr spinZRate = mul(spinYRate, toBvr(1.3));<BR>
geo = geo.transform(compose(rotate(yVector3, integral(spinYRate)),<BR>
</DIV><DIV STYLE="margin-left: 2.0in">rotate(zVector3, integral(spinZRate))));<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create a camera to view the cube.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">CameraBvr cam = perspectiveCamera(toBvr(5), toBvr(2));<BR>
</DIV></FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Display the cube on a blue background.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">setImage(overlay(union(geo, directionalLight).render(cam)<BR>
</DIV><DIV STYLE="margin-left: 0.3125in">.transform(scale2(mul(toBvr(20),pixelBvr))),solidColorImage(blue)));<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 _speed.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.125in">static void setSpeed(int speed)  {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">_speed.switchTo(toBvr(speed/3.0));<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.125in">static ModifiableBehavior _speed;<BR>
</DIV>}<BR>
</FONT>
<BR></TABLE>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> That's 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>
<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>
