A Realist's SMIL Manifesto, Part II
by Fabio Arciniegas A.
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.
HTML+TIME 2.0
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
- Declare the behavior namespace
(note that this is a Microsoft-defined namespace for its
HTML-TIME behavior not the SMIL language
namespace)
- Tie the namespace to an implementation
via the import processing instruction, so the browser can
provide the appropriate semantics
- 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">
<head>
<?import
namespace="t"
implementation="#default#time2">
<style>
.time
{behavior: url(#default#time2);}
</style>
</head>
<body background="black">
<div height="200" weight="200" class="time">
<t:video
id="monkey" src="monkeybusiness.avi">
</div>
</body>
</html>
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)..