SMIL Development: Create Presentations that Will Make People Smile

SMIL is an acronym for Synchronized Multimedia Integration Language. Despite its spelling, it is pronounced, “Smile.” Based on XML, SMIL not only displays content but also the timing. As a result, it is used to create multimedia presentations and animations. A very simple example would be to display a title card for 5 seconds followed by an image for 10 seconds. But SMIL can do far more than that.

History of SMIL

All the way back in 1997, the World Wide Web Consortium (W3C) started developing SMIL. The first official version (SMIL 1.0) was released in 1999. In 2001, SMIL 2.0 was released, which made some changes to the underlying structure of the language and introduced modules for animation and timing. The current standard is SMIL 3.0, which was released in 2008. It expanded the existing modules and added more.

After the release of SMIL 1.0, Microsoft and some other companies proposed HTML+TIME to the W3C. It was a system to allow SMIL to be displayed in ordinary browsers. W3C changed the system substantially and released XHTML+SMIL, which added SIML functionality to XHTML.

Functionality of SMIL

SMIL allows you to control all the aspects of display that you would control using PowerPoint or a similar multimedia presentation tool:

• Layout
• Timing of events
• Transitions
• Media (images, video, audio)
• Animation with SVG[1]

Why Use SMIL

It may seem like a lot of hassle to learn to code SMIL when you could just use PowerPoint and convert it into a flash format for distribution. But SMIL has a number of advantages over these kinds of approaches. Below are the major ones, but you can learn more by reading, What’s SMIL and Why Should We Use It?

• Open file format. This is especially useful if you are collaborating with one or more people.
• Media files are external. Once your media files are finished, they only have to be uploaded once, even as you make substantial changes to your presentations. In addition, your presentations can use media files on different servers. This also means that various presentations can use the same media files.
• Ease of editing. Wholesale changes to presentations are often very involved. With SMIL it is just a matter of cutting and pasting lines of code.

SMIL Format

SMIL files look a whole lot like normal XHTML files. In fact, the basic format is exactly the same.

After that, there are two parts of the file, just like with an XHTML file: head and body. In the head goes the usual stuff like meta tags. Here we’ve just put in one basic layout tag to set the background to be the color teal.

The body is more interesting. It starts by loading an image and a caption — displaying them for 5 seconds. Then it loads a flash video, waits 5 seconds, and then displays a text caption for it.

In this one example, you see most of the basic functionality of SMIL and how easy it is to create presentations.

Basic Tools

Support for SMIL is sketchy in most browsers. For example, as of version 45, Chrome has deprecated SVG SMIL support. In order to learn to code SMIL, you are best off getting a SMIL viewer. You can use common tools like QuickTime and RealPlayer. You will probably have more success with the open source viewer Ambulant Player. It is actively developed and supports the full SMIL 3.0 specification.

In terms of development, all you really need is a text editor. However, you might want to use an editor tailored to SMIL and XML.

• SMILGen SMIL Generation Tool: an XML editor tailored for use with SMIL.
• LimSee2: a SMIL 2.0 editor that is no longer supporter and very difficult to find.

Resources

There are lots of online resources, but they can be hard to locate because many of them have disappeared over the years. Those that remain are often focused on SMIL 2.0. This isn’t a problem, because it still includes the relevant information. We’ve put together the best resources here.

Overview

• W3C’s SMIL 3.0 Page. This provides specs of the entire system.

Tutorials

• Multimedia 4 Everyone SMIL Page. This page contains an enormous amount of information about different versions of SMIL. But the highlight is the collection of SMIL examples.
• How to SMIL. This tutorial leads you through the process of creating your first SMIL presentation.
• An Introduction to the Synchronized Multimedia Integration Language. This is a tutorial on SMIL 2.0 via Archive.org.

Reference

• W3C’s Synchronized Multimedia Page: if you want to get into the nuts and bolts of SMIL, this is the place to go.

Books

• SMIL For Dummies< by Heather Williamson. This is an easy introduction to SMIL, but it is an old book that focuses mostly on SMIL 1.0 and 2.0.
• SMIL 3.0: Flexible Multimedia for the Web, Mobile Devices and Daisy Talking Books by Dick Bulterman and Lloyd Rutledge.
• Beginning XML by Joe Fawcett, Liam Quin, and Danny Ayers. The book only touches on SMIL, but provides a good foundation in XML, which is the core of SMIL.
• SVG Essentials by J David Eisenberg and Amelia Bellamy-Royds. Not about SMIL per se, but very useful for SMIL coders.

Conclusion

SMIL is a great tool for people who want to create and distribute presentations. And it is especially useful if you want to create presentations that need to be updated from time to time. There is a modest learning curve, but once you get the hang of it, it is as easy as coding XHTML. And it allows you to easily reuse code you’ve used before.

[1] SVG stands for Scalable Vector Graphics. Using SMIL, you can create animations by making time-dependent modifications to the graphics.