Smile

SMIL Tutorial

SMIL Tutorial for

SMIL Tutorial for XHTML


If you are going to use SMIL as a plug in feature in a web page that you have redirected the viewer to.
The code for the presentation will have to under go a transformation to the standard use of SMIL.
This will have the document starting and ending with the <smil ></smil > tags.
As well as using the ".smil" extension for the file .
Layout tags will have to be added to the head section of that document as well.
Here is an example of what the code could look like.
This could depend partially on the plug-in that you are expecting the viewer to be using.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 1.0//EN" "http://www.w3.org/TR/REC-smil/SMIL10.dtd">
<smil>
<head>
<layout>
<root-layout width="640" height="350" background-color="white" />
<region id="forest" left="0" top="0" width="640" height="350" />
</layout>
</head>
<body>
<seq repeat="8">
<img src="rfa.jpg" dur="5s" alt="" region="forest"/>
<img src="tfb.jpg" dur="5s" alt="" region="forest"/>
<img src="tfc.jpg" dur="5s" alt="" region="forest"/>
<img src="tfa.jpg" dur="5s" alt="" region="forest"/>
<img src="wfa.jpg" dur="5s" alt="" region="forest"/>
<img src="tfd.jpg" dur="5s" alt="" region="forest"/>
<img src="tff.jpg" dur="5s" alt="" region="forest"/>
<img src="tfg.jpg" dur="5s" alt="" region="forest"/>
<img src="tfh.jpg" dur="5s" alt="" region="forest"/>
<img src="tfe.jpg" dur="5s" alt="" region="forest"/>
<img src="wfb.jpg" dur="5s" alt="" region="forest"/>
<img src="tfi.jpg" dur="5s" alt="" region="forest"/>
<img src="wfd.jpg" dur="5s" alt="" region="forest"/>
<img src="wfc.jpg" dur="5s" alt="" region="forest"/>
<img src="sfc.jpg" dur="5s" alt="" region="forest"/>
<img src="sfb.jpg" dur="5s" alt="" region="forest"/>
<img src="sfa.jpg" dur="5s" alt="" region="forest"/>
<img src="sfd.jpg" dur="5s" alt="" region="forest"/>
<img src="sfe.jpg" dur="5s" alt="" region="forest"/>
<img src="sff.jpg" dur="5s" alt="" region="forest"/>
<img src="sfg.jpg" dur="5s" alt="" region="forest"/>
<img src="sfi.jpg" dur="5s" alt="" region="forest"/>
<img src="sfh.jpg" dur="5s" alt="" region="forest"/>
<img src="rfb.jpg" dur="5s" alt="" region="forest"/>
</seq>
</body>
</smil>

If you notice there are radical changes to the code.
The Document Type Definition has been changed to.

<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 1.0//EN" "http://www.w3.org/TR/REC-smil/SMIL10.dtd">.

The smile tags start and end the document.

The head section of the document contains the layout tags.

<layout>
<root-layout width="640" height="350" background-color="white" />
<region id="forest" left="0" top="0" width="640" height="350" />
</layout>

The time:seq has been changed to a seq tag.
And the attribute for the seq tag has changed to repeat="8".

<seq repeat="8">

The text has been left out of this example as well.
The <p> element has to be changed to a text element.
And separate files have to be made to hold each section of text.
Along with an additional region tag and region id.


Next page of the tutorial.

Previous page of the tutorial.

Contents




Lunarpages.com Web Hosting