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.
|
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.
All sample files are located in the samples
folder. Samples are available for the
following features:
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
)
Chapter 9 explains how to use plain text clips and inline text within a SMIL
presentation. (samples list
)
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 |
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
)
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.
(samples list
)
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 |
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
)
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 |
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
)
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 |
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
)
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 |
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
)
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
)
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 |
RealNetworks' extensions to SMIL let you manipulate transparency in clips.
These extensions are described in "Modifying Clip Colors". (samples list
)
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 |
The <seq>
, <par>
, and <excl>
groups let you organize clips within a
presentation, as described in Chapter 11. (samples list
)
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 |
SMIL layout is described in Chapter 12. The following sample files
demonstrate SMIL layout tags, attributes, and features. (samples list
)
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 |
The following samples demonstrate secondary, pop-up windows. (samples list
)
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 |
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
)
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 in a <region/>
tag determines how clips fit regions when the
two are different sizes. (samples
list
)
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 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
)
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 |
Chapter 13 and Chapter 14 explain how to use basic and advanced SMIL
timing attributes, respectively. (samples
list
)
The following sample files explain and demonstrate the basic SMIL timing
attributes. (samples list
)
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 |
The sample files listed in the following table demonstrate advanced timing
features that build on basic timing concepts. (samples list
)
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 |
Chapter 15 explains how to create hyperlinks in SMIL presentations. The
following sample files demonstrate various hyperlinking possibilities. (samples list
)
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
)
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 |
The related info pane displays HTML pages next to a playing presentation. (samples list
)
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 |
Of course, you can also link a streaming presentation to another streaming
presentation. (samples list
)
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 are explained in Chapter 16. (samples list
)
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
)
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 |
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
)
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 |
Chapter 17 describes SMIL animations, which can modify element colors,
sizes, and placements. The following samples demonstrate how to create SMIL
animations. (samples list
)
SMIL animations let you move regions and clips around the screen, as well as
change their sizes. (samples list
)
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 |
By animating regions' z-index
attributes, you can change how the regions stack
on top of each other. (samples
list
)
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 |
An animation can target a region's soundLevel
attribute, as well as visual
attributes such as width
and height
. (samples
list
)
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. (samples
list
)
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 |
SMIL animations include several features for controlling the animation
appearance. (samples list
)
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 |
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
)
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
)
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 |
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
)
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 |
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
)
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 |
You can embed a streaming presentation in a Web page, as well as play it in
RealOne Player. (samples list
)
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 |
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
)
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 |
Using the many features and extensions of SMIL 2.0, you can create interactive
presentations. (samples list
)
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. |
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.
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". |
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:
rtsp://
).http://
).![]() |
For More Information: For more on URLs, see "Linking to Clips on Helix Universal Server" and "Linking to Clips on a Web Server". |
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". |
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. |
![]() |
©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. |