Streaming Media World: HTML+TIME Transitions in Internet Explorer 6

Earlier in my series of tutorials on HTML+TIME, I showed you how to build a simple slide show that will play in your Windows Internet Explorer 5.5 (or later) browser. One of the exciting things about watching Microsoft roll out Windows versions of IE is that they seem to be increasingly interested in putting more HTML+TIME capability in their browsers.

And so it is with Internet Explorer 6. As I write this, the public preview of Internet Explorer is beginning to make the rounds. With it comes a new range of HTML+TIME features. One of those feature sets is transitions.

Transitions in IE 6
The inline transitions that Internet Explorer 6 supports are based on the latest SMIL 2.0 specification. In the HTML+TIME world, they are implemented with the use of a t:transitionfilter element. The implementation is a bit early and the browser is in beta so things can always change. But this introductory set of transitions will add a bit more punch to the HTML+TIME framework.

Transitions can be applied to almost any element in a Web document. If you follow the rules, that includes almost all uses of text, images, and video.

Our Slideshow Recap
Before we get much further, let's take a look at the HTML+TIME I used earlier to make a slideshow with:

<html xmlns:t="urn:schemas-microsoft-com:time"> <head><style>.time {behavior:url(#default#TIME2);} </style> <?import namespace="t"implementation="#default#time2"> <title>SMW HMTL+TIME Demo</title></head><body> <t:seq repeatCount="indefinite"><t:par> <img class="time"begin="0"dur="5"timeAction="display"src="first.jpg"/> <div class="time"begin="0"dur="5"timeAction="display"> Morning Fog in Africa</div></t:par> <t:par> <img class="time"dur="5"timeAction="display"src="second.jpg"/> <div class="time"dur="5"timeAction="display"> Sunset at an African Beach</div> </t:par> <t:par><img class="time"dur="5"timeAction="display"src="third.jpg"/> <div class="time"dur="5"timeAction="display"> African Jungle</div> </t:par> </t:seq> </body> </html>