Lloyd Rutledge
Multimedia and Human-Computer Interaction
Group
CWI, Amsterdam, The Netherlands
W3C SYMM working group
Lynda Hardman, Jacco van Ossenbruggen: CWI
Dick Bulterman, Jack Jansen, Sjoerd Mullender: Oratrix
W3C SYMM working group
http://www.cwi.nl/~media/SMIL/Tutorial/{SMILTalk.html}
Includes material from the book "SMIL 2.0 — Interactive Multimedia on the Web"
Copyright © 2006, Lloyd Rutledge
Media |
|||||
Adaptivity |
Layout |
||||
Interaction |
Timing |
The Waag is a medieval buiding in Amsterdam | The Waag is a medieval buiding in Amsterdam. It was originally a gate into the city through the city wall. Later it became a weighhouse for goods being brought | ||||
<text> | <image> | <video> | <audio> | <animation> | <textstream> |
type=
Attribute<brush>
Elementcolor=
Attribute<region>
<region>
ElementregionName=
or id=
attribute for each region is
requiredsoundLevel=
attribute<switch>
ElementsystemLanguage=
AttributesystemCaptions=
AttributesystemOverdubOrSubtitle=
AttributesystemAudioDesc=
AttributesystemBitrate=
AttributesystemCPU=
AttributesystemScreenSize=
AttributesystemScreenDepth=
AttributesystemOperatingSystem =
AttributesystemComponent=
AttributesystemRequired=
Attribute<a>
Element and href=
Attribute<a>
Elementhref=
Attributehref="#"
Attribute Assignmentshow=
Attributeexternal=
Attribute — open with external
programtarget=
Attribute — region or other display space
to show insourcePlaystate=
AttributedestinationPlaystate=
AttributesourceLevel=
AttributedestinationLevel=
Attribute<transition>
Element — Defining Transitions
for Use<transition>
Elementtype=
Attribute — Which of the fixed set of
transition types to usesubtype=
Attribute="barWipe"
with subtypes
="leftToRight"
and ="topToBottom"
direction=
Attribute — ="forward"
(default) or ="reverse"
fadeColor=
Attribute — color value for what is
faded from/tostartProgress=
and endProgress=
AttributeshorzRepeat=
and vertRepeat=
AttributesborderColor=
and borderWidth=
Attributes<animate>
Element
— change an attribute value over time<animateMotion>
Element
— move an object across the screen<animateColor>
Element
— change an object's color<set>
Element
— assign an attribute a value for a period of timehref=
or targetElement=
Attribute
— ID element with attribute to animateattributeName=
AttributeattributeType=
Attribute
— ="XML"
, ="CSS"
, or
="auto"
matically determine whichfrom=
and to=
Attributes
— starting and ending values of attribute in animationby=
Attribute — incremental value changevalues=
Attribute
— list of values the attribute goes through<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/TR/REC-smil/SMIL20.dtd"> <smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head> <layout> <topLayout title="Fiets Amsterdam Tour" backgroundColor="black" width="1010" height="665"> <region regionname="splashScreen" top="5" left="5" bottom="5" right="5"/> <region regionname="buildingImage" top="5" right="5" width="875" height="655"/> <region regionname="closedCaptioning" bottom="5" left="5" right="5" height="60"/> <region title="Thumbnail Bar" top="5" left="5" bottom="5" width="120"> <region regionname="museumThumb" fit="meet" height="90" top="65"/> <region regionname="weighhouseThumb" fit="meet" height="90" top="280"/> <region regionname="CWI-INSThumb" fit="meet" height="90" top="495"/> </region> </topLayout> </layout> <transition id="fade1s" type="fade" dur="1s" /> </head>
<body> <seq> <par title="Greeting Section" end="greet.end+1s"> <img src="FietsLogo.jpg" region="splashScreen" end="greet.end" transin="fade1s" transout="fade1s" alt="Logo for Fiets: a bicycle zone sign"/> <par id="greet" begin="1s"> <switch> <par systemlanguage="en"> <audio src="welcome.wav" region="buildingImage" alt="Welcome to Fiets, your self-guided tour of Amsterdam (spoken)" /> <text src="welcome.html" region="closedCaptioning" systemcaptions="on" alt="Welcome to Fiets, your self-guided tour of Amsterdam (captions)"/> </par> <par systemlanguage="nl"> <audio src="welkom.wav" region="buildingImage" alt="Welkom bij Fiets, uw eigen stadswandeling door Amsterdam (gesproken)"/> <text src="welkom.html" region="closedCaptioning" systemcaptions="on" alt="Welkom bij Fiets, uw eigen stadswandeling door Amsterdam (ondertiteling)"/> </par> </switch> </par> </par>
<par title="Thumbnail Section" dur="indefinite"> <par> <a href="#museum" alt="Show the Rijksmuseum"> <img src="museum.jpg" region="museumThumb" alt="Rijksmuseum thumbnail"/> </a> <a href="#weighhouse" alt="Show the Weighhouse"> <img src="weighhouse.jpg" region="weighhouseThumb" alt="Weighhouse (Waag) thumbnail"/> </a> <a href="#CWI-INS" alt="Show the CWI-INS building"> <img src="CWI-INS.jpg" region="CWI-INSThumb" alt="CWI-INS building thumbnail"/> </a> </par> <excl dur="indefinite"> <img src="museum.jpg" id="museum" region="buildingImage" alt="Rijksmuseum" /> <img src="weighhouse.jpg" id="weighhouse" region="buildingImage" alt="Weighhouse (Waag)"/> <img src="CWI-INS.jpg" id="CWI-INS" region="buildingImage" alt="CWI-INS building" /> </excl> </par> </seq> </body> </smil>