previous next

Chapter 14: Advanced Timing

Once you have mastered the basic timing attributes described in Chapter 13, you are ready to tackle SMIL's advanced timing features. Using these features, you can develop interactive presentations that play clips when viewers click icons, for example. You can also use advanced timing to create effects similar to those found in Web pages, such as starting a SMIL animation when the viewer moves the screen pointer over an image.

Tip: Be sure to familiarize yourself with "Conventions Used in this Guide". That section lists the typographical conventions used in this chapter to explain event timing syntax.

Understanding Advanced Timing

Chapter 13 explains the basic timing attributes: begin, end, and dur. Although this chapter introduces some new timing attributes, it primarily shows you how to expand the power of the begin and end attributes through complex timing values. This chapter describes many different ways to start or stop an element besides using basic timing attributes such as begin="5s".

Advanced Timing Syntax

The key to advanced SMIL timing is the event. Although not always the case, an advanced timing command typically starts or stops a SMIL element (or multiple SMIL elements) when an event occurs. So you generally have two elements that you work with: the element that triggers the event, and the element (or elements) that the triggered event starts or stops. For the element that provides the event trigger, you must define an ID:

<element_tag1 id="ID" .../>

In the triggered element's tag, you create a begin or end value that refers to the first element's ID, specifies the triggering event, and, optionally, adds a timing offset:

<element_tag2 begin|end="ID.event[+|-time_value]" .../>

To make these abstract examples more concrete, suppose that your triggering element is a video clip:

<video src="video1.rm" id="intro" region="video_region"/>

Your triggered element might be a graphic image that begins 10 seconds after the video starts:

<img src="picture.jpg" begin="intro.begin+10s" region="image_region" .../>

In simple cases, advanced timing commands may not be needed. If the two preceding clips were in the same <par> group, for example, you could achieve the desired 10-second delay with simple timing commands:

<par>
<video src="video1.rm" id="intro" region="video_region"/>
<img src="picture.jpg" region="img_region" begin="10s" .../>
</par>

The advanced timing commands let you tie elements together when they are not in the same group, however. As well, the advanced timing commands let you start or stop clips on many kinds of events, such as mouseclicks.

Event Types

Events that can start or stop an element fall into two categories:

The following table summarizes the event values you can use with the begin and end attributes. Most event values require an ID value that identifies the element that triggers the event.

begin and end Attribute Event Values
Value Event Type Event Trigger Reference
accesskey(key) interactive keypress click here
ID.activateEvent interactive mouseclick click here
ID.begin scheduled beginning of element click here
ID.beginEvent interactive beginning of element click here
ID.end scheduled end of element click here
ID.endEvent interactive end of element click here
ID.focusInEvent interactive keyboard focus on element click here
ID.focusOutEvent interactive keyboard focus off element click here
ID.inBoundsEvent interactive pointer moving over element click here
ID.marker(name) scheduled marker reached for element click here
ID.outOfBoundsEvent interactive pointer moving off element click here
ID.repeat(integer) scheduled specific iteration of element click here
ID.repeatEvent interactive each iteration of element click here
ID.topLayoutCloseEvent interactive or scheduled secondary media playback window closing click here
ID.topLayoutOpenEvent interactive or scheduled secondary media playback window opening click here
ID.wallclock(time) scheduled external clock value reached click here

Positive Offset Times

Most of the begin and end attribute values described in this chapter can take a positive offset timing value, which adds a delay between an event and the action that the event triggers. For example, a begin attribute might have the following syntax, which sets the element to start at five seconds after the event (left unspecified here) occurs:

begin="ID.event+5s"

Interactive Events with Positive Offset Times

A positive offset is useful when starting a clip based on an interactive event. Because it cannot anticipate interactive events, RealOne Player does not request clips from the server until the interactive event occurs. If you do not add a positive offset, RealOne Player may need to pause the presentation while it requests and buffers the clip's preroll. An offset such as +15s, on the other hand, enables RealOne Player to request the clip when the event occurs, then buffer the clip for up to 15 seconds before playing it.

Tip: Instead of using a timing offset value, you can use <prefetch/> to request a clip's preroll in advance. For more information, see Chapter 19.

How Much of a Positive Offset Do You Need?

If you plan to start a clip on an interactive event, open the clip in RealOne Player, and use File>Clip Properties>Clip Source to display the buffering information. You'll also need to add a few seconds for RealOne Player to request the clip from the server, and to begin receiving the streamed data. If a clip's preroll is 10 seconds, for example, you may want to use positive offset of 15 seconds to ensure that the clip's preroll has streamed to RealOne Player by the time the clip begins to play.

Note: Static clips such as images do not have a preroll. RealOne Player must receive all the clip data before playing the clip. The time required to display the clip is the clip size divided by the available streaming bandwidth.

Interactive Events that Do Not Require Positive Offsets

A positive offset value isn't necessary when starting or stopping elements on interactive events if those elements do not need to be streamed from a server. For example, you can use an interactive event such as a mouseclick to trigger a SMIL animation that shrinks a clip already received by RealOne Player. Because the SMIL animation is defined within the SMIL file, RealOne Player has all the data it needs to start the animation when the event occurs.

Scheduled Events with Positive Offset Times

When you start clips on scheduled events, a positive offset time is generally not required to keep the presentation flowing smoothly. RealOne Player can anticipate scheduled events and request a new clip's preroll far enough in advance to prevent presentation rebuffering. You may want to use positive offset times with scheduled events to manage the presentation timeline, though. You might want to start a clip five seconds after another clip repeats for the second time, for example. You can do that easily by adding +5s to the clip's begin time.

Negative Offset Times

SMIL elements within a <par> or <excl> group (but not a <seq> group) can use negative timing offsets with advanced begin and end values. You can also use a negative offset value with an event, as shown in the following example:

begin="ID.event-5s"

Simple Negative Offset Times

You can use negative timing offsets in basic begin and end attributes, as well as with advanced timing commands. In the following example, the video is set to begin one minute before the group becomes active:

<par>
<textstream src="credits.rt" id="credits" region="credits_region"/>
<video src="video1.rm" region="video_region" begin="-1min"/>
</par>

Although the negative offset time in the preceding example is valid, a clip never plays before the group that contains it becomes active. This is because all timing attributes are relative to the group that contains the timed element. Instead of making the video clip play one minute before the parallel group becomes active, the negative offset shown above functions like clipBegin. This means that the video starts playing at its one-minute mark once the group becomes active.

For More Information: The clipBegin attribute is described in "Setting Internal Clip Begin and End Times".

Interactive Events with Negative Offset Times

Because RealOne Player cannot anticipate an interactive event, there is no way to use a negative offset time to make a clip start or stop before an interactive event happens. If you use a negative offset to start a clip 20 seconds before an interactive event occurs, the clip begins when the event occurs, yet appears to have played for 20 seconds already. In other words, the clip acts as if clipBegin="20s" were included in its source tag.

Scheduled Events with Negative Offset Times

Negative offset values are most useful with scheduled events because RealOne Player can determine when scheduled events will occur. RealOne Player can determine when a clip is scheduled to end, for instance. You can therefore use a negative offset time to end a clip ten seconds before another clip's scheduled end time, for example.

Multiple Timing Values

For any SMIL element that uses begin or end attributes, you can define any number of timing values by separating the values with semicolons:

"time1; time2; time3;..."

In the following example, the clip begins when the first of two possible events occurs: either one minute elapses after the clip's group becomes active, or event1 occurs. The clip ends either two minutes after the group starts, or when event2 occurs:

<ref src="..." begin="1min; event1" end="2min; event2"/>

Tips for Specifying Multiple Time Values

Defining an Element Start or Stop Event

The following four event values work with either the begin or the end attribute, letting you start or stop an element when another element begins or ends:

Sample Values

The following are samples of begin and end values that start or stop an event relative to an element with a certain ID value:

begin="ID.end" Start the element when the element with the given ID is scheduled to end.
end="ID.begin-5s" Stop the element five seconds before the element with the given ID is scheduled to begin.
begin="ID.beginEvent+5s" Start the element five seconds after the element with the given ID actually begins.
end="ID.endEvent" Stop the element when the element with the given ID actually ends.

Example

As an example of using a begin event, suppose you want to start a clip two seconds after another clip begins. You first add an ID to the element that provides the basis for starting or stopping the second element:

<video src="video1.rm" id="intro" region="video_region"/>

Next, you define the begin or end time for the second element, using the ID of the first element:

<img src="picture.jpg" region="img_region" dur="20s" begin="intro.begin+2s"/>

View it now! (requirements for viewing this sample)
These two samples both play three video clips in sequence. A different image displays next to each video after the video starts. The first sample uses simple SMIL timing, while the second sample uses advanced SMIL timing. View the source markup for both files to see how their internal structures and timing methods differ.

Keep in mind that SMIL timing values can affect when your second element begins. Suppose that the video in the preceding example has an internal timeline of two minutes, but you specify a three-minute duration as shown here:

<video src="video1.rm" id="intro" region="video_region" dur="3min"/>

If the second element uses begin="intro.end" or begin="intro.endEvent", for example, it will start to play when the video's dur time expires, which is one minute after the video displays its last frame.

Defining a Repeat Event

Two event timing values for the begin and end attributes let you start or stop a clip or group when another element repeats. You might target a specific iteration, such as the third time the element repeats. Or, you can restart the clip or group on each of the element's repeating cycles:

The repeatEvent and repeat(n) events typically occur when an element uses an attribute such as repeatDur and repeatCount, which are described in "Repeating an Element". They do not occur on these conditions:

Sample Values

The following are samples of begin and end values that start or stop an element relative to the repetitions of another element:

begin="ID.repeat(3)" Start the element when the element with the given ID begins its third repetition (that is, when it starts to play for the fourth time).
end="ID.repeat(2)-5s" Stop the element five seconds before the element with the given ID begins its second repetition.
begin="ID.repeatEvent+10s" Start the element ten seconds after the second and each subsequent time the element with the given ID repeats.

Example

To use a repeat timing value, you first add an ID to the clip that will provide the basis for starting or stopping the second clip. This clip must also have a repeatCount or repeatDur attribute that causes it to repeat. In the following example, the video clip repeats three times:

<video src="video1.rm" id="main" repeatCount="3" region="video_region"/>

Next, you define the begin or end time for the second clip, using the ID of the first clip. In the following example, the image clip begins when the video clip with the ID of main starts its second repetition (that is, when it starts to play for the third time):

<img src="picture.jpg" region="img_region" dur="20s" begin="main.repeat(2)"/>

For More Information: For details on the repeatCount and repeatDur attributes, see "Repeating an Element".

Note: If an element repeats and has a negative timing offset, only the first cycle shows the effect of a clipBegin. All subsequent cycles play for their full duration.

View it now! (requirements for viewing this sample)
In this sample, different images display each time a video repeats.

Defining a Mouse Event

Starting or stopping a clip when a viewer clicks another clip is a common means of adding interactivity to a streaming presentation. You can also start or stop an element such as an animation when the viewer moves the screen pointer on of off a clip. The following are the mouse-related event values that you can use with a begin or end attribute:

The inBoundsEvent and outOfBoundsEvent values can occur for multiple clips simultaneously if clips are stacked on top of each other. The z-index value of the clips does not matter, and an event can still occur even if the clip is completely obscured by another clip.

For More Information: For details on z-index, see "Stacking Regions That Overlap".

Sample Values

The following are samples of begin and end values that start or stop an element relative to a mouse event:

begin="ID.activateEvent" Start the element when the clip with the given ID is clicked.
begin="ID.inBoundsEvent" Start the element when the cursor moves over the clip with the given ID.
end="ID.outOfBoundsEvent+1s" Stop the element one second after the cursor moves off the clip with the given ID.

Examples

The following sections provide some examples of the many uses of interactive timing available through activateEvent, inBoundsEvent, and outOfBoundsEvent.

Starting a Clip when Another Clip is Clicked

Suppose that you want to start a video when an image button is clicked. You first add an ID to the clip source tag of the image:

<img src="button1.gif" id="button" dur="5s" fill="freeze" region="button_1"/>

Next, you define the begin and end times for the video, using activateEvent and the image clip's ID:

<video src="video1.rm" region="video_region" begin="button.activateEvent"/>

Although not always necessary, the clip that is activated (the video clip in the example above) typically resides in an exclusive group, a group in which only one element at a time can play. For more on these groups, see "Creating an Exclusive Group".

Tip: You can use activateEvent with the ID of a SMIL <area/> tag to start or end an element when the hyperlink is activated. This allows a link simultaneously to open an HTML page and play a clip, for example. For more on hypertext links, see Chapter 15.

View it now! (requirements for viewing this sample)
This sample plays different videos when one of three images is clicked. The next sample is similar, but also opens an HTML page when each image is clicked.

Changing a Background Color on a Mouseover

Using SMIL's advanced timing attributes, you can replicate rollover effects created in HTML pages with Javascript. In the following example, the image has a transparent background and displays in front of a white background. The <set/> tag changes the region's background color to red when the screen pointer moves over the image, and then change the color back to white when the pointer moves off the image:

<img src="image.png" id="image1" region="image_region" dur="1min" ...>
<set targetElement="image_region" attributeName="backgroundColor" to="red"
begin="image1.inBoundsEvent" end="image1.outOfBoundsEvent"/>
</img>

View it now! (requirements for viewing this sample)
This sample changes the image background color when the screen pointer moves over the image.

For More Information: See Chapter 17 for information on SMIL animations. The section "Setting an Attribute Value" explains the <set/> tags.

Changing a Clip on a Mouseover

By animating a region's z-index value, you can bring the region and the clip it contains forward on a mouseover. Suppose that you define regions that are the same size, but the second region has a higher z-index value that places it in front of the first region:

<region id="image_region1" fit="fill" z-index="1"/>
<region id="image_region2" fit="fill" z-index="2"/>

With this layout, you can hide a clip in image_region1 and display a clip in image_region2. Using a SMIL animation tag along with advanced timing commands, you can move the hidden clip forward when the screen pointer moves over the visible clip, then hide the clip again when the screen pointer moves off it:

<par>
<img src="image1.jpg" id="image1" region="image_region1" .../>
<img src="image2.jpg" id="image2" region="image_region2" .../>
<set targetElement="image_region1" attributeName="z-index" to="3"
begin="image2.inBoundsEvent" end="image1.outOfBoundsEvent"/>
</par>

There are several points to note about the preceding example:

Defining a Keyboard Event

In addition to mouse events, you can use keyboard events to start or stop elements. A keyboard event can occur when a viewer presses a key, or it can occur when a clip gains or loses the keyboard focus. When a clip has the keyboard focus, it captures all subsequent keystrokes. When a viewer clicks a form created in Flash, for example, the Flash form receives the focus. The following are begin or end event values associated with keyboard activity:

Sample Values

The following are samples of begin and end values that start or stop an element relative to a keyboard event:

begin="accesskey(g)" Start the element when the keyboard letter "g" is pressed.
end="ID.focusOutEvent+2s" Stop the element two seconds after the clip with the given ID loses the keyboard focus.

Example

In the following example, the video starts playing when the keyboard letter "g" is pressed. It stops playing when the letter "h" is pressed:

<video src="video1.rm" region="video_region" begin="accesskey(g)" end="accesskey(h)"/>

Tips for Defining Keyboard Events

Defining a Secondary Window Event

The section "Creating Secondary Media Playback Windows" explains how to create a layout in which a secondary media playback window pops up from the main media playback pane. The following values for the begin and end attributes allow you to start or stop an element when a secondary media playback window opens or closes:

Sample Values

The following are samples of begin and end values that start or stop an element relative to a secondary media playback window event:

begin="ID.topLayoutOpenEvent" Start the element when the secondary media playback window opens.
end="ID.topLayoutCloseEvent+2s" Stop the element two seconds after the secondary media playback window closes.

Example

The following example defines a secondary media playback window that opens when the first clip displays in it, and closes when all clips assigned to it finish playing:

<topLayout width="180" height="120" id="popup1" open="whenActive" close="whenNotActive">

The following clip then starts three seconds after the window closes:

<video src="video1.rm" region="vid" begin="popup1.topLayoutCloseEvent+3s"/>

Using Media Markers

This section to be added.

Coordinating Clips to an External Clock

This section to be added.

Controlling Whether an Element Restarts

The restart attribute governs whether an element can play more than once. A clip might have multiple begin times that specify when it plays, for example, or start on an interactive event such as a mouse click. The restart attribute can prevent an element from restarting, or place restrictions on the restart. It does not affect repeating cycles set with a repeatCount or repeatDur attribute, though. The following table summarizes the restart values.

restart Attribute Values
Value Function
always Allows the element to restart at any time, even while playing. This is the effective value that is used if the element has no restart value, and no restartDefault values are specified in any groups of which the element is a member.
default Sets the restart value to that specified by restartDefault. This is the default value that is used if no restart value is specified, but a containing group has a restartDefault value.
never Prevents the element from restarting after it completes its first playback.
whenNotActive Allows the element to restart only after it has completed playing. The element can then restart any number of times. The restart occurs only after the element plays to completion, its dur or end time is reached, or it finishes all of its specified repeat cycles.

In the following example, a video clip starts when a button is clicked, as described in "Defining a Mouse Event". It uses the whenNotActive value to allow it to restart after it finishes playing. Nothing happens if the viewer clicks the activation button while the video plays. The viewer must wait for the video to stop, then click the button to restart the video:

<video src="video1.rm" region="video_region" begin="button.activateEvent"
restart="whenNotActive"/>

Tip: Although the restart attribute is most commonly used with clips, you can also use it in group tags and other elements, such as SMIL animations. Keep in mind, though, that an element can restart only while its containing group is active.

Setting a Default Restart Value

You can use the restartDefault attribute in a group tag to set a restart value for the group and all of the elements it contains. All elements within the group receive the default restart value unless they have another restart value explicitly set. The following table lists the possible restartDefault values.

restartDefault Attribute Values
Value Function
always Allows elements within the group to restart at any time, even while playing.
inherit Sets the restart value for elements in the group to the restartDefault value of the group's containing group. This is the default value, meaning that a group without a restartDefault value inherits the restartDefault value from its containing group.
never Prevents elements within the group from restarting after they complete their first playback.
whenNotActive Allows group elements to restart any number of times, but only after they have completed playing. Restart attempts are recognized only after the elements have played to completion.

The following example shows an exclusive group of video clips in which the first two clips receive the restartDefault value of whenNotActive. The last clip, however, overrides that value with its own restart value:

<excl restartDefault="whenNotActive">
<video src="video1.rm" begin="button1.activateEvent" .../>
<video src="video2.rm" begin="button2.activateEvent" .../>
<video src="video3.rm" begin="button3.activateEvent" restart="never" .../>
</excl>

View it now! (requirements for viewing this sample)
In each sample, click the image to play a video. With restartDefault="always", the video clip always restarts when you click its start button, whether or not it is already playing. The value restartDefault="whenNotActive" allows the video clip to restart only if it is not already playing. With restartDefault="never", the video clip will not restart after its first playback.

Nested Group Interactions with Restart Values

If several levels of nested groups use restart and restartDefault, it's important to understand how the groups and their elements interact. Because elements inherit a restartDefault value by default, the interactions can be difficult to grasp unless you look at all levels of the nested groups. Consider the following abstract example:

<par id="master_group" restartDefault="whenNotActive">
<par id="group_X" restartDefault="inherit">
<ref id="clip_A" .../>
<ref id="clip_B" restart="always" .../>
</par>
<par id="group_Y" restart="always">
<ref id="clip_C" .../>
<ref id="clip_D" .../>
</par>
<par id="group_Z" restartDefault="always">
<ref id="clip_E" .../>
<ref id="clip_F" restart="whenNotActive" .../>
</par>
</par>

The master group sets a restartDefault value of whenNotActive. The elements within this master group have the following restart values:


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