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.
Next: Spending Time >>
More Multimedia Articles
More By icarus, (c) Melonfire
