previous next

Chapter 12: Layout

When you stream more than one clip, you use SMIL to lay out the presentation. The layout defines where each clip appears in RealOne Player. Clips might appear side by side, for example, or stacked on top of each other. You can even play clips in windows that pop up from the RealOne Player main media playback pane.

Note: For instructions on laying out a presentation in a Web page instead of in RealOne Player, see Chapter 20.

Understanding Layouts

If your presentation is audio-only, or it displays just one clip, you do not need to create a layout. However, if you want to play successive clips in the same area, or if your presentation displays multiple clips together, you need to define a layout. The following sections provide an overview of the main layout features.

Root-Layout Area

You define a presentation's layout in a SMIL file's header section. You first create one (and only one) root-layout area, which sets the size of the main media playback pane when the presentation starts. This size stays constant throughout the presentation unless the viewer manually resizes the pane, or you change the root-layout size using a SMIL animation. You cannot play any clips in the root-layout area, but you can set its color.

For More Information: The section "Defining the Main Media Playback Pane" explains how to set up the root-layout area.

Playback Regions

Each clip plays in a rectangular region. Within the main media playback pane, all regions lay within the root-layout area. You might define just one region that's the same size as the root-layout area, or you might set up multiple regions. Although similar to HTML frames, SMIL regions can overlap, letting you play a clip in one region in front of a background image in another region, for example.

SMIL Region Possibilities

SMIL Region Possibilities

For More Information: See "Defining Playback Regions" for information about setting up regions.

Subregions

Within each region you can also create subregions, which fall within their containing region, just as a region within the main media playback pane falls within the root-layout area. A subregion automatically moves if its containing region's position changes. Using a subregion, for example, you can mimic a television channel in which a small, partially transparent channel logo appears in a corner, hovering above the content.

A Subregion Within a Region

A Subregion Within a Region

For More Information: See "Defining Subregions" for more information on subregions.

Secondary Media Playback Windows

Popping up above the main media playback pane, a secondary media window can be moved, resized, and closed independently. You can use a secondary media playback window to display RealText credits for a video playing in the main media playback pane, for example. As with the main media playback pane, you can divide a secondary media playback window into separate playback regions. A secondary media playback window can open when the presentation starts, or when a certain clip starts to play. All clips playing in the main media playback pane and the secondary media playback windows are part of the same timeline defined within a single SMIL file.

Secondary Pop-Up Window

Secondary Pop-Up Window

Secondary Pop-up Windows Versus Hyperlinked Pop-up Windows

To open a new window based on viewer input, you create hypertext links to other SMIL files in your presentation. When the viewer clicks a hypertext link, RealOne Player launches a new, linked window (rather than a secondary media playback window) that plays a new SMIL presentation and either stops or pauses the clips in the main media playback pane. The following table describes the differences between using a secondary pop-up window and a hyperlinked pop-up window.

Secondary Pop-up Windows Versus Hyperlinked Pop-up Windows
Secondary Pop-up Window Hyperlinked Pop-up Window
When does the window pop up? The window pops up at the beginning of the presentation or when the first clip assigned to the window begins to play. The window pops up when the viewer clicks a hyperlink in the SMIL presentation.
Do clips in the main media playback pane continue to play? All clips continue to play in the main media playback pane and the pop-up window according to the SMIL timeline. You can choose whether to continue, pause, or stop the presentation in the main media playback pane.
How many SMIL files do I write? You write just one SMIL file that controls the timeline for the main media playback pane and all secondary media playback windows. You write separate SMIL files for the main media playback pane and each hyperlinked pop-up window.
What user controls does the pop-up window have? The pop-up window has buttons to minimize, maximize and close the window. All timeline and menu controls are on the main media playback pane. The pop-up window gives the viewer many playback controls and menus.
Can the pop-up window launch another pop-up window? No, a secondary media playback window cannot launch another secondary media playback window. The main media playback pane can launch any number of secondary media playback windows, though. Yes, a hyperlinked pop-up window runs a new SMIL presentation that can launch new windows.

For More Information: Chapter 15 explains hyperlinking.

Clip Position and Fit

By default, a clip aligns with a region's upper-left corner and displays at its normal size. If it's too big for the region, it's cropped. If it's too small, the region's background color displays in the remainder of the region. You can modify this behavior to align a clip to different points within a region (clip position), as well as resize the clip to make it fit the region (clip fit) better.

Clip Position

To define clip position, you create various registration points that specify where and how clips align to regions. One registration point might center clips in their regions, for example. Another point might align clips with their regions' bottom-left corners. The following figure illustrates two registration points, showing a few of the many ways to align clips to a point.

Registration Point Alignment

Registration Point Alignment

For More Information: The section "Positioning Clips in Regions" explains how to specify clip positions.

Clip Fit

The clip fit determines what happens when a clip is larger or smaller than its region. When a clip does not fit a region, you can keep the clip its normal size, scale the clip larger or smaller, or even add scroll bars to handle large clips.

For More Information: The section "Fitting Clips to Regions" explains how to control clip fit.

Tips for Laying Out Presentations

SMIL provides many options for laying out presentations. In many cases, you can achieve the same visual layout by different methods, but some methods may provide more clip placement options, for example, or create a layout that's easier to modify. Before you lay out a presentation, make sure you understand the options available to you. The following sections will help you make choices based on the type of presentation you want to create.

Tip: It may help to sketch the layout on paper or with illustration software. In your sketch, position the regions, subregions, and clips, noting their sizes and the thickness of any borders that should appear around them.

How big should I make the root-layout area?

Unless the viewer manually resizes the main media playback pane, it stays at the root-layout size for the duration of the presentation. Therefore, you need to make sure that the root-layout area is large enough to encompass all clips you plan to play. Calculate the root-layout size based on the sizes of clips that play together, as well as any borders you want to add.

Root-Layout Example

Suppose you plan to display two clips, one 100 pixels wide and the other 200 pixels wide, side-by-side. If you want a five-pixel border around the clips, for example, the root-layout area needs to be 315 pixels wide:

RealOne Player Menus and Controls

When choosing a root-layout size, keep in mind that the RealOne Player menus and controls will appear around the main media playback pane. If you define a very large root-layout area, some parts of the main media playback pane, or some RealOne Player controls, may not appear on the viewer's screen. The smallest computer screen in general use is 640 pixels wide by 480 pixels high.

Double-Screen and Full-Screen Modes

As described in "Controlling How a Presentation Initially Displays", you can make the presentation display at double-size or full-screen mode when it starts up. Doing this may affect how you define the root-layout area. For example, most computer screens have a width-to-height ratio of 4:3. Therefore, a root-layout area that also has a 4:3 ratio will scale best in full- screen mode.

Should my presentation use secondary media playback windows?

A secondary pop-up window is a useful way to provide additional information in a presentation. You might use the window to provide hypertext links to other streaming presentations or Web pages, for example. A secondary media playback window also provides a way to work additional clips into your presentation without making the root-layout area too big.

Add secondary media playback windows with caution, though. Using too many secondary media playback windows may make the presentation cluttered and difficult for the viewer to follow. Keep in mind, too, that the viewer can close secondary media playback windows at any time. Once closed, these windows do not open again unless another clip is scheduled to play in them later, or the viewer replays the presentation. For this reason, you may not want to play crucial clips in secondary media playback windows.

Tip: As with the root-layout area, calculate a secondary media playback window's height and width based on the sizes of clips that play together in the window, as well as any borders you want to add.

How many regions should I create?

Every visual clip must be assigned to a region, but you don't necessarily have to create a separate region for each clip. When you play a sequence of clips, for example, you can assign each new clip to the same region, using registration points if necessary to align each clip to the region. When multiple clips play in parallel, though, RealNetworks recommends that you define a separate region (either a main region or a subregion) for each clip.

Should I define subregions?

Any layout that uses subregions can be duplicated using just main regions. But using subregions simplifies certain layout tasks because subregions are associated with their containing regions. For example, if you move a region 10 pixels to the left in the root-layout area, all of its subregions automatically move with it. If the subregions were main regions instead, you'd have to change their layout attributes individually to keep them at the same relative position within the larger region.

Should I create registration points?

If your regions and subregions are the same sizes as the clips that play in them, you do not need to create registration points. You may want to create registration points if regions are larger than clips, however and you don't want clips to align with the regions' upper-left corners.

Can I use subregions instead of registration points to position clips?

Yes. Suppose you want to position a small clip somewhere within a large region. You could either apply a registration point to the region, or you could create a subregion inside the region.

When to Use a Registration Point

The primary advantage of defining a registration point is that you can easily apply the point to multiple regions. To center several clips in several different regions, it's much easier to define a single registration point and apply it to the various regions than to create a subregion for each clip.

When to Use a Subregion

Defining a subregion for a smaller clip gives you more options in determining how the clip appears within the region. You can set a specific subregion size, for example, and specify how the clip scales within the subregion. If you want multiple clips to overlap, you should use subregions because you can set the clips' stacking order by using the subregions' z-index attributes.

Layout Tag Summary

The following SMIL sample illustrates the functions and relationships of the main layout tags. Layout markup goes in the SMIL header section, between <layout> and </layout> tags:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout ...defines the main media pane's overall size.../>
<region id="ID1" ...defines a playback region within the main pane.../>
<region id="ID2" ...defines a playback region that has a subregion...>
<region id="ID3" ...defines a subregion.../>
</region>
<topLayout ...defines a secondary media window's overall size...>
<region id="ID4" ...defines a region within the secondary window.../>
</topLayout>
<regPoint id="ID5" ...defines a point where clips are placed in regions.../>
</layout>
</head>
<body>
...clips and groups...
<ref src="..." region="ID1" regPoint="ID5" ...assigns a clip to a region
and a registration point by IDs...
/>
<ref src="..." region="ID2" ...assigns a clip to a region by ID.../>
..more clips and groups...
</body>
</smil>

For More Information: For more on the SMIL header and body sections, see "Header and Body Sections".

Creating Main and Secondary Media Windows

The simplest layout defines a size for the RealOne Player main media playback pane, and creates a single playback region for clips. More complex layouts can create multiple regions, and even launch secondary, pop-up windows. The following sections explain how to define and set the sizes for the main media playback pane, as well as any secondary media playback windows you want to use.

Defining the Main Media Playback Pane

For every SMIL presentation that uses a layout, you use the <root-layout/> tag to set the main media playback pane's width and height in pixels. The <root- layout/> tag requires height and width attributes. An id="ID" attribute is optional, and is generally required only if you use SMIL animations to change the pane size as the presentation plays. The following example creates a root- layout area 320 pixels wide by 240 pixels high:

<layout>
<root-layout width="320" height="240"/>
...main media playback pane regions defined after the root-layout area...
</layout>

Because clips cannot play in the root-layout area, you need to define at least one region in addition to the root-layout area. In the following example, the single region automatically assumes the same size as the root-layout area:

<layout>
<root-layout width="320" height="240"/>
<region id="video_region"/>
</layout>

For More Information: "Defining Playback Regions" explains how to set region sizes and positions within the main media playback pane. "Adding Background Colors" tells how to set pane colors.

Creating Secondary Media Playback Windows

To add secondary, pop-up windows to a presentation, you include <topLayout> and </topLayout> tags for each window you want to launch. As with the <root- layout/> tag, you specify the width and height of each secondary media playback window in pixels. An id="ID" attribute is optional, and is generally required only for use with SMIL animations. The following example creates a secondary media playback window 180 pixels wide by 120 pixels high, and defines a single playback region of the same size:

<layout>
<root-layout.../>
...main media playback pane regions defined...
<topLayout width="180" height="120">
<region id="popup_region"/>
</topLayout>
</layout>

Note: Although functional, secondary media windows are currently plain windows that do not include the standard RealOne Player skin.

For More Information: See "Defining Playback Regions" for information on setting region sizes and positions. "Adding Background Colors" explains how to define a window color.

Controlling When Secondary Media Windows Open and Close

A <topLayout> tag can include open and close attributes that determine when the secondary media playback window appears and disappears. The following table describes the values these attributes can have. You can define one open value, and one close value, or leave these attributes out of the tag to use the default values.

Attributes for Opening and Closing Secondary Media Windows
Attribute and Value Function
open="onStart" Open the window when the presentation begins, regardless of when clips play in the window. Keep the window open until the presentation ends or the viewer closes the window. This is the default.
open="whenActive" Open the window when a clip begins to play in a region within the window.
close="onRequest" Close the window only when the viewer clicks the close button. This is the default.
close="whenNotActive" Close the window when clips stop playing in the window, or when the viewer clicks the close button.

With the default values of open="onStart" and close="onRequest", the secondary media playback window opens when the presentation begins (even if no clips play in the window immediately), and stays open until the viewer closes the window or starts another presentation. A common alternative is to make the window appear only when clips play in it, and close when those clips finish playing:

<topLayout ... open="whenActive" close="whenNotActive">

View it now! (requirements for viewing this sample)
These samples keep the secondary media playback window open throughout the presentation, and open the secondary window only when clips play in it.

Tips for Defining Secondary Media Playback Windows

Controlling Resize Behavior

Viewers can resize the main media playback pane and secondary media playback windows manually, or by choosing RealOne Player's double-size or full-size mode. By default, all regions and clips resize accordingly. You can change this behavior, though, to allow only regions (and hence the clips within those regions) defined with percentage values to resize. In this case, clips playing in regions defined with pixel values will not resize. To do this, add the attribute rn:resizeBehavior="percentOnly" to the <root-layout> or <topLayout> tag:

<root-layout width="250" height="230" rn:resizeBehavior="percentOnly"/>

Using this attribute requires that you declare the following namespace in the <smil> tag:

xmlns:rn="http://features.real.com/2001/SMIL20/Extensions"

For More Information: "Defining Region Sizes and Positions" explains pixel and percentage values for regions. For background on customized attributes and namespaces, see "Using Customized SMIL Attributes".

View it now! (requirements for viewing this sample)
These two samples demonstrate default behavior with resizing turned on, and with it turned off (that is, rn:resizeBehavior="percentOnly" is used with regions defined wholly through pixel values). View the Sample Files page to see more samples.

Defining Playback Regions

For the RealOne Player main media playback pane and each secondary media playback window, you need to define at least one region where clips play. For the main media playback pane, you define regions after the <root-layout/> tag. For secondary media playback windows, you define them between each window's <topLayout> and </topLayout> tags. You create each region using a <region/> tag:

<layout>
<root-layout.../>
<region id="ID1" ...defines a playback region within the root-layout area.../>
<region id="ID2" ...defines a playback region within the root-layout area.../>
<topLayout...>
<region id="ID3" ...defines a region within a secondary media window.../>
<region id="ID4" ...defines a region within a secondary media window.../>
</topLayout>
</layout>

A <region/> tag requires only a unique ID to create a region that expands to the same size as the main or secondary media playback window. In most cases, though, you'll want to create smaller regions and position them within the window using other <region/> tag attributes, which are described in the following sections.

Setting Region IDs and Names

Every region must have a unique, user-defined ID in the form id="ID". You assign clips to a region based on the region's ID. The following SMIL example defines a region that uses video_region as its ID:

<layout>
<root-layout width="250" height="230"/>
<region id="video_region"/>
</layout>

Optionally, a region can include a name in the form regionName="name". Unlike IDs, region names do not have to be unique. In fact, region names are useful primarily when two or more regions share the same name. In this case, you can assign the same clip to play in multiple regions by using the region name rather than the region ID. The following is an example of a video clip with a region name:

<region id="video_region1" regionName="videoregion"/>

Although region names can be identical, no region name should be the same as a region ID. The following example is allowed because the IDs are unique even though the region names are identical:

<region id="video_region1" regionName="videoregion"/>
<region id="video_region2" regionName="videoregion"/>

However, the following example is not allowed because the ID is not unique:

<region id="video_region1" regionName="video_region1"/>

For More Information: See "Playing the Same Clip in Multiple Regions" and "Example 3: Media Playback Pane Resized for Captions" for examples of assigning clips to regions based on the region name rather than the ID. The section "SMIL Tag ID Values" contains rules for specifying IDs.

Defining Region Sizes and Positions

If you do not specify a region's size, the region becomes the same size as the window that contains it. For example, the following region expands to 320 pixels by 240 pixels, the same size as the main media playback pane:

<layout>
<root-layout width="320" height="240"/>
<region id="video_region"/>
</layout>

In most cases, though, you'll want regions to be smaller than the window that contains them. This lets you place regions side-by-side, or use the window background color as a border around a region. The following figure illustrates how a region's size and position attributes control where the region appears within its window.

Region Size and Position Attributes

Region Size and Position Attributes

The region size and position attributes constitute a simple coordinate system measured in pixels or percentages. Because each attribute has a default value of auto, you can leave it out of the <region/> tag to set its value automatically based on the values of the other attributes. The result is that, in most cases, you need to specify just one to four of the attributes listed in the following table.

Region Size and Position Attributes
Attribute Function Example
bottom Sets region's bottom offset from window's bottom border. bottom="22"
height Specifies the region's height. height="180"
left Sets region's left offset from window's left border. left="20%"
right Sets region's right offset from window's right border. right="5%"
top Sets region's top offset from window's top border. top="60"
width Specifies the region's width. width="240"

Note: For size and position attributes, SMIL supports the use of px to designate pixels, as in top="60px". This provides consistency with the Cascading Style Sheet 2 (CSS2) standard. In SMIL, though, the px designation is not necessary. For simplicity, this guide omits the px from pixel measurements.

Layout Example 1: Region Width and Height

This example shows a region in which only the width and height are defined:

<region id="video_region" width="180" height="120"/>

In this case, the region is placed in the window's upper-left corner. The bottom and right offsets from the window borders are set automatically based on the region's size and position. If the window were 300 pixels wide by 200 pixels high, you could achieve the same layout using percentage values:

<region id="video_region" width="60%" height="60%"/>

Tip: With percentage values, the region changes size if you modify the sizing attributes of the <root-layout/> or <topLayout> tag that contains the region. With pixel measurements, though, the region size remains stable.

Layout Example 2: Four Region Offsets

This example shows a region placed in a window without specifying the region size:

<region id="video_region" left="60" right="60" top="40" bottom="40"/>

In this case, the four offsets from the window borders determine the region size. If the window were 300 pixels wide by 200 pixels high, the region would be 180 pixels wide (300-60-60=180) and 120 pixels high (200-40-40=120). You could create the same layout with percentage values:

<region id="video_region" left="20%" right="20%" top="20%" bottom="20%"/>

Tip: If you define a region size with these offset attributes, changing the window's size also changes the region's size whether the attributes use pixels or percentages.

Layout Example 3: Region Sizes and Two Offsets

This example shows a common way to define region size and position. It specifies a region width and height, then sets the region's offset from the window's upper-left corner:

<region id="video_region" left="60" top="40" width="180" height="120"/>

If the window were 300 pixels wide by 200 pixels high, the region layout would be the same as in "Layout Example 2: Four Region Offsets". Using pixel measurements for the region width and height, however, keeps the region size stable if you modify the window size.

Using Different Offset Values

For this example, you could use the right and bottom attributes instead of left and top to create the same layout:

<region id="video_region" right="60" bottom="40" width="180" height="120"/>

Using Percentage Values

You could also define this layout using percentage values for the left and top offsets. This keeps the region's relative position within the window the same should you change the window size:

<region id="video_region" left="20%" top="20%" width="180" height="120"/>

Layout Example 4: Two Offsets

This example sets the region's size and position by specifying only the right and bottom attributes:

<region id="video_region" right="60" bottom="40"/>

Because neither the left nor the top attribute is defined, the region is placed in the window's upper-left corner. The region's width and height expand to meet the right and bottom offset values.

Using Different Offset Values

Alternatively, you could set the region's left and top attributes instead of right and bottom to place the region at the window's lower-right corner:

<region id="video_region" left="60" top="40"/>

Layout Example 5: Single Offsets for Two Regions

Typically, you'll need to define more that one region within a window to lay out clips that play together. To do this, you define each region with a separate <region/> tag, using any combination of size and position attributes to place each region in its window.

This example shows two regions laid out so that a small stripe of the root- layout background appears between the regions. Because vertical size or offset values (top, height, or bottom) are not specified, each region is as tall as the root-layout area:

<region id="region_1" right="55%"/>
<region id="region_2" left="55%"/>

Layout Example 6: Overlapping Regions

This example has one region in front of another. There are many ways to define this layout with the size and position attributes. The following sample uses percentage values for the four border offsets:

<region id="region_1" top="5%" left="5%" bottom="5%" right="5%"/>
<region id="region_2" top="25%" left="25%" bottom="25%" right="25%"/>

Note: Whenever regions overlap, you should also define how the regions stack with the z-index attribute. See "Stacking Regions That Overlap" for more information.

Tips for Defining Region Sizes and Offsets

Assigning Clips to Regions

After you define the playback regions, you use region attributes within clip source tags to assign clips to regions based on the region's ID. In the following example, the video and text clips are assigned to the video and text regions defined in the header:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="maroon" width="250" height="230"/>
<region id="video_region" top="5" left="5" width="240" height="180"/>
<region id="text_region" top="200" left="5" width="240" height="20"/>
</layout>
</head>
<body>
<par>
<video src="video.rm" region="video_region" .../>
<audio src="audio.rm"/>
<textstream src="text.rt" region="text_region" .../>
</par>
</body>
</smil>

You can reuse regions by assigning sequential clips to them. For example, you can play a video clip in a region, then display another clip in that region after the first clip finishes. You don't need to assign audio-only clips to regions at all because audio does not display on the screen.

Stacking Regions That Overlap

When you define multiple regions that overlap, you can use a z-index attribute in <region/> tags to specify how regions stack. The following layout example creates a video region that overlaps an image region:

<layout>
<root-layout width="280" height="220"/>
<region id="image" top="10" left="10" width="260" height="200" z-index="0"/>
<region id="video" top="20" left="20" width="240" height="180" z-index="1"/>
</layout>

In this example, the root-layout area is 220 pixels high by 280 pixels wide. The smaller image region is centered on the root-layout area. Its z-index value of 0 makes it display behind all other regions, but not behind the root-layout area. The video region centered on the image region appears in front of that region because of its higher z-index value. You could have another region overlap the video region by setting its z-index value to 2, 5, or 29, for instance. The following figure illustrates these regions.

Regions Overlapping Through z-index

Regions Overlapping Through z-index

Tips for Defining z-index Values

Adding Background Colors

By default, <root-layout/> and <topLayout> areas have a black background. All regions and subregions are transparent. In a <root-layout/>, <topLayout>, or <region/> tag, you can specify a different background color with the backgroundColor attribute, as shown in the following example:

<layout>
<root-layout backgroundColor="maroon".../>
<region id="region1" backgroundColor="rgb(100,65,230)".../>
<region id="region2" backgroundColor="#C2EBD7".../>
<region id="region3" backgroundColor="inherit".../>
</layout>

For the color value, you can use inherit to make the region use the same color as the window or region that contains it. In the example above, the third region inherits maroon as its background color. To set a color value explicitly, use a predefined color name, a hexadecimal color value, or an RGB value.

For More Information: Appendix C explains the types of color values you can use with SMIL.

Tip: Using SMIL animation, you can change a region's background color as the presentation plays. See Chapter 17 for more information.

Setting When Background Colors Appear

By default, all background colors in all regions display when the presentation starts. In some cases, though, you may not want a region's background color to appear until a clip plays in the region. To do this, add showBackground="whenActive" to the <region/> tag:

<region id="region1" backgroundColor="silver" showBackground="whenActive".../>

Making a Region Partially Transparent

A SMIL region is fully transparent if you do not define its background color, or you explicitly set backgroundColor="transparent" in the <region/> tag. You can also make a region's background color partially transparent with the customized attribute rn:opacity="n%":

<region id="region1" backgroundColor="blue" rn:opacity="50%".../>

This attribute uses a percentage value from 0% (fully transparent) to 100% (fully opaque). In the example above, the value of 50% makes the region background a partially transparent blue. Using this attribute requires that you declare the following namespace in the <smil> tag:

xmlns:rn="http://features.real.com/2001/SMIL20/Extensions"

For More Information: You can modify transparency in clips, too. See "Modifying Clip Colors" for details. For background on customized attributes and namespaces, see "Using Customized SMIL Attributes".

Transparency in Regions and Clips

If a clip that contains transparency (such as a GIF image) plays in a transparent or partially transparent region, viewers will be able see through the clip's transparent areas to underlying regions and clips. The following clip types can include transparent areas:

RealOne Player can play other types of clips, too, and some of those clips may include transparency. Support for transparency for each clip type has to be built into RealOne Player, however. Some clips that display transparency when rendered in a Web browser, for example, may not display transparency when played in RealOne Player.

Tip: To check if RealOne Player recognizes a clip's transparency, open the clip in RealOne Player and see if the window background shows through the clip's transparent areas. You can also turn a clip's background color transparent with rn:backgroundOpacity, as well as use rn:mediaOpacity to add transparency to all colors in the clip. For more on these attributes, see "Adjusting Clip Transparency and Opacity".

Changing the Region Color Through a Clip Source Tag

By adding backgroundColor to a clip source tag, you can change the color of the clip's playback region. Suppose that a region uses black as a background color, and you want to play one clip in that region using a silver background instead. Rather than define a new region, you can specify the color in the clip source tag to modify the region color for as long as the clip is active:

<video src="..." region="video_region" backgroundColor="silver" .../>

View it now! (requirements for viewing this sample)
Play this sample to view a sequence in which the second image changes the region background color.

Controlling Audio Volume in a Region

When a region plays a clip that includes an audio track or sound effects, you can change the clip's relative audio volume with the soundLevel attribute:

<region soundLevel="125%".../>

The sound level always uses a percentage value. The default value of 100% plays the audio at its recorded volume. A value of 50%, for example, plays the audio at half its normal volume, whereas a value of 200% plays the audio at twice its normal volume.

Note that the soundLevel attribute controls only the relative volume of the audio stream sent to the speakers. It does not change the general sound level setting on the viewer's computer, which remains entirely under the viewer's control. All sound level adjustments are subject to limitations in the computer hardware.

For More Information: See "Turning Down an Audio Clip's Volume" for an example of how to use this attribute to change the volume of an audio clip.

Tip: Using a SMIL animation, you can dynamically adjust a region's soundLevel attribute to fade a clip's volume in or out. See Chapter 17 for more information.

View it now! (requirements for viewing this sample)
This sample plays an audio clip at normal, double, and half volume.

Defining Subregions

A subregion functions exactly like a main region, except that it maintains its position within its containing region if you reposition the containing region. To create a subregion, you need to modify the containing region to use <region> and </region> tags instead of a single <region/> tag. You then create the subregion between the containing region's <region> and </region> tags, as shown in the following example, in which the subregion displays near the containing region's lower-right corner:

<head>
<layout>
<root-layout width="350" height="270"/>
<region id="video_region" top="15" left="15" width="320" height="240">
<region id="logo" bottom="5%" right="5%" width="20" height="20"/>
</region>
</layout>
</head>

You lay out a subregion within its containing region using the attributes described in "Defining Region Sizes and Positions". When you set these attributes, keep in mind that the offset measurements of left, right, top, and bottom are measured from the containing region's boundaries. The subregion always falls completely within the containing region.

For More Information: See "Binary and Unary Tags" for background information on converting a single <region/> tag to its binary equivalent.

View it now! (requirements for viewing this sample)
This sample displays a semi-transparent logo in a subregion. For information on adding transparency to a clip, see "Adding Transparency to All Opaque Colors". Through SMIL animation, described in Chapter 17, the logo becomes opaque on a mouseover.

Tips for Defining Subregions

Defining Single-Use Subregions

Defining subregions in the SMIL header section is useful if you plan to reuse the subregion for multiple clips. If you want to create a subregion for just one clip, though, you can define the region in the clip source tag:

<layout>
<root-layout backgroundColor="maroon" width="250" height="230"/>
<region id="video_region" top="5" left="5" width="240" height="180"/>
</layout>
...
<video src="video.rm" region="video_region" height="120" width="180"
left="5" top="10"/>
...

In the preceding example, the video clip is assigned to an existing region, but the inclusion of height, width, left, and top values defines a single-use subregion within that region. Unlike a subregion defined in the <layout> section, this single-use subregion does not require an ID value. The following table lists all the region attributes that you can include in a clip source tag to set a single-use subregion's properties.

Single-Use Subregion Attributes
Attribute Function Reference
backgroundColor Selects the subregion's background color. click here
bottom Sets the subregion's bottom offset. click here
fit Specifies how the clip fits its allotted space click here
height Specifies the subregion's height. click here
left Sets the subregion's left offset. click here
regAlign Aligns the clip to the registration point. click here
regPoint Defines the registration point for the subregion. click here
right Sets the subregion's right offset. click here
top Sets the subregion's top offset. click here
width Specifies the subregion's width. click here
z-index Sets stacking order relative to other subregions. click here

Positioning Clips in Regions

When you do not want a clip to align with a region's upper-left corner, you can create a registration point. For example, you might define a registration point that is 10 pixels in, and 5 pixels down, from the region's upper-right corner. A registration point also includes an alignment that determines which part of the clip is placed on the point. The alignment might place the midpoint of the clip's right border on the registration point, for instance.

Within a SMIL file you can define any number of registration points using either or both of the following methods:

Using Alignment Values

No matter which method you use to define registration points, you choose one of nine values to align a clip to a region: topLeft, topMid, topRight, midLeft, center, midRight, bottomLeft, bottomMid, or bottomRight. The following figure illustrates where these values fall on a clip:

Alignment Values on Clips

Alignment Values on Clips

Defining Registration Points in Clip Source Tags

To define a registration point within a clip source tag, you add regPoint and regAlign attributes to the tag. Both regPoint and regAlign use an alignment value as described in the preceding section, but the values have different meanings for the two attributes:

For example, the following values center the clip in its region, regardless of the region's size and shape:

<ref src="..." region="video_region" regPoint="center" regAlign="center"/>

The next values select the region's lower-right corner, and place the clip's right midpoint at that corner. In this case, the clip's bottom half is cut off:

<ref src="..." region="video_region" regPoint="bottomRight" regAlign="midRight"/>

Avoiding Problems When Defining Registration Points

Because you can use any of the nine predefined values for both regPoint and regAlign, there are 81 possible ways to place clips in regions using this method. Not all possibilities are useful, though. Consider this alignment:

<ref src="..." region="video_region" regPoint="topLeft" regAlign="bottomRight"/>

In the preceding example, regPoint="topLeft" puts the registration point at the region's upper-left corner. The regAlign="bottomRight" attribute places the clip's lower-right corner on the registration point. This locates the clip outside the region. Because a clip cannot display outside its region, the clip does not display at all.

Using Common Registration Point Values in Clip Source Tags

The following table lists some of the more useful combinations of regPoint and regAlign that you can include in a clip source tag.

Common Registration Point Values in Clip Source Tags
Clip Placement Registration Point Values Example
top left (default) regPoint="topLeft" regAlign="topLeft"

top center regPoint="topMid" regAlign="topMid"

top right regPoint="topRight" regAlign="topRight"

middle left regPoint="midLeft" regAlign="midLeft"

center regPoint="center" regAlign="center"

middle right regPoint="midRight" regAlign="midRight"

bottom left regPoint="bottomLeft" regAlign="bottomLeft"

bottom center regPoint="bottomMid" regAlign="bottomMid"

bottom right regPoint="bottomRight" regAlign="bottomRight"

upper-left quadrant regPoint="center" regAlign="bottomRight"

upper-right quadrant regPoint="center" regAlign="bottomLeft"

lower-left quadrant regPoint="center" regAlign="topRight"

lower-right quadrant regPoint="center" regAlign="topLeft"

View it now! (requirements for viewing this sample)
Play this sample to see the basic registration point alignments described in the preceding table.

Creating a Reusable Registration Point

Using the second method for creating registration points, you define each registration point in the layout section with a <regPoint/> tag. As shown in the following example, a <regPoint/> tag has a unique ID, a few positioning attributes, and a regAlign attribute:

<layout>
...windows and regions defined here...
<regPoint id="above_center" left="50%" top="25%" regAlign="topMid"/>
</layout>

The preceding <regPoint/> tag creates a registration point halfway in from the left, and a quarter of the way down from the top, of any region. The regAlign value, described in "Using Alignment Values", places the midpoint of the clip's top border on the registration point.

Positioning the Registration Point

A <regPoint/> tag's left, right, top, and bottom attributes, which can have pixel or percentage values just like region offset values, allow you to place the registration point anywhere in a region. You need to use only one or two of these attributes (such as left and top, or right and bottom) to define a registration point's position. The following table summarizes these attributes.

<regPoint/> Tag Position Attributes
Attribute Function Example
left Sets the point's offset from region's left border left="120"
right Sets the point's offset from region's right border right="5%"
top Specifies the point's offset from region's top border top="60"
bottom Specifies the point's offset from region's bottom border bottom="22%"

Assigning a Registration Point to Clips

Once you define a registration point in the layout section, you assign the point to any number of clips by adding a regPoint attribute to each clip source tag. This attribute takes as its value the ID of the <regPoint/> tag. For example, if you defined this registration point:

<regPoint id="above_center" left="50%" top="25%" regAlign="topMid"/>

you use the following regPoint attribute in the clip source tag:

<ref src="..." region="video_region" regPoint="above_center" .../>

In the clip source tag, you can even override the regAlign value defined for the registration point. Suppose that for one clip you want to use regAlign="center" instead of the defined regAlign="topMid". You can simply add the new regAlign value to the clip tag, rather than define a new registration point:

<ref src="..." region="region2" regPoint="above_center" regAlign="center" .../>

Note: You cannot override a registration point's position attributes, such as left and top, through a clip source tag.

Using Common Values in <regPoint/> Tags

Using <regPoint/> tags, you can replicate any registration point definable through clip source tags. The following table shows how to create common registration point alignments with values in a <regPoint/> tag rather than with attributes in clip source tags. Note that although left and top attributes are used, you could define the same registration points using right and bottom.

Common Registration Point Values in <regPoint/> Tags
Clip Placement Registration Point Values Example
top left (default) left="0%" top="0%" regAlign="topLeft"

top center left="50%" top="0%" regAlign="topMid"

top right left="100%" top="0%" regAlign="topRight"

middle left left="0%" top="50%" regAlign="midLeft"

center left="50%" top="50%" regAlign="center"

middle right left="100%" top="50%" regAlign="midRight"

bottom left left="0%" top="100%" regAlign="bottomLeft"

bottom center left="50%" top="100%" regAlign="bottomMid"

bottom right left="100%" top="100%" regAlign="bottomRight"

upper-left quadrant left="50%" top="50%" regAlign="bottomRight"

upper-right quadrant left="50%" top="50%" regAlign="bottomLeft"

lower-left quadrant left="50%" top="50%" regAlign="topRight"

lower-right quadrant left="50%" top="50%" regAlign="topLeft"

Tips for Defining <regPoint/> Tags

Fitting Clips to Regions

Whereas a registration point determines where a clip displays in a region, a fit attribute specifies what happens when a clip is larger or smaller than its allotted area. The various fit values determine whether resizing, distortion, and cropping may occur. The fit attribute is part of a <region/> tag, not a <regPoint/> tag, and it applies to a clip playing in the region whether or not the clip uses a registration point. The following example shows a fit attribute set in a <region/> tag:

<region id="video_region" width="128" height="64" fit="meet"/>

fit Attribute Values

The fit attribute uses one of the values described in the following table. The table's last three columns indicate if the fit attribute value may scale, distort, or crop the clip if it does not fit the region dimensions exactly.

fit Value Function Scaling? Distortion? Cropping?
fill Place the clip in the region's upper-left corner, or at the registration point. Scale the clip so that it fills the region exactly. Image distortion occurs if the encoded clip and playback region have different aspect ratios. yes yes no
hidden
(default)
Keep the clip at its encoded size, and place it in the region's upper-left corner, or at the registration point. If the clip is smaller than the region, fill the remaining space with the region's background color. If the clip is larger than the region, crop out the area that does not fit. no no yes
meet Place the clip at the region's upper-left corner or at the registration point. Scale the clip and preserve its width-to-height ratio until one dimension is equal to the region's size and the other dimension is within the region's boundaries. Fill empty space with the region's background color. yes no no
scroll Place the clip at the region's upper-left corner or at the registration point. Display the clip as its normal size, adding horizontal or vertical scroll bars if the clip extends beyond the region's boundaries. (RealPlayers earlier than RealPlayer 8 display clips as hidden instead.) no no no
slice Place the clip at the region's upper-left corner or at the registration point. Scale the clip and preserve its width-to-height ratio until one dimension is equal to the region's size and the other dimension overflows the region's boundaries. Crop the overflow. yes no yes

The following illustration shows the effects that particular fit attribute values have on a source clip played in regions with different sizes and aspect ratios. Note that in some cases, based on the width-to-height ratio of the clip and the width-to-height ratio of the region, certain fit values have nearly the same effect. But display the same clip in a region with a different width-to-height ratio, and the fit values can have very different effects.

A Clip Played in Different Regions with Different fit Attribute Values

A Clip Played in Different Regions with Different fit Attribute Values

View it now! (requirements for viewing this sample)
This first sample lets you view how four different fit attribute values affect the same clip as it displays in the four quadrants of a region. The following samples show how the various fit values affect a clip when it displays in regions that have different sizes and aspect ratios:

fit="fill"
fit="hidden"
fit="meet"
fit="slice"
fit="scroll"

Overriding a Region's fit Attribute

You can override a region's fit attribute within a clip source tag. Suppose that a certain region uses fit="fill", but you want to play one clip in that region and use fit="hidden" instead. You can simply add that fit value to the clip source tag to override the region's fit value:

<video src="..." region="textregion" fit="hidden" .../>

Tips for Defining the fit Attribute

Layout Examples

The following sections illustrate how to use layout tags and attributes to create various types of presentations. To see more examples, get the zipped HTML version of this guide as described in "How to Download This Guide to Your Computer", and view the Sample Files page.

Centering a Video on a Background Image

This example centers a video clip in front of an image. Because region sizes are not specified, the regions expand to the root-layout size. The registration point centers the video clip within its region. The z-index attributes place the video region in front of the image region. The image region's fit="fill" attribute expands the image to fill the entire region, distorting the image if the image does not have the same aspect ratio as the region:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="320" height="240"/>
<region id="image_region" fit="fill" z-index="1"/>
<region id="video_region" fit="hidden" z-index="2"/>
<regPoint id="middle" regAlign="center" left="50%" top="50%"/>
</layout>
</head>
<body>
<par>
<img src="background.gif" region="image_region" dur="10s" fill="freeze"/>
<video src="video1.rm" region="video_region" regPoint="middle"/>
</par>
</body>
</smil>

Note: SMIL provides no way to tile an image throughout a region.

View it now! (requirements for viewing this sample)
Play this sample to view a video centered on a graphic image.

Displaying a Letterbox Clip

A wide screen movie displays on most television sets in a letterbox format, in which blank areas display above and below the movie. As shown in the following example, you can achieve the same effect for a clip that has a width- to-height ratio greater than its region's. Here, the video uses a registration point that centers it in a region that uses fit="meet" to scale the video up or down in size until its left and right edges meet the region boundaries:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="400" height="300"/>
<region id="video_region" fit="meet"/>
</layout>
</head>
<body>
<video src="widescreen.rm" region="video_region" regPoint="center"
regAlign="center"/>
</body>
</smil>

View it now! (requirements for viewing this sample)
This sample demonstrates the letterbox effect using a RealText clip.

Turning Down an Audio Clip's Volume

Although audio-only clips are not typically assigned to regions, you can take advantage of a region's soundLevel attribute to change an audio clip's volume. The following example cuts the volume of a background music clip. The single playback region (1 pixel by 1 pixel) uses the soundLevel attribute to turn down the clip volume. Because the second clip is assigned to this region, RealOne Player cuts that clip's audio level as it blends it with the first clip:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout height="1" width="1"/>
<region id="lowvolume" soundLevel="35%"/>
</layout>
</head>
<body>
<par>
<audio src="voiceover.rm"/>
<audio src="background_music.rm" region="lowvolume"/>
</par>
</body>
</smil>

Playing Three Clips Side-by-Side

The following example displays three regions: a news region, a video region, and a stock ticker region. The news and video regions are arranged side-by-side at the top of the RealOne Player main media playback pane. The stock ticker region appears below them:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout height="230" width="510" backgroundColor="black"/>
<region id="news_region" width="240" height="180" left="5" top="5"/>
<region id="video_region" width="240" height="180" right="5" top="5"/>
<region id="ticker_region" width="500" height="30" left="5" bottom="5"/>
</layout>
</head>
<body>
<par endsync="news">
<textstream src="news.rt" id="news" region="news_region" fill="freeze"/>
<video src="video1.rm" region="video_region" fill="freeze"/>
<textstream src="ticker.rt" region="ticker_region" fill="freeze"/>
</par>
</body>
</smil>

View it now! (requirements for viewing this sample)
Click this sample to view three clips played side-by- side.

Placing a Clip in a Secondary Media Playback Window

A small change to the preceding example's layout can make one of the three clips display in a secondary, pop-up window. The following example places the stock ticker clip in a secondary media playback window that automatically opens when the presentation starts. The region that holds the stock ticker clip has no size and position information, so it automatically assumes the size of the secondary media playback window. The root-layout area's height has decreased, but within the SMIL body nothing has changed:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout height="190" width="510" backgroundColor="black"/>
<region id="news_region" width="240" height="180" left="5" top="5"/>
<region id="video_region" width="240" height="180" right="5" top="5"/>
<topLayout width="500" height="30">
<region id="ticker_region"/>
</topLayout>
</layout>
</head>
<body>
<par endsync="news">
<textstream src="news.rt" id="news" region="news_region" fill="freeze"/>
<video src="video1.rm" region="video_region" fill="freeze"/>
<textstream src="ticker.rt" region="ticker_region" fill="freeze"/>
</par>
</body>
</smil>

View it now! (requirements for viewing this sample)
Click this sample to view two clips played side-by- side, with the third clip in a secondary media playbackwindow.

Playing the Same Clip in Multiple Regions

You normally assign a clip to a single region based on the region ID. Because each region ID must be unique, however you cannot assign the same clip to multiple regions by using region IDs. However, you can assign the same clip to two or more regions based on the region names. In the following example, the same video plays in two regions that appear size by side:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<layout>
<root-layout width="360" height="120"/>
<region id="video_region1" regionName="video" soundLevel="0%"
right="50%" fit="fill"/>
<region id="video_region2" regionName="video" left="50%" fit="fill"/>
</layout>
</head>
<body>
<seq>
<video src="video1.rm" region="video"/>
</seq>
</body>
</smil>

In the preceding example, the two regions share the same region name. When it reads the <video/> source clip tag, RealOne Player first looks for a region with id="video". Because there is no such region, RealOne Player looks for a region with regionName="video". In this example, it finds two regions with this name, so it plays the same clip in both regions.

With this strategy, RealOne Player requests only one video clip from Helix Universal Server. If you used two <video/> source clips instead, RealOne Player would request the same video stream twice, wasting bandwidth. Note, too, that one region turns off the video's audio track with the soundLevel attribute. If two clips have audio tracks, RealOne Player blends the tracks. In this case, that's unnecessary because the tracks are identical.


RealNetworks, Inc. ©2002 RealNetworks, Inc. All rights reserved.
For more information, visit RealNetworks
Click here if the Table of Contents frame is not visible at the left side of your screen.
previous next