SMIL Structure and Layout

5 Defining Structure, Metadata and Layout Building the Outline

5.1 About a SMIL File ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

5.2 Design Guidelines ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

5.3 SMIL Authoring Rules & Guidelines ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

5.4 Structure of a SMIL file ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<smil xmlns ="http://www.w3.org/2001/SMIL20/Language"> <head>  <meta … /> <layout> <!– Layout of presentation is defined here --> </layout> </head> <body> <!– Timing and content of presentation defined here --> </body> </smil>

5.5 QuickTime SMIL Extensions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<smil xmlns:qt= http:// www.apple.com/quicktime/resources/smilextensions ” qt:autoplay=“true” qt:next=“part6.smil”> ... </smil>

5.6 RealNetwork SMIL Extensions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<smil xmlns="http://www.w3.org/2001/SMIL20/Language" xmlns:rn=“ http://features.real.com/2001/SMIL20/Extensions ” xmlns:cv=“ http:// features.real.com/systemComponent ”> ... </smil>

5.7 Metainformation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<head> <meta name="author" content="John A. Smith" /> <meta name="title" content="South West Coastal Path"/> <meta name="copyright" content="(c) 2000 John A. Smith" /> <meta name="abstract" content="A presentation using images video and audio to illustrate the beauty of the South West Coastal Path" /> </head>

5.8 Layout ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<layout> <root-layout id="main" backgroundColor="# nnnnn " width="640" height="480" /> </layout>

5.8.1 Layout (continued) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<layout> <root-layout id="main" backgroundColor="#nnnnn" width="640" height="480" /> <topLayout id=“vidpanel” width=“320” height=“240” backgroundColor=“white”> <region id=“subtitles” … /> </topLayout> … </layout>

5.8.2 Switching Layouts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<switch>  <layout systemLanguage =“en”> … </layout>  <layout systemLanguage=“fr”> … </layout> </switch>

5.9 Regions and Positioning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<layout> <root-layout id="main" backgroundColor="#FF0000" width="640" height="480" /> <region id="video" width="320" height="240" top="120" left="50" /> <region id="title" width="150" height="40" top="300“ left="50“backgroundColor="teal" /> <region id="audio" soundLevel="50%" /> </layout>

5.9.1 Registration Points ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<layout>  <regPoint id="centre" left="50%" top="50%" regAlign="center" /> </layout> … <textstream id="intro1" systemLanguage="en" src="text/intro.rt" region="screen" regPoint="center" regAlign=“center” begin="panel4.begin+3s" />

5.10 Layering and Fitting ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<layout> <root-layout id="main" backgroundColor="#nnnnn" width="640" height="480" /> <region id="video" width="320" height="240" top="120" left="50" z-index="1“ fit=""/> <region id="title" width="150" height="40" top="300" left="50“ backgroundColor="teal" z-index="2"/> <region id="audio" soundLevel="50%" /> </layout>

5.11 z-index and regions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<layout> <root-layout width="280" height="220"/> <region id="image" top="10" left="10" width="260" height="200" z-index="0"/> <region id="video" top="20" left="20" width="240" height="180" z-index="1"/> </layout>

5.12 fit attribute values ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

5.13 Embedded SMIL: Structure ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<html xmlns:t ="urn:schemas-microsoft-com:time“ > <head> <style> .time {behavior: url(#default#time2);} </style> <?import namespace=t urn="urn:schemas-microsoft-com:time“ implementation="#default#time2" /> </head> <body>  </body> </html>

5.14 Metainformation ,[object Object],[object Object],[object Object],[object Object],[object Object],<head> <meta name="author" content="John Smith"> <meta name="description" content="A SMIL presentation of the SWCP"> <meta name="keywords" content="SMIL, smil, walking, coastal, path"> </head>

5.15 Layout and Positioning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<body> . . . <div class="time" id="intro" style="position:absolute; left:50px; top:50px"> <p>South West Coastal Path: Summer 2000</p> </div> . . . </body>

5.15.1 Using Cascading Style Sheet ,[object Object],.txtPanel /* Define style for text panel */ { /* This can be called from class attribute */ position:absolute; top:90px; /* Use pixel values */ left:420px; width:200px; height:260px; background-color:#silver; /* Background is white */ z-index:2 /* Set z-index for this style */ } #rootContainer /* Define style for root window */ { /* Applied to element with corresponding id attribute value */ position:absolute; top:0px; left:0px; width:640px; height:480px; background-color:#99ccff; z-index:0 /* Set z-index for this style */ }

5.16 Layering and Fitting ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<body> <t:img class="time" id="swcpimg1" begin="2" dur="7" z-index="2" src="images/img2045.jpeg“ style="position:absolute; top:120px; left:140px"/> </body>

SMIL Structure and Layout

Recommended

Recommended

More Related Content

Similar to SMIL Structure and Layout

Similar to SMIL Structure and Layout (20)

Recently uploaded

Recently uploaded (20)

SMIL Structure and Layout