Looking Back
For a long time, dynamic movement on a Web site meant GIF animations, which were both tedious to create and annoying after the first three repetitions. Then came Macromedia Flash, one of the cooler authoring tools for Web animation, and, with its powerful tweening toolkit, turned drab Web sites into rich landscapes of sound and colour.
Of course, in order to truly exploit Flash’s capabilities, you need to know the basics of animation…not always a feasible option, especially for non-technical users who just want to put together a quick online presentation or display a series of sequentially-linked or synchronized media clips. GIF animation doesn’t have the requisite power or flexibility for the needs of such users, while the dazzling array of options available in Flash tends to intimidate.
Which brings me to SMIL…
Getting The Tools
Let’s start with the basics…what the heck is SMIL, anyway?
SMIL is the Synchronized Multimedia Integration Language, a language designed to create interactive multimedia presentations using various types of media, including audio, video, images and text. Based on XML, SMIL allows developers to synchronize and coordinate the presentation of different media files, thereby making it possible to easily and quickly create Web-based multimedia offerings.
SMIL includes supported for a wide variety of media types, including RealAudio and RealVideo, MPEG, JPEG, GIF, ASCII, HTML, AVI, WAV and AU formats. It therefore opens the door to a number of interactive Web-based multimedia applications, including interactive online presentations,
There are currently two flavours of SMIL available - SMIL 1.0 and SMIL 2.0. SMIL 1.0 was adopted by the W3C as a formal specification in 1998; this first version included a basic timing model, together with support for element layout and hyperlinks. SMIL 2.0 was formally released in 2001, with support for new animation and content control modules, enhanced layout capabilities, support for XML-based linking formats like XLink and XPointer, and a more sophisticated timing model (this tutorial uses SMIL 2.0).
Over the course of this tutorial, I’m going to show you the basics of creating an SMIL document that uses multiple media types to create a synchronized online presentation, in an attempt to offer you an alternative to the more complex tools currently available.
My tools to accomplish this are pretty basic, and available free of charge: an authoring tool, which can be any text editor, and a player to play back your SMIL presentation. A number of good players are available - take a look at the links at the end of this article for a complete list - but I’d recommend RealNetworks’ RealOne player, available for download from http://www.realnetworks.com/. Get yourself a copy, and then flip the page for your first look at an SMIL file.
Anatomy 101
SMIL files are based on XML, and therefore inherit all the attributes (and constraints) of that toolkit. An SMIL document consists of a series of nested elements, or tags, each one controlling some aspect of the final result. As with any XML document, element names are case-sensitive, and must be correctly nested in order for the document to be well-formed.
Here’s a simple SMIL document:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="500" height="400" backgroundColor="white" />
<region id="alpha" left="120" top="150" width="250" height="200" />
</layout>
</head>
<body>
<img src="logo.jpg" alt="First image" region="alpha" />
</body>
</smil>
In order to see how this works, save this document with a “.smil” file extension - for example, “simple.smil” - and then pop open your copy of the RealOne player and load this file into it. Once the player parses the file, you should see something like this:
Not very exciting, huh? Don’t worry - we’ll jazz it up a little further down. For the moment, let’s just dissect the code above and see what each of those elements actually does.
Every SMIL document must begin and end with a pair of <smil>…</smil> elements; everything contained within these elements forms part of the SMIL presentation. The XML namespace for SMIL should be included in these elements via the “xmlns” attribute.
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
...
</smil>
The remainder of the document can broadly be divided into the <head> and the <body>, in much the same way as a regular HTML document. The <head> contains metadata (a description of the media presentation or a copyright notice) and layout information, while the <body> contains the elements that reference the actual media content or set up timers.
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<
head>
...
</head>
<body>
...
</body>
</smil>
Laying It Out
The layout is probably the most important part of the structure of an SMIL document - it defines both global window attributes, such as window size and colour, for the presentation, as well as separate, independent regions for the various media clips that are to be integrated into the presentation. As I noted on the previous page, this layout information appears within the <head> of the SMIL document.
Here’s an example:
...
<layout>
<root-layout width="500" height="400" backgroundColor="white" />
<region id="alpha" left="120" top="150" width="250" height="200" />
</layout>
...
As you can see, the <layout> block above contains both <root-layout> and <region> elements, the former defines window attributes, while the latter define separate regions within the presentation. The example above defines a window of height 400 pixels and width 500 pixels, and further defines a region within it named “alpha”. This region will contain embedded content (discussed a little further down).
It should be noted that, apart from the absolute positioning demonstrated in the snippet above, SMIL also allows regions to be positions relative to the window. The following snippet defines a region that’s always 20% away from the left window border and 40% away from the top window border.
...
<region left="20%" top="40%" width="20" height="40" />
...
Once the various <region>s have been defined, the next step is to identify media elements to be embedded within each of them. The various media elements are defined within the <body> of the SMIL document and linked to a region using the region’s “name” attribute. Consider the following example, which places the JPEG image “logo.jpg” in the region named “alpha”:
...
<img src="logo.jpg" alt="First image" region="alpha" />
...
Each of the various media types supported by SMIL has a corresponding element in the SMIL namespace, and can be referenced using that element. Here’s a list:
| Media type | Element |
|--|--|
| Images | <img> |
| Audio | <audio> |
| Video | <video> |
| Text | <text> |
| Text streams | <textstream> |
| Flash animation | <animation> |
| Color block | <brush> |
| Any other media type | <ref> |
Each of these elements has a list of attributes, which are usually specific to that media type. Consider the following example, which uses a number of different media types in the same SMIL document:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="500" height="400" backgroundColor="white" />
<region id="alpha" left="20" top="20" width="250" height="100" />
<region id="beta" left="100" top="100" width="100" height="100" />
<region id="gamma" left="200" top="200" width="100" height="100" />
<region id="omega" left="250" top="250" width="100" height="100" />
</layout>
</head>
<body>
<img src="logo.jpg" alt="Image" region="alpha" />
<text src="data.txt" alt="Text" region="beta" />
<animation src="anim.swf" alt="Animation" region="gamma" />
<audio src="bg.wav" alt="Audio" region="omega" />
</body>
</smil>
And here’s a brief list of what each of those attributes does:
id - defines a unique identifier for the media;
src - defines the source of the media file;
title - defines a title for the media clip;
alt - defines alternate text for the media clip
begin - defines the time at which the clip must start
end - defines the time at which the clip must stop
region - links the media to a defined region
This is not an exhaustive list - SMIL 2.0 contains a much larger list of attributes, some of them offering very fine-grained control over the media to be displayed. I’m not going to get into the details here - take a look at the SMIL 2.0 specification, linked at the end of this document, for details.
Spending Time
SMIL also includes a fairly sophisticated timing model which allows you to control the timing and synchronization of media objects within the lifetime of the SMIL presentation. Basic timing support is made available via the “begin” and “dur” attributes, which allow you to specify a start time and duration respectively for the media. Values for these attributes may be specified in terms of time values or event notifications. Here’s an example:
...
<img src="logo.jpg" alt="Image" region="alpha" begin="5s" />
...
In this case, the media will begin playing (in other words, the image will be displayed) 5 seconds after the SMIL document has been loaded.
You can also specify a duration for the media:
...
<img src="logo.jpg" alt="Image" region="alpha" begin="5s" dur="10s" />
...
This sets up a clip of total duration 15 seconds, with the image appearing 5 seconds into playback.
You can repeat an element via the “repeatCount” attribute, as follows:
...
<img src="logo.jpg" alt="Image" region="alpha" begin="5s" dur="10s" repeatCount="2" />
...
This would set up a clip of total duration 25 seconds, with the image appearing 5 seconds into the clip.
It’s also possible to explicitly terminate playback of a media clip before it gets to the end of its normal lifetime with SMIL’s “end” attribute. Consider the following example, which demonstrates by ending a 10-second audio clip after 6 seconds.
...
<audio src="bg.wav" region="alpha" end="6s"/>
...
It’s also possible to begin or end clips on specific events, such as a mouse click or the start of any other media clip within the document. Consider the following example, which plays a video clip; the clip ends when the user clicks the mouse on it.
...
<video src="video.rm" region="alpha" end="click" />
...
A number of other options are available for event-based timing in SMIL – take a look at the specification for a complete list, together with usage examples.
Playing In Sync
Of course, in the real world, it’s unlikely that you’ll be using a single media clip within your SMIL file. And as the number of elements increases, so does the need for synchronization between them. Which is why SMIL includes three synchronization elements, designed to address your most common needs.
The first of these is the <seq> element, which allows you to group a bunch of elements together and play them back sequentially. Here’s an example:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="800" height="600" backgroundColor="white" />
<region id="alpha" left="20" top="20" width="250" height="100" />
<region id="beta" left="120" top="420" width="700" height="100" />
</layout>
</head>
<body>
<seq>
<audio src="bg1.wav" region="alpha" />
<audio src="bg2.wav" region="beta" />
</seq>
</body>
</smil>
In this case, the two audio files are played sequentially, one after the other. Obviously, you can exert further control over the manner in which they are displayed by placing appropriate “begin”, “dur” and “end” attributes for each element.
...
<body>
<seq>
<audio src="bg1.wav" region="alpha" begin="5s" dur="2s" />
<audio src="bg2.wav" region="beta" />
</seq>
</body>
...
In this case, the first audio file would begin playing 5 seconds into the clip, die after 2 seconds, and would be immediately followed by the second file, which would play all the way through.
SMIL also allows you to play back media in parallel, rather than sequentially, via the <par> grouping element. Consider the following variant of the previous example, in which both audio files are played simultaneously in their respective regions:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="800" height="600" backgroundColor="white" />
<region id="alpha" left="20" top="20" width="250" height="100" />
<region id="beta" left="120" top="120" width="600" height="100" />
</layout>
</head>
<body>
<par>
<audio src="bg1.wav" region="alpha" />
<audio src="bg2.wav" region="beta" />
</par>
</body>
</smil>
Obviously, “begin” and “dur” attributes can be used here as well – consider the following example, which plays back an audio file and an image in parallel; the audio file repeats 5 times, with the image appearing on the second iteration:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="800" height="600" backgroundColor="white" />
<region id="alpha" left="20" top="20" width="250" height="100" />
<region id="beta" left="120" top="420" width="700" height="100" />
</layout>
</head>
<body>
<par>
<audio src="bg.wav" region="beta" dur="4s" repeatCount="5" />
<img src="logo.jpg" region="alpha" begin="4s"/>
</par>
</body>
</smil>
It must be noted that although there are time differences in the playback of the two media files in the example above, they are both loaded together.
In SMIL, it is also possible to created nested groups of elements. Consider the following example, which demonstrates:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="800" height="800" backgroundColor="white">
<region id="vid" left ="20" top="20" width="600" height="600" />
<region id="txt" left ="20" top="700" width="300" height="100" />
</layout>
</head>
<body>
<par>
<seq>
<video src="video1.rm" region="vid" begin="6s" end="8s"/>
<video src="video2.rm" region="vid" begin="2s" dur="10s"/>
</seq>
<text src="data.txt" region="txt" />
</par>
</body>
</smil>
Finally, SMIL also provides the <excl> synchronization element, which allows you to create a group of media clips and play them, one at a time, in a pre-defined order. Only one media clip within an <excl> group can be played at any time; parallel play is not permitted within such a block.
Here’s an example:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="800" height="800" backgroundColor="white">
<region id="vid1" left="20" top="20" width="600" height="600" />
<region id="vid2" left="50" top="70" width="100" height="100" />
<region id="img" left="20" top="700" width="300" height="100" />
</layout>
</head>
<body>
<excl>
<video src="video1.rm" region="vid1" begin="15s" end="10s"/> <video src="video2.rm" region="vid2" begin="10s" end="8s"/> <img src="image.jpg" region="img" begin="20s" dur="6s"/> </excl>
</body>
</smil>
In the above exclusive group, the media files are run one after the other, in the order specified in the timing, and not in order of hierarchy.
A Click In Time…
SMIL 2.0 also allows you to create clickable hyperlinks using the <a> and <area> tags. Here’s an example:
...
<a href="http://www.some.host/smil/example.smil">
<img id="image" src="image.jpg" region="alpha"/>
</a>
...
The <a> and </a> elements here are similiar to their HTML counterparts, and can be used to launch new SMIL presentations, either within the current window or in a new window. In the example above, clicking the hyperlink would replace the current SMIL presentation with the new one located at the specified URL.
As with regular HTML, it’s also possible to specify a target for the hyperlink – consider the following example, which launches the target of the link in a different region of the current window.
...
<layout>
<root-layout width="800" height="800" backgroundColor="white"> <region id="alpha" left="20" top="20" width="100" height="100" /> <region id="beta" left="150" top="150" width="200" height="200" /> </layout>
...
<a href="http://www.some.host/smil/example.smil" target="beta">
<img id="image" src="image.jpg" region="alpha"/>
</a>
...
Additionally, the <area /> element can be used to mark spots on a media clip as clickable hyperlinks, in much the same way as an HTML image map. Consider the following example, which demonstrates:
...
<img src="logo.jpg" region="img">
<area href="alpha.smil" shape="rect" coords="10,20,40,60" />
<area href="beta.smil" shape="rect" coords="100,120,140,160" /> </img>
...
Note that the <area> element must appear as a child of the corresponding media type element.
It’s also possible to control the period of time for which a link is active, by specifying appropriate “begin”, “end” and “dur” parameters for each hyperlink. Consider the following example,
...
<img src="logo.jpg" region="img">
<area href="alpha.smil" shape="rect" coords="10,20,40,60" end="11s" />
</img>
...
where the first link is active for 11 seconds only.
Bedtime Reading
Obviously, this is just the tip of the iceberg – SMIL 2.0 offers an immense amount of new functionality related to the timing and sychronization of media clips. I’ve just shown you the basics in this tutorial – there are many more attributes in the SMIL 2.0 specification, covering everything from animation to transition effects, and they allow you to perform some pretty advanced media manipulation using very simple XML-based constructs.
In order to find out more about SMIL’s capabilities, I’d strongly suggest you spend some time at the following links:
The official SMIL 2.0 specification, at http://www.w3.org/TR/smil20/
The CWI SMIL tutorial, at http://www.cwi.nl/~media/SMIL/Tutorial/
The WebTechniques SMIL tutorial, at http://www.webtechniques.com/archives/1998/09/bouthillier/
HTML+TIME, at http://msdn.microsoft.com/workshop/Author/behaviors/htmltime.asp
SMIL samples, at http://www.realnetworks.com/resources/samples/smil.html
The RealOne Player, at http://www.realnetworks.com/
The W3C’s SMIL effort, at http://www.w3.org/AudioVideo/
In case you’d like to read more about SMIL, drop me a line…and, until next time, stay healthy!
Note: Examples are illustrative only, and are not meant for a production environment. Melonfire provides no warranties or support for the source code described in this article. YMMV!
This article was first published on 20 Dec 2002.