• crm_shutterstock


Posted by: | Posted on: October 28, 2017

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 lesson7 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, well in this case a Region does not relate to a place you can visit or travel too, no it’s not like Las Vegas or San Diego. 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.
leftrighttop, 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 (widthheightleftrighttop, and bottom) can take relative values (pxem, or ex), absolute values (cmmminpt, or pc), or percentages. Here I’ll be using mostly px (pixels), cm (centimeters), and percentages.

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%"/>

<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, frankly miscrosoft has no real involvement here other than the fact that I am creating this tutorial with it right now, and that the constant crashing is giving me the urge to go find some fun San Francisco things to do to take my mind off rebooting… <hits save>. 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 widthheightbackgroundColoropen, 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 lesson7.

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.


Leave a Reply

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