p. 10
p. 10
p. 11
Synchronizing Your Tutorial with SMIL
SMIL, the synchronized multimedia integration
language, is an XML-based mark-up language.
If you’ve ever used HTML to create a Web page,
SMIL will look somewhat familiar.
A very simple SMIL file and an included RealPix
file appear on the right.
Notice that in SMIL, as in XML,
every
tag is
closed using the ‘/’ character. If the tag does not
contain other tags, the ‘/’ character simply ap-
pears adjacent to the closing ’>’.
The two most important sections of the docu-
ment appear in red and blue. The red section
simply describes the layout of the presentation.
The root-layout appears in every SMIL file; it
defines the dimensions of the entire SMIL pre-
sentation. Once the root layout has been estab-
lished, individual regions are defined within the
root area in which the visual media may appear.
In this file, only one region has been defined. It
begins 0 pixels from the top of the presentation
and 0 pixels from the left and occupies the entire
presentation area.
In the blue section, the individual pieces of me-
dia are synchronized. The audio and the first
image begin simultaneously (as indicated by the
<par> tags), but the first image disappears after
6 seconds. Note that the audio file is referenced
with the full URL using the protocol “rtsp” instead
of “http”; this is because the audio file is hosted
on a machine running Real Server. The second
image appears 6 seconds into the audio piece
and disappears at 12 seconds. The third image
<smil>
<head>
<meta name=”title” content=”Engineering Communications Tutorial”/>
<meta name=”author” content=”Tutorial Team”/>
<meta name=”copyright” content=”(c)2002 McKinney Engineering Library”/>
<layout>
<root-layout background-color=”white” width=”500” height=”330”/>
<region id=”graphics” top=”0” left=”0” width=”500” height=”330”/>
</layout>
</head>
<body>
<par>
<audio src=”rtsp://real.myserver.edu/tutorials/audio.rm”/>
<img src=”intro.gif” region=”graphics” begin=”0s” end=”06s”/>
<img src=”picture1.gif” region=”graphics” begin=”06s” end=”12s”/>
<img src=”slides.rp” region=”graphics” begin=”12s” end=”25s”/>
<img src=”conclude.swf” region=”graphics” begin=”25s” end=”35s”/>
</par>
</body>
</smil>
<imfl>
<head width=”500” height=”330”
title=”Indexes”
author=”Engineering Communications Tutorial Team”
copyright=”(c) 2002 McKinney Engineering Library”
timeformat=”dd:hh:mm:ss.xyz”
duration=”0:13.0”
bitrate=”100000”
aspect=”true”/
background-color=”#ffffff”/>
<image handle=”1” name=”images/slide1.gif”/>
<image handle=”2” name=”images/slide2.gif”/>
<image handle=”3” name=”images/slide3.gif”/>
<fill start=”0” color=”white”/>
<fadein start=”0” duration=”1” target=”1”/>
<crossfade start=”3” duration=”1” target=”2”/>
<wipe direction=”up” start=”6” duration=”2” target=”3”/>
<fadeout start=”12” duration=”1” color=”white”/>
</imfl>
tutorial.smil
slides.rp
