RealNetworks
Digital Entertainment. Whenever. Wherever.
  • Home
  • Products and Services
  • Press Room
  • About Us
  • Investor Relations
  • Careers

In addition to including URLs to clips, a SMIL file can use other Ram and SMIL files as sources. This lets you update a sequence of clips frequently by changing a simple RAM file, rather than your main SMIL file, for example.

Sample File Description Feature Illustrated Reference
ramsourceaudio.smil A SMIL file plays three audio clips listed in a Ram file. The SMIL file is used to open HTML pages in RealOne Player. A Ram file listing audio clips used as a SMIL source clip. click here
ramsourcevideo.smil A SMIL file plays three video clips listed in a Ram file. SMIL is used to center each video on top of a graphic image. A SMIL file plays three video clips listed in a Ram file. SMIL is used to center each video on top of a graphic image. click here 
smilsource.smil The main SMIL file plays two SMIL source files in sequence. Each source file plays a text clip and a video clip in parallel. SMIL files used as source clips by another SMIL file. click here 

SIZE AND PLACEMENT ANIMATIONS
 SMIL animations let you move regions and clips around the screen, as well as change their sizes.

Sample File Description Feature Illustrated Reference
rootlayoutresize.smil The main media playback pane displays a clip and grows smaller. Next, a secondary media playback window opens with another clip and grows larger. <animate/> tags applied to <root-layout/> and <topLayout/> tags click here 
regionanimation.smil A region's height, width, and position are animated, making the clip it contains shrink, expand, and move around the screen. <animate/>, <animateMotion/>, and <set/> tags applied to a <region/> tag click here 
clipanimation.smil A clip's height, width, and position are animated, making it shrink, expand, and move around its playback region, which has a red background. <animate/>, <animateMotion/>, and <set/> tags applied to a clip source tag click here
fitanimate.smil A demonstration of how a region's fit attribute affects clip appearance when the region is animated. <animate/> tag applied to regions that use different fit values click here 
motionanimation.smil A small clip moves around the screen diagonally. Movement is alternately discrete and linear. <animateMotion/> tag applied to a region to create diagonal movement click here
logo2.smil Similar to logo.smil, except that the logo is introduced with a motion animation. After moving into position, the logo becomes semi-transparent. <animate/> tags applied to a clip in a subregion click here
textoverlay.smil Similar to the preceding logo animation, a semi-transparent RealText clip extends from the side of a video, then retracts. motion animation along with rn:backgroundOpacity and rn:mediaOpacity applied to a RealText clip click here

 

STACKING ORDER (Z-INDEX) ANIMATIONS
By animating regions' z-index attributes, you can change how the regions stack on top of each other.

Sample File Description Feature Illustrated Reference
z-indexmovement.smil Two clips appear side-by-side. The first clip moves over the second clip twice, first appearing behind the second clip, then in front of it. This cycle repeats twice. <set/> tags applied to region z-index values click here
z-indexselect.smil Four images appear in four regions. Clicking an image brings it to the front by animating the regions' z-index values. <set/> tags that use interactive timing applied to region z-index values click here
z-indexcascade.smil Four images in four regions cascade in front of each other based on changing z-index values. <set/> tags applied to region z-index values in a cumulative, additive animation click here 

 

VOLUME ANIMATIONS
 An animation can target a region's soundLevel attribute, as well as visual attributes such as width and height.

Sample File Description Feature Illustrated Reference
volumechange.smil An audio clip's volume goes from normal, to half, to double, then back to normal. <animate/> tags applied to a <region/> tag's soundLevel attribute click here
volumefade.smil An audio clip's volume fades in during the first five seconds, then fades out during the last five seconds. <animate/> tag begin time coordinated to a clip ending with begin="ID.end-5s" click here

 

COLOR ANIMATIONS
Using animations, you can also change colors for regions and <brush/> objects. See the section "Color and Transparency" for samples that use non-animated SMIL color attributes.

Sample File Description Feature Illustrated Reference
backgroundcolor change.smil An image that includes transparency appears against a white background. The background colors change, first discretely, then linearly. <animateColor/> tag applied to a <region/> tag's backgroundColor attribute click here
brushcolors.smil A <brush/> object appears within a white region. Its colors change, first discretely, then linearly. The animation repeats with an image that includes transparency overlaying the <brush/> object. <animateColor/> tag applied to a <brush/> tag's color attribute click here
click here
psychedelic.smil A <brush/> object shrinks, then expands as its colors change. As this occurs, the background region animates through the same color values, but in the reverse order. <animateColor/> applied to both a <brush/> tag and a <region/> tag; <animate/> and <animateMotion/> used to resize a region click here
click here 

 

ANIMATION FEATURES
SMIL animations include several features for controlling the animation appearance.

Sample File Description Feature Illustrated Reference
calcmodes.smil An image moves horizontally three times through multiple postion values. Each repetition uses a different calcMode value to control the flow. calcMode values click here
additive.smil An interactive demonstration in which an image region grows, shrinks, moves, or resets based on viewer interaction. additive attributes in <animate/> tags, along with advanced timing click here 
sizevideo.smil A video enlarges discretely or shrinks linearly based on button clicks. additive attributes in <animate/> tags, along with discrete and linear calcMode attributes. click here
accumulate.smil An image grows larger to fill a region by "pulsing": growing larger, then smaller, then larger, then smaller, and so on. additive and accumulate attributes in an <animate/> tag click here

Before you write your own SMIL files, be sure that you understand the SMIL components and syntax rules.

Sample File Description Feature Illustrated Reference
smilmarkup.smil A demonstration of a simple SMIL file, illustrating the file's basic components and syntax rules. basic SMIL file construction click here

SMIL 2.0 and the RealNetworks extensions to SMIL 2.0 provide many ways to paint colored areas and manipulate clip transparency levels. See also Color Animations for samples of how to change background and clip colors through SMIL animations.

BRUSH OBJECTS
The <brush/> tag lets you paint areas with a color block. It functions like a clip source tag. For more information, see "Creating a Brush Object".

Sample File Description Feature Illustrated Reference
brushobject.smil Various colored blocks, each created by a <brush/> tag, which functions like a clip source tag. <brush/> tags click here 
brushbackground.smil  A SMIL file uses brush objects and transition effects to create a dynamic background for the wipeslideshow.rp RealPix slideshow.. <brush/> tags and transition effects combined with other clips click here 
brushvideo.smil Various colored brush objects overlay, then uncover a video. <brush/> tags with begin and end times click here
brushtransition.smil Transition effects using brush objects simulate dynamically changing region background colors after two video clips play. <brush/> tags and transition effects in a sequence of videos click here 

 

TRANSPARENCY
RealNetworks' extensions to SMIL let you manipulate transparency in clips. These extensions are described in "Modifying Clip Colors".

Sample File Description Feature Illustrated Reference
frameoverlay.smil  A frame created from a PNG image that has a transparent background overlays a video. support for native clip transparency click here 
backgroundopacity.smil  An image that includes transparency displays against a colored background. The image's transparency is decreased, then increased. static and animated rn:backgroundOpacity attribute in a clip tag click here
mediaopacity.smil An opaque JPEG image is rendered more and more transparent. static and animated rn:mediaOpacity attribute in a clip tag click here 
logo.smil  A GIF logo rendered semi-transparent appears in the corner of a video clip. An animation makes the logo opaque on a mouseover. rn:mediaOpacity attribute and subregions click here 
chromakeys.smil  In a static JPEG image, a wider and wider range of colors around a selected color becomes transparent. The sample repeats with the colors becoming semi-transparent. rn:chromaKey, rn:chromaKeyTolerance, and rn:chromaKeyOpacity attributes in a clip source tag click here 
textcolors.smil A demonstration of SMIL advanced timing and the RealNetworks transparency extensions used along with static RealText clips. RealText clips, transparency attributes, and advanced timing commands click here

The <seq>, <par>, and <excl> groups let you organize clips within a presentation.

Sample File Description Feature Illustrated Reference
audiosequence1.smil Three 15-second audio clips play in sequence without a <seq> group. The RealOne Player timeline slider resets after each clip. You can use the Play>Next Clip command. audio sequence created without a <seq> tag. click here
audiosequence2.smil Three 15-second audio clips play in a <seq> group. The timeline slider lets you seek through all clips, but you cannot use the Play>Next Clip command. <seq> tag click here 
videosequence.smil Three short videos play in sequence. <seq> tag, basic layout, and clip centering click here 
smilslides1.smil A simple slideshow of still images. <seq> tag, basic layout, transition effects click here 
smilslides2.smil The same slideshow as the preceding sample, but each image is now combined with a RealText clip played in parallel. <seq> and <par> groups combined click here 
clickfornext.smil A different image appears when you click the displayed image. <excl> group combined with interactive SMIL timing click here
click here 
videoselect.smil A different video plays when you click one of three images. <excl> group combined with advanced SMIL timing click here
click here 
unsynched.smil Two RealText clips play in parallel. One clip is unsynchronized, so it does not fast-forward or rewind when you move the RealOne Player timeline slider. syncBehavior="independent" on a clip in a <par> group click here