XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.


A Realist's SMIL Manifesto, Part II

July 17, 2002

In the first part of this article series, I mentioned two big problems -- and addressed the first -- obstructing widespread adoption of SMIL: 

  • Confusion about terminology, versioning, and structure
  • Lack of business and artistic orientation from current literature

The second problem has been key in making SMIL a tough sale because -- just like Flash and SVG -- it is a creative-oriented technology. It lives in the middle of the programmer-designer spectrum, where technocrat literature fails to attract many people from either side.

On one hand, web designers seeing a bouncing ball on the screen tend to react with a simple "I can easily do that in Flash", which is true. On the other hand, programmers, who appreciate the tech-appeal of the way in which the ball is made to bounce, are not being educated about the possibilities SMIL offers for expression. As a result, people on both ends tend to dismiss the whole technology as a nice toy.

The goal of this article is to show SMIL's potential as a technology in service of narrative strategies, adding something extra to the media rich Web.

Structure and Nature

In what follows I will explore three narrative strategies and how to implement them using three important features of SMIL 2.0. The features explained are transitions, declarative animation, and SMIL 2 events. The narrative strategies are condensation, synecdoche, and spatial montage.

The examples are based on the XHTML+SMIL profile, a particular application of the modular nature of SMIL 2.0. It allows the mixture of the SMIL synchronization and timing modules with the well-known XHTML language. The only available (although partial) implementation of XHTML+SMIL 2.0 at the time of this writing is bundled in Internet Explorer 5.5 and above, so you will need Internet Explorer 5.5+ to see the examples. Microsoft refers to its implementation as HTML+TIME 2.0.

This article is not intended to provide a reference, which is nicely provided by the SMIL 2.0 specification itself and the Microsoft HTML+TIME documentation. Instead I've attempted to create a set of examples which both encourage new users into the technology by the strength of the use-cases they cover and explain the principal mechanisms of the language.


Microsoft has implemented a sizable portion of the XHTML+SMIL 2.0 profile in what it calls the HTML+TIME 2.0 behavior (from now on all references to SMIL or HTML+TIME refer to the 2.0 version of each unless otherwise stated.) In Internet Explorer, a behavior is a way of extending HTML by associating foreign tags with a particular implementation, available to the browser either as a default component or an add-in. 

Succinctly put, the HTML+TIME behavior does two things:

  • Allows the use in HTML of a number of SMIL elements (video, animation, audio, par, seq,excl,img,media,ref), some of which were explored in Part 1 of this article.
  • Introduces new attributes, scriptable properties, events, and objects, that implement the notion of a timeline and can be associated with existing HTML elements. This allows traditional content like paragraphs, divs, and img elements to be treated as media to synchronize with SMIL, either by declarative or scripting means.

There are three steps to including the HTML+TIME behavior in an HTML page, as shown below:

Step Description Code
  1. Declare the behavior namespace (note that this is a Microsoft-defined namespace for its HTML-TIME behavior not the SMIL language  namespace)
  2. Tie the namespace to an implementation via the import processing instruction, so the browser can provide the appropriate semantics 
  3. Create a CSS class that includes the behavior. This will allow you to extend the the behavior of pre-existing elements. In this case, the div HTML element.
<html xmlns:t ="urn:schemas-microsoft-com:time">
   <?import namespace="t"   

       .time {behavior: url(#default#time2);}
<body background="black">
    <div height="200" weight="200" class="time">
    <t:video id="monkey" src="monkeybusiness.avi">

After the steps above -- which I've provided in this reusable template -- you are ready to start working and fill the body of the page with synchronized elements.

In what follows we will see declarative and scripting means of putting this partial XHTML+SMIL implementation to use. Applications on top of other SMIL 2.0 players that implement the Language or Basic Profiles (RealONE, GrinS, and SMIL Player by InterObject) can benefit from some of the techniques discussed here, even if they don't support SMIL-enabled HTML (the XHTML+SMIL profile).. 

Pages: 1, 2, 3, 4, 5, 6, 7

Next Pagearrow