ControlFreak

LANGUAGES: HTML | JavaScript

ASP.NET VERSIONS: 1.x | 2.x

Eye Candy

Harness the Power of DirectX Special Effects

By Steve C. Orr

With a virtually infinite number of Web sites on the Internet, it can feel impossible to make your Web site stand out from the rest. But don t dismay, because there are ways to make Web pages visually jump out and grab peoples attention and they aren t necessarily difficult to implement. By exploiting the capabilities of Microsoft DirectX, you can give users eye candy that will make visiting your Web site a memorable experience.

Who Needs Photoshop?

You could be forgiven if you think the elements in Figure 1 can only be achieved by displaying images in a Web page; but truth be told, there s not a single image on the entire page. All the effects illustrated on the page shown in Figure 1 are produced by applying filters to standard Label controls. Filters are configured via Cascading Style Sheets (CSS). Using filters, you can turbo-charge existing controls and other HTML page elements to have them display in ways you might not have thought possible.

Figure 1: CSS filters are responsible for all the fancy effects seen on this page. There were no images created to achieve this appearance.

For example, the glowing label at the top of Figure 1 is achieved with the following HTML:

<asp:label id="Label2" Width="344px" runat="server"

style="FILTER: glow"> Fancy glowing label </asp:label>

The only thing that sets this apart from a standard label is the style attribute, which tells Internet Explorer to render the text with a glow effect. Behind the scenes, Internet Explorer uses DirectX to achieve this effect. Most other browsers do not currently support filters, but they degrade nicely so don t let that hinder development. Note that the Width attribute is required for most filters to work properly.

The glow filter can accept a couple of optional parameters named color and strength. Color specifies the color of the glow, not the color of the Label text. The strength parameter specifies how powerfully the glow should emanate:

style="FILTER:glow(color=#00ffff, strength=3)"

The blurred label has a similar syntax:

<asp:label id="Label5" runat="server" Width="224px"

style="FILTER: blur(add=true, direction=90, strength=9)"

Height="32px" Font-Size="Large">Blurred Label</asp:label>

The add parameter for the blur filter specifies whether the blur effect should be added on top of the text, or whether it should replace the text entirely. The direction parameter specifies in which direction the text should be smeared. For example, 90 blurs it to the right; 180 blurs it in the downward direction. Finally, the strength parameter lets you specify how subtle the effect should be.

By using the following alternate HTML syntax that renders an identical blurred label you can achieve the same blur effect by invoking DirectX in a more direct way:

<asp:label id="Label5" runat="server"

STYLE="FILTER:progid:DXImageTransform.Microsoft.MotionBlur

(strength=9, direction=90)" Width="224px" Height="32px"

Font-Size="Large">Blurred Label</asp:label>

But Labels aren t the only control with which filters can be used.

Imageless Image Buttons

Standard HTML buttons are square, grey, and downright ugly. Few attractive Web sites use them. Instead, most design-conscious Web designers create images to use in place of buttons. This technique works reasonably well, but the maintenance can be a nightmare. Every time you need a button you must leave Visual Studio, open Photoshop (or an equivalent application), and create it manually. This process can be jarring and tedious. So forget all that. Instead, use a standard button, but spice it up with some filter style attributes that give it a radically different look.

A button doesn t need to look like a button at all, actually. The green oval at the top of Figure 2 is accomplished with this HTML declaration:

<INPUT style="FONT-WEIGHT: bold; FONT-SIZE: 7pt;

FILTER: alpha(style=2,opacity=100,FinishOpacity=0);

CURSOR: hand; COLOR: lime; FONT-FAMILY: small fonts;

HEIGHT: 35px; BACKGROUND-COLOR: olive" type="button"

value="I am a button">

The alpha filter takes three parameters: style, opacity, and FinishOpacity. This example uses style number 2, which specifies an oval shape. opacity=100 and FinishOpacity=0 denote that the oval should be solid in the center and gradually fade out to become completely invisible around the edges. The rest of the style elements you probably find more familiar. They don t especially have anything to do with filters; most of them simply set colors and fonts.

Figure 2: You no longer need Photoshop to create interesting-looking buttons. All the button controls in this page use filters to create graphical looks that can be configured via CSS.

The second button displayed in Figure 2 is configured using the following HTML snippet:

<asp:button id="Button1" style="FILTER:

alpha(style=3,opacity=100,finishopacity=6)

dropshadow(color=black,offy=1,offx=2)

CURSOR: hand; COLOR: red" runat="server"

Text="This is not an ordinary button!" Width="224px"

Height="32px" BorderColor="white"></asp:button>

This button is rendered by combining two different filters: the previously described alpha filter and the dropshadow filter. The dropshadow filter accepts a color parameter that specifies the color of the dropshadow, not the color of the button or the button text. The offy and offx parameters specify the direction of the imaginary light source, and therefore the direction in which the shadow is cast.

The bottom button in Figure 2 simply calls the parameterless fliph filter:

<INPUT style="FILTER: fliph; CURSOR: hand; COLOR: white;

BACKGROUND-COLOR: blue" type="button" value="Backward Text">

This basically displays a mirror image of the standard button by horizontally flipping it. You can vertically flip page elements with the identical flipv filter.

Transition Gracefully Between Pages

Click a link, get a new Web page. Over and over again. It s how the Web has always worked, but it doesn t have to be that boring any more. With transitions you can use animations to fade between pages much like movie makers transition between scenes in a movie. There are a variety of transitions you can use, from checkerboard fade-out patterns to speckled transitions to spirals and beyond. There are more than 20 standard transitions supported by Internet Explorer, plus several more if you go direct by cutting straight to the alternate DirectX transition syntax. (Other browsers simply ignore Transition declarations.)

You can specify a transition that will happen when a specific page is loaded, and you can specify a transition to happen when the page is being exited.

Add the following meta tag to the <head> section of an HTML page to see a speckled entrance when you navigate to this page from another page:

<meta http-equiv="Page-Enter"

content="revealTrans(Duration=1,Transition=12)">

revealTrans uses DirectX behind the scenes to display page transitions. This function call requires two parameters. The Duration parameter specifies (in seconds) how long the animation will last. Normally, this should be a small number so visitors won t have to wait too long for the page to load. The Transition parameter specifies which transition to use. There are about two dozen transitions currently available, although if you specify larger numbers the transitions will start to repeat.

The next meta tag uses an alternate syntax to call DirectX a bit more directly. Specifically, it calls the Wheel method, which accepts the standard duration parameter, as well as the number of spokes the wheel will have as the page turns into the next page; Figure 3 shows this transition in action:

<meta http-equiv="Page-Exit"

content="progid:DXImageTransform.Microsoft.Wheel(duration=1,

spokes=20)">

Figure 3: One page transitioning into another using a spoked wheel animation provided by DirectX.

Figure 4 lists some of the more interesting Transition methods that DirectX provides, each with a unique animation.

Figure 4: Use DirectX transitions to entertain your users with interesting page navigation animations.

Activate Pages with DirectAnimation

The DirectAnimation MultiMedia control has no display of its own. Instead, it is used to animate other controls and page elements. Your Windows users almost certainly have this control already as they almost certainly have DirectX. The HTML listed in Figure 5 displays a standard HyperLink Web control on the page, then hooks it up to the ActiveX control, which causes it to rotate within the page.

<asp:HyperLink id="HyperLink1" style="Z-INDEX: 101;

LEFT: 120px; POSITION: absolute; TOP: 48px" runat="server"

NavigateUrl="http://SteveOrr.net"> Rotating Hyperlink

</asp:HyperLink>

<OBJECT id="DA1" VIEWASTEXT

classid="CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6">

 <PARAM NAME="Target" VALUE="HyperLink1">

 <PARAM NAME="Autostart" VALUE="-1">

 <PARAM NAME="Bounce" VALUE="0">

 <PARAM NAME="Direction" VALUE="0">

 <PARAM NAME="Repeat" VALUE="-1">

 <PARAM NAME="Duration" VALUE="3">

 <PARAM NAME="TimerInterval" VALUE="0.01">

 <PARAM NAME="Shape" VALUE="OVAL(50,50,100,100)">

</OBJECT>

Figure 5: Use the DirectAnimation ActiveX control to animate page elements, such as this example that causes a hyperlink to rotate within the page. This can be a great way to let certain page elements stand out from the rest.

The Target parameter links the ActiveX control to the Hyperlink control. The animation is set to Autostart, and it is configured to not bounce when it hits the peak of rotation. The rotation is set to clockwise (0) instead of counterclockwise (1). The animation is set to circle infinitely instead of a specific number of times. The Duration parameter and TimerInterval parameters specify the speed of the animation and drawing frequency, respectively. Finally, the specific bounds of the circular motion are defined.

A related ActiveX control, The DirectAnimation unified media control, can be used as a drawing surface to draw images from scratch and animate them, as well. The Web page listed in Figure 6 uses JavaScript to interact with the control and draw a throbbing red sphere.

<HTML>

<HEAD>

<TITLE>DirectAnimation Throbbing Sphere</TITLE>

</HEAD>

<OBJECT ID="DAControl"

 STYLE="position:absolute; left:50; top:50;

   width:300;height:300"

 CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D"

 VIEWASTEXT>

</OBJECT>

<SCRIPT LANGUAGE="JavaScript">

<!--

// Reference the DirectAnimation Pixel Library

m = DAControl.PixelLibrary;

// Variable Initialization

period = 2; // Time in seconds

dim = 100;  // Space in pixels

hDim = 3*dim/4;

qDim = dim/2;

sinNum = m.Sin(m.Mul(m.LocalTime,

 m.DANumber(2*Math.PI/period)));

// Construct a red circle with corresponding transform

circleImage = m.Oval(dim,dim).Fill(m.DefaultLineStyle, 

 m.SolidColorImage(m.Red));

circleXF = m.Compose2(m.Translate2(hDim, hDim),

   m.Scale2UniformAnim(sinNum));

finalImage = circleImage.Transform(circleXF);

// Set the image as the model to be displayed.

DAControl.Image = finalImage;

DAControl.Start()// Start the animation.

//-->

</SCRIPT>

</BODY>

</HTML>

Figure 6: The DirectAnimation unified media ActiveX control can be used to draw images dynamically, as well as animate them. The client-side JavaScript in this Web page uses it to display a throbbing red sphere.

The JavaScript section of the page starts by getting a reference to the PixelLibrary exposed by the ActiveX control. Then a few variables are declared to help specify details, such as the speed and size of the animation. The third JavaScript code block then instantiates the circle image before the final code block sends it to the ActiveX control and starts the animation.

To Infinity and Beyond

Filters can be applied to many kinds of page elements, such as Web controls, HTML controls, <div> tags, <span> tags, and more. The potential for experimentation is nearly infinite. I encourage you to experiment with various filters on various page elements to see what kinds of interesting results you come up with. I d love to hear about your results, so send e-mail my way.

Transitions can be used to fade from page to page gracefully. Tinker with the Page-Enter and Page-Exit meta tags, but don t overwhelm your users. I ve seen some Web sites go overboard with such techniques, to the point that it annoys people. Keep the transitions short and only use them on select pages. In many cases it may be more discerning to use the Site-Enter and Site-Exit meta tags instead, so the transitions are applied only as someone enters and exits your Web site, but not after every click within your Web site.

DirectAnimation is used to animate page elements and to create animations from scratch. If you can coax your users to accept the standard security warnings associated with ActiveX controls these days, your powers of animation within a Web page can be virtually limitless.

The sample code in this article is available for download.

Steve C. Orr is an MCSD and a Microsoft MVP in ASP.NET. He s been developing software solutions for leading companies in the Seattle area for more than a decade. When he s not busy designing software systems or writing about them, he can often be found loitering at local user groups and habitually lurking in the ASP.NET newsgroup. Find out more about him at http://Steve.Orr.net or e-mail him at mailto:Steve@Orr.net.

Hot Links

Filter Reference

http://www.w3schools.com/dhtml/dhtml_css.asp

Filters and Transitions

http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp

DirectAnimation

http://msdn.microsoft.com/archive/default.asp?url=/archive/en-us/dnarmulmed/html/msdn_directan.asp