<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>
<A HREF="Section1.html" TARGET="_top">
<IMG SRC="../../../../../media/image/u_prev.gif"
 WIDTH=71 HEIGHT=16 BORDER=0 ALT="Previous Topic">
</A><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>Section 2: Stand-In Image</CENTER></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1><BR>
 Define an opening animation used for latency masking during
 media files download.
<BR></TD></TR></FONT></TABLE>
<FONT CLASS=code>class loadAnimation extends Statics {<BR>
<DIV STYLE="margin-left: 0.125in">public ImageBvr getImage(NumberBvr progress) {<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> There are two primary images, introImg and radarImg, in this animation.
 The introImg composes of a few text images and a progress indicator.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">String[] intro = {"Direct", "X", "Media", "for Animation", "loading...please wait"},<BR>
</DIV><DIV STYLE="margin-left: 0.8125in">info = {"Integrated", "2D", "3D", "and", "Audio", "for", "Java"};<BR>
</DIV><DIV STYLE="margin-left: 0.25in">double[] size = {3, 7, 3, 2, 1},<BR>
</DIV><DIV STYLE="margin-left: 0.8125in">startPos = {-500,50,  0,500,  500,50,  6,-10,  0,-50},<BR>
endPos = {-98,50,  0,50,  100,50,  6,-10,  0,-50},<BR>
trigger = {.5, 1.5, 2.5, 4, 5};<BR>
</DIV><DIV STYLE="margin-left: 0.25in">ImageBvr[] introImgs = new ImageBvr[intro.length];<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create an array of text images for the introImg.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">for(int i=0; i&ltintro.length; i++) {<BR>
</DIV><DIV STYLE="margin-left: 0.375in">Point2Bvr startPt = point2(mul(toBvr(startPos[2*i]),pixelBvr), mul(toBvr(startPos[2*i+1]),pixelBvr)),<BR>
</DIV><DIV STYLE="margin-left: 1.0in">endPt = point2(mul(toBvr(endPos[2*i]),pixelBvr), mul(toBvr(endPos[2*i+1]),pixelBvr));<BR>
</DIV><DIV STYLE="margin-left: 0.375in"><BR>
FontStyleBvr fs = defaultFont.family(toBvr("Arial")).color(blue).bold();<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.375in">ImageBvr textIm = textImage(toBvr(intro[i]), fs)<BR>
</DIV><DIV STYLE="margin-left: 0.5in">.transform(scale2(size[i]));<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.375in">introImgs[i] = move(textIm, startPt, endPt, 1, trigger[i]);<BR>
</DIV><DIV STYLE="margin-left: 0.25in">}<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">introImgs[3] = introImgs[3].opacity(ramp(trigger[3],.3));<BR>
introImgs[4] = introImgs[4].opacity(mul(ramp(trigger[4],1), sin(mul(toBvr(4),localTime))));<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Compose the text images together and overlay them on a black background.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr introImg = solidColorImage(black);<BR>
for(int i=0; i&ltintro.length; i++)<BR>
</DIV><DIV STYLE="margin-left: 0.375in">introImg = overlay(introImgs[i],introImg);<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Add a progress status indicator to the introImg.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">Vector2Bvr statPos = vector2(toBvr(0),mul(toBvr(-80),pixelBvr));<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">FontStyleBvr fs = defaultFont.family(toBvr("Arial")).color(green);<BR>
ImageBvr statusImg = textImage(concat(mul(progress,toBvr(100))<BR>
</DIV><DIV STYLE="margin-left: 1.5in">.toString(toBvr(2)), toBvr("% complete") ), fs)<BR>
</DIV><DIV STYLE="margin-left: 0.5in">.opacity(ramp(trigger[4],1));<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">statusImg = statusImg.transform(compose(translate(statPos),scale2(.8)));<BR>
introImg = overlay(statusImg, introImg);<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> The radarImg has two parts.  The infoImg is composed of a few text
 images clipped to a path of a rotating pie.  The lineImg draws the
 the rotating edge of the pie.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr infoImg = emptyImage;<BR>
for(int i=0; i&ltinfo.length; i++) {<BR>
</DIV><DIV STYLE="margin-left: 0.375in">infoImg = overlay(radiate(info[i], (2*Math.PI*i/info.length)+.3), infoImg);<BR>
</DIV><DIV STYLE="margin-left: 0.25in">}<BR>
infoImg = overlay(infoImg, solidColorImage(black));<BR>
Path2Bvr origin = ray(point2(1,0));<BR>
Path2Bvr pie = concat(origin,<BR>
</DIV><DIV STYLE="margin-left: 1.625in">arc(toBvr(0), mod(localTime, toBvr(2*Math.PI)),<BR>
</DIV><DIV STYLE="margin-left: 1.875in">toBvr(1), toBvr(1)));<BR>
</DIV><DIV STYLE="margin-left: 0.25in">infoImg = infoImg.clip(fillMatte(pie));<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create a line of length 0.05 meter then rotate it at the same rate
 the pie is rotating.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">Path2Bvr ln = ray(point2(.05,0));<BR>
ImageBvr lineImg = ln.draw(defaultLineStyle.width(toBvr(.08*cm)).color(white)),<BR>
</DIV><DIV STYLE="margin-left: 0.8125in">radarImg = overlay(lineImg.transform(rotate(localTime)), infoImg);<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Delay the animation to create a more interesting effect.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">radarImg = (ImageBvr)until(emptyImage, timer(toBvr(6)), radarImg);<BR>
introImg = overlay(radarImg, introImg);<BR>
return (ImageBvr)until(solidColorImage(black), timer(toBvr(1)), introImg);<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> This function creates an image from the given text string.  It then
 moves the image to the position defined by the given radians.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.125in">ImageBvr radiate(String text, double radians) {</FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Rotate the vector (0.04, 0) by the given radians, that's where we'll
 translate the image to.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">Vector2Bvr vec = vector2(.04,0).transform(rotate(toBvr(radians)));<BR>
FontStyleBvr fs = defaultFont.family(toBvr("Arial")).color(red).bold();<BR>
ImageBvr img = textImage(toBvr(text), fs)<BR>
</DIV><DIV STYLE="margin-left: 0.375in">.transform(scale2(1.3));<BR>
</DIV><BR>
<DIV STYLE="margin-left: 0.25in">return img.transform(translate(vec));<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Move the given image from the start position to the end position
 after second at the given rate.</TD></TR></TABLE></FONT>
<FONT CLASS=code><DIV STYLE="margin-left: 0.125in">ImageBvr move(ImageBvr img, Point2Bvr start, Point2Bvr end, double rate, double trigger) {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">Vector2Bvr startPos = sub(start, origin2),<BR>
path     = add(startPos, sub(end,start).mul(ramp(0,rate)) );<BR>
path = (Vector2Bvr) until(startPos, timer(toBvr(trigger)), path);<BR>
return img.transform(translate(path));<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Before trigger seconds, return 0.
 After trigger seconds, return localTime*rate.
 When localTime*rate > 1, return 1.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.125in">NumberBvr ramp(double trigger, double rate) {<BR>
</DIV><DIV STYLE="margin-left: 0.25in">NumberBvr rampVal = mul(localTime,toBvr(rate));<BR>
return (NumberBvr) cond(lte(localTime,toBvr(trigger)), toBvr(0),<BR>
</DIV><DIV STYLE="margin-left: 0.75in">cond(lt(rampVal,toBvr(1)), rampVal, toBvr(1)));<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR>
</DIV>}<BR>
<BR>
</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>
<A HREF="Section1.html" TARGET="_top">
<IMG SRC="../../../../../media/image/u_prev.gif"
 WIDTH=71 HEIGHT=16 BORDER=0 ALT="Previous Topic">
</A><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>

</BODY>
</HTML>
