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.
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 .
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.
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.
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
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!
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)