Dynamic HTML part 6 - Filters and Transitions

This month in Publish and Be... (see PC Plus magazine, issue 139) I've been looking at Filters and Transitions, a toolbox full of visual special effects goodies supplied with Internet Explorer 4.0.  Filters let you display objects (text, images or whatever) with effects such as drop shadows and glowing 'halos', while transitions let you display visual changes (such as new text in a DIV or a new image file in an IMG) via wipes and dissolves, just like a presentation graphics program. Below you'll find demo pages, how-to pages, and builder pages which let you design filters and transitions interactively, then copy the source code and paste it into your own Web page source. Have fun!  Paul Stephens.

This month's sample pages can only be viewed in Internet Explorer 4.0 or later. Links to them are in the text below. Click here to jump to a quick-pick list of this month's links. You can also download all this month's pages as a self-extracting archive, for offline browsing - click here for details. The best reference source for filters and transitions is, as always, Microsoft's Internet Client SDK - you can view it online, or download it as a self-extracting file for local viewing (highly recommended).


Filters apply visual effects, such as drop shadows and greyscales, to objects. Filters are static (you set one, it stays the same until you alter it), but by changing their properties from JavaScript and VBScript routines you can achieve animated effects such as flashing halos and gradual fades. View the filter gallery (right) for a full-size view of the main filters, and check out my Interactive Filter Builder, which lets you try out combinations of filters (warning - some are weird!), and generates filter definition strings which you can copy and paste into your HTML page source. Also check out a couple of extra filter tricks, including filters combined with transitions, and using the same filter twice on the same object.

LPmini.jpg (24055 bytes)Lights are a (very) special form of filter - just applying the 'light' filter to an object makes it go black(!), but you can then add ambient, cone and point light sources to illuminate it again. This might sound obscure, but in fact lights provide the most scope for creative authoring (and fun!) of all the filters. Check out How to Use Lights, which walks you through the multi-stage light builder process, then try my Ambient and Cone Light Builder, which lets you design ambient and cone light sources and generates source code for you to cut and paste. The Light Point Builder is a similar designer for point sources, and also has some weird and wonderul (well, a bit wonderful but definitely weird!) demos of animations using lights and scripting. For more light filter scripting demos, try shining spotlights on the clone kids (you'll see what I mean!), moving the spotlight around, applying light filters to an entire page and the random searchlight. Finally, for anyone who can't make it to Cornwall for 1999's total eclipse of the sun, we proudly present our own Solar Eclipse Simulator, showing just(ish!) how it will look over St. Michael's Mount, near Penzance. As always, this month's pages have commented HTML source explaining how the coding works, and the demo pages have linked 'how do they do that?' explaining the authoring techniques further .

TPmini.jpg (17144 bytes)Transitions bring presentation graphics-style wipes and dissolves to the Web. In the anything's-possible spririt of Dynamic HTML, IE 4's transition filters can be used to 'reveal' any visual changes to any filterable object, so as well as the obvious application of wiping one picture over another, you can  make text roll gracefully on and off the screen and even have entire data entry forms dissolve into view. To see a dissolve transition (my favourite) in action, check out basic dissolves - try to get a script error by multi-clicking, then check transitions with error-protection (plus a timer-delayed caption) to see how to solve the problem. My Transition Builder  lets you try out the 24 transition types, while the multi-object demo page highlights text transitions, and shows that the entire contents of a DIV, not just a single object, can be transitioned together. Check out the stopping a transition demo to see what happens when you call a transition fitler's .stop() method, and don't miss the appearance of the clone children page, in which every parent's nightmare -self-cloning kids - comes terrifyingly to life. As well as the 'revealTrans()' filter (wipes and dissolves), IE4 also offers blendTrans(), which cross-fades page content. This is the only filter I've had trouble with - it doesn't work on my Elonex P233 with ATI graphics - but it does work on others, so try the blend transitions demo to see if text and image blends work on your PC.


Quick-reference list of this month's links.

Dont' forget to view the source code of these pages (View..Source from IE 4's menus) to see more information about they were written.

Download this month's pages as a self-extracting archive - details here.

Filters

Filter gallery - examples of all the static filter effects on a single page.
Interactive Filter Builder - design your own filter combinations, cut and paste the DHTML code.
Extra filter tricks - combining filters and transitions, and using the same filter twice on a single object

Lights

How to use the light filter - the order of play for applying the light filter and adding light sources.
Ambient and Cone Light Builder - set ambient parameters, click to set cone positions, then cut and paste the code
Light Point Builder - Design your own point sources, and see animated point demos including UFO attack!
Spotlight on the clone kids - scripting demo for simple interactive light controls.
Moving the spotlight around - it looks harder, but in fact it's still simple scripting.
Applying light filters to an entire page - put a complete page under the spotlight
The random searchlight - searches randomly, courtesy of a cone light and JavaScript.
Solar Eclipse Simulator - it'll happen in Cornwall next year (1999), but it's happening here now!

Transitions

Basic dissolves - try to catch it out and get a script error!
Transitions with error-protection - this one won't be fooled!
Transition Builder - try out the 24 transition types, copy and paste the code.
Multi-object demo - entire DIVs, not just single objects, can be transitioned.
Stopping a transition - using the Stop() method - you may want to do this, but check out the effect first.
Appearance of the clone children - it's a nightmare, but it's fun too.
Blend transitions demo - will they work on your PC?

(Final tip - check the hyperlink (<a>) tags in the source of this page for a way of protecting IE4-only pages from access by non-IE4 browsers)