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. |
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.
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:
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 includes several window types that automatically display text in certain modes, such as scrolling from bottom to top, or crawling from right to left.
| 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 includes many features for timing, positioning, and displaying text.
| 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 |
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.
| 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 |
The <seq>, <par>, and <excl> groups let you organize clips within a
presentation, as described in Chapter 10.
| 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 |
Chapter 12 and Chapter 13 explain how to use SMIL timing attributes.
| 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 |
SMIL layout is described in Chapter 11. The following sample files demonstrate SMIL layout tags, attributes, and 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 |
The following samples demonstrate secondary, pop-up 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 in a <region/> tag determines how clips fit regions when the
two are different sizes.
| 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 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.
| 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 |
Chapter 14 explains how to create hyperlinks in SMIL presentations. The following sample files demonstrate various hyperlinking possibilities.
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.
| 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 |
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.
| 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 |
Of course, you can also link a streaming presentation to another streaming presentation.
| 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 are explained in Chapter 15.
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.
| Sample File | Description | Feature Illustrated | Reference |
|---|---|---|---|
edgewipes.smiledgewipes_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.smiliriswipes_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.smilclockwipes_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.smilmatrixwipes_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 |
The following samples show how to apply transition effects to clips. They also demonstrate attributes that can modify the appearance of basic 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 |
Chapter 16 describes SMIL animations, which can modify element colors, sizes, and placements. The following samples demonstrate how to create SMIL 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 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 |
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-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 |
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 |
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 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 |
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 |
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 |
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.
RealONE Player users can set preferences for a specific language. These
preferences correspond to codes defined in the systemLanguage attribute.
| 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 |
Hearing-impaired viewers can set a RealONE Player preference to display captions. The following samples demonstrate three ways to create system captions using RealText.
| 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 |
You can embed a streaming presentation in a Web page, as well as play it in RealONE Player.
| 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 |
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. |
| 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. |
|
|
©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. |