• crm_shutterstock

  • Slide Image 3 Title | Welcome to D5 Smartia Theme, Visit D5 Creation for Details

    You can use D5 Smartia for Black and White looking Smart Blogging, Personal or Corporate Websites. This is a Sample Description and you can change these from Samrtia Options

Home arrow learning-to-smil

Posted by: | Posted on: October 28, 2017

Why Should I SMIL?
An Introduction to the Synchronized Multimedia Integration Language

Welcome to this tutorial on the basics of SMIL 2.0. In this introduction I’d like to answer three questions which you may or may not have already asked yourself. Namely, “What is SMIL?”, “Why should I use SMIL?”, and “How will SMIL make me smile?”.

I apologize in advance for making you put up with my bad puns.
What Is SMIL?

Formally, SMIL (pronounced “smile”) is defined as a set of XML modules which are used to describe the temporal, positional, and interactive behavior of a multimedia presentation. Informally, SMIL is a text-based markup language (similar to HTML) which can be used to add timing, layout, animation, and events to what would otherwise be just another static web page.

SMIL has been described by some as a new language which will bring television-style content to the web. While I agree with this statement, SMIL can do even more than that due to its ability to allow interaction with the user. And you won’t have to purchase all of the equipment used in a television studio; a simple text editor is the only tool necessary for creating and editing SMIL presentations.
Why Should I Use SMIL?

I could tell you that SMIL is supported by the World Wide Web Consortium (W3C), RealNetworks, IBM, Intel, Macromedia, Microsoft, Netscape/AOL, Nokia, Ericsson, Canon, Panasonic, Philips, and others (well, I guess I just did), but why should you use SMIL?

First of all, SMIL is free and open. Anyone who wants to create a SMIL presentation can do so free of charge. Not only that, but software writers can also create software to edit and render SMIL presentations without having to pay any fees or purchase any special development tools.

The W3C adopted and published the SMIL 2.0 recommendation August 2001. We can hope that since it’s an open standard, SMIL will eventually be used as widely as HTML.

Secondly, SMIL is easy to learn and use. Anyone familiar with HTML will quickly adjust to writing SMIL documents. And, since SMIL was written as a set of modules, you need to learn only the modules which you want to use.

And finally, SMIL provides capabilities beyond those of any multimedia format yet seen on the web. While many programs and plug-ins exist for animations, layout, etc, none of them combine all of these features seemlessly while providing unique content-control, synchronization, and metainformation facilities. However, SMIL was not designed to replace any of these other formats, but instead to supersede them. A SMIL file can encapsulate your favorite audio, video, and animation files and provide you with greater control over their presentation.
How Will SMIL Make Me Smile?

Well unlike some other languages, SMIL is a language that is a pleaseure to use for a variety of reasons, personally with some I had the distinct urge to leave the house after a very brief travel search, you know, go to somepace far away from San Francsicso, or to do other things I don’t normally like to do, like clean my house or even workout! well SMIL is different becuase it’s a pleasure to use, for a variety of different purposes.

If you’ve ever wanted to make high-quality video presentations but lacked the necessary hardware and software, you’re going to love the timing, synchronization, overlay, and transition effects. If you have a hard time creating content for the lowest common denominator (user), you’ll enjoy the content-control features. And if you’re just tired of static documents, you’ll have fun with the animation and linking modules.

What you can do with SMIL is really only bounded by your experience and imagination. Extensions to SMIL are already appearing on the web. Editing software is available from companies such as Adobe, RealNetworks, DoCoMo, and SMIL Media as well as from Open Source organizations. Player software is available for a number of computer platforms, including hand-held devices. And a rich collection of free documentation is available for download.
How Is This Tutorial Organized?

The following lessons will give you a gentle introduction to the basics of SMIL. Each lesson was written to roughly correspond to one of the SMIL modules. Because of this modular design, you can either read the lessons in order or skip to the ones which interest you. However, I do recommend that you read the first two lessons before any others.

The lessons are divided into two parts. The first (lessons 2-6) covers concepts of SMIL without getting into the work of creating a complete SMIL presentation. The second (lessons 7-11) covers more advanced SMIL topics (which are not always used in presentations) while also giving complete, functioning examples.

In the second part I’ll be providing some screenshots of SMIL in action. You can also use one of the many players available to test the examples yourself. See http://www.w3.org/AudioVideo/#SMIL for an up-to-date list of programs.

Be sure to use a SMIL player which supports SMIL 2.0.

Accordingly, you’ll need to have patience with the first five lessons. Some of the concepts introduced may be a little abstract or unclear at first. Don’t worry about that. Instead, concentrate on learning the syntax and ideas presented there and you’ll be prepared for the next five lessons.

You’ll also find a few questions, and sometimes assignments, at the end of each lesson. These were designed to test your understanding of the material presented and shouldn’t be too difficult. When math is involved, I have deliberately kept it simple.

If you really enjoy math, you can always take a look at the normative sections of the W3C recommendation. Be aware that those sections are not for the faint-of-heart!
What Are You Waiting For?

All that you’re expected to know is a little bit about hypertext and the World Wide Web in general. Namely, you should be able to edit text files and understand how a URI (URL) works. Knowledge of HTML isn’t technically necessary, but it will be extremely helpful.

I hope you enjoy using this tutorial as much as I enjoyed writing it. And now I welcome you to take the first steps towards joining the growing SMIL community!
The Making of a SMIL
Creating a SMIL Document

As I mentioned in the introduction, all that you need to create a SMIL presentation is a text editor. SMIL documents are actually XML documents which conform to the SMIL XML DTD. Don’t let this intimidate you; writing a SMIL document by hand is actually very simple, and anyone with experience writing HTML should catch on in no time.

Actually, HTML itself has recently been made into an XML DTD which goes by the name XHTML.
XML Boilerplate

Let’s go ahead and get some required declarations out of the way. First, every SMIL file should start with a line identifying it as an XML document. The following will work in most cases: <?xml version=”1.0″?>

And next, a line declaring it to be a SMIL 2.0 document:

<!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN” “http://www.w3.org/2001/SMIL20/SMIL20.dtd”>

This part of the file is formally called the XML prolog and/or Document Type Declaration (not to be confused with the other DTD).
XML Syntax

Here is a basic breakdown of XML syntax (and hence SMIL syntax):

* A document is made up of elements.
* Each element has either a start-tag and end-tag or an empty-element tag.
* Tags are identifiers enclosed within less-than (<) and greater-than (>) characters.
* Elements are ended with a forward-slash (/) character, either at the beginning of an end-tag or at the end of an empty-element tag.
* Elements may have one or more attributes. Each attribute is a name/value pair in the form name=”value” (The value must be enclosed in quotes).
* A set of start and end tags surround the text (or other elements) which they’re marking up. (Empty-element tags contain all of their information as attributes.)
* Elements may contain other elements (this is called nesting).

If this is confusing for you now, don’t worry, it will make a lot more sense as we continue through the tutorial.

You may have noticed that XML is very similar to HTML (this is no coincidence). However, there are some differences:

* XML tags are case-sensitive. This means that the tags <smil> and <SMIL> are not the same. All SMIL tags are lower-case except when the tag is considered two words, in which case the second word is capitalized (as in <animateMotion>).
* Empty-element tags require a forward-slash (/) at the end of the tag (before the greater-than (>) character).
* Elements with a start-tag must have a corresponding end-tag.

<?xml?> is technically a tag, but it’s not really an element due to the question marks. It’s actually called an XML declaration. The Document Type Declaration isn’t really an element either.
The <smil> Root Element

At the root of a SMIL document (usually immediately following the prolog) you should place the <smil> element. Like the <html> element in HTML, it surrounds the entire document. Unlike the <html> element, it requires at least one attribute, the xmlns (XML NameSpace):

<smil xmlns=”http://www.w3.org/2001/SMIL20/Language”>

It’s also a good idea to include some information about which (spoken) language(s) the SMIL file is intended for by using the xml:lang attribute and a title for the presentation using the title attribute:

<smil xmlns=”http://www.w3.org/2001/SMIL20/Language” xml:lang=”en” title=”SMIL template”>
The <head> and <body> Elements

Just like an HTML document, a SMIL document is divided into its <head> and <body>. The <head> of the document is used to describe the content and the <body> is used to present it. Most of a SMIL presentation is located inside of the <body> and all of the elements I present in the rest of the tutorial are located there unless I specifically say otherwise.
Putting It All Together

Bringing all of the above together gives us a complete, valid, well-formed SMIL document. Of course, it doesn’t really do anything yet, but it’s a good start.

<?xml version=”1.0″?>
<!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN” “http://www.w3.org/2001/SMIL20/SMIL20.dtd”>
<smil xmlns=”http://www.w3.org/2001/SMIL20/Language” xml:lang=”en” title=”SMIL template”>

While not all programs capable of rendering SMIL documents will require all of the above, it’s a good idea to have it anyway. You may want to create a template file for all of your SMIL documents so that you don’t have to type this out every time. Not even I remember the correct Document Type Declaration!
Test Your Understanding

Answers for this and all other exercises are on the answers page.

1. What is a SMIL file?
1. A text file
2. An XML file
3. All of the above
4. None of the above
2. Which of the following is not a valid SMIL element? (Hint: Look at the syntax, not the name.)
1. <a href=”http://www.w3.org/TR/REC-xml”></a>
2. <par begin=”0″/><par>
3. <smil xmlns=”http://www.w3.org/2001/SMIL20/Language”></smil>
4. <param name=”pace” value=”fast” valuetype=”data”/>
3. What’s wrong with the following element? <smil xmlns=http://www.w3.org/2001/SMIL20/Language></smil>

What’s in a SMIL?
Incorporating Media Objects

True to its name, SMIL integrates and synchronizes multimedia. In order to do this, it uses the concept of a media object. You’re probably already familiar with most of the media object types handled by SMIL, and in fact one of them is taken directly from HTML.

Here are the types supported by SMIL 2.0:

A still image, just like one you would use in an HTML page (JPEG, GIF, PNG, etc).
A video, possibly also containing audio (MPEG, AVI, MOV, etc).
Stand-alone audio, either compressed or raw (MP3, WAV, AU, etc).
An animation, usually using vector graphics (SVG, SWF, VML, etc).
Plain old text, promoted to the level of media object (TXT, ASCII, etc).
A stream of plain old text along with timing (and possibly other) information (SUB, RT, SAMI, etc). (Think of a news ticker or subtitles.)

There is also a ref object for making a reference to all other (unknown by SMIL) media objects and a brush object for creating real-time painting effects. Both of these types will require a little bit more explanation.

SMIL distinguishes between discrete (images, text) and continuous (video, audio, animation, textstream) media. These are some more terms which you math fans should love. Also, remember that some graphic files are animated, and although they are included using the <img> element, they can be considered continuous.
Including Media Files (BasicMedia)

So how does one go about adding all of this media to a presentation? You do so through the use of elements, very similar to what you would do in HTML. Each media object has a distinct element name and uses the src attribute to specify the name of the file where the media is located. Here’s a couple simple examples of including a JPEG image and an MPEG video, respectively:

<img src=”picture.jpg”/>

<video src=”movie.mpg”/>

Unlike with HTML, you must always include a forward-slash (/) at the end of empty-element tags.

It’s as simple as that. All media objects are declared in the same way, and they all have only the src and type attributes (the type attribute will not be covered in this tutorial). Pretty simple, right?

Ok, I lied, or at least I didn’t tell you the whole truth. So far I’ve only been speaking about the BasicMedia module (remember, SMIL is composed of a number of XML modules). However, when you add the MediaParam, MediaClipping, MediaClipMarkers, BrushMedia, MediaAccessibility, and MediaDescription modules, things get a little bit more interesting. Unfortunately, we’ll only be able to cover some of those here briefly.
Making Media Accessible (MediaAccessibility)

As good web designers will tell you, making content accessible is one of the hardest parts of their jobs. However, there are a number of simple steps that you, as a creator of SMIL presentations, can take to help.

SMIL provides the ubiquitous alt attribute from HTML. It also provides longdesc and readIndex attributes which enable you describe media even further:

This is a brief textual description of the file, usually not even a complete sentence.
With longdesc you can provide a link (URI) to a more detailed description, from a simple sentence to a book-length document. There is no set category for the type of description.
Specifying a readIndex allows you to sequence the presentation of alternate text within a par, seq, or excl element (all three of which will be covered next in Lesson 3: Say Cheese!).

Lets go ahead and include the two media files from earlier, this time providing some helpful information about the contents:

<img src=”party.jpg” alt=”a picture of me from my wild bachelor party” longdesc=”party.txt”/>
<video src=”game.mpg” alt=”a movie of one of the games from my wild bachelor party” longdesc=”game.txt”/>

Now, if someone is unable to view the picture or movie they’ll still be able to have some idea about the content of the files. The file specified by the URI in longdesc is not required to be in any particular format, although in this example it’s assumed that it would be a plain text file (perhaps describing the picture or game along with disclaimers and apologies to the creator’s wife).

Remember that accessibility information is not only provided for the visually impaired user. An alt attribute can also be used to describe an audio file. In fact, accessibility information is useful even to someone without a physical disability: they may not have the necessary software (i.e. to play Windows Media Video files on a Macintosh) or hardware (i.e. to listen to an mp3 on a cell phone).
Controlling Playback (MediaClipping)

Traditionally, when you wanted to present a clip from a media file you would edit the clip (using appropriate software) and then present the clip as a separate file. This works fine if you don’t mind spending a little time and you have write access to the file. But what about when you’d like to provide a number of different clips from the same file or a clip from a file you can’t edit (such as one on someone else’s server)? That’s where the clipping capabilities of SMIL come into play.

Obviously, clipping can only be applied to continuous media such as audio, video, and text streams.

Clipping a file is very simple. You only need to specify when the clip should begin and end using the clipBegin and/or clipEnd attributes. Both attributes take time values in the SMPTE or NPT formats. I won’t cover SMPTE here, but NPT (Normal Play Time) is a format you’re probably already familiar with, and the default for MediaClipping.

Here is an example of clipping the hypothetical movie.mpg file. We’ll assume that the file is 30 minutes in length. Also, the accessibility attributes have been removed here for clarity, but you should always try to include them.

* Starting 20 seconds into the video: <video src=”movie.mpg” clipBegin=”20s”/>
* Cutting out the last 3-minute, 30-second scene: <video src=”movie.mpg” clipEnd=”26:30″/>
* Showing an interesting frame from the middle: <video src=”movie.mpg” clipBegin=”14:55.7″ clipEnd=”14:55.7″/>

In NPT time, a number after a decimal is a frame index.

You can also clip media by using markers, a technique which will not be covered in this tutorial.
Painting with a SMIL (BrushMedia)

Another interesting SMIL media object is the <brush>. Instead of a src attribute you specify a color. Any color format from CSS2 is valid, although the hex format from HTML is the most common, such as in the following:

<brush color=”#FF0A37″/>

Brushes on their own don’t do anything interesting, but they can be put into motion with the help of the other SMIL elements which we’ll be looking at later.
So What’s the Point?

So far, aside from clipping, we haven’t done anything that really couldn’t be handled by HTML. What about all this timing and synchronizing you were promised? Just hang in there, we’ll get to that in the next lesson.
Test Your Understanding

1. True or false: Whenever you provide an alt attribute for a media object you must also specify a longdesc.
2. Which of the following is not continuous media?
1. <audio>
2. <video>
3. <text>
4. <img>
3. Change the following audio object so that it will begin playback 30 seconds into the file: <audio src=”song.mp3″ alt=”my favorite song”/>
4. Extra credit: List some media file types which don’t fit into one of the six media categories listed in the lesson (and would thus need to be included using <ref>).

Say “Cheese”!
Timing and Synchronizing a Presentation (Part 1)

Perhaps SMIL’s greatest strength is its very robust and flexible method of sequencing multimedia. You can be as precise or vague as you like, specifying timing down to the sub-frame level or leaving the calculations up to the SMIL player itself.

Timing and synchronization is really the bread and butter of SMIL, so we’ll need two lessons just to cover the basics. This one will introduce you to the synchronization elements as well as the basic timing attributes, and the next (Lesson 5: Don’t Blink!) will expand on these by showing you how to freeze and repeat media objects, among other things.
Presenting Media Serially

Imagine that during your SMIL presentation you’d like to display a series of advertisements. And, rather than simple animated banner ads, you want to use full-motion video like on television. To the chagrin of your viewers (until SMIL ad blockers are invented), SMIL makes this simple.

The element you would use in this case would be <seq>, which stands for sequence. The semantics for <seq> are very simple: it plays each child media element in order, one-at-a-time.

Remember earlier when I talked about nesting elements? Well, when an element surrounds another element with its start-tag and end-tag, the surrounding element is called a parent and the surrounded one a child. The terminology comes from the computer science concept of a tree, which is what a well-formed XML document looks like to the computer. Other terms you may encounter are ancestor, descendent, root, leaf, and sibling.

So, let’s say that you have three 15-second video clips. Here is how you could present them in order:

<video src=”ad1.mpg” alt=”ad for a new computer”/>
<video src=”ad2.mpg” alt=”ad for an internet service provider”/>
<video src=”ad3.mpg” alt=”ad for a SMIL ad blocker”/>

That’s really all there is to it. You can, of course, do much more with the <seq> element by means of both its and its children’s attributes, which we’ll cover in a bit.
Presenting Media Simultaneously

In contrast to presenting media files sequentially, you can also present them all simultaneously, or in parallel. This is done by using the <par> element (not to be confused with <p> from HTML or the <para> commonly found in XML, both of which stand for paragraph).

Returning to our advertisement analogy, think of the newer types of ads which run during an ongoing television program (they normally occupy the lower 1/4 or 1/3 of the screen). You could say that the program and advertisement are running in parallel. Another good example of parallel presentation is the picture-in-picture feature found on some TVs.

Working with <par> is just like working with <seq> (at least at the syntactical level):

<video src=”ad1.mpg” alt=”ad for a new computer”/>
<video src=”ad2.mpg” alt=”ad for an internet service provider”/>
<video src=”ad3.mpg” alt=”ad for a SMIL ad blocker”/>

So far I’ve been showing you synchronization elements which have media objects of the same type, but this is by no means required.

Although the above is perfectly valid SMIL, it’s a little bit vague. Should the files be played side-by-side? One on top of the other (perhaps alternating between the videos after each frame)? In separate windows? These are questions I’ll address in Lesson 6: Multimedia Dentistry. For now, try to focus on the timing issues of playback and don’t worry about the display.

There is one other sequencing element not covered in this tutorial: <excl>. excl stands for exclusive and functions similar to the <par> element, but as its name implies, it only allows one media file to be played at a time. Think of it as a cross between <seq> and <par>.
The Fundamentals of Timing

SMIL gives you a number of ways to specify the start and end times of media objects. This is done by adding extra attributes to a media object (and other elements, as you’ll see later). However, an element’s timing only makes sense in the context of its parent synchronization element.

Before we get into any more detail, it will be helpful to understand what SMIL refers to as a clock value. Here are some examples:

16 seconds (the same as “16s”)
2 hours, 45 minutes, 14 seconds, and 273 milliseconds
7 minutes
30 minutes
1 hour
1 second and 480 milliseconds
1480 milliseconds (the same as above)

Values after a decimal point indicate fractions of a second when dealing with timing and frame numbers when dealing with clipping.
Specifying Start Times

Let’s suppose that you want to add a 2-second delay between the various advertisements in your presentation. You can do so by adding a begin attribute to the media object with a clock value:

<video src=”ad1.mpg” alt=”ad for a new computer”/>
<video src=”ad2.mpg” alt=”ad for an internet service provider” begin=”00:02″/>
<video src=”ad3.mpg” alt=”ad for a SMIL ad blocker” begin=”00:02″/>

Notice that the clock values are specified as offsets. This means that they’re timed from the point at which the element would otherwise normally begin.

An element without a begin value is assumed to have one set to “0”.

Now let’s assume that you were trying to achieve the same effect within a <par>. Using “00:02″ would not work as desired because all of the elements in a <par> are offset against the <par> rather than the previous element. What you would get is the first video starting immediately followed by both the second and third videos starting two seconds later. Since you know the implicit duration of the videos (15 seconds), you could do the following:

<!– The following audio clip should play during all of the advertisements –>
<audio src=”ad_music.mp3″ alt=”subliminal advertising enhancer”/>
<video src=”ad1.mpg” alt=”ad for a new computer”/>
<video src=”ad2.mpg” alt=”ad for an internet service provider” begin=”00:17″/>
<video src=”ad3.mpg” alt=”ad for a SMIL ad blocker” begin=”00:34″/>

<!– –> is an XML comment. It has the same syntax as an HTML comment (or rather, an SGML comment, but I’m not going to go into that distinction now).

However, calculating the start times like this can become quite tedious, and in some cases impossible, so SMIL provides a concept called a syncbase.
Synchronizing Off of Another Element

Using a syncbase means synchronizing an element based on some aspect of another element (the base element). A <seq> automatically synchronizes elements based off of the end time of the previous element. It turns out that we can specify this type of behavior inside of a <par>:

<!– The following audio clip should play during all of the advertisements –>
<audio src=”ad_music.mp3″ alt=”subliminal advertising enhancer”/>
<video id=”ad1″ src=”ad1.mpg” alt=”ad for a new computer”/>
<video id=”ad2″ src=”ad2.mpg” alt=”ad for an internet service provider” begin=”ad1.end+00:02″/>
<video id=”ad3″ src=”ad3.mpg” alt=”ad for a SMIL ad blocker” begin=”ad2.end+00:02″/>

Notice that we had to add an id attribute to an element in order to synchronize off of it. Any SMIL element (or any XML element for that matter) may have an id. Stick to using an id which starts with a letter and contains only letters and numbers (a few other characters are valid, but you’ll have to look at the XML specification for the details).

The third video really didn’t need an id, but I added one for clarity.

A syncbase value may only be an id followed by a period (.) and either of the keywords begin or end. We’ll take a look at more interesting synchronization using events in Lesson 8: Service with a SMIL.
Nesting Synchronization Elements

There is another method�considered by some to be more correct�for doing what we’ve just done. In fact, you may have already guessed it. The method involves embedding a <seq> within the <par>:

<!– The following audio clip should play during all of the advertisements –>
<audio src=”ad_music.mp3″ alt=”subliminal advertising enhancer”/>
<video src=”ad1.mpg” alt=”ad for a new computer”/>
<video src=”ad2.mpg” alt=”ad for an internet service provider” begin=”00:02″/>
<video src=”ad3.mpg” alt=”ad for a SMIL ad blocker” begin=”00:02″/>
Specifying Durations and End Times

You can also specify how long a media object should play by using either the dur (for duration) or end attributes. The usage of end is the same as that of begin. However, dur only takes a clock value, or one of the two keywords “media” (signifying the implicit duration of the object) or “indefinite” (a value explored further in the next lesson while dealing with repetition).

You’ve already seen that you can use the clipEnd attribute to achieve the same results, so most of the time the choice between the two methods is a matter of taste. Note however that end can do a few things which clipEnd is not capable of, due to its ability to use syncbases.
Test Your Understanding

1. Which of the following is not a valid clock value?
1. “90.6s”
2. “1.51m”
3. “0.00.06h”
4. “00:01:30”
2. Which of the following means 89 seconds?
1. “89:00”
2. “08:90”
3. “8.9”
4. “01:29″
3. What is wrong with the following code? <seq>
<video src=”intro.xvid.ogg” alt=”intro video clip for SMIL Guide.”/>
<video src=”feature.xvid.ogg” alt=”feature presentation”/>
<audio src=”effects.vorbis.ogg” alt=”sound effects track”/>
<audio src=”dialogue.vorbis.ogg” alt=”speech track”/>
<audio src=”music.vorbis.ogg” alt=”music track”/>
4. Extra credit: Modify the corrected code from the previous question to make the music track start after the sound effects track finishes.

Don’t Blink!
Timing and Sequencing a Presentation (Part 2)

SMIL doesn’t just stop at letting you specify the start and end time of media objects. You can control a large number of other aspects of playback. We’ll take a look at making an object repeat, starting playback based on events, controlling restart behavior, forcing tight synchronization, as well as specifying how objects act after they’ve finished playback.

So far I’ve been using the word playback liberally, and you may think I’m referring only to continuous media. Don’t allow my poor choice of words to fool you; discrete media can also be played back with SMIL, although the visible effects are usually different.
Looping Media

You’ve already seen how to clip media, so let’s now take a look at how to make it play repeatedly. There are two different methods of doing so, each mutually exclusive. You can use whichever is easiest for your particular presentation.

First, you can specify how many times you would like a media file to repeat (also called the number of times it iterates) by using the repeatCount attribute:

<audio src=”ring.wav” alt=”telephone ring” repeatCount=”4″/>

This would play the sound of a telephone ringing four times (perhaps followed by an answering machine WAV).

repeatCount need not be an integer, it can also be a real number. For example, repeatCount=”3.5″ is perfectly valid.

As an alternative to repetitions, you can instead specify the total duration of the looped playback using repeatDur. For example:

<audio src=”ring.wav” alt=”telephone ring” repeatDur=”16s”/>

This would play the telephone ring repeatedly until sixteen seconds have elapsed (possibly cutting the phone off in mid-ring).

There is also another legal value for both repeatCount and repeatDur: “indefinite”. This will loop a media object continuously until something causes it to stop.
Event-based Timing

Although I won’t really get into events until Lesson 8: Service with a SMIL, it’ll be helpful to get used to the idea now. You’ve just seen how media objects can be made to repeat, and now you’ll see how you can use that reptition as a sort of syncbase for other elements.

For example, say that we’d like to show a ringing telephone to the user every time that the ring sound is played. Now say that we have the perfect animated GIF for the purpose: a little telephone with a handset which bounces around a couple times and then stops. Here’s our first attempt:

<audio id=”ring” src=”ring.wav” alt=”telephone ring” repeatCount=”4″/>
<img src=”jumping_phone.gif” alt=”a violently ringing telephone” begin=”ring.repeat”/>

This piece of code may leave you feeling a little bit unsure of the results. What is the <img> end time? How long is it displayed for? I’ll try to deal with these questions when we get to the fill attribute. But for now there is a more important problem: the animated image of the telephone won’t be displayed until the second iteration of the ring sound. This is because the initial iteration of the WAV is not counted as a repetition.
Multiple Timing Rules

To solve the previous problem we could add another <img> element to the <par>, but there’s actually no need for that. SMIL allows you to specify a list of begin or end times. The syntax for doing so is quite simple: just separate the times with a semi-colon (;):

<audio id=”ring” src=”ring.wav” alt=”telephone ring” repeatCount=”4″/>
<img src=”jumping_phone.gif” alt=”a violently ringing telephone” begin=”0; ring.repeat”/>

Do not try to add more than one begin or end attribute (or any attribute for that matter) to an XML element; the results of doing so are undefined.

You could also specify the begin time for the img as “ring.begin; ring.repeat” if that makes more sense to you.
Controlling Restart Behavior

It’s important to make the distinction between repeat and restart. In the above example, the audio file is repeating, while the image file is restarting. In other words, the audio file has a duration which lasts for the entire duration of the <par>, but the image file has four separate durations. This may not seem like it makes a difference now, but it could throw you off once you start making more complex presentations.

I’d also like to point out the possible values of the restart attribute. It can be set to “always”, “whenNotActive”, “never”, or “default”. The default value (“default”) tells SMIL to use the value of the parent’s restart attribute (this is called an inherited value). In our example, SMIL would trace all the way back up to the root of the SMIL document (<smil>) to find the value “always” (the default value for the root element).
The Aftermath

So what exactly happens to our telephone after it jumps around a bit, but before the next ring begins? In this instance, due to it inheriting the default fill value of “auto”, which for an animation is “freeze” (lost yet?), it will do exactly what we want. Namely, it will stay frozen on the last frame of the animation until it is either restarted or removed.

The fill attribute is a little bit difficult to illustrate with simple examples here due to the complexity of the SMIL sandwich timing model and the possible side-effects of its usage with regards to visual layout. You’ll want to either read the W3C’s Synchronized Multimedia Integration Language (SMIL 2.0) or get a feel for it by experimenting with the different values (“remove”, “freeze”, “hold”, “transition”, “auto”, and “default”).
Elements as Compound Media Objects

I have to admit that I’ve been withholding the full truth from you again. So far I’ve been talking about timing information as if it were something you can only add to media objects. But the truth is, you can also add it to synchronization containers (<seq>, <par>, <excl>). In fact, some complex synchronization would be impossible without it.

Now imagine that you have a WAV of a telephone ringing and another of a prerecorded operator message. Stringing the two together would be trivial with what we’ve learned so far:

<audio src=”ring.wav” alt=”telephone ring” repeatCount=”9″/>
<audio src=”operator.wav” alt=”operator saying that the party is not answering”/>

Now let’s further suppose that you want have this go on forever (perhaps you’re creating a new Pink Floyd song). Theoretically it would be possible to do so using a <par> along with the repeat event and some fancy DOM manipulation. But of course there’s a much easier way: adding the necessary attributes to the <seq> itself:

<seq repeatCount=”indefinite”>
<audio src=”ring.wav” alt=”telephone ring” repeatCount=”9″/>
<audio src=”operator.wav” alt=”operator saying that the party is not answering”/>

And that’s all there is to it.

If you’re curious about how to accomplish this the hard way, it may be helpful to know that you can use specific iterations of an element in events, such as “ring.repeat(9)” (this event would be fired on the tenth ring).
Tight Synchronization

We often make fun of the dubbing in old/foreign movies like Godzilla, when the actors’ words are completely out of sync with their lips. We all have a good laugh and eventually adjust to it�after all, that’s how the movie was made and we’re not going to bother learning Japanese in order to watch the original version�but when this sort of thing happens in a movie theater (when the film and audio have gone out of sync) or on our personal computers, it’s not so funny anymore. And with the proliferation of newer media formats which have separate audio and video channels (such as AVI, the Audio Video Interleave), when CPU time is lacking this can become a problem.

Luckily, SMIL provides the syncBehavior, syncTolerance, and syncMaster attributes to deal with just that. There isn’t enough time to cover them in detail here, but once you’ve finished this tutorial you should be able to understand the description of them given in the W3C’s SMIL 2.0 recommendation.
Test Your Understanding

1. True or Fase: Anything that can be done with a <seq> can also be done equally well (although not as simply) by using a <par> instead.
2. How many times will the phone ring in the following block of code assuming that the WAV is three seconds in length? <seq repeatCount=”3″>
<audio src=”ring3.wav” alt=”a three-second telephone ring” repeatDur=”21″/>
1. 7
2. 9
3. 21
4. 63
3. Simplify the following block of code by removing any unnecessary elements or attributes: <par>
<seq id=”greetings”>
<text id=”hello” src=”hello_world.txt” alt=”information about my first SMIL presentation” begin=”greetings.begin” end=”hello.click”/>
<text src=”/legal/fbi.txt” alt=”FBI copyright warning” begin=”hello.end” dur=”00:05″/>
4. Extra Credit: Change the FBI copyright warning from exercise 3 to start two seconds after the hello_world.txt ends (for dramatic buildup). Hint: you’ll need to specify both an event and an offset, using the addition (+) operator. There is more than one correct answer.

Multimedia Dentistry
Laying Out Audio and Video (Part 1)

Up to this point we haven’t created a complete SMIL presentation because I haven’t yet explained to you how to control a very important part of multimedia presentations: layout. In this lesson I’ll introduce you to the basic concepts of layout, and in the next (Lesson 7: Multimedia Orthodontics) I’ll show you enough to enable you to create a few presentations.

SMIL has basic layout capabilities similar to what you’d find in Cascading Style Sheets (CSS). In fact, if you already know CSS, you’ll have an advantage when learning SMIL’s BasicLayout and HierarchicalLayout modules, as many of the names and concepts therein are the same.

We’re going to concentrate on the BasicLayout module as it’s the most essential. I’ll also introduce the AudioLayout and MultiWindowLayout modules since they are rather unique to SMIL. The HierarchicalLayout allows you to control the layout of SMIL presentations with the same (or better) level of precision and flexibility provided to you by a combination of HTML and CSS. As such, it is rather complex (it adds well over 30 values, attributes, and elements) and an entire tutorial could be written on it alone. In fact, if you have already studied or plan on studying CSS you will learn 80% of what you need to know for using HierarchicalLayout.

So let’s begin by taking a look at positioning media objects on-screen.
Dividing Space into Regions

You’re already undoubtedly familiar with the term region in relation to geography. A SMIL region is similar in many respects except for one: SMIL regions are always rectangular. This should come as no surprise to anyone who has worked with computers long enough to realize how video memory is managed on a bit-mapped screen.

Arranging media in SMIL is done (usually) as a two-step process. First, a region is created, and then a media object is tied to that region. For creating regions, SMIL has the element <region>. It has a number of attributes (11 to be exact) for specifying where it should be located and how media in the region should be displayed. Here is a brief description of each:

width and height
These two attributes do just as you would expect.
left, right, top, and bottom
These attributes specify the values for the extremities of the region.
backgroundColor and showBackground
These attributes both affect the color of a region (or at least the parts of the region not obscured by media objects).
The fit of a region controls what happends to a media object when its intrinsic width and height do not match that of the region it’s tied to.
You can think of the region name as being similar to an id attribute. However, the regionName need not be unique.
The z-index gives a weighted value of the region’s position on the z-axis. (The z-axis is the third axis of three-dimensional space, the first two being the x and y axes.)

Attributes which are screen measurements (width, height, left, right, top, and bottom) can take relative values (px, em, or ex), absolute values (cm, mm, in, pt, or pc), or percentages. Here I’ll be using mostly px (pixels), cm (centimeters), and percentages.

I encourage you to read Section 4.3 of the CSS2 recommendation for a better understanding of these values.

You can probably already visualize how regions are declared, but here are a few examples:

<region id=”CIF-NTSC” width=”352px” height=”240px”/>
<region id=”US-photo” width=”6in” height=”4in”/>
<region id=”half-center” left=”25%” top=”25%” width=”50%” height=”50%”/>
Grouping Regions into a Layout

While a solitary region may make sense, it’s not useful in a SMIL document until it has been added to a <layout> element. A <layout> groups one or more regions in the same way that a synchronization container groups media objects. The difference is that there is only one <layout> for a SMIL document and it cannot contain another nested <layout>. Also, the <layout> element must occur in the document’s <head>.

So to use all of the regions presented above, you could write the following:

<region id=”CIF-NTSC” width=”352px” height=”240px”/>
<region id=”US-photo” width=”6in” height=”4in”/>
<region id=”half-center” left=”25%” top=”25%” width=”50%” height=”50%”/>

A <layout> can have one attribute named type which allows you to use other layout methods. However, in this tutorial we will be using the BasicLayout module of SMIL and will thus only use the (default) value “text/smil-basic-layout”.

These values don’t really make much sense until they are qualified by another region. They are based on the dimensions and positions of their parent/ancestor elements, or failing that, the window they’re rendered in. In this case the “CIF-NTSC” and “US-photo” regions would overlap (and probably the “half-center” region as well).

Technically width and height can be qualified values when they are percentages.
Using Windows

No, this section is not a mini-tutorial on using the operating system from Microsoft. The term window in our modern Graphical User Interfaces (GUI) refers to a region on screen. In fact, this is where Microsoft Windows got its name.

In HTML the concept of windows doesn’t exist. Eventually JavaScript came along and pop-ups were born. More often than not, unfortunately, pop-up windows are used for advertising or malicious purposes rather than presenting useful information to the user, and because of that many people disable them in their web browsers.

But I’m not here to preach about operating systems or internet ethics. What I’d like to show you is how to control the appearance and behavior of the windows your SMIL presentation is rendered in. This is done by using the <topLayout> element.
TopLayout Semantics

The <topLayout> element has five attributes, three of which we’ve already seen in the <region> element. They are width, height, backgroundColor, open, and close.

Both the open and close attributes control when a window specified by a <topLayout> is displayed. open can take the value of “onStart” and “whenActive”. close, in contrast, can be either “onRequest” or “whenNotActive”. Here’s a simple example:

<topLayout width=”640px” height=”480px” backgroundColor=”#FFFFFF” open=”whenActive” close=”whenNotActive”/>

If you’re a computer programmer or are otherwise familiar with GUI terminology, you can think of a <topLayout> as a top-level or shell window.
Multiple Top-level Layouts

Nothing keeps you from using more than one <topLayout> in your presentation. Sometimes it may be useful to have media objects presented in a separate window. For example, a picture slideshow could have a different window which displays a description of the scene in the current picture.

It’s really up to you to decide how to use multiple windows (if at all). Keep in mind that multiple windows are best suited for displaying information which is only loosely related or not critical to another window. In our example above, displaying the descriptions of the pictures in a separate window gives the viewer the opportunity to close that window.

Although I have been talking about windows here exclusively, SMIL presentations may not always be rendered in traditional GUI windows. In fact, the SMIL working group has gone out of its way to avoid using the term window in the SMIL 2.0 recommendation. That’s just something to keep in mind for the future.

If you’re curious about how to add a title to a window, your best bet is to add the title attribute to the <topLayout>. However, the SMIL player isn’t required to display it! You can also add a title to any other SMIL element.
Laying Out Audio

The concept of audio layout in SMIL is actually very simple. In fact, the AudioLayout module adds only one thing to SMIL: the soundLevel attribute for a <region>. Basically you can think of soundLevel as a volume setting.

soundLevel is specified as a percentage greater than or equal to 0. As with other <region> attributes, soundLevel is relative. I’ll demonstrate soundLevel briefly in Lesson 7: Multimedia Orthodontics.

Since the SMIL 2.0 recommendation says nothing on the matter, we’ll have to assume that the fictitious root soundLevel is set to whatever the computer or device’s mixer is set to.
Test Your Understanding

1. True or False: To set the volume of a region to half of its parent region’s volume, you would use soundLevel=”-50%”.
2. Which of the following is the optimum size of the main <topLayout> (often called the root window):
1. width=”640px” height=”480px”
2. width=”100%” height=”100%”
3. width=”20cm” height=”20cm”
4. none of the above
3. What’s wrong with the following <region>? <region id=”strange” left=”20px” top=”10%” width=”80px” height=”50%” right=”140px” bottom=”90%”/>
4. Extra Credit: Create some hypothetical regions for some media objects you imagine yourself working with in the future.

Multimedia Orthodontics
Laying Out Audio and Video (Part 2)

So far we’ve seen how to declare regions, but not how to go about using them. I’ll show you how to do so in this lesson. We’ll also take a look at some features from the HierarchicalLayout module. And afterwards we’ll make our very first complete SMIL presentation.
Tying Media Objects to Regions

Once you’ve declared a region in the <layout> section of your document, it’s a simple matter to have media objects rendered to it. Just add the id of the region to a region attribute in a media object:

<region id=”half-center” left=”25%” top=”25%” width=”50%” height=”50%”/>
<img src=”photo.jpg” alt=”picture of a snowman in a blizzard” region=”half-center”/>
Stretching and Squeezing

What would happen to the above <img> if its intrinsic width and height had been different from that of the <region>? That depends on the value of the fit attribute of the region.

By default, a region has a fit attribute of “hidden”. What this means is that if a media object is small enough to fit inside of the region, it will be rendered starting from the top-left corner of the region and any remaining space will be filled by the region’s backgroundColor. If the object doesn’t fit within the region it will be hidden (not rendered). There are also other fit values you can use:

Functions the same as “hidden” except that when the media object is too large for the region it is clipped to fit. (This is spacial clipping, not to be confused with temporal clipping which you encountered earlier.)
Functions the same as “hidden” except that when the media object is too large for the region, scrollbars are added.
Automatically fills or scales (stretches or squeezes) media objects to fit exactly within the region.
Functions the same as “scale” except that it preserves the aspect ratio. This means that both the width and height are scaled at the same rate until either of them reach the full extent of the containing region.

Nesting Regions

The final piece of the puzzle, as it were, is the ability to nest regions. This allows you to make much more flexible and complex layouts. Syntactically, nesting regions is very simple. Instead of using an empty-element <region>, use one with start and end tags:

<region id=”two-column” width=”100%” height=”100%”>
<region id=”column1″ left=”0%” top=”0%” width=”50%” height=”100%”/>
<region id=”column2″ left=”50%” top=”0%” width=”50%” height=”100%”/>

Conceptually, hierarchical regions might take some getting used to. Again, an understanding of CSS�especially the CSS box model�will be very helpful.

We’re almost to the point where examples would be quite illustrative, but first let’s talk about that z-index I mentioned earlier.
3D Layout

Unfortunately (or fortunately, depending on how you look at it), SMIL doesn’t really provide much in the way of 3D capabilities (other than 3D media objects, which SMIL itself doesn’t know anything about). But an understanding of some simple 3D concepts will help you further understand complex layout.

In a tree-like layout model (which SMIL provides with HierarchicalLayout), children regions are rendered on top of their parent and ancestor regions, that is, unless the z-index of either element is modified.

The z-index is an integer value which specifies where on the z-axis an object finds itself. Objects closer or higher on the z-axis (ones with a larger z-index) will be rendered above others.

SMIL adds one extra layer, if you will. When two or more elements have the same z-index (also referred to as stack level) or are otherwise tied for position on the z-axis (such as when their regions have the same depth in the tree), the elements which begin later will be given a higher position.
A Picture-in-Picture Television (Example)

Much of what you’ve seen in this lesson and the previous one was very abstract, so let’s see if an example will help make things clearer.

Our goal here is to design a SMIL presentation which acts like a picture-in-picture television screen. To do so we’ll need two video sources, one which will fill the screen and another which will occupy the 1/9th of the screen area in the bottom-right corner. This means that the second video should be 1/3rd the width and 1/3rd the height of the first. I’ll use two freely available videos from the Moving Image Archive of the Internet Archive: chameleon.mpg (a CG video from Siggraph 2001) and earthquake.mpg (a video from the San Fransisco earthquake), but any two videos will do.

First, we create the desired regions, including a <topLayout> which matches the size of our chameleon.mpg video (320×240):

<topLayout width=”320px” height=”240px”>
<region id=”main-video” left=”0%” top=”0%” width=”100%” height=”100%”>
<region id=”corner-video” left=”67%” top=”67%” width=”33%” height=”33%” fit=”scale” soundLevel=”0%” />

It’s important to realize that there is more than one correct way to write the above code. What you see is my style only; yours may be different. I prefer to use a nested region to clearly show which video will be rendered on top. I also prefer to use explicit left and top values and to provide width and height instead of right and bottom. Feel free to adapt this block of code to your own style.

The scale attribute is necessary because both the videos are the same size and we’d like to stretch the corner video to fit into the allocated sub-region. The soundLevel attribute isn’t really necessary, as the earthquake.mpg video has no audio, but it’s a good habit to write explicit code.

The HierarchicalLayout module gives <topLayout> nesting just like the <region> element.

Next, we add the media objects and the necessary synchronization elements:

<video id=”chameleon-video” src=”chameleon.mpg” alt=”an animated chameleon” region=”main-video”/>
<video id=”earthquake-video” src=”earthquake.mpg” alt=”San Fransisco earthquake aftermath” region=”corner-video” end=”chameleon-video.end”/>

The <par> was an obvious choice. We only need both videos to play through once, so we don’t have to worry about repetition. I explicitly told the SMIL player to end the corner video once the main video has finished. In this example the videos are the same running length, but again, it’s a good idea to be explicit.
Finishing Touches

Now let’s take what you’ve learned from Lesson 1: The Making of a SMIL to make this into a full SMIL document:

<?xml version=”1.0″?>
<!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN” “http://www.w3.org/2001/SMIL20/SMIL20.dtd”>
<smil xmlns=”http://www.w3.org/2001/SMIL20/Language” xml:lang=”en” title=”Picture-in-Picture Television”>
<topLayout width=”320px” height=”240px”>
<region id=”main-video” left=”0%” top=”0%” width=”100%” height=”100%”>
<region id=”corner-video” left=”67%” top=”67%” width=”33%” height=”33%” fit=”scale” soundLevel=”0%”/>
<video id=”chameleon-video” src=”chameleon.mpg” alt=”an animated chameleon” region=”main-video”/>
<video id=”earthquake-video” src=”earthquake.mpg” alt=”San Fransisco earthquake aftermath” region=”corner-video” end=”chameleon-video.end”/>

And here is a screenshot of the presentation in motion:

screenshot of the picture-in-picture example

I don’t know if this example was as exciting for you as it was for me, but here are a few things to keep in mind:

* We didn’t have to use any video editing software.
* We could easily change the size and position of the corner video just by editing one or two lines of the SMIL file.
* The video files don’t even need to be on the local server or client machines.
* We technically didn’t even need to know the sizes of the video. We could have instead instructed the SMIL player to use the intrinsic size of chameleon.mpg.

Test Your Understanding

1. What is wrong with the following code? <head>
<topLayout width=”3cm” height=”5cm” backgroundColor=”#000000″/>
2. You’d like to add your photo to a SMIL presentation. You don’t know the dimensions of it, but you need to tie it to a region of a fixed size. You want to allow the width and height photo to be resized but not distored. Which fit attribute should you use?
1. “slice”
2. “scroll”
3. “fill”
4. “meet”
3. In the following block of code, which media object will be rendered foremost (closest to the user with no other objects obscuring it)? <head>
<region id=”big” width=”50%” height=”50%” fit=”fill” z-index=”1″/>
<region id=”bigger” width=”75%” height=”75%” fit=”fill” z-index=”1″/>
<region id=”biggest” width=”100%” height=”100%” fit=”fill” z-index=”1″/>
<video id=”first” src=”first.mpg” dur=”30s” region=”biggest”/>
<video id=”second” src=”second.mpg” dur=”20s” begin=”10s” region=”bigger”/>
<video id=”third” src=”third.mpg” dur=”10s” begin=”20s” region=”big”/>
1. first
2. second
3. third
4. none of the above

Service with a SMIL
Interacting with the User

You’ve already seen how SMIL can be used to make some pretty impressive TV-like presentations. In fact, these presentations have been almost too TV-like. After all, what good are computers unless they allow interaction with the user?

Of course, SMIL allows many different methods of interaction with users. In this lesson I’ll cover the basics of hyperlinking and show you how to use the click event.
Anchors Away!

I wonder if the person who chose the name a for the HTML anchor element knew how ubiquitous it would become. HTML has it, XML usually uses it, and of course SMIL is no exception.
Anchor Syntax

You can use the <a> element just as you would in an HTML document. As you would expect, <a> has one attribute: href (the target URI of the link). However, SMIL also extends <a> (and all linking elements for that matter) with some attributes unique to SMIL:

This allows you to control whether or not activating the link replaces the currently playing presentation (“replace”) or creates a new one to run in parallel (“new”).
You can set this to “play” (default) to have the presentation in the link immediately start playback or “pause” to wait for a command from the user instead.
Whether or not you have a link replace the current presentation, you can control how the currently running presentation behaves.

Continue playing the presentation. Note that this really only makes sense if you did not set show to “replace”.
Pause the presentation. The user will be able to restart it at the point when it stopped before the link was followed.
This is the same as “stop” except that the presentation resumes where it left off.

Specifying a target allows you to load a link in a specific <region>. This can also be used for HTML frames and other targets which I won’t cover in this tutorial.
This is a boolean value (“true” or “false”) which controls whether or not a link should be loaded in an external application. It’s my opinion that you shouldn’t use this attribute and instead allow the users to configure their SMIL players/browsers as they please.
This functions the same as the HTML accesskey attribute. Simply provide a character and the user will be allowed to type that key instead of or in addition to clicking in order to follow the link.
This is another attribute which functions the same as its HTML counterpart. It takes an integer value to specify its order in the tabbing sequence (when the user tabs between UI elements).
sourceLevel and destinationLevel
Both of these attributes function like soundLevel except that they control the volume of the entire source and/or destination presentation once the link is activated.
This specifies whether the link must be activated (clicked) by the user (“onRequest”) or if it is activated automatically (“onLoad”).

Some players may require the user to press a key combination to use an accesskey such as Control, Alt, Meta, etc.

You can also use the alt attribute with <a> although it’s defined outside of the BasicLinking and LinkingAttributes modules.
<a> Usage

To use <a> to create a link, simply enclose a media object with it:

<a href=”http://www.w3.org/” alt=”the World Wide Web Consortium”>
<text src=”w3.txt” alt=”a brief of the W3C”/>
<a href=”second.smil” alt=”the next presentation in the series” show=”replace”>
<animation src=”credits.svg” alt=”the names of the makers of this presentation”/>
<a href=”pause.smil” alt=”simple animated pause loop” show=”new” sourcePlaystate=”pause” accesskey=”p”>
<img src=”pause.png” alt=”two vertical bars”/>
Objects with Multiple Targets

But wait, there’s more! SMIL can divide up media objects in order to allow them to each link to more than one target. Like with HTML image maps, you can divide a media object spatially (and provide a different link for each area), but you can also divide a media object temporally.

To do so, use the <area> element. It includes the same attributes as <a> as well as shape and coords attributes. I won’t cover the last two here, but they function the same as in HTML.

To divide a media object into temporal sections, nest one or more <area> elements in it and give the area some of the attributes you learned in Lessons 3 and 4:

<video src=”advertisements.mpg” alt=”a series of advertisements” dur=”01:30″>
<area href=”http://advertiser1.com/” begin=”00:00″ end=”00:30″/>
<area href=”http://advertiser2.com/” begin=”00:30″ end=”01:00″/>
<area href=”http://advertiser3.com/” begin=”01:00″ end=”01:30″/>
Responding to Events

A SMIL presentation can behave very much like a full GUI application if the appropriate events are handled. Unfortunately, SMIL itself only specifies three events, and even those are not mandatory for SMIL players to support! SMIL implementations may allow you to use more events, but it is up to you to find out what they are.

An understanding of the DOM will help you use events more effectively. However, at least these three events should be present:

.beginEvent and .endEvent
We’ve already seen the short form of these events in use in Lessons 3 and 4. They are fired when an element commences and completes playback respectively.
Again, you’ve already been introduced to this event. This is fired by an element as soon as it starts to repeat.

Well, that’s not too exciting! But take heart, SMIL implementations may provide you with more interesting events such as click, mouseOver, etc.
Navigation Bar (Example)

Here is an example of using <a> and <area>. It creates a screen with three buttons at the bottom arranged like a navigation bar. When the play button is pressed it loads the chameleon movie from our last example. This time, however, the movie is clickable, and depending on what how far along the movie is when the user clicks on it it will follow different links.

<?xml version=”1.0″?>
<!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN” “http://www.w3.org/2001/SMIL20/SMIL20.dtd”>
<smil xmlns=”http://www.w3.org/2001/SMIL20/Language” xml:lang=”en” title=”Navigation Bar”>
<topLayout width=”320px” height=”272px” backgroundColor=”#FFFFFF”>
<region id=”main” left=”0px” top=”0px” width=”320px” height=”240px”/>
<region id=”navbar” left=”112px” top=”240px” width=”96px” height=”32px”>
<region id=”left” left=”0px” top=”0px” width=”32px” height=”100%”/>
<region id=”middle” left=”32px” top=”0px” width=”32px” height=”100%”/>
<region id=”right” left=”64px” top=”0px” width=”32px” height=”100%”/>
<par dur=”indefinite”>
<par dur=”indefinite”>
<a href=”#info”><img src=”info.png” alt=”info button” region=”left”/></a>
<a href=”#warning”><img src=”warning.png” alt=”warning button” region=”middle”/></a>
<a href=”#feature”><img src=”play.png” alt=”play button” region=”right”/></a>
<text id=”info” src=”info.txt” alt=”information” region=”main” dur=”indefinite”/>
<text id=”warning” src=”warning.txt” alt=”FBI warning” region=”main” dur=”indefinite”/>
<video id=”feature” src=”chameleon.mpg” alt=”feature presentation” region=”main”>
<area href=”http://www.archive.org/movies/movies.php” alt=”Internet Motion Picture Archive” begin=”0″ dur=”15s”/>
<area href=”http://www.siggraph.org/” alt=”Siggraph” begin=”15s” dur=”indefinite”/>

SMIL uses the same syntax for links as HTML. That means that targets within the current document are preceeded by a hash (#).

And some screenshots of it in action:

screenshot of the startup screen screenshot of the info screen screenshot of the warning screen screenshot of the movie screen
Test Your Understanding

1. Which attribute would you add to an <a> to make the associated media object open in a new window?
1. external=”true”
2. show=”new”
3. actuate=”onRequest”
4. destinationLevel=”window”
2. What is wrong with the following code? <video src=”advertisements.mpg” alt=”a series of advertisements” dur=”01:00″>
<area href=”http://advertiser1.com/” begin=”00:00″ end=”00:30″/>
<area href=”http://advertiser2.com/” begin=”00:00″ end=”00:30″/>
3. Which attribute would you add to each <area> element in the following code to turn the volume of the current presentation off while loading the one in the link? <video src=”noisy.mpg” alt=”a very loud and noisy video” dur=”10:00″>
<area href=”quiet.smil” alt=”a very quiet SMIL presentation” show=”new” begin=”00:00″ end=”05:00″/>
<area href=”peaceful.smil” alt=”a peaceful lake scene with soothing natural sounds” show=”new” begin=”05:00″ end=”10:00″>
1. actuate=”silent”
2. sourcePlaystate=”mute”
3. destinationPlaystate=”mute”
4. sourceLevel=”0%”

From a SMIL to a Laugh
Animating Media Objects

Animation is perhaps the most interesting feature in SMIL. Unfortunately, it’s also the most complex. To truly understand the sandwich model of SMIL animation you need to know a good deal of math (mainly algebra, but also some trigonometry). Fortunately, software products such as Adobe GoLive have integrated SMIL support, so you don’t really need to hand-code your animations. However, no matter what software you use to create animations, it is still helpful to understand how these animations work at the SMIL level.

This lesson will be dealing with rectilinear (straight-line) motion as defined by the BasicAnimation module. Animations using bezier curves can be creating using the SplineAnimation module (not covered here).
Animation Elements

Somewhat strangely, animation elements are nested within the media object element they will be animating. This may be caused by the recent shift in mindset towards Object-Oriented Programming. So�if it helps�think of SMIL animations less as orchestra conductors and more as individual sheet music.

The four basic animation elements are:

This is used for creating simple animations, such as linear changes to an object’s attributes.
This is the type of animation we usually think of when hearing the term animation. As you can guess, this is used for creating movement.
Yes, color can be animated too! Imagine psychedelic and fade-in/out effects and you’ll have the idea behind this element.
This is perhaps the most boring animation element. If the other animation elements are triangle and sine waves, this one is the square wave.

Each of these elements animates its parent object by manipulating that object’s attributes. Imagine editing your SMIL file, saving it, and reloading it over and over very rapidly…that’s roughly how these work in theory.
Animation Element Attributes

Animation elements manipulate media object element attributes, but they also have attributes of their own. First of all, all of the timing attributes you’ve learned up until now (begin, dur, repeatCount, etc) can be used in animations. Also, all animations share a base set of extra attributes, of which we’ll look at just a few:

Specifies which attribute of the parent element will be animated. This is the name on the left side of the equal sign (=): for example, the width in width=”100%”.
This allows you to animate an element without directly embedding the animation element inside of it. This would be useful for animating a region, for example.
from, to, and by
These specify the target range of animation. You can think of these as the animation equivalents of begin, end, and dur respectively.
This allows you to use a list of values rather than a range. The syntax for this list of values is the same as that for a list of begin values: each value is separated by a semi-colon (;).
Can be either “discrete”, “linear”, or “paced”. A linear animation can have constant acceleration while a paced animation always has constant velocity, and a discrete animation has constant position (I use that last term loosely). Anyone familiar with the calculus should see a relationship between these.

There are some other interesting attributes, but let’s get a basic understanding of these first. So which attributes of a media object does an animation animate? Well, that depends on the animation.

Animations can target not only XML-style attributes, but also others such as CSS.

Actually, animations can technically target any element, not just media objects. Animating animation elements themselves could lead to some very interesting effects which would be difficult to produce with a traditional animation sequencing program.
Generic Animations (<animate>)

The most basic animation is controlled by an animate. It is capable of animating any attribute which has a scalar or vector value. For our purposes here, let’s say that it can animate any attribute which is a number.

Here is how you would shrink an image in a manner similar to when a television’s cathode ray tube loses power:

<video src=”television.mpg” alt=”a television show” width=”12cm” height=”9cm”>
<animate attributeName=”height” from=”9cm” to=”0cm” dur=”2s”/>
Movement Animations (<animateMotion>)

Movements in the screen’s Cartesian (x and y) plane are controlled by animateMotion. Animated motion is dependent on the underlying layout system which, unfortunately, the SMIL 2.0 recommendation does not say much about. animateMotion is unique in that it cannot have an attributeName attribute (as it can only target element positions).

Here is a theoretical animation for a falling image (a television being dropped out of a window):

<video src=”television.mpg” alt=”broken television”>
<animateMotion values=”0,0; 0,9; 0,27; 0,54″ calcMode=”linear” dur=”4s”/>
Color Animations (<animateColor>)

Color animations are also dependent on the underlying host language of the document. Since we’ve been using RGB values as found in HTML to this point, we’ll stick with them here.

Here is an animation of a television screen fading to black:

<video src=”television.mpg” alt=”bright television”>
<animateColor to=”#000000″ dur=”10s”/>
Animations Which Aren’t Animations (<set>)

<set> is technically an animation because it can change values over time, but for all practical purposes it’s mainly used to change the state of an element. As such, <set> has no from or by attributes. Setting a value in such a manner might be useful when you can’t accomplish the same behavior with other techniques you’ve learned already.

Here is one way you could turn off the television image we’ve been playing with up until now (suddenly and without the dying-cathode-ray-tube effect):

<video src=”television.mpg” alt=”advertisements”>
<set attributeName=”width” to=”0″ begin=”5s” dur=”indefinite”/>
<set attributeName=”height” to=”0″ begin=”5s” dur=”indefinite”/>
Using Multiple Animations

Obviously you can use more than one animation at a time in a SMIL presentation. But also�as you saw in the example from the last section�you can use more than one animation on a single element. This allows for more complex animations to be built out of simpler ones.

Here’s a television in an earthquake:

<video src=”television.mpg” alt=”the news”>
<animateMotion values=”0,0; 0,3; 0,0; 0,7; 0,0″ dur=”1s” repeatDur=”indefinite”/>
<animateMotion values=”0,0; 4,0; 0,0″ dur=”2s” repeatDur=”indefinite”/>
Complex Animated Scenes

To really use SMIL animation to its full potential requires a lot of study and experience. We have only begun to touch the surface, and I could write an entire tutorial on SMIL animation alone. For more information, take a look at chapter 3 of the SMIL 2.0 recommendation (The SMIL Animation Modules). In it you will find information about the sandwich model, additive and cumulative animations, interpolation, key frames, splines, etc.
Painting a SMIL (Example)

In Lesson 3: What’s in a SMIL? in the section titled Painting with a SMIL I alluded to the possibility of painting with the <brush> element. Now I’ll show you how to do that using animation. This will require using some things you haven’t learned yet, but it will be a good experience for analyzing and comprehending SMIL presentations outside of tutorials and books.

Well, it would be great to create the entire animation using brushes and paths, but for the sake of simplicity I’ll cheat a little bit here. Instead, I’ll create the effect by animating regions. Also, instead of trying to create an animation using a spline or a curved path, I created a special image. Here is the necessary code:

<?xml version=”1.0″?>
<!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN” “http://www.w3.org/2001/SMIL20/SMIL20.dtd”>
<smil xmlns=”http://www.w3.org/2001/SMIL20/Language” xml:lang=”en” title=”Animated SMILe”>
<topLayout width=”320px” height=”240px” backgroundColor=”#000000″>
<region id=”left-eye” width=”0px” height=”30px” top=”50px” left=”50px” fit=”fill”/>
<region id=”right-eye” width=”30px” height=”0px” top=”140px” left=”50px” fit=”fill”/>
<region id=”nose” width=”0px” height=”30px” top=”100px” left=”120px” fit=”fill”/>
<region id=”mouth” width=”49px” height=”0px” top=”25px” left=”245px” fit=”fill”/>
<brush color=”#FFFFFF” region=”left-eye”/>
<brush color=”#FFFFFF” region=”right-eye”/>
<brush color=”#FFFFFF” region=”nose”/>
<img src=”smile.png” alt=”a SMILe” region=”mouth”/>
<animate targetElement=”left-eye” attributeName=”width” to=”30px” dur=”3s” fill=”freeze”/>
<animate targetElement=”right-eye” attributeName=”height” to=”80px” dur=”3s” fill=”freeze”/>
<animate targetElement=”nose” attributeName=”width” to=”100px” dur=”3s” fill=”freeze”/>
<animate targetElement=”mouth” attributeName=”height” to=”190px” dur=”3s” fill=”freeze”/>

Note that this example was not very elegant. Normally when working with SMIL animation you’ll either use a special animation editor or a mixture of a special editor and some authoring by hand.

In the following screenshots you can see the animation in motion.

beginning screenshot middle screenshot end screenshot
Test Your Understanding

1. Which element would you use if you needed to increase the duration of the following element gradually over time? <animation src=”walk.svg” alt=”a man walking his dog” dur=”5s” repeatCount=”indefinite”/>
1. <animate>
2. <animateMotion>
3. <animateColor>
4. <set>
2. True or False: Color animations can only go from lighter colors to darker colors.
3. What is wrong with the following code? <animation src=”walk.svg” alt=”a man walking his dog” dur=”5s” repeatCount=”indefinite”>
<animate attributeName=”width” by=”200%” attributeName=”height” by=”300%” dur=”15s”/>
4. Extra Credit: Explain why calcMode=”linear” was used in the falling television example rather than the calcMode=”paced” (the default)? (Hint: It has to do with the physics of falling.)

How Do You Describe a SMIL?
Providing Meta Information

When you make a SMIL presentation publicly available, it’s always a good idea to provide some information about what it is. But when you put your presentation on the web, it’s not just a good idea, it’s imperative.

As the web grows, it’s becoming more and more difficult to keep track of information manually, especially when that information is rapidly changing. As I write this, google.com has indexed more than 3 billion web pages. Most people are already dependent on search engines, some even to the point where they no longer use bookmarks.

HTML made efforts to take care of this problem by allowing the author of a page to provide metadata�information about the document itself�directly in the document through the use of the <meta> element. While this was a good start, it has not been very effective to this point. Many people do not provide good enough metadata for search engines to index their pages, and because of that, search engines still rely on parsing the body of the pages themselves.

But things are changing. More and more of what is finding its way to the web is no longer HTML. And as information on the web grows more diverse not just in content, but also in form, new methods of indexing and categorizing content are necessary. And this doesn’t stop at search engines either.
Common Information

One of the problems with HTML’s <meta> is that authors have only agreed on a very small number of identifiers (author, description, keywords, and a few others). Technically any information at all can be provided, but most programs are not intelligent enough to parse free-form data.

Because of this, the Dublin Core Initiative set out to create generic, meaningful, and internationally acceptable metadata identifiers. There are 15 of them in total, and they cover the what?, where?, when?, and who? of a resource:

For SMIL presentations this should almost always be InteractiveResource, but presentations which do not interact with the user can be of type Image (which includes video).
This is usually the same as the SMIL title.
This is a list of the areas or fields which the resource is relevant to. This is similar to the HTML keywords metadata.
You can provide a description of the resource in any form you’d like as it’s only meant to be read by humans. You can think of this as the alt tag for the entire SMIL presentation.
This is the intended audience and timeframe. Geographical locations, calendar dates, etc are all acceptable here.
Any related resources can be specified here. It’s considered good practice to include one word at the beginning of the relation to indicate its type. For example, “recommendation http://www.w3.org/TR/smil20/”.
If your presentation is derived from another source, you can provide information about it here.
Your name here!
This will normally be a copyright notice for SMIL presentations. However, other rights management tools such as licenses can be specified here.
This is the person who is responsible for bringing the resource to the public. Many times this will also be you.
If you received help from someone else, you can list their name here.
For a SMIL presentation the IANA identifier text/xml is the most fitting, but you could use text/smil instead (although it is not in the IANA list).
On the web the identifier is usually a URI (URL).
The language(s) of the presentation. Language codes can be found in RFC 3066.
This will usually be the date that the resource was created or published. It’s most useful to use a date in ISO 8601 form (YYYY-MM-DD).

I highly recommend that you read the Using Dublin Core guide before publishing any presentations on the web.
Metadata Syntax

SMIL 2.0 has adopted the Resource Description Framework (RDF)�an XML schema�for specifying meta information. It is a rather detailed system, and it could easily use a tutorial of it’s own, so in this lesson I’ll only introduce you to enough of the basics to get you started and in the habit of providing meta information for your presentations.
Distinguishing Metadata from SMIL

Throughout this entire tutorial we’ve been dealing with the SMIL namespace for our XML documents. That means that when a tag such as <text> is encountered we can safely assume that the SMIL program will understand that it’s SMIL text and not any other type of XML text.

Since RDF is meant to be embedded in other documents and it may have elements which conflict with those documents, it’s always good to create a separate namespace. We’ll be doing the same with the Dublin Core definitions.

The syntax for a namespace is the namespace name followed by a colon (:) and the identifier name, such as rdf:Description or dc:Description.
The SMIL Elements

The only SMIL element which deals with metadata is <metadata>. SMIL makes no restrictions as to the contents of this element.
The RDF Elements

We will only be using the <RDF> and <Description> elements of RDF. There are others, such as <Seq> and <Bag>, but I leave those up to your independent studies.

The <Description> element is used to describe one object, whether it be the entire presentation or one of the media objects included in it. It has an attribute named about which is the URI of the resource it’s describing. The <RDF> element encapsulates one or more <Description> elements.
The DC Elements

The Dublin Core elements will correspond exactly to the Dublin Core terms which I introduced in the section Common Information.
Syntactical Shortcuts

For the sake of brevity, any of the metadata elements may be made into attributes of their parent element. I’ll be using this syntax in the following examples.
Describing a Picture-in-Picture Television (Example)

To illustrate the use of metadata I’ll add meta information to the example I showed you in Lesson 7: Multimedia Orthodontics. I’ll also add meta information for the two videos which were used in it.

First, the <metadata> and <RDF> elements are added, including the XML namespace definitions:


You’ll probably want to use the above code verbatim in your presentations until you understand more about the XML namespaces and schemas involved.

Next, a description is added for the document itself:

<rdf:Description about=”#”
dc:Subject=”example, television, picture-in-picture”
dc:Title=”A Picture-in-Picture Television”
dc:Description=”A simple example of using SMIL to create a simulation of a picture-in-picture television using two MPEG videos.”
dc:Creator=”Chris FORNO”
dc:Rights=”Copyleft, all rights reversed”

You’ll notice that I used the abbreviated (shortcut) form here. Sometimes when your metadata elements are more complex this won’t be possible.

This example is not technically an Interactive Resource, but most SMIL presentations will be.

After that, it’s just a matter of adding descriptions for the two videos used and wrapping it all together:

<?xml version=”1.0″?>
<!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN” “http://www.w3.org/2001/SMIL20/SMIL20.dtd”>
<smil xmlns=”http://www.w3.org/2001/SMIL20/Language” xml:lang=”en” title=”Picture-in-Picture Television”>
<rdf:Description about=”#”
dc:Subject=”example, television, picture-in-picture”
dc:Title=”A Picture-in-Picture Television”
dc:Description=”A simple example of using SMIL to create a simulation of a picture-in-picture television using two MPEG videos.”
dc:Creator=”Chris FORNO”
dc:Rights=”Copyleft, all rights reversed”
<rdf:Description about=”#chameleon-video”
dc:Subject=”animation, computer graphic, chameleon”
dc:Description=”The chameleon is an SZM internal produced character animation. The challenge was to simulate the specific motion of the creature and to craete a realistic environment of a rainforest.”
dc:Creator=”SZM Studios”
dc:Publisher=”Siggraph Animations”
dc:Rights=”This piece is copyrighted. No use other than non-commercial viewing by individuals is authorized without the express consent of owners, listed above.”
<rdf:Description about=”#earthquake-video”
dc:Subject=”San Fransisco, earthquake, natural disaster”
dc:Title=”San Fransisco Earthquake: Ruined Buildings”
dc:Description=”A pan over ruined buildings in downtown San Francisco following the 1906 earthquake.”
<topLayout width=”320px” height=”240px”>
<region id=”main-video” left=”0%” top=”0%” width=”100%” height=”100%”>
<region id=”corner-video” left=”67%” top=”67%” width=”33%” height=”33%” fit=”fill” soundLevel=”0%”/>
<video id=”chameleon-video” src=”chameleon.mpg” alt=”an animated chameleon” region=”main-video”/>
<video id=”earthquake-video” src=”earthquake.mpg” alt=”San Fransisco earthquake aftermath” region=”corner-video” end=”chameleon-video.end”/>

Interestingly, in this example there was more meta information than SMIL markup! This is not usually the case though.

There are a few things worth mentioning here:

* If this presentation were to be published on the web, the filenames (example1.smil, chameleon.mpg, etc) would have been fully-qualified URIs.
* The about attribute referenced the resources using anchors (#). If the metadata would have been in a different file it could have used URIs or filenames.
* The Creator of the second video was not identified. It’s OK to omit information which you do not know.

Test Your Understanding

1. Which of the following is not one of the 15 identifiers defined in the Dublin Core?
1. Author
2. Title
3. Relation
4. Identifier
2. Which identifier describes the keywords of a presentation?
1. Title
2. Subject
3. Description
4. Format
3. What is wrong with the following code? <Description about=”#movie2″
Title=”Movie 2″
Description=”A romantic comedy about the number 2″/>
4. Extra Credit: Add metadata to example 2 (The Navigation Bar from Lesson 8: Service with a SMIL)

How Should I SMIL?
Using Content Control Features

One thing which HTML was always clumsy with (and still is) is adaptation of media to fit the user. It used to be that when web authors wanted to provide content in more than one format or allow users to access optional content, they had to resort to storing the content in different places and using hyperlinks. Nowadays, CGI has taken care of the problem of providing resources in different languages�and to a small extent providing different resources based on browser capabilities�but as of CGI/1.1 there’s still much to be desired.

As you would expect, a language with such a focus on multimedia content as SMIL has greatly improved upon this situation. Not only does it allow you to control content based on settings such as language and SMIL player version, but also ones such as network connection speed and device screen size. You can also write customized tests (which, unfortunately, I will not cover here) and instruct the player to preload media objects.

As you’ll see, content control can be very powerful. However, power can be used wisely or foolishly, so you’ll need to make sure that you’re using content control correctly (and by that I mean conservatively). One other thing to remember is that content control is a purely optional feature of SMIL. Even if a player supports content control features, it must rely on the user setting appropriate values.
Go Fetch!

Before getting into the capabilites provided by the BasicContentControl module, I’d like to show you a very useful little module named PrefetchControl. I call it a little module because it defines only one element and three attributes. But as little as it is, it can be very useful in presentations presented via the internet (or any other slow communications medium) by optimizing load times.

Often you might find yourself creating a presentation which contains a large media object. If you know of a good time for the SMIL player to load that object�perhaps in the background while something else is on the screen occupying the user�you can instruct it to do so with the <prefetch> element. It’s a simple element which takes the URI of the target object in a src attribute and has the following extra attributes (all of which default to “100%”):

Set this to the percentage of available bandwidth which should be dedicated to fetching the file. A bitrate value can also be used.
This can be a clock value or a percentage, both of which signify how much of the resource to prefetch as a function of playing time.
This attribute is similar to mediaTime except that it deals with file size (for some formats or compressed files this will be different from the playing time). It can be specified either as a percentage or number of bytes.

Specifying a mediaSize overrides any mediaTime value declared.

Bitrate values are specified as integers representing bits per second. You’re probably familiar with this measurement if you ever used an old analog modem (28.8K or 28800 bits per second, etc). Some media such as audio and video is also measured in bits per second, but remember that that usually refers to the uncompressed bitrate.

You control when the prefetch will be executed by putting it into the synchronization hierarchy, just like any other element. Here is an example of prefetching a video while an FBI warning is displayed:

<img src=”fbi-warning.gif” alt=”A standard FBI warning message” dur=”10s”/>
<prefetch src=”feature.mpg”/>
<video src=”feature.mpg” alt=”A movie about the history of the FBI warning”/>
Available Tests

SMIL provides you with a number of attributes which you can use to test the user’s preferences and system capabilities. These are somewhat limited for the sake of portability (so that they can make sense on as many devices as possible):

This is a comma-separated list of language codes.
systemScreenDepth and systemScreenSize
On devices with bit-mapped displays, systemScreenDepth specifies the number of colors which can be displayed (in bits-per-pixel, such as “8”, “24”, and “32”) while systemScreenSize specifies the dimensions of the screen in pixels (“widthXheight”).
This is the bandwidth of the network connection of the device. The rate is specified in bits per second as described ealier in this lesson.
systemCaptions and systemAudioDesc
These attributes are counterparts. Both can be set to “on” or “off”. systemCaptions specifies whether or not the user would like visual captions, and systemAudioDesc is the same but for audible captions.
This is set to, predictably, “overdub” or “subtitle” based on the preference of the user. (I myself always prefer subtitles as I enjoying listening to media in the original language. Unfortunately there doesn’t seem to be a way to specify both overdub and subtitle simultaneously.)
systemComponent and systemRequired
Both of these attributes are defined rather vaguely in the W3C recommendation and require you to reference external qualifiers. systemComponent takes a list of space-separated URIs defining components (presumably specific to the components and/or SMIL player). systemRequired is a +-separated list of necessary XML extensions.
systemOperatingSystem and systemCPU
I recommend not using either of these tests as doing so may lead to blocking content from a user perfectly capable of playing it. In the past it was common for web sites to block access to resources based on a client’s browser or operating system. Lately people have grown smarter and stopped doing this. Luckily, either of these can be set to “unknown” by the user, so you can’t rely on them anyway.

Conducting Tests

So you’ve seen which tests exist, but how do you go about using them? SMIL defines the <switch> element, a logical control structure common in programming languages such as C. You use it by enclosing a number of mutually exclusive elements, each with one or more of the attributes described above.

Don’t think of <switch> as a mechanical switch. It can have many more than two states.

One important thing to note is that when using <switch> it’s a good idea to provide one default object (one which will be used if none of the others match the system requirements). You do so by providing an object without any of the system attributes.

Here is an example of using <switch> to control dubbing and subtitling of a movie:

<video src=”french-smile.divx” alt=”French SMILe, a movie about a multimedia editor and the man who loved her.”/>
<audio src=”french-smile.en.vorbis” alt=”English dub track for French SMILe” systemLanguage=”en” systemOverdubOrSubtitle=”overdub”/>
<audio src=”french-smile.fr.vorbis” alt=”The original French track for French SMILe”/>
<textstream src=”french-smile.en.sub” alt=”English subtitles for French SMILe” systemLanguage=”en” systemOverdubOrSubtitle=”subtitle”/>

I didn’t include a default for the subtitles as a reasonable default would be no subtitles at all.
SMILing Around the World

The last example in this tutorial will be a very simple one. It consists of just one <switch> which attempts to select an appropriate message to display based on the user’s language preference, falling back to the international auxiliary language when all else fails. You can also see how the type attribute is used here to specify the character set encoding for each of the files used.

<?xml version=”1.0″?>
<!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN” “http://www.w3.org/2001/SMIL20/SMIL20.dtd”>
<smil xmlns=”http://www.w3.org/2001/SMIL20/Language” xml:lang=”en” title=”SMILing Around the World”>
<seq dur=”indefinite”>
<text src=”smil20.en.txt” alt=”SMIL in English” type=”text/plain; charset=iso-8859-1″ systemLanguage=”en”/>
<text src=”smil20.jp.txt” alt=”SMIL in Japanese” type=”text/plain; charset=iso-2022-jp” systemLanguage=”ja”/>
<text src=”smil20.zh.txt” alt=”SMIL in Chinese” type=”text/plain; charset=GB2312″ systemLanguage=”zh”/>
<text src=”smil20.eo.txt” alt=”SMIL in Esperanto” type=”text/plain; charset=iso-8859-3″/>

Assuming that you had a computer configured for one of these language (and a SMIL player capable of displaying it), you might see something like the following:

SMIL in English SMIL in Japanese SMIL in Chinese SMIL in Esperanto
Test Your Understanding

1. Which of the following tests the network connection speed of the user’s computer?
1. systemComponent
2. systemRequired
3. systemCPU
4. systemBitrate
2. True or False: Users can specify that they want both overdubs and subtitles.
3. Why would the following be a poor use of <prefetch>? <seq>
<img src=”fbi-warning.gif” alt=”A standard FBI warning message” dur=”10s”/>
<prefetch src=”feature.mpg”/>
<prefetch src=”fbi-warning.ja.mp3″/>
<prefetch src=”fbi-warning.en.mp3″/>
<video src=”feature.mpg” alt=”A movie about the history of the FBI warning”/>
<audio src=”fbi-warning.ja.mp3″ alt=”Japanese audio track for the FBI warning movie” systemLanguage=”ja”/>
<audio src=”fbi-warning.en.mp3″ alt=”English audio track for the FBI warning movie (default)”/>
4. Extra Credit: Create your own SMIL presentation and publish it on the web!

Answers to Test Your Understanding
Answers to the questions given in each part of the tutorial.
Lesson 2: The Making of a SMIL

1. c. All of the above.
A SMIL file is actually just a specific type of XML file which itself is just a specific type of text file.
2. b. <par begin=”0″/><par>
The forward-slash (/) should be placed at the beginning of the end-tag rather than the end of the start-tag. The correct element would have been <par begin=”0″></par>.
3. The xmlns attribute is missing quotation marks (“”).
The correct element would have been: <smil xmlns=”http://www.w3.org/2001/SMIL20/Language”></smil> Note that there are also no xml:lang or title attributes, but they are not required.

Lesson 3: What’s in a SMIL?

1. False.
You can provide as few or as many attributes for media objects as you like. You can also provide a longdesc without an alt. In fact, even the src attribute is optional (although then the media object doesn’t really do anything).
2. c. <text>
This is sort of a trick question. Normally <img> is discrete media, but animated images can be continuous.
3. <audio src=”song.mp3″ alt=”my favorite song” clipBegin=”30s”/>
Also acceptable are the following clipBegin values: “00:30”, “30”, and “smpte=30:00” (the last was not covered in the lesson).
4. There is no correct answer to this question. I can think of at least 3D model formats (which some say belong to <animation>), but I’m sure there are others.

Lesson 4: Say Cheese!

1. c. “00.00.06h”.
While 0.06h is a valid representation (for a fraction of an hour), using two decimal points is nonsense.
2. d. “01:29″.
In this case the 1 stands for 1 minute and hence has a value of 60 seconds, making a total of 89 seconds.
3. The end-tags for the <seq> and <par> elements are out of order.
All well-formed XML documents must have a tree structure. This means that a child element must have its end tag before that of the parent’s end tag. The correct block of code would have been: <seq>
<video src=”intro.xvid.ogg” alt=”intro video clip for SMIL Networks, Inc.”/>
<video src=”feature.xvid.ogg” alt=”feature presentation”/>
<audio src=”effects.vorbis.ogg” alt=”sound effects track”/>
<audio src=”dialogue.vorbis.ogg” alt=”speech track”/>
<audio src=”music.vorbis.ogg” alt=”music track”/>
4. The most straightforward way of doing this is to add an id to the sound effects <audio> and begin=”id.end” to the music <audio>: <seq>
<video src=”intro.xvid.ogg” alt=”intro video clip for SMIL Networks, Inc.”/>
<video src=”feature.xvid.ogg” alt=”feature presentation”/>
<audio id=”effects” src=”effects.vorbis.ogg” alt=”sound effects track”/>
<audio src=”dialogue.vorbis.ogg” alt=”speech track”/>
<audio src=”music.vorbis.ogg” alt=”music track” begin=”effects.end”/>

Lesson 5: Don’t Blink!

1. True.
You could explicitly add begin=”previous_element.end” to each successive element, where previous_element is the id of the element before it in the <par> container.
2. c. 21.
The inner loop will play a total of 7 times (21 / 3), and the outer loop a total of 3 times, for a grand total of 3 * 7 = 21 times.
3. <seq>
<text id=”hello” src=”hello_world.txt” alt=”information about my first SMIL presentation” end=”hello.click”/>
<text src=”/legal/fbi.txt” alt=”FBI copyright warning” dur=”00:05″/>
</seq> Note that end=”hello.click” (something you’ll learn about in Lesson 8: Service with a SMIL) needs to remain. Otherwise the hello_world.txt would have a duration of “0” and would not be displayed at all. Also, it’s ok to leave the id for the <seq>.
4. You could do so by changing the begin attribute to begin=”hello.end+00:02″ or begin=”hello.click+00:02″, among other methods.

Lesson 6: Multimedia Dentistry

1. False.
soundLevel values cannot be negative. The correct way of accomplishing this would be soundLevel=”50%”.
2. d. none of the above.
There really is not such thing as an optimum size for any <topLayout>. Factors such as device, screen resolution, and user preference rule this out. Fortunately you can get close to the optimum by using content-control features (presented in Lesson 11: How Should I SMIL?).
3. The right and bottom attributes are in conflict with the width and height.
It is undefined whether the SMIL implementation will ignore either the right or width attribute (or even the left for that matter). This is especially problematic when the measurements are not the same, as in this example. Note that it’s perfectly acceptable to mix units such as px and %.
4. Any regions are acceptable as long as they don’t have conflicting attributes. There is no limit on the size of any region (although the user may need to scroll to see it all).

Lesson 7: Multimedia Orthodontics

1. The <layout> element is missing.
Remember that all layout must be enclosed by one. The correct code would have been: <head>
<topLayout width=”3cm” height=”5cm” backgroundColor=”#000000″/>
2. d. “meet”.
“meet” resizes the object to fit into its region while still preserving the aspect ratio (it will not distort the media object.
3. c. third.
When objects are on the same stack level (they are in the same nested region or have the same z-index), the object displayed last will be rendered foremost (on top). Since the third object begins playing 20 seconds after the first and 10 seconds after the second, it will be displayed foremost.

Lesson 8: Service with a SMIL

1. b. show=”new”.
external=”true” will open the link in a new application, not just a new window. actuate=”onRequest” has nothing to do with new windows, and destinationLevel=”window” is not even valid SMIL at all.
2. Both areas have the same temporal values.
The user will only be able to activate one link (or none at all, as the behavior is undefined) during the video. It is ok to have areas overlap temporally as long as they are separated spacially by means of the shape and coords attributes.
3. d. sourceLevel=”0%”.
sourceLevel has the same syntax as soundLevel. All the other choices are not valid SMIL.

Lesson 9: From a SMIL to a Laugh

1. a. <animate>.
<animate> is the only element general enough to manipulate the dur attribute. Actually, <set> could also change the attribute, but not gradually over time. dur is not a screen position or dimension, but it can be animated because it is scalar.
2. False.
Color animation works just the same as all other animations in that values can move in either a positive or negative direction. (In the RGB model, brighter colors are larger numbers.)
3. The <animate> element has duplicate attributes.
Remember that having two attributes of the same name is not valid in XML. The code can be rewritten as: <animation src=”walk.svg” alt=”a man walking his dog” dur=”5s” repeatCount=”indefinite”>
<animate attributeName=”width” by=”200%” dur=”15s”/>
<animate attributeName=”height” by=”300%” dur=”15s”/>
4. In order to give the falling television the illusion of acceleration due to gravity (9.81 m/s^2), calcMode=”linear” must be used. calcMode=”paced” can’t be used for this purpose because it always has a constant velocity.

Lesson 10: How Do You Describe a SMIL?

1. a. Author.
Dublin Core defines Creator instead of Author. This is because not all resources have an author; some have directors, artists, etc.
2. b. Subject.
Both Title and Description may by chance contain key words of the document, but Subject is the only identifier specifically designed for that purpose.
3. There are no namespace identifiers.
Without the namespaces, the SMIL player (and any other program parsing this example for that matter) would have difficulties distinguishing between the identifiers. (You can see that this would be especially problematic with the identifier Description which is found here twice.) The correct code would have been: <rdf:Description about=”#movie2″
dc:Title=”Movie 2″
dc:Description=”A romantic comedy about the number 2″/>
4. The rdf:Description of the chameleon.mpg in the example from this lesson could be used verbatim, and the description of the SMIL file itself could easily be adapted to fit the other example.

Lesson 11: How Should I SMIL?

1. d. systemBitrate.
systemCPU refers to the system’s Central Processing Unit speed and the others are for testing SMIL extensions.
2. False.
The systemOverdubOrSubtitle is a boolean value: you get one or the other. This is quite unfortunate considering that with languages such as Chinese it’s possible to have an overdub in one dialect and subtitles in another.
3. because some of the prefetched files won’t be used.
It’s pointless at best and frustrating at worst for users to have to download files which they’re not going to need anyway. It’s also not a good idea to try to prefetch too many things at once, especially on a device with a slow network connection.
4. This, of course, is not meant to be graded or verified in this tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *