Sample Files

This page gathers the multimedia samples found throughout the RealSystem iQ 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 manual as described in "How to Download This Guide to Your Computer", and play the samples through your local copy.

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.

License Agreement

The sample files that are included with the RealSystem iQ Production Guide are the property of RealNetworks, and are licensed solely for your use in creating customized RealSystem 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. When playing a file, you can use RealONE Player's View>Clip Source command to view the source file used to create each example. Samples are available for the following features:

RealText Markup

The following samples are included in Chapter 6, which demonstrates how to use RealText to create streaming text. Many other sample files also use RealText to create timed text annotations.

RealText Window Types

RealText includes several window types that automatically display text in certain modes, such as scrolling from bottom to top, or crawling from right to left.

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.

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

Color and Transparency

The <brush/> object lets you add a simple color block to your presentation. Other RealNetworks extensions to SMIL let you manipulate colors in clips. See also "Color Animations" for samples of how to change colors with SMIL animations.

Color and Transparency
Sample File Description Feature Illustrated Reference
brushobjects.smil Various colored blocks, each created by a <brush/> object, which functions like a clip source tag. <brush/> object click here
frameoverlay.smil A frame created from a GIF 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 semi-transparent GIF logo appears in the corner of a video clip. 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

Groups

The <seq>, <par>, and <excl> groups let you organize clips within a presentation, as described in Chapter 10.

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
slideshow1.smil A simple slideshow of still images. <seq> tag, basic layout, transition effects click here
slideshow2.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
slideshow3.smil The same slideshow as the preceding sample, but now made interactive with an exclusive group. Each image and RealText combination displays only when you click an arrow button. <excl> and <par> groups combined 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

Timing

Chapter 12 and Chapter 13 explain how to use SMIL timing attributes.

Simple Timing
Sample File Description Feature Illustrated Reference
beginsample.ram 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
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
mouseover.smil A graphic image's background color changes when you move the screen pointer over it. advanced begin and end times used in an animation click here

Layout

SMIL layout is described in Chapter 11. The following sample files demonstrate SMIL layout tags, attributes, and features.

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 semi-transparent GIF logo appears in the corner of a video clip. subregions and the rn:mediaOpacity attribute click here
click here
multiregion.smil The same video clip plays in two regions simultaneously. regionName attributes used for assigning a clip to multiple regions 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.

Secondary Media Windows
Sample File Description Feature Illustrated Reference
toplayout.smil A video plays in the main media window as a series of clips displays in a secondary media window. The secondary media 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 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 window. secondary media window using RealText click here
threeclips2.smil The same as threeclips.smil, but one of the clips plays in a secondary media window. secondary media window using RealText click here

The fit Attribute

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

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

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.

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
alignfitscroll.smil The same as the preceding sample, but with fit="scroll" used in the region. fit="scroll" along with a stationary regPoint value and changing regAlign values click here

Hyperlinking

Chapter 14 explains how to create hyperlinks in SMIL presentations. The following sample files demonstrate various hyperlinking possibilities.

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.

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 context and browser windows; 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
autolink.smil An HTML page opens when the clip finishes playback. <area/> tag with actuate="onLoad" attribute 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="plays" attributes 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

Context Window Hyperlinks

On Windows operating systems, the context window displays HTML pages next to a playing presentation. On other operating systems, context window links open in the viewer's default browser.

Context Window Links
Sample File Description Feature Illustrated Reference
basiccontext.smil An HTML page opens automatically in the context window when the video starts. rn:sendTo="_rpcontextwin" attribute, and actuate="onLoad" click here
timedlink.smil Four HTML pages open in the context window automatically at different times as a video plays. begin attributes in context window links click here
multilinks.smil Four static clips display in the main media window. Clicking each clip displays a different HTML page in the context window. interactive begin attributes in context window links click here

Streaming Media Hyperlinks

Of course, you can also link a streaming presentation to another streaming presentation.

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 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 window. target="name" using different names for two links click here

Transition Effects

Transition effects are explained in Chapter 15.

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.

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

edgewipes_reverse.smil
A demonstration 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
A demonstration 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
A demonstration 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
A demonstration 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.

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

SMIL Animations

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

Size and Placement Animations

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

Size and Placement Animations
Sample File Description Feature Illustrated Reference
rootlayoutresize.smil The main media window displays a clip and grows smaller. Next, a secondary media 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 both horizontally and vertically. Movement is alternately discrete and linear. <animateMotion/> tag applied to a region to create horizontal and vertical 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.

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

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.

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 linearly. 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.

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
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 17 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.

Language Switching

RealONE Player users can set preferences for a specific language. These preferences correspond to codes defined in the systemLanguage attribute.

Language Switching
Sample File Description Feature Illustrated Reference
languageswitch.smil A different number (1 through 5) appears if you set RealONE Player's language preference to French, German, Spanish, Japanese, or Korean, respectively. Number 6 is the default, which appears for any other language preference. systemLanguage attribute in a <switch/> group click here

System Captions Switching

Hearing-impaired viewers can set a RealONE Player preference to display captions. The following samples demonstrate three ways to create system captions using RealText.

Captions Switching
Sample File Description Feature Illustrated Reference
videocaptions1.smil RealText captions with a transparent background overlay a video only if the captions preference is on. systemCaptions attribute and overlaying regions click here
videocaptions2.smil The same as the preceding, but the 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

Web Page Embedding

You can embed a streaming presentation in a Web page, as well as play it in RealONE Player.

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, as well as the CONSOLE and AUTOSTART parameters 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

Interactive Presentations

Using the many features and extensions of SMIL 2.0, you can create interactive presentations. The primary components of interactivity are exclusive groups, which the section "Creating an Exclusive Group" explains, and advanced timing commands, which are covered in Chapter 13.

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.

Interactive Presentations
Sample File Description
slideshow3.smil A simple, interactive slideshow. Each image and RealText combination displays only when you click an arrow button. This sample builds on the non-interactive slideshow2.smil, which builds on the even simpler slideshow1.smil.
picksong1.smil An example of an audio jukebox. Three album covers display. Clicking each cover plays part of a song, and opens an HTML page in the context window.


RealNetworks, Inc. ©2001 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.