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

Recomendados

Recomendados

Más contenido relacionado

Similar a SMIL Structure and Layout

Similar a SMIL Structure and Layout (20)

Último

Último (20)

SMIL Structure and Layout