Home arrow Multimedia arrow Page 4 - Learning To SMILe

Laying It Out - Multimedia

Take a tour of SMIL, the Synchronized Multimedia Integration Language, and find out how you can use it to quickly and rapidly build Web-based multimedia offerings incorporating multiple media types.

  1. Learning To SMILe
  2. Getting The Tools
  3. Anatomy 101
  4. Laying It Out
  5. Spending Time
  6. Playing In Sync
  7. A Click In Time...
  8. Bedtime Reading
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 8
November 21, 2002

print this article


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.

>>> More Multimedia Articles          >>> More By icarus, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Basic Lighting in OpenGL and SDL Game Progra...
- Working with Colors in OpenGL for Game Progr...
- Animation in OpenGL for Game Programming usi...
- Game Programming with SDL: Getting Started w...
- Using OpenGL with SDL for Game Programming
- Learning Sound for Game Programming using SDL
- Game Programming using SDL: Raw Graphics and...
- Game Programming using SDL: Getting Started
- Network Radio With Icecast
- Learning To SMILe

Developer Shed Affiliates


Dev Shed Tutorial Topics: