		Introduction
		Outline
		FAQs

	SMIL Concepts

		Basics
		Advantages and Disadvantages
		Guidelines
		Media Components
		Bandwidth Considerations

	Layout

		The SMIL file
		Root Layout
		Playback Regions
		Layers
		Background Color

	Timing

		Parallel Clips
		Sequential Clips
		Begin and End
		Loops and Fills

	Practice

		Practice Part 1
		Practice Part 2
		Practice Part 3
		Practice Part 4

	Also See

		Glossary
		Request an A/V Consultation

	A/V Tutorials

		Resources
		Introduction
		Editing Audio
		Editing Video
		SMIL: Multimedia
		SMIL: Doing More
		Webcasts
		Publishing Files

	Vendor Sites

		Sonic Foundry
		Real Networks
		QuickTime

Root Layout

In the previous example, each media clip played sequentially. A SMIL file can also define a layout for your presentation. The layout specifies regions where your clips will play, and allows you to play more than one clip at a time.

In the SMIL file header, between <layout> and </layout> tags, the <root-layout/> tag indicates the width and height of the overall playback area in pixels. The a root-layout region that sets the overall size of the media player main window and additional regions that define the sizes and locations where clips will be played.

The following example creates a root-layout region 450 pixels wide by 450 pixels high

<smil> <head> <layout> <root-layout width="450" height="450"/> </layout> </head> <body> ...media clip tags will go here... </body> </smil>

In addition to the root layout, each area of the presentation where you want media to be displayed must be defined. These areas, referred to as playback regions, are created by defining <region> tags in the layout section. Each region tag has an id parameter, which is how it is referred to in the body section, as well as top, left, width, and height attributes.

You define the playback regions by using a simple coordinate system measured across and down from the upper-left corner of the root-layout region to assign values to top, left, width, and height. All measurements are in pixels or percentages, with zero pixels as the default. Note: All playback regions must lay within the root-layout region. Any part of a playback region that lays outside the root-layout region is cut off.

Here is the same example given above, this time including two additional playback regions:

<smil> <head> <layout>

<root-layout width="450" height="450"/>

<region id="image" top="5" left="5" width="150" height="75"/> <region id="text" top="50" left="50" width="100" height="100"/>

</layout> </head> <body> ...media clip tags will go here... </body> </smil>

Where do you think the regions will be located relative to one another?

Note that the audio clips do not have a regions assigned to them, as sound does not require screen space.

NIS | OIT | Boston University | October 24, 2002