previous next

Chapter 17: Animations

Using SMIL animations, you can transform clips by expanding them, for example, or moving them around the screen. To use this advanced SMIL feature, you must thoroughly understand clip tags, groups, timing, and layouts as described in the preceding chapters. For information on Flash animation rather than SMIL animation, see Chapter 5.

Tip: To see animation 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.

Understanding Animations

SMIL animations provide the means for manipulating clips playing in RealOne Player. They are not themselves distinct clips. Instead, they are SMIL tags and attributes that instruct RealOne Player to modify a clip, whether a video, a still image, a brush object, or any other type of clip. You can even apply a SMIL animation to a Flash animation clip to "animate an animation." Common uses of SMIL animation include:

Animation Tags

You can add an animation to your SMIL presentation using any one of four animation tags:

Animation Tag Placement

Animation tags always appear in the SMIL <body> section, even when they modify elements defined in the SMIL header, such as <region/> tags. Animation tags function much like clip source tags. You can place them in groups, but you can also include them within clip source tags. The following sections describe the various means of adding animation tags to a SMIL file.

In a Clip Source Tag

When you want to animate a clip as it plays, you can turn the clip source tag into a binary tag, as shown in the following example:

<video ...>
<animate ...animation for the video clip or region.../>
</video>

In this case, the animation typically affects the clip or the region playing the clip. The animation can occur only while the clip is playing or appears frozen onscreen. Non-interactive timing attributes in the animation tag are relative to the start of clip playback. For example, a begin="5s" attribute in the animation tag starts the animation five seconds after the clip begins to play.

For More Information: See "Binary and Unary Tags" for the basics of modifying a clip source tag to include other SMIL elements.

In a Parallel Group

Because animations function like clip source tags, you can place them in parallel groups with other clips, as shown in the next example:

<par>
<video.../>
<textstream.../>
<animate ...animation for any SMIL element.../>
</par>

In this case, the animation might apply to a clip in the same parallel group, or to any other element in the file. The animation plays only while its <par> group is active, however, and non-interactive timing attributes in the animation tag are relative to the start of the <par> group. For example, a begin="10s" attribute in the animation tag starts the animation 10 seconds after the group becomes active.

In a Sequence

Although not as common as the preceding cases, an animation can also be part of a sequence as shown here:

<seq>
<video ... fill="hold"/>
<animate ...animation for the preceding clip.../>
</seq>

Although a sequential animation can affect any SMIL element, it typically targets the preceding clip. Because the animation plays only when the preceding clip finishes, that clip typically uses fill="hold" to keep it from disappearing when it ends playback. Non-interactive timing attributes in the animation tag are relative to the end of the preceding clip. For example, a begin="3s" attribute in the animation tag starts the animation three seconds after the preceding clip finishes.

SMIL Timing with Animations

Because animations function like clip source tags, you can use SMIL timing attributes to control when animations start, and how long they last. The following are the most common timing attributes used with animations:

Simultaneous Animations

Several animations can occur at the same time during a presentation, as long as they do not conflict. You cannot increase and decrease a region's width at the same time, for example. But you can decrease its width, increase its height, move its left offset, and change its background color simultaneously by using several <animate/> tags that are active at the same time.

Creating Basic Animations

The <animate/> tag is the most versatile animation tag. You can use it to alter element sizes, positions, colors, and sound levels. The following table lists the attributes that you use to define animations with the <animate/> tag. Keep in mind, too, that animation tags typically use SMIL timing attributes, as described in "SMIL Timing with Animations".

<animate/> Tag Attributes
Attribute Value Function Reference
accumulate none|sum Makes a repeating animation build with each iteration. click here
additive replace|sum Adds the animation value to the existing value. click here
attributeName attribute_name Selects the attribute to animate. click here
by pixels|percentage|
color_value
Animates the element by a certain amount. Do not use with to. click here
calcMode discrete|linear|
paced
Controls the flow of an animation. click here
from pixels|percentage|
color_value
Sets a starting point for the animation. Use with to or by. click here
targetElement ID Identifies the tag that contains the animated attribute. click here
to pixels|percentage|
color_value
Sets an end point for the animation. Do not use with by. click here
values pixels|percentage|
color_value
Defines a list of animation values. Not used with from, to, or by. click here

Selecting the Element and Attribute to Animate

Using the targetElement attribute, you specify the ID of the SMIL element you want to animate. Using attributeName you select a specific attribute within that element. To animate a region's width, for example, you identify the region and its width attribute through an <animate/> tag in the SMIL body, as shown in the following example:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
...
<region id="video_region" width="320" height="240"/>
...
</head>
<body>
...
<animate targetElement="video_region" attributeName="width" .../>
</body>
</smil>

When the animation is within a clip source tag, attributeName is required, but targetElement is not necessary. In the following example, the <animate/> tag falls within the clip source tag. The <animate/> tag does not therefore need a targetElement attribute to select the video clip for animation:

<video ...>
<animate attributeName="..." .../>
</video>

Animating Window Attributes

The following table describes the attributes that you can animate in <root- layout/> and <topLayout> tags. That is, you can use any of the following as values for attributeName when targetElement identifies an ID in a <root-layout/> or <topLayout> tag. By animating these attributes, you can change the window size or alter its color.

<root-layout/> and <topLayout> Attribute Values You Can Animate
Attribute Effect Reference
backgroundColor Modifies the window's background color. You could change the window's background color from black to white midway through a presentation, for example. click here
height Modifies the window height. You can animate this attribute along with width to change the presentation's display size. click here
width Alters the window's width. You can animate this attribute along with height to change the presentation's display size. click here

View it now! (requirements for viewing this sample)
Click this sample to view window animations.

Animating Region Attributes

The next table lists all the attributes that you can animate in <region/> tags. In other words, you can use any of the following as values for attributeName when targetElement identifies a region ID. By animating these attributes, you can change a region's size, move the region around a window, alter its color, or change the volume of a playing clip.

Region Attribute Values You Can Animate
Attribute Effect Reference
backgroundColor Modifies the region's background color. You could change the region's background color from black to white midway through a presentation, for example. click here
bottom Changes the region's bottom offset. Animating this attribute can make the region taller or shorter, as well as move it vertically. click here
height Modifies the region height. You can animate this attribute along with width to change a clip's size. click here
left Changes the region's left offset. Animating this attribute can change the region's width, or move the region horizontally. click here
regionName Moves a clip from region to region. click here
right Changes the region's right offset. Animating this attribute can make the region wider or narrower, as well as move it horizontally. click here
soundLevel Adjusts a clip's sound level. You can animate this attribute to fade the clip's audio in or out. click here
top Changes the region's top offset. Animating this attribute can make the region taller or shorter, as well as move it vertically. click here
width Alters the region's width. You can animate this attribute along with height to change a clip's size. click here
z-index Changes the region's stacking order. You can animate this attribute to bring one region in front of another region. click here

View it now! (requirements for viewing this sample)
This sample displays region animations. You can also listen to how an animation can change the volume for an audio-only clip, and create an audio fade-in and fade-out.

Tips for Animating Regions

Animating Clip Attributes

The following table lists all the attributes that you can animate in clip source tags. That is, you can use any of the following as values for attributeName when targetElement identifies a tag such as <video/>, <img/>, or <ref/>.

Clip Attribute Values You Can Animate
Attribute Effect Reference
backgroundColor Modifies the background color of the region playing the clip. You could change the color from red to blue midway through a presentation, for example. click here
rn:backgroundOpacity Modifies the opacity in a clip's background transparency. You could make the clip more opaque, for example. click here
bottom Changes the clip's bottom offset from its playback region. Animating this attribute can make the clip taller or shorter, as well as move it vertically. click here
color Changes the color of a <brush/> object. click here
height Modifies the clip's height. You can animate this attribute along with width to change a clip's size. click here
left Changes the clip's left offset. Animating this attribute can make the clip narrower or wider, as well as move it horizontally. click here
rn:mediaOpacity Turns opaque areas in the clip transparent. By animating this attribute, you can make the clip blend in with the region background color. click here
right Changes the clip's right offset. Animating this attribute can make the clip narrower or wider, as well as move it horizontally. click here
top Changes the clip's top offset. Animating this attribute can make the clip taller or shorter, as well as move it vertically. click here
width Alters the clip's width. You can animate this attribute along with height to change a clip's size. click here
z-index Changes the clip's stacking order. You can animate this attribute to bring one clip in front of another. click here

View it now! (requirements for viewing this sample)
This sample demonstrates animations applied to a clip source tag.

Tips for Animating Clip Source Tags

Animating Hot Spot Attributes

An animation tag can select the coords attribute of an <area/> tag to change the shape of a hot spot hypertext link. For information on the <area/> tag and the coords attribute, see "Using the <area/> Tag".

Defining Simple Animation Values

Three animation attributes, to, by, and from, provide a simple means of defining where an animation starts and stops. Use either the to or the by attribute, but not both, to determine the animation end point. With either of these attributes, you can use the optional from attribute to change the animation's starting point.

Animating an Attribute to a Certain Point

The to attribute defines the animation's end point. It takes a value of the type appropriate for the animated attribute. When animating a layout attribute, for example, use a pixel or percentage value, either positive or negative. When animating a color, use a color name or value. For example, suppose that you have defined this region:

<region id="video_region" width="320" height="240" backgroundColor="green"/>

You could change the background color to yellow over the course of five seconds with an animation tag like the following:

<animate targetElement="video_region" attributeName="backgroundColor" to="red" dur="5s"/>

Using the to attribute, you could also animate the region's size or placement. When it becomes active, the following <animate/> tag expands the region's width to 380 pixels over the course of three seconds:

<animate targetElement="video_region" attributeName="width" to="380" dur="3s"/>

If you do not include a from attribute, the animation starts at the value specified in the target element tag. In the preceding example, the animation starts at the region's normal width of 320 pixels. If you specify a from value, though, the region expands or contracts to that size instantly when the animation becomes active. With the following animation, the region first contracts to half its defined size, then grows to 380 pixels over five seconds:

<animate targetElement="video_region" attributeName="width" from="160" 
to="380" dur="5s"/>

Animating an Attribute by a Certain Value

The by attribute defines a certain value by which the animation progresses. Use it to animate sizes or positions, but not colors. The by attribute can take a pixel or a percentage value, either positive or negative. Suppose that you want to expand the width of the following region:

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

When it becomes active, the following <animate/> tag expands the region's width by 30 pixels to a final width of 350 pixels:

<animate targetElement="video_region" attributeName="width" by="30" dur="3s"/>

Because no from value is specified, the animation starts with the region's defined width. If you specified a different from value, the region would expand or contract to that size instantly when the animation became active.

Tips for Defining Simple Animation Values

Defining a Range of Animation Values

Using a values list, you can animate an attribute through multiple values. This lets you define animations that are more complex than those possible with the to, by, and from attributes. In the following example, a values attribute animates a region's width to four different sizes over 15 seconds:

<animate targetElement="video_region" attributeName="width" dur="15s" 
values="58;150;96;110"/>

Tips for Defining a Values List

Controlling How an Animation Flows

The calcMode attribute, which works with the values, to, and by attributes, controls how the animation flows from point to point. It has three possible values, as described in the following table.

calcMode Attribute Values
Value Function Reference
discrete Makes the animated element jump from value to value. click here
linear Causes the animated element to flow smoothly from value to value, with the movement from each value taking an equal amount of time. This is the default value for <animate/> and <animateColor/>. click here
paced Makes the animated element flow smoothly from value to value, with the movement evenly paced throughout the entire animation. With to and by, this functions the same as linear. This is the default value for <animateMotion/>. click here

View it now! (requirements for viewing this sample)
Plays this sample to view the effects of the calcMode values.

Jumping from Value to Value

The discrete value for calcMode causes the animation to jump from point to point in the values list. For example, the following tag animates a region's width to four values over the course of eight seconds:

<animate targetElement="video_region" attributeName="width" dur="8s" 
values="50;75;150;100" calcMode="discrete"/>

When the animation begins, the region's width is set to 50 pixels. At two seconds, the width jumps up to 75 pixels. At four seconds, it jumps up to 150 pixels. And at six seconds, it jumps down to 100 pixels, staying at that size for the remaining two seconds of the duration. Note that the last value is reached at six seconds, rather than at the end of the eight-second duration. This makes each value active for an equal stretch (2 seconds) of the 8-second duration.

The calcMode="discrete" value also works with the to and by attributes to make the animation jump to its ending point. In the following example, the region width stays at 160 pixels through the first three seconds of the animation, then jumps to 320 pixels for the last three seconds:

<animate targetElement="video_region" attributeName="width" from="160" 
to="320" calcMode="discrete" dur="6s"/

Moving Linearly from Point to Point

The following animation uses the default value calcMode="linear" to animate a region's width between four points over the course of 9 seconds:

<animate targetElement="video_region" attributeName="width" dur="9s" 
values="50;75;200;100" calcMode="linear"/>

When the animation begins, the region's width is set to 50 pixels. It then begins to expand, reaching 75 pixels at three seconds. By six seconds, the width has grown to 200 pixels. It then begins to contract, reaching 100 pixels at nine seconds. So in contrast to the calcMode="discrete" example in the preceding section, the last value in this calcMode="linear" example is reached at the very end of the animation duration.

The speed of each segment in this animation increases with the distance between points. Notice that the distance from the first to the second point is 25 pixels, whereas the distance from the second to the third point is 125 pixels. Because each point-to-point expansion or contraction takes an equal amount of time, the speed of movement from the first to the second point is slower than the speed of movement from the second to the third point.

Flowing at an Even Pace

If you use calcMode="paced", movement flows smoothly over the course of the entire animation. When the following animation starts, the region width is 50 pixels. The region then expands at an even pace to 150 pixels before contracting at the same pace to 100 pixels:

<animate targetElement="video_region" attributeName="width" dur="6s" 
values="50;150;100" calcMode="paced"/>

Because the animation is paced, the distance between points in the values list affects how long each phase takes. The distance of the expansion phase is 100 pixels (150 - 50), whereas the distance of the contraction phase is 50 pixels (150 - 100). The expansion therefore takes twice as long as the contraction. Because the animation lasts 6 seconds, the expansion takes 4 seconds, while the contraction takes 2 seconds.

Note that when you use calcMode="paced", using more than two values has no effect if all values make the animation flow in the same direction. For example, consider the following attributes:

values="50;75;90;100;125;150" calcMode="paced"

Each value in the list above is greater than the preceding value. The animation therefore flows continuously in a positive direction. With the paced mode, though, only the first and last values will affect the speed. (This is not true with the linear value, however.) Hence, the preceding example functions the same as the following:

values="50;150" calcMode="linear"

Tip: When using only two values, use calcMode="linear", which is slightly more efficient with computer CPU than calcMode="paced".

Multiple values affect a paced animation only when they reverse the animation's direction. In the following example, the animation flows positively from the first to the second point, negatively from the second to the third point, and so on. Each value therefore affects the animation's appearance:

values="50;90;75;125;100;150" calcMode="paced"

Creating Additive and Cumulative Animations

As summarized in the following table, the accumulate and additive attributes let you create animations that build through repeating cycles.

Additive and Cumulative Attributes
Attribute Value Function Reference
accumulate none|sum Makes a repeating animation build with each iteration. click here
additive replace|sum Adds the animation value to the existing value. click here

Adding Animation Values to a Base Value

Using additive animation, you can animate target attributes by increments, rather than by absolute values. You can use additive animations for sizes and placements, but not colors. Although additive animations are useful on their own, they are more powerful when combined with cumulative animations, which the next section describes. To illustrate additive animation, consider the following region:

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

Suppose that you want to add 60 pixels to the width of this region in three steps, each step adding 20 pixels to the width. As described in the preceding sections, you can do this by specifying the exact width values in a values list:

<animate targetElement="video_region" attributeName="width" dur="3s" 
values="340;360;380" calcMode="discrete"/>

Or, you could use additive="sum" to tell RealOne Player to treat each specified value as an increment to add to the original width value:

<animate targetElement="video_region" attributeName="width" dur="3s" 
values="20;40;60" additive="sum" calcMode="discrete"/>

The preceding example tells RealOne Player to add 20 pixels to the region's original width, then add 40 pixels to the original width, then add 60 pixels to the original width. Note that each list value is added to the target region's original width, not to the animated width created by the preceding list value.

Additive animation also works with the from and to values, but it provides little benefit. For example, you could add 20 pixels to a region width with these attributes:

from="0" to="20" additive="sum"

But it's simpler in this case to use just the by attribute:

by="20"

View it now! (requirements for viewing this sample)
Play this sample to view an interactive, additive animation that allows you to enlarge, shrink, and move an image. The next sample lets you resize a video, demonstrating the difference between discrete and linear calcMode modes.

Making Animations Repeat and Grow

A cumulative animation uses a repeatCount or repeatDur attribute to repeat the animation. It also uses accumulate="sum" to increase or decrease the animated value with each iteration. You can use cumulative animations for sizes and placements, but not colors. To demonstrate cumulative animation, consider the following region:

<region id="image_region" width="180" height="180"/>

A simple cumulative animation could use the by attribute to increase the region width on each iteration of an animation. The following animation repeats four times. On each iteration, the region's width increases by 16 pixels:

<animate targetElement="image_region" attributeName="width" dur="2s" 
by="16" accumulate="sum" repeatCount="4" calcMode="discrete"/>

The by attribute always adds a certain amount to the target value, making it naturally additive. When using a values list with a cumulative animation, though, you need to include additive="sum" as described in "Adding Animation Values to a Base Value". Consider the following example:

<animate targetElement="image_region" attributeName="width" dur="2s" 
values="5;20" additive="sum" accumulate="sum" repeatCount="2"
calcMode="discrete" fill="freeze"/>

In this example, each repetition lasts two seconds, the calcMode value is discrete, and there are two values (5 and 20) in the values list. These attributes cause the animation to behave as follows:

Using the Specialized Animation Tags

The following sections describe the specialized animation tags, which are variations of the <animate/> tag. You should understand how the <animate/> tag works before using the specialized tags summarized in the following table.

Specialized Animation Tags
Tag Function Reference
<animateColor/> Changes a color value for a region or clip. click here
<animateMotion/> Moves an element both horizontally and vertically. click here
<set/> Sets an attribute to a new value instantly. click here

For More Information: For information about the <animate/> tag and the various attributes you can use in the specialized animation tags, see "Creating Basic Animations".

Animating Colors

The <animateColor/> tag works like an <animate/> tag, but is limited to color animations only. Although you can perform any color animation with an <animate/> tag, you may find it useful to use <animateColor/> to distinguish color animations from other animations. The following table lists the clip and region color properties you can animate. In other words, you can use the following attributes as values for attributeName in an <animateColor/> tag.

attributeName Values Used in the <animateColor/> Tag
Attribute Target Effect Reference
backgroundColor clip. region, window Modifies a root-layout, secondary wndow, or region background color. click here
color clip Changes a <brush/> object color. click here

The following example changes a region's background color to red:

<animateColor targetElement="image_region" attributeName="backgroundColor" 
to="red" begin="1s" dur="12s" fill="freeze"/>

You can also animate an element through several colors with a values list, as shown in the following example:

<animateColor targetElement="image_region" attributeName="backgroundColor" 
values="red;blue;yellow" calcMode="discrete" .../>

When you use calcMode="discrete", only the specified colors display. If you use paced or linear as the calcMode value, though, intermediate colors display. The paced and linear modes create subtle differences when used with colors. Suppose you specify the following values:

values="#FFDD11;#FFDD22;#FFDDFF"

With the paced mode, the animation flows smoothly from #FFDD11 to #FFDDFF. With the linear mode, though, the first half of the animation flows from #FFDD11 to #FFDD22. The second half of the animation flows from #FFDD22 to #FFDDFF. Because the first half covers fewer color values, the color changes appear to occur more slowly than in the second half.

For More Information: For more on calcMode, see "Controlling How an Animation Flows". Appendix C describes SMIL color values.

Tip: Color animations are not additive or cumulative, so do not use the by, additive, or accumulate attribute when animating a color with <animateColor/> or <animate/>.

View it now! (requirements for viewing this sample)
By playing these samples, you can watch region background colors change, see how to animate a brush object, and watch both a region and an animating brush object change colors at the same time.

Creating Horizontal and Vertical Motion

An <animateMotion/> tag moves an element both horizontally and vertically. Although you can move an element both horizontally and vertically by using two <animate/> tags, it's often simpler to use a single <animateMotion/> tag, which has the following features and restrictions that differentiate it from the <animate/> tag:

The following example moves the upper-left corner of the targeted region to the three points defined in the values list. Because calcMode="discrete" is used, the region will jump from point to point rather than flow smoothly:

<animateMotion targetElement="image_region" values="180,180;60,340;125,95" 
calcMode="discrete" begin="7s" dur="5s" fill="freeze"/>

View it now! (requirements for viewing this sample)
Play this sample to watch an image move around the screen diagonally.

Setting an Attribute Value

The <set/> tag changes an attribute to a specific value until the tag is no longer active. It is useful, for example, to change a region background color while a clip plays. You can use this tag with any attribute that you can animate with the <animate/> tag. The <set/> tag can therefore change element sizes, positions, and colors. It uses fewer animation attributes than <animate/>, as summarized in the following table.

<set/> Tag Attributes
Attribute Value Function Reference
attributeName attribute_name Selects the attribute to animate. click here
targetElement ID Identifies the tag that contains the animated attribute. click here
to pixels|percentage|
color_value
Sets the new attribute value. click here

A <set/> tag can use the basic SMIL timing attributes of begin, dur, and fill. The following example shows a <set/> tag changing a region background color. The region color changes instantly when the animation becomes active, then resets to its previous value after 30 seconds:

<set targetElement="video_region" attributeName="backgroundColor" to="blue" dur="30s"/>

If the <set/> tag does not define a duration explicitly, the animation lasts as long as the <set/> tag is active. If the <set/> tag is associated with a clip tag, for instance, the animation lasts until the clip's duration expires. In the following example, the animation expires when the image's 10-second duration elapses, even though the image still appears onscreen because of its fill="freeze" value:

<img src="image1.gif" region="image_region" dur="10s" fill="freeze"/>
<set targetElement="video_region" attributeName="backgroundColor" to="blue"/>
</img>

Tip: To disassociate the <set/> tag from the clip's timing attributes, place the <set/> tag and the clip source tag in a parallel group, as described in "Animation Tag Placement".

Manipulating Animation Timing

RealOne Player supports SMIL time manipulations for animations (and only animations). Time manipulations can control the rate of an animation to make it appear to accelerate or decelerate, for example. A later version of this guide will explain how to create time manipulations. Currently, you can learn about time manipulations in the SMIL 2.0 specification:

http://www.w3.org/TR/smil20/smil-timemanip.html


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