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.
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).
fit- 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. regionName- You can think of the region name as being similar to an
id attribute. However, the regionName need not be unique. z-index- 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.
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:
<head>
<layout>
<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>
</head>
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, 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 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:
<layout>
<topLayout width="640px" height="480px" backgroundColor="#FFFFFF" open="whenActive" close="whenNotActive"/>
</layout>
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
- True or False: To set the volume of a region to half of its parent region's volume, you would use
soundLevel="-50%". - Which of the following is the optimum size of the main
<topLayout> (often called the root window
):
width="640px" height="480px"width="100%" height="100%"width="20cm" height="20cm"- none of the above
- What's wrong with the following
<region>?
<region id="strange" left="20px" top="10%" width="80px" height="50%" right="140px" bottom="90%"/>
- Extra Credit: Create some hypothetical regions for some media objects you imagine yourself working with in the future.
dentistry 
