Learning To SMILe - Laying It Out (
Page 4 of 8 )
The layout is probably the
most important part of the structure of an SMIL document - it defines both
global window attributes, such as window size and colour, for the presentation,
as well as separate, independent regions for the various media clips that are to
be integrated into the presentation. As I noted on the previous page, this
layout information appears within the <head> of the SMIL
document.
Here's an example:
...
<layout>
<root-layout width="500" height="400" backgroundColor="white" />
<region id="alpha" left="120" top="150" width="250" height="200" />
</layout>
...
As you can see, the <layout> block above contains both
<root-layout> and <region> elements, the former defines window
attributes, while the latter define separate regions within the presentation.
The example above defines a window of height 400 pixels and width 500 pixels,
and further defines a region within it named "alpha". This region will contain
embedded content (discussed a little further down).
It should be noted
that, apart from the absolute positioning demonstrated in the snippet above,
SMIL also allows regions to be positions relative to the window. The following
snippet defines a region that's always 20% away from the left window border and
40% away from the top window border.
...
<region left="20%" top="40%" width="20" height="40" />
...
Once the various <region>s have been defined, the next
step is to identify media elements to be embedded within each of them. The
various media elements are defined within the <body> of the SMIL document
and linked to a region using the region's "name" attribute. Consider the
following example, which places the JPEG image "logo.jpg" in the region named
“alpha”:
...
<img src="logo.jpg" alt="First image" region="alpha" />
...
Each of the various media types supported by SMIL has a
corresponding element in the SMIL namespace, and can be referenced using that
element. Here's a list:
Media type Element
----------------------------------------
Images <img>
Audio <audio>
Video <video>
Text <text>
Text streams <textstream>
Flash animation <animation>
Color block <brush>
Any other media type <ref>
Each of these elements has a list of attributes, which are
usually specific to that media type. Consider the following example, which uses
a number of different media types in the same SMIL document:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="500" height="400" backgroundColor="white" />
<region id="alpha" left="20" top="20" width="250" height="100" />
<region id="beta" left="100" top="100" width="100" height="100" />
<region id="gamma" left="200" top="200" width="100" height="100" />
<region id="omega" left="250" top="250" width="100" height="100" />
</layout>
</head>
<body>
<img src="logo.jpg" alt="Image" region="alpha" />
<text src="data.txt" alt="Text" region="beta" />
<animation src="anim.swf" alt="Animation" region="gamma" />
<audio src="bg.wav" alt="Audio" region="omega" />
</body>
</smil>
And here's a brief list of what each of those attributes
does:
id - defines a unique identifier for the media;
src -
defines the source of the media file;
title - defines a title for the
media clip;
alt - defines alternate text for the media clip
begin
- defines the time at which the clip must start
end - defines the time at
which the clip must stop
region - links the media to a defined
region
This is not an exhaustive list - SMIL 2.0 contains a much larger
list of attributes, some of them offering very fine-grained control over the
media to be displayed. I'm not going to get into the details here - take a look
at the SMIL 2.0 specification, linked at the end of this document, for
details.
/ 8 
