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. |
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:
![]() |
Tip: Chapter 16 explains transition effects, which are special effects that occur when a clip starts or stops playing. You can use transition effects and animations in the same presentation. You can even apply them to the same clip. But you define them separately. |
You can add an animation to your SMIL presentation using any one of four animation tags:
<animate/>
The <animate/>
tag is the principal tag used to create animations. The other tags are variations of the <animate/>
tag, so once you learn how to use <animate/>
, you will master the other tags quickly. The section "Creating Basic Animations" explains the main attributes and values of the <animate/>
tag.
<animateColor/>
The <animateColor/>
tag is a variation of the <animate/>
tag that works for color animations only. See the section "Animating Colors" for more on this tag.
<animateMotion/>
The <animateMotion/>
tag lets you move a clip both horizontally and vertically at the same time. A single <animate/>
tag creates motion in only one direction. Thus, a single <animateMotion/>
tag can do the work of two <animate/>
tags. The section "Creating Horizontal and Vertical Motion" explains how to use this tag.
<set/>
The <set/>
tag instantly sets an animation. With an <animate/>
tag, you can widen a region over the course of several seconds, for example. With the <set/>
tag, in contrast, you can set the new width instantly. The section "Setting an Attribute Value" describes the <set/>
tag.
![]() |
Tip:
Do not confuse the SMIL animation tags with the
<animation/> tag, which is a clip source tag that introduces an
animation clip into a presentation. For more on <animation/> ,
see "Creating Clip Source Tags".
|
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.
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 ...> |
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. |
Because animations function like clip source tags, you can place them in parallel groups with other clips, as shown in the next example:
<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.
Although not as common as the preceding cases, an animation can also be part of a sequence as shown here:
<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.
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:
begin
The begin
attribute, which is described in "Setting Begin and End Times", controls when the animation starts, relative to the group or clip that contains the animation. If you do not use a begin
value, the animation starts as soon as the clip or group that contains it becomes active. You can also use advanced begin
times as described in Chapter 14 to start an animation when the screen pointer moves over a clip, for example.
dur
or end
The dur
or end
attribute controls how long the animation lasts. As with any SMIL element, the end
attribute works with begin
to set a total playback time. For more information, see "Setting Durations", as well as "Choosing end or dur".
fill
The effects of an animation reset as soon as the animation's duration elapses unless you use a fill
attribute. If the animation is in a <par>
group and you use fill="freeze"
, for example, the animation holds its final appearance until the group ends. The fill
attribute is described in "Setting a Fill".
repeatCount
or repeatDur
You can make an animation replay several times with repeatCount
or repeatDur
. (The SMIL 1.0 repeat
attribute does not work with animations.) A repeating animation can also grow with each iteration. When widening a region, for example, you can make the region increase a certain amount on each repetition. The attributes for making animations repeat are described in "Repeating an Element".
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.
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".
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| |
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 |
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"> |
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 ...> |
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.
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. |
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.
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. |
right
attribute, for instance, even if that attribute is not defined in the <region/>
tag.left
, right
, top
, or bottom
attributes, you can move the region around the <root-layout/>
or the <topLayout>
area. You can even move part or all of the region out of the display area. The region and any clips displaying in it are truncated at the window borders, however.z-index
values determine which region appears in front. You can also animate the z-index
values to change this stacking order.![]() |
Note:
If region A appears in front of region B, you cannot
animate a subregion in region B so that it appears in front of
region A. For more information on subregion z-index values,
click here.
|
![]() |
View it now!
(requirements for viewing this sample)
This sample shows how animating the z-index
attribute affects region overlap. You can also
see how animating z-index values lets you change the
stacking order of clips when you click them, and can
create a cascade of regions.
|
fit
attribute affects how a clip displays as a region's height or width changes. For more on fit
, see "Fitting Clips to Regions".![]() |
View it now!
(requirements for viewing this sample)
Play this sample to see how various fit values affect a
clip as its playback region animates.
|
coords
values, or its coordinates are defined with percentage values. Although the link does not change size if it is defined with pixel values, it is truncated if the region boundaries overlap the hot spot boundaries.![]() |
For More Information: See "Defining Hot Spots" for more on creating hot spots. |
<regPoint>
or <transition>
tags.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/>
.
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. |
width
attribute, for example, even if it is not explicitly defined in a clip source tagwidth
or top
) in a clip creates or modifies a single-use subregion that holds the clip. Therefore, the points about animated regions described in "Tips for Animating Regions" apply to these types of clip animations.![]() |
For More Information: The section "Defining Single-Use Subregions" explains these types of subregions. |
<root-layout/>
or <topLayout>
area, animate the main region that contains the clip, rather than the clip itself.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".
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.
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" |
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.
calcMode="discrete"
to make the animation jump from its starting point to its stopping point. See "Controlling How an Animation Flows" for more information.to
or by
attribute even if the region or subregion is defined with percentages, and vice versa.by="-25%"
shrinks the region to three-quarters of its normal size. Specifying by="-40"
for a region's left
attribute moves the region 40 pixels to the left, whereas using by="40"
moves the region 40 pixels to the right.to
attribute when animating a size (such as to="-25%"
or to="-44"
when animating a region width) causes the element to disappear completely.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" |
to
and by
attributes, you can specify negative pixel or percentage values when animating sizes and placements.values="25%;50%;380" |
values="blue;green;#3FD233;rgb(255,12,192)"
.from
and to
attributes. For example, values="58;150"
functions the same as from="58"
and to="150"
.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.
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.
|
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" |
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" |
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" |
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.
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" |
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" |
As summarized in the following table, the accumulate
and additive
attributes
let you create animations that build through repeating cycles.
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 |
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" |
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" |
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.
|
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" |
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" |
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:
![]() |
View it now!
(requirements for viewing this sample)
Play this sample to view the additive, cumulative animation described above. You can also view a more extensive example of cumulative animation. |
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.
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".
|
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.
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" |
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" |
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. |
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:
<animateMotion/>
tag does not use an attributeName
attribute. The tag always selects the upper-left corner of the element defined with the targetElement
attribute.<animateMotion/>
tag can use a values
list, or the to
, by
, and from
attributes. You must always specify value pairs, the two values separated by a comma. The first value in the pair is the horizontal coordinate (x-coordinate), and the second value is the vertical coordinate (y-coordinate). The following are sample values:calcMode
is paced
, rather than linear
. This produces a smoother flow of motion when you animate an element through several points. For more on calcMode
, see "Controlling How an Animation Flows".<animateMotion/>
to move a clip either horizontally or vertically, the <animate/>
tag uses less CPU power on the RealOne Player computer to create this movement. It's recommended, therefore, to use <animateMotion/>
only for diagonal movement.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" |
![]() |
View it now!
(requirements for viewing this sample)
Play this sample to watch an image move around the screen diagonally. |
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.
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"/> |
![]() |
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".
|
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
![]() |
©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. |