Sample Files

This page gathers the multimedia samples found throughout the RealNetworks Production Guide, and includes additional samples not included in the guide's various chapters. These samples are not configured to stream over the Internet. Before you play these samples, download this guide as described in "How to Download This Guide to Your Computer", and play the samples through your local copy. If you use these sample files as the basis for your own presentation, see also "Preparing Local Files for Streaming".

For More Information: For more demonstrations and information about creating media presentations that take advantage of RealOne Player's advanced features, visit http://www.realnetworks.com/resources/index.html. Streaming versions of many of the following sample files are available at http://www.realnetworks.com/resources/samples/smil.ht ml.

Note: If you browse this guide with Netscape Navigator 6, you may not be able to play the linked sample files. If this occurs, you can open the sample files directly from the samples folder. You can also use Navigator 4.7 or Microsoft Internet Explorer to browse the guide.

License Agreement

The sample files that are included with the RealNetworks Production Guide are the property of RealNetworks, and are licensed solely for your use in learning SMIL and RealNetworks technologies such as RealText, as well as for creating customized presentations. You may not under any circumstances use, copy, sublicense, display, distribute, transmit, or reprint the sample files or the customized presentations, in whole or in part, without first obtaining written permission from RealNetworks. Except as set forth herein, all rights in the sample files are expressly reserved to RealNetworks.

Available Sample Files

All sample files are located in the samples folder. Samples are available for the following features:

Text Clips

The following samples demonstrate the use of plain text clips, inline text, and RealText clips. Many other sample files listed on this page also use RealText or inline text to create text annotations. (samples list)

Plain Text Clips and Inline Text

Chapter 9 explains how to use plain text clips and inline text within a SMIL presentation. (samples list)

Plain Text Clips and Inlne Text
Sample File Description Feature Illustrated Reference
plaintext.smil A plain text file (.txt) displays within a SMIL presentation. <text/> tag using a plain text file as its source click here
textfont.smil The same text file displays multiple times in sequence, each time using a different font, size, or text color. <param/> tags used to change default text file properties click here
inlinetext.smil Inline text created directly in a SMIL file displays in different regions, using advanced features such as transition effects and animations. <text/> tags creating inline text clips click here
inlinefont.smil Several samples of inline text display, showing the use of different fonts, sizes, and colors. <param/> tags used to change default inline text properties click here
textalign.smil Inline text samples illustrate horizontal and vertical text alignment. hAlign and vAlign values in <param/> tags click here
howdoesitwork.smil A demonstration of text effects similar to those you can find in animation clips. inline text with transition effects click here

RealText Window Types

Chapter 6 explains RealText, which includes several window types that automatically display text in certain modes, such as scrolling from bottom to top, or crawling from right to left. (samples list)

RealText Window Types
Sample File Description Feature Illustrated Reference
generic.rt A generic RealText window that displays text at different times. generic window behavior, as well as <time begin/> and <clear/> tags click here
news.rt A scrollingnews window in which text scrolls from bottom to top. scrollingnews window behavior, as well as the scrollrate attribute click here
prompter.rt A teleprompter window in which new text pushes older text up and off the screen. teleprompter window behavior, as well as <time begin/> tags click here
marquee.rt A marquee window in which text crawls from right to left. marquee window behavior, as well as <font> tags click here
ticker.rt A tickertape window in which static text crawls from right to left. tickertape window behavior, as well as <tu> and <tl> tags click here

RealText Features

RealText includes many features for timing, positioning, and displaying text. (samples list)

RealText Features
Sample File Description Feature Illustrated Reference
textsample.smil An overview of RealText features. window types, timing commands, positioning commands, font control, SMIL integration click here
fontfaces.rt A list of font faces that RealText displays. supported fonts click here
textlinks.rt A scrolling RealText clip displays several types of hyperlinks that you can create in a RealText clip. RealText hyperlinks for opening Web pages and streaming media, as well as for issuing RealOne Player commands click here
videonotes.smil A presentation that includes a video and a RealText clip as annotation. RealText in a SMIL presentation click here
videosubtitles.smil Semi-transparent RealText subtitles overlay a video. rn:backgroundOpacity used to make a RealText clip semi-transparent click here
videosubtitles2.smil The same as the preceding, except that the subtitles display on an opaque background below the video. RealText in a SMIL presentation click here
textfitbig.smil The same RealText clip displays in four separate SMIL regions, each of which is larger than the clip and uses a different fit attribute. <region/> tag fit attribute's effect on RealText click here
textfitsmall.smil The same as the preceding example, except that the four SMIL regions are smaller than the RealText clip. <region/> tag fit attribute's effect on RealText click here

RealPix Slideshows

As described in Chapter 7, RealPix lets you create streaming slideshows from still images in GIF, JPEG, and PNG formats. For examples of slideshows written entirely with SMIL 2.0, see the "Groups" section. (samples list)

RealPix Slideshows
Sample File Description Feature Illustrated Reference
fadeinslidshow.rp A simple slideshow illustrates the use of <fadein/> tags. <fadein/> tags and simple timing click here
fadein.rp A more complex slideshow demonstrates how to fade images into different areas of the media playback pane. source and destination rectangles used with <fadein/> click here
fadeout.rp This slideshow demonstrates various ways to use <fadeout/> tags. source and destination rectangles used with <fadeout/> click here
wipeslideshow.rp A simple slideshow shows the use of <wipe/> tags. <wipe/> tags and simple timing click here
wipe.rp A more complex slideshow demonstrates how to wipe images into different areas of the media playback pane. source and destination rectangles used with <wipe/> click here
animatedgif.rp An animated GIF image fades in, starts to animate, stops animating, then fades out. <animate/> tag used to control an animated GIF click here
viewchange.rp A demonstration of how to zoom in, zoom out, and pan across an image. source and destination rectangles used with <viewchange/> click here
aspectoff.rp The RealPix playback area has a different width-to-height ratio than the images. Each image displays twice, first with its native aspect ratio preserved, then with it ignored. aspect attribute in the <head/> tag and effects tags click here
slideshowhtml.smil A SMIL file is used to display a RealPix slideshow, and open HTML pages automatically as each image displays. SMIL <area/> tags with actual="onLoad" applied to a RealPix slideshow. click here
maxfps.rp Images are introduced at a progressively faster maximum frame rate. maxfps attribute in the <head/> tag and effects tags click here
prerollmask.smil A SMIL file plays RealText and RealAudio clips first to mask a RealPix slideshow's preroll. bandwidth management strategies for RealPix slideshows click here
pixsmil2.smil Similar to smilslides2.smil , which is constructed entirely with SMIL 2.0, this sample uses RealPix and SMIL 2.0 to coordinate a slideshow, with RealText clips used for narration. SMIL transition effects introduce the RealText clips. RealPix and RealText in a SMIL 2.0 presentation, along with SMIL transition effects for RealText click here
pixsmil1.smil Similar to the preceding, this sample is made with RealPix and SMIL 1.0, which does not offer transition effects for the RealText clips. RealPix and RealText in a SMIL 1.0 presentation click here

SMIL Basics

Before you write your own SMIL files, be sure that you understand the SMIL components and syntax rules as described in Chapter 8. (samples list)

SMIL Basics
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

Ram and SMIL Sources

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. (samples list)

Ram and SMIL Sources
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 Ram file listing video clips used as a SMIL source clip. 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

Color and Transparency

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. (samples list)

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". (samples list)

Brush Objects
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". (samples list)

Transparency
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
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

Groups

The <seq>, <par>, and <excl> groups let you organize clips within a presentation, as described in Chapter 11. (samples list)

Groups
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 interactive 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

Layout

SMIL layout is described in Chapter 12. The following sample files demonstrate SMIL layout tags, attributes, and features. (samples list)

Layout Features
Sample File Description Feature Illustrated Reference
videographic.smil A video appears in the center of a static image background. region stacking, clip centering click here
threeclips.smil Three clips play side-by-side. side-by-side region layout 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. subregions and the rn:mediaOpacity attribute click here
click here
subregioncolor.smil Two clips play in sequence. When the second clip starts, the region background color changes. backgroundColor in a clip source tag click here
audiovolume.smil An eight-second portion of an audio clip plays three times, the first time at normal volume, then double volume, then half volume. soundLevel attribute in a <region/> tag click here

Secondary Media Windows

The following samples demonstrate secondary, pop-up windows. (samples list)

Secondary Media Windows
Sample File Description Feature Illustrated Reference
toplayout.smil A video plays in the main media playback pane as a series of clips displays in a secondary media playback window. The secondary media playback window opens only when a clip displays in it. open="whenActive" and close="whenNotActive" attributes in a <topLayout> tag click here
toplayout2.smil The same as the preceding, but the secondary media playback window stays open for the entire presentation. open="onStart" and close="onRequest" attributes in a <topLayout> tag click here
videonotes2.smil The same as videonotes.smil, but with the RealText clip launched in a secondary media playback window. secondary media playback window using RealText click here
threeclips2.smil The same as threeclips.smil, but one of the clips plays in a secondary media playback window. secondary media playback window using RealText click here

Region Resizing

The customized rn:resizeBehavior="percentOnly" attribute lets you control how media clips resize if you click and drag the lower-right corner of the RealOne Player, for example, or view a presentation in double-size mode. The following samples use the same two clips to demonstrate a few of the many possibilities. (samples list)

Resize Behavior
Sample File Description Feature Illustrated Reference
resizeon.smil Two clips appear side-by-side. They scale with the media playback pane when the pane is resized. default behavior if rn:resizeBehavior is not used click here
resizeoff1.smil The same as the preceding, except that the clips do not scale. rn:resizeBehavior="percentOnly" used with regions defined wholly through pixel values click here
resizeoff2.smil As with the preceding sample, the clips do not scale in size, but their relative distance increases as you make the pane larger. left and top offsets for the first region, right and bottom for the second region click here
resizeoff3.smil The same as the preceding sample, but different offsets are used so that the images cross paths as you expand the media playback pane. right and top offsets for the first region, left and bottom for the second region click here
resizemixed1.smil The first image stays stationary, but the second image expands and moves as you increase the size of the media playback pane. one region defined with pixels, the other region defined with percentages click here
resizemixed2.smil The same as the preceding sample, except that the second image does not move away from the first image when you resize the media playback pane. one region defined with pixels, the other region defined with a mix of pixels and percentages click here

The fit Attribute

The fit attribute in a <region/> tag determines how clips fit regions when the two are different sizes. (samples list)

Region fit Attribute
Sample File Description Feature Illustrated Reference
fithidden.smil A static clip displays in four regions that have different size and aspect ratios. Each region uses fit="hidden" (the default fit value). fit="hidden" in <region/> tags click here
fitfill.smil The same as the preceding sample, but with fit="fill" used in all regions. fit="fill" in <region/> tags click here
fitmeet.smil The same as the preceding sample, but with fit="meet" used in all regions. fit="meet" in <region/> tags click here
fitslice.smil The same as the preceding sample, but with fit="slice" used in all regions. fit="slice" in <region/> tags click here
fitscroll.smil The same as the preceding sample, but with fit="scroll" used in all regions. fit="scroll" in <region/> tags click here
quadrant.smil The same image displays in four quadrants of a region. In each quadrant, it uses a different fit value. four fit values compared click here
letterbox.smil A RealText clip using a 2.35:1 aspect ratio displays in a SMIL playback region using a 4:3 aspect ratio. fit="meet" used to create a letterbox effect click here

Registration Points

Registration points let you easily place clips anywhere in a region. The use of the fit attribute along with registration point regAlign values can create complex layout results, though. (samples list)

Registration Points
Sample File Description Feature Illustrated Reference
regalign.smil A demonstration of common ways to align a clip within a region. regPoint and regAlign attributes in clip source tags click here
alignfithidden.smil A demonstration of how a region's fit="hidden" value (the default) affects a clip when it aligns in various ways to a registration point. fit="hidden" along with a stationary regPoint value and changing regAlign values click here
alignfitfill.smil The same as the preceding sample, but with fit="fill" used in the region. fit="fill" along with a stationary regPoint value and changing regAlign values click here
alignfitmeet.smil The same as the preceding sample, but with fit="meet" used in the region. fit="meet" along with a stationary regPoint value and changing regAlign values click here
alignfitslice.smil The same as the preceding sample, but with fit="slice" used in the region. fit="slice" along with a stationary regPoint value and changing regAlign values click here

Timing

Chapter 13 and Chapter 14 explain how to use basic and advanced SMIL timing attributes, respectively. (samples list)

Simple Timing

The following sample files explain and demonstrate the basic SMIL timing attributes. (samples list)

Simple Timing
Sample File Description Feature Illustrated Reference
beginsample.smil A demonstration of how the begin attribute affects a video's start time. begin attribute click here
clipbeginsample.smil A demonstration of how clipBegin and clipEnd attributes affect how much of a video clip plays. clipBegin and clipEnd attributes click here
dursample.smil A demonstration of how the dur attribute affects how long a video clip plays. dur attribute click here
gifrepeat.smil A continuously looping animated GIF first plays. The same GIF repeats with its native looping stripped out, and SMIL timing used to set each loop cycle. mediaRepeat="strip", dur, and repeatDur used with an animated GIF click here
previewclip.smil Three short video previews play in sequence. Clicking a preview launches the full clip in a separate window and pauses the preview window. dur attribute, basic hyperlinking click here
click here

Advanced Timing

The sample files listed in the following table demonstrate advanced timing features that build on basic timing concepts. (samples list)

Advanced Timing
Sample File Description Feature Illustrated Reference
syncbase1.smil

syncbase2.smil
Two samples with identical playback: three videos play in sequence, while a different image displays next to each video. The first sample uses basic SMIL timing. The second sample uses a different organization with advanced SMIL timing. comparison of simple timing with advanced begin and endEvent attributes click here
videoselect.smil A different video plays when you click one of three images. <excl> group combined with the activateEvent attribute click here
click here
videoselect2.smil Similar to videoselect.smil, clicking a link also opens an HTML page. activateEvent used with the ID of an <area/> link. click here
repeat1.smil A different image appears each time a video clip repeats. repeat(n) attributes used with begin and end timing attributes click here
mouseover1.smil A graphic image's background color changes when you move the screen pointer over it. SMIL animation used with inBoundsEvent and outOfBoundsEvent attributes click here
mouseover2.smil Moving the screen pointer over an image displays a different image. Moving the screen pointer off the new image redisplays the first image. SMIL z-index animations used with inBoundsEvent and outOfBoundsEvent attributes click here
textcolors.smil A demonstration of SMIL advanced timing and the RealNetworks transparency extensions used along with static RealText clips. RealText clips and transparency attributes, along with the SMIL activateEvent, inBoundsEvent, and outOfBoundsEvent attributes click here
restartalways.smil Clicking an image restarts a video clip anytime, even while it is already playing. restartDefault="always" in an exclusive group click here
restartnotactive.smil Clicking an image starts a video clip playing only if it is not playing already. restartDefault="whenNotActive" in an exclusive group click here
restartnever.smil Clicking an image starts a video clip playing. After the first playback, however, the clip will not play again.. restartDefault="never" in an exclusive group click here

Hyperlinking

Chapter 15 explains how to create hyperlinks in SMIL presentations. The following sample files demonstrate various hyperlinking possibilities. (samples list)

Web Page Hyperlinks

Using SMIL, you can easily link RealOne Player to a Web page that opens on a click, a keystroke, or automatically at a certain time. (samples list)

Hyperlinks to Web Pages
Sample File Description Feature Illustrated Reference
overview.htm A demonstration of the many ways to use SMIL to launch HTML pages. RealOne Player related info and media browser panes; using SMIL to open URLs automatically click here
browserlink.smil An HTML page opens and pauses the video when you click the video. minimal requirements for opening a Web page: <area/> tag with the external="true" attribute click here
arealinks.smil Each quadrant of the video links to a separate HTML page. The video pauses when you open a link. image map created through <area/> tags, along with the sourcePlaystate="pause" attribute click here
timedlinks.smil The video clip links to four different HTML pages at different times. begin and end attributes in an <area/> tag click here
timedlinks2.smil An audio clip links to four different HTML pages that automatically open in secondary browsing windows at different times. begin attributes in an <area/> tag, along with actuate="onLoad" click here
accesskeylinks.smil A video links to four different HTML pages that you can display by pressing 1, 2, 3, or 4. The video continues to play when you open a page. rectangular hot spots created with the <area/> tag, along with the accesskey and sourcePlaystate="play" attributes click here

Related Info Pane Hyperlinks

The related info pane displays HTML pages next to a playing presentation. (samples list)

Related Info Pane Links
Sample File Description Feature Illustrated Reference
basiccontext.smil An HTML page opens automatically in the related info pane when the video starts. rn:sendTo="_rpcontextwin" attribute, and actuate="onLoad" click here
timedcontext.smil Four HTML pages open in the related info pane automatically at different times as a video plays. begin attributes in related info pane links click here
multilinks.smil Four static clips display in the main media playback pane. Clicking each clip displays a different HTML page in the related info pane. interactive begin attributes in related info pane links click here
openatstart.smil If the media browser pane is attached, the video appears flush left, leaving room for a related info page that opens later. rn:contextWindow="openAtStart" click here
closedatstart.smil If the media browser pane is attached, the video appears centered at first, then moves to the left when the related info page opens. default behavior without rn:contextWindow="openAtStart" click here

Streaming Media Hyperlinks

Of course, you can also link a streaming presentation to another streaming presentation. (samples list)

Hyperlinks to Streaming Media
Sample File Description Feature Illustrated Reference
playerreplace.smil Clicking the video replaces it with another video. basic <area/> tag functionality click here
playernew.smil Clicking the video opens a second video in a new window and keeps the first video playing. show="new" attribute in the <area/> tag click here
playerpause.smil Clicking the video opens a second video in a new window and pauses the first video. sourcePlaystate="pause" and destinationPlaystate="play" attributes click here
targetsame.smil Clicking either image opens a different video in the same popup media playback window. target="name" using the same name for two links click here
targetdiff.smil Clicking either image opens a different video in a different popup media playback window. target="name" using different names for two links click here
selffragment.smil A sequence of videos plays. Each numbered button links to a separate video through a SMIL fragment. SMIL fragment linking through href="#target" in an </area> tag. click here
destinationlevel.smil Two hypertext links play a video at half or double volume. destinationLevel attribute for controlling audio levels click here

Transition Effects

Transition effects are explained in Chapter 16. (samples list)

Transition Effects Types and Subtypes

Transition effects fall into familes, such as edge wipe effects and iris effects. Each family consists of several transition types, and each type has several subtypes. (samples list)

Transition Effects Types and Subtypes
Sample File Description Feature Illustrated Reference
edgewipes.smil

edgewipes_reverse.smil
Demonstrations of all edge wipe transition effects running forward and reverse. edge wipe type and subtype attributes, as well as the direction="reverse" attribute click here
iriswipes.smil

iriswipes_reverse.smil
Demonstrations of all iris wipe transition effects running forward and reverse. iris wipe type and subtype attributes, as well as the direction="reverse" attribute click here
clockwipes.smil

clockwipes_reverse.smil
Demonstrations of all clock wipe transition effects running forward and reverse. clock wipe type and subtype attributes, as well as the direction="reverse" attribute click here
matrixwipes.smil

matrixwipes_reverse.smil
Demonstrations of all matrix wipe transition effects running forward and reverse. matrix wipe type and subtype attributes, as well as the direction="reverse" attribute click here
fadepushslide.smil A demonstration of all fade, push, and slide wipe transition effects. fade, push, and slide wipe type and subtype attributes click here

Modified and Applied Transition Effects

The following samples show how to apply transition effects to clips. They also demonstrate attributes that can modify the appearance of basic transition effects. (samples list)

Modified and Applied Transition Effects
Sample File Description Feature Illustrated Reference
colorfade.smil Two videos play in sequence. During each transition, there is a fade to or from a solid blue. transIn and transOut attributes click here
crossfade.smil Two videos play in sequence, crossfading during the transition between them. fill="transition" attribute 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
partialtransitions.smil Several transitions between still images demonstrate special effects that you can create with partial transition effects. startProgress and endProgress attributes click here
repeatingtransitions.smil Several transitions between still images show how you can repeat transition effects horizontally and vertically. horzRepeat and vertRepeat attributes click here
border.smil Several transitions between still images illustrate enlarged, colored, and blurred borders. borderWidth and borderColor attributes click here
instantiris.smil A partial, instantaneous transition effect that remains for the clip duration mimics an old film projector. startProgress, endProgress, borderWidth, and borderColor attributes click here
clicktrans.smil Four images appear. Clicking an image "uncovers" another image through a radial transition. transitions used with interactive SMIL timing click here

SMIL Animations

Chapter 17 describes SMIL animations, which can modify element colors, sizes, and placements. The following samples demonstrate how to create SMIL animations. (samples list)

Size and Placement Animations

SMIL animations let you move regions and clips around the screen, as well as change their sizes. (samples list)

Size and Placement Animations
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. (samples list)

z-index Animations
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. (samples list)

Volume Animations
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. (samples list)

Color Animations
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. (samples list)

Animation Features
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

Switching

Chapter 18 explains how to use the <switch> tag to switch clips and presentations based on different attributes, such as the viewer's language preference or available bandwidth. (samples list)

Language Switching

RealOne Player users can set preferences for a specific language when they install RealOne Player. They can also change the preference by giving the Tools>Preferences command, then choosing the Content tab. These preferences correspond to codes defined in the systemLanguage attribute. (samples list)

Language Switching
Sample File Description Feature Illustrated Reference
languageswitch.smil Semi-transparent French or Spanish subtitles overlay a video if you set your RealOne Player language preference to any variation of French or Spanish. systemLanguage attribute using multiple clips and inline switching, along with the rn:backgroundOpacity attribute for RealText clips click here
languageswitch2.smil Similar to the preceding sample, the subtitles are opaque and display below the video clip. systemLanguage attribute using multiple clips and inline switching click here
contextswitch.smil The same clip plays, but a different related info page appears if you set your RealOne Player language preference to French, Spanish, Japanese, or Swedish. systemLanguage attribute on multiple <area/> tags in a <switch/> group click here
smilswitch.smil Different SMIL files play if you set your RealOne Player language preference to French, Spanish, Swedish, or Japanese. master SMIL file used to switch between referenced SMIL files click here

System Captions Switching

Hearing-impaired viewers can set a RealOne Player preference to display captions. The following samples demonstrate several ways to add system captions using RealText. The captions display only when you turn on captions display in the RealOne Player Contents preference (Tools>Preferences). (samples list)

Captions Switching
Sample File Description Feature Illustrated Reference
videocaptions1.smil RealText captions with a semi-transparent background overlay a video only if the captions preference is on. systemCaptions attribute and overlaying regions click here
videocaptions2.smil RealText captions appear beneath the video. If the captions preference is off, a filler clip appears in place of the captions. systemCaptions attribute and side-by-side regions click here
videocaptions3.smil The video's playback area resizes and includes the captions area only if the captions preference is on. systemCaptions attribute and multiple layouts in a <switch> group click here
videocaptions4.smil Similar to the preceding sample, this sample includes buttons that cycle the captions between three different sizes. <set/> animation tags that resize the captions region click here

Player Version Checking

Using SMIL 1.0 attributes, you can check whether the viewer is using RealOne Player, or RealPlayer 7 or 8. This lets you add SMIL 2.0 features for RealOne Player, while keeping the presentation compatible with RealPlayer 7 and 8. (samples list)

Player Version Checking
Sample File Description Feature Illustrated Reference
compatible.smil In RealPlayer 7 or 8, a video plays. In RealOne Player, a semi-transparent logo overlays the video. system-required and systemComponent attributes click here

Web Page Embedding

You can embed a streaming presentation in a Web page, as well as play it in RealOne Player. (samples list)

Web Page Embedding
Sample File Description Feature Illustrated Reference
plugin.htm An HTML page opens, plays a video, and exhibits all the RealOne Player controls that you can add to a Web page. all RealOne Player controls added through <EMBED> tags, as well as the CONSOLE and AUTOSTART parameters click here
plugin2.htm Same as the preceding, but the controls are embedded using both <EMBED> and <OBJECT> tags. <EMBED> and <OBJECT> tags combined click here
allcontrol.htm An HTML page embeds various sizes of the All control, showing how that control drops certain features as you reduce its width or height CONTROLS=All at different widths and heights click here
controlpanel.htm An HTML page embeds various sizes of the ControlPanel control, showing how that control drops certain buttons as you reduce its width. CONTROLS=ControlPanel at different widths click here
taccontrol.htm An HTML page embeds various sizes of the TACCtrl control, showing how that control drops the Clip Info text as you reduce its width. CONTROLS=TACCtrl at different widths click here
statusbar.htm An HTML page embeds various sizes of the StatusBar control, showing how that control drops certain fields as you reduce its width. CONTROLS=StatusBar at different widths click here
multiple.htm Two videos are linked to two different sets of controls. Each video plays in the same image window, however. CONSOLE parameter click here
embed1.htm An HTML page opens and plays a SMIL presentation. The SMIL file defines the layout. SMIL layout for an embedded presentation click here
embed2.htm The same as the preceding example, but the SMIL file does not define a layout. Instead, the presentation is laid out with HTML. HTML layout for an embedded presentation click here

Ram Files

Chapter 21 explains how to write a Ram file that launches RealOne Player, and that can set parameters such as starting size and clip information. (samples list)

Ram Files
Sample File Description Feature Illustrated Reference
doublesize.ram A portion of a video clip plays twice, first at normal size, then at double size. screensize="double" click here
fullscreen.ram A video clip plays in full-screen mode. screensize="full" click here
startend.ram A portion from the middle of a video clip plays. start and end parameters click here
toolbar.ram A clip plays in toolbar mode, which is available only for subscribers of premium services. mode="toolbar" click here
theater.ram A clip plays in theater mode. mode="theater" click here
tac.ram An example of how to override clip-encoded information. Press Ctrl+i to view the information passed by the Ram file. title, author, and copyright parameters click here
clipinfo.ram An example of adding music clip information, such as title, author, genre, and so on. Press Ctrl+i to view the information passed by the Ram file. clipinfo parameter click here

Interactive Presentations

Using the many features and extensions of SMIL 2.0, you can create interactive presentations. (samples list)

Interactive Presentations
Sample File Description
picksong2.smil This sample displays music selection icons within an HTML page displaying in the media browser pane. Clicking an icon starts a different SMIL presentation in the media playback pane. Each SMIL file opens a different context page in the related info pane.

Tip: Because interactive presentations generally require the use of many different SMIL features, you should be familiar with the various features of SMIL demonstrated in the preceding samples before you attempt to build your own interactive presentation.

Preparing Local Files for Streaming

The sample files listed on this page are created for local playback, which allows you to experiment with the markup easily. As you develop and test your own SMIL presentations, it's convenient to use clips located on your computer or a network file server, tying them into your SMIL presentation with local URLs. However, a SMIL presentation that works perfectly for local playback may not necessarily stream well. This is because streaming involves bandwidth and protocol issues that are not relevant for local playback. The following sections guide you to relevant information you'll need to know to prepare a presentation for streaming.

Bandwidth Considerations

Before you write a single line of SMIL markup for any presentation, you need to develop a bandwidth strategy. What are the connection speeds of your target audience? Do you want to create a single presentation for all viewers, or use SureStream and the SMIL <switch> tag to deliver different presentations to viewers who have different connection speeds? These are a few of the bandwidth issues that you need to address.

For More Information: For more on bandwidth management, see "Step 4: Develop a Bandwidth Strategy".

Clip URLs

Incorrect URLs are the biggest problems both beginning and experienced users typically face when trying to stream a presentation. Local SMIL files can use relative clip URLs, but streaming SMIL presentations should use fully qualified URLs. You can easily update your local SMIL file with a streaming base URL as described in "Creating a Base URL". Be careful, though, always to ensure the following:

Small Clip Caching

Unlike a Web browser, RealOne Player does not automatically cache all streaming media content it receives. You can make RealOne Player cache small streaming clips such as images, though, by using the specialized CHTTP protocol. This is useful if you have backgrounds, buttons, toolbars, and so on that are used several times during a presentation. When you cache these items, RealOne Player does not need to request them each time they appear in the SMIL presentation. This can help make the presentation flow more smoothly.

For More Information: For full information on CHTTP, see "Caching Clips on RealOne Player".

Large Clip Prefetching

When RealOne Player requests a large streaming clip, such as a RealVideo clip, there's a short delay as Helix Server streams a certain amount of data (the clip's preroll) that is required before the clip can begin to play. You can reduce this delay by downloading all or part of the clip's preroll before the clip plays. This action, which is called prefetching, is a powerful bandwidth management feature.

For More Information: Chapter 19 explains prefetching.


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.