Eye Candy

ControlFreak

LANGUAGES:HTML | JavaScript

ASP.NETVERSIONS: 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 tdismay, because there are ways to make Web pages visually jump out and grab peoples attention and they aren t necessarily difficult to implement. By exploitingthe capabilities of Microsoft DirectX, you can give users eye candy that willmake visiting your Web site a memorable experience.

Who Needs Photoshop?

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

Figure 1: CSS filters areresponsible for all the fancy effects seen on this page. There were no imagescreated to achieve this appearance.

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

style="FILTER: glow"> Fancy glowing label

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

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

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

The blurred label has a similar syntax:

style="FILTER: blur(add=true, direction=90,strength=9)" Height="32px" Font-Size="Large">BlurredLabel

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

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

STYLE="FILTER:progid:DXImageTransform.Microsoft.MotionBlur (strength=9, direction=90)" Width="224px"Height="32px" Font-Size="Large">Blurred Label

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

Imageless Image Buttons

Standard HTML buttons are square, grey, and downrightugly. Few attractive Web sites use them. Instead, most design-conscious Webdesigners create images to use in place of buttons. This technique worksreasonably well, but the maintenance can be a nightmare. Every time you need abutton you must leave Visual Studio, open Photoshop (or an equivalentapplication), and create it manually. This process can be jarring and tedious. Soforget all that. Instead, use a standard button, but spice it up with some filterstyle 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 HTMLdeclaration:

value="I am a button">

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

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

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

Text="This is not an ordinary button!"Width="224px" Height="32px" BorderColor="white">

This button is rendered by combining two differentfilters: the previously described alpha filter and the dropshadow filter. The dropshadowfilter 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 parametersspecify the direction of the imaginary light source, and therefore thedirection in which the shadow is cast.

The bottom button in Figure 2 simply calls the parameterlessfliph filter:

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

Transition Gracefully Between Pages

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

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

Add the following meta tag to the

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

revealTrans uses DirectX behind the scenes to display pagetransitions. This function call requires two parameters. The Duration parameterspecifies (in seconds) how long the animation will last. Normally, this shouldbe 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 twodozen transitions currently available, although if you specify larger numbersthe transitions will start to repeat.

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

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

spokes=20)">

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

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

Figure 4: UseDirectX transitions to entertain your users with interesting page navigationanimations.

Activate Pages with DirectAnimation

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

NavigateUrl="http://SteveOrr.net"> RotatingHyperlink

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

The Target parameter links the ActiveX control to theHyperlink control. The animation is set to Autostart, and it is configured tonot 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 infinitelyinstead of a specific number of times. The Duration parameter and TimerIntervalparameters 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 unifiedmedia control, can be used as a drawing surface to draw images from scratch andanimate them, as well. The Web page listed in Figure 6 uses JavaScript tointeract with the control and draw a throbbing red sphere.

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

The JavaScript section of the page starts by getting areference to the PixelLibrary exposed by the ActiveX control. Then a fewvariables are declared to help specify details, such as the speed and size ofthe animation. The third JavaScript code block then instantiates the circleimage before the final code block sends it to the ActiveX control and startsthe animation.

To Infinity and Beyond

Filters can be applied to many kinds of page elements,such as Web controls, HTML controls,

tags, tags, andmore. The potential for experimentation is nearly infinite. I encourage you to experimentwith various filters on various page elements to see what kinds of interestingresults you come up with. I d love to hear about your results, so send e-mailmy way.

Transitions can be used to fade from page to pagegracefully. Tinker with the Page-Enter and Page-Exit meta tags, but don toverwhelm your users. I ve seen some Web sites go overboard with suchtechniques, to the point that it annoys people. Keep the transitions short andonly use them on select pages. In many cases it may be more discerning to usethe Site-Enter and Site-Exit meta tags instead, so the transitions are appliedonly as someone enters and exits your Web site, but not after every clickwithin your Web site.

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

The sample code inthis article is available for download.

Steve C. Orr is anMCSD and a Microsoft MVP in ASP.NET. He s been developing software solutionsfor leading companies in the Seattle area for more than a decade. When he s notbusy designing software systems or writing about them, he can often be foundloitering 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:[email protected].

Hot Links

Filter Reference

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

Filters andTransitions

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