Produc

The SMIL Tutorial - Table of content
Go back to main page
The SMIL Tutorial - Table of contents

Chapter 1. Introduction
[jump to cover] 1 2 3 Copyright Navigation Coming next...
Chapter 2. What is SMIL?

[jump to cover] 1 2 3 4 5 6 7 What does SMIL mean? What can you do with SMIL? How to write a SMIL document Your first SMIL document The code in detail Tags can end with a slash Coming next...
Chapter 3. Layout
[jump to cover] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 The <layout> section Window settings Your first window appears! Absolute Positioning The Region The <region> tag The <img> tag Relative Positioning When two regions overlay z-index Images but also video, audio,... How to fit a media in its area? Make your medium fill its area Make your medium meet its area Make your medium slice its area Make your medium scroll within its area
http://www.helio.org/products/smil/tutorial/toc.html (1 de 3) [4/7/2001 20:16:45]
17
Coming next
Chapter 4. Synchronization
[jump to cover] 1 2 3 4 5 6 7 8 9 The fourth dimension: time! The vim icon during 6 seconds... Delaying a media The "begin" parameter Sequence: a media... and then an other The <seq> tag Parallel: several media in the same time The <par> tag Coming next
Chapter 5. Advanced Users

[jump to cover] 1 2 3 4 5 6 7 8 9 10 11 From basic synchronization... ... to event-based synchronization The "begin" event The "begin" event (source) Switching An example to understand The <switch> tag <switch> by the source Several tests in one tag What can be tested? Coming next
Chapter 6. Tools
[jump to cover] 1 2 3 4 5 Real Player TM (Real) Real Player window SOJA (Helio) GRINS (CWI) Coming next
Chapter 7. Reference
[jump to cover] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <smil> <head> <meta> <layout> <root-layout> <region> <body> <seq> <par> <switch> <a> <anchor> Media tags with no clip attributes: <img> and <text> Media tags with clip attributes: <video>, <audio>,... The End
Chapter 8. Examples
[jump to cover] 1 2 3 4 5 6 7 8 9 Region example Relative positioning example z-index example Time example: duration Time example: begin Time example: sequence Time example: parallel Advanced: events Advanced: switch
The SMIL Tutorial is HELIO 1998-1999 all rights reserved
SMIL Tutorial
If you aren't viewing this on www.helio.org, you might be looking at an obsolete copy. You are NOT allowed to mirror this tutorial.
August, 23th 1999 version (history) CLICK HERE TO BEGIN Table of Content NEW:Index Download the tutorial Download the latest version of the SMIL vim-syntax-file Translations (old version): Portuguese
This tutorial uses cascading style sheets and is therfore best viewed with Netscape Navigator 4+ or Internet Explorer 4+. Parts of this work were created with the help of
Copyright 1998-1999 HELIO All Rights Reserved
http://www.helio.org/products/smil/tutorial/index.html [4/7/2001 20:16:47]
The SMIL Tutorial - Chapter 1. Introduction
Introduction - Cover
Quick Access 1 2 3
Copyright Navigation Coming next...
Chapter 1. Introduction
Welcome to this on-line tutorial for SMIL, the new language from the World Wide Web Consortium (web site) This tutorial will help you learning the language and creating your first SMIL presentations, through a step-by-step training. To demonstrate SMIL capabilities, we will use the Java-based SMIL Player nammed SOJA. You can download it from HELIO's web site (here), but it is not a requirement at the moment.
http://www.helio.org/products/smil/tutorial/chapter1/index.html [4/7/2001 20:16:50]
SMIL Tutorial History
Back to the Tutorial Home Page
History
Date
q q
Events Syntax errors corrected. An error has been reported in SOJA concerning "fit" attribute lessons. So we decided to remove examples on this particular lesson.... Sorry ! New layout ! We created a PERL script called "Buildorial", that generates the HTML code for us ! Index file, allows a keyword search. z-index, and fit attribute lessons added. SOJA "Cherbourg 2" update. SOJA "Cherbourg" release has been added to the tutorial and has therefore replaced SOJA "Barbizon". Chapter 5: switching is added Some bugs in source files are fixed. Chapter 6 begun. Chapter 7 ended. SOJA Barbizon is included to show the examples. Anyone can download the tutorial.
Aug 23th, 1999
Aug 13th, 1999

q q
May 26th, 1999 May 2nd, 1999 Mar 2nd, 1999
q q
q q q
Jan 11th, 1999
q q
Dec 13th, 1998
First release.
http://www.helio.org/products/smil/tutorial/history.html [4/7/2001 20:16:51]
The SMIL Tutorial - Index
Go back to main page

-Aabsolute positioning Chapter 3. Layout - Absolute Positioning
-Bboston Chapter 2. What is SMIL? - What does SMIL mean?
-Ccase-sensitive Chapter 2. What is SMIL? - How to write a SMIL document copyright Chapter 1. Introduction - Copyright
-Ffill Chapter 3. Layout - Make your medium fill its area fit Chapter 3. Layout - How to fit a media in its area?
-Gg2 Chapter 6. Tools - Real Player TM (Real) grins Chapter 6. Tools - GRINS (CWI)
-Hhelio Chapter 1. Introduction - Copyright history Chapter 2. What is SMIL? - What does SMIL mean?
http://www.helio.org/products/smil/tutorial/index_file.html (1 de 3) [4/7/2001 20:16:52]
-Llayout Chapter 3. Layout - Cover
-Mmedia Chapter 3. Layout - Images but also video, audio,...
-Pparallel Chapter 4. Synchronization - Parallel: several media in the same time Chapter 8. Examples - Time example: parallel
-Rreal player Chapter 6. Tools - Real Player TM (Real) region Chapter 7. Reference - <region> relative positioning Chapter 3. Layout - Relative Positioning
-Sscroll Chapter 3. Layout - Make your medium scroll within its area sequence Chapter 4. Synchronization - Sequence: a media... and then an other skeleton Chapter 2. What is SMIL? - Your first SMIL document slice Chapter 3. Layout - Make your medium slice its area smil Chapter 2. What is SMIL? - What does SMIL mean? soja Chapter 6. Tools - SOJA (Helio) streaming Chapter 6. Tools - Real Player TM (Real)
switch Chapter 5. Advanced Users - Switching
-Ttime Chapter 4. Synchronization - Cover
-Vvim Chapter 2. What is SMIL? - How to write a SMIL document
-Wworld wide web consortium Chapter 2. What is SMIL? - What does SMIL mean?
-Xxml Chapter 2. What is SMIL? - How to write a SMIL document The SMIL Tutorial is HELIO 1998-1999 all rights reserved
SMIL Tutorial Download
Back to the Tutorial Home Page
Download the tutorial

Before downloading the tutorial, you must agree to the following license.
By clicking on the "I AGREE" link below, I fully agree to this license. All of the material in The SMIL Tutorial is copyright-protected and may not be published in other works without express written permission from HELIO. I understand that I am NOT allowed to mirror this tutorial anywhere on the internet or on any medium. The SMIL Tutorial is distributed in the
DO NOT MIRROR THIS TUTORIAL If you find any mirror on the web, please tell us. Expected file size: approx. 170Ko I AGREE - I do not agree Copyright 1998-1999 HELIO All Rights Reserved
http://www.helio.org/products/smil/tutorial/download.html [4/7/2001 20:16:53]
The SMIL Tutorial - Introduction - Copyright
Chapter 1. Introduction - screen 1 of 3
Copyright
The SMIL Tutorial is owned by HELIO It is protected by French and International laws. q You are not allowed to copy or reproduce it, even partially, on any support q You are not allowed to sale it q You are not allowed to include it on any distribution q You are not allowed to mirror it on the Web, even with a new layout The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter1/copyright.html [4/7/2001 20:16:55]
The SMIL Tutorial - Introduction - Navigation
Navigation
You will find several icons during this tutorial: q the "back" icon leads you r to the previous step r or to the previous chapter if you are looking at a chapter cover page. q the "next" icon leads you to the next step. q the "home" icon (grey) leads you to the tutorial home page. q the "t.o.c." icon (grey) leads you to the Table Of Contents. q the "index" icon (grey) leads you to the index page. The progess bar displays your progression in the current chapter. At any time you can click on the chapter title to jump to its cover. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter1/1.html [4/7/2001 20:16:56]
The SMIL Tutorial - Introduction - Coming next...
Coming next...
Let's begin by having a look at "What is SMIL"... The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Chapter 2. What is SMIL?
What is SMIL? - Cover
Quick Access 1 2 3 4 5 6 7
What does SMIL mean? What can you do with SMIL? How to write a SMIL document Your first SMIL document The code in detail Tags can end with a slash Coming next...
Chapter 2. What is SMIL?

This short chapter will teach you: q what SMIL is and who made it, q what it allows you to do, q what the structure of a SMIL document is. Press the "+" button to go to the next step. If you feel confortable with what SMIL is and what is does, go directly to Chapter 3: Layout.
The SMIL Tutorial - What is SMIL? - What does SMIL mean?
Chapter 2. What is SMIL? - screen 1 of 7
What does SMIL mean?

SMIL stands for Synchronized Multimedia Integration Language. Prononce it "smile" ! It was developed by the World Wide Web Consortium and released on June 15th 1998. Click here to see the press release. Here is a brief history: Date Aug 3, 1999 May 25, 1999 May 2, 1999 May 5-7, 1999 Feb 2, 1999 Oct 5, 1998 Aug, 1998 Jul, 1998 Jun 15, 1998 Mar, 1998 Feb, 1998 Nov, 1997 Event The w3c announces the first SMIL Boston draft GRiNS 0.5 HELIO releases SOJA 1.0 Cherbourg RNC'99: MP3 and Flash4 support in RealPlayer G2 announced HELIO releases SOJA 1.0 Barbizon HELIO releases SOJA 1.0 Antipolis VEON releases its SMIL authoring tool CWI and REAL both make available their SMIL implementations The w3c publishes SMIL 1.0 The first implentation of SMIL: HPAS Second public version of SMIL draft available First public release of SMIL Specification
The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - What is SMIL? - What can you do with SMIL?
What can you do with SMIL?

You can... q position media elements wherever you want on the screen, q synchronize those elements, q display media following user-preferences, language, bit-rate, etc... The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - What is SMIL? - How to write a SMIL document
How to write a SMIL document

What you need to create a SMIL document is... a simple text editor! We strongly recommend using VIM because of its capability in syntax highlighting. All the sources you will see in this tutorial were powered by VIM. SMIL is XML-based and is very similar with HTML and this makes the language easy to read and understand. There are however differences beetween SMIL and HTML q SMIL is case-sensitive. All tags must be written in lower case. q SMIL is XML-based. Tags have to be ended. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - What is SMIL? - Your first SMIL document
Your first SMIL document

Discover what a SMIL document is made of... Here is a source. It is just a skeleton since no media are specified: <smil> <head> <meta name="copyright" content="Your Name" /> <layout>  </layout> </head> <body>  </body> </smil> Source (vim HTML version) The first thing you have noticed is that SMIL is really similar to HTML. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - What is SMIL? - The code in detail
The code in detail

A source begins with <smil> and ends with </smil>. Take care to use lower case. Remember that SMIL, unlike HTML, is case sensitive... <smil> [...] </smil> SMIL documents have two parts: head and body. Each of them must have <smil> as a parent. <smil> <head> [...] </head> <body> [...] </body> </smil> The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - What is SMIL? - Tags can end with a slash
Tags can end with a slash

Some tags, such as meta can have a slash at their end. [...] <head> <meta name="copyright" content="Your Name" /> </head> [...] This is because SMIL is XML-based. You will see in next chapters some tags that... q sometimes are written <tag> ... </tag> q sometimes are written <tag /> The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - What is SMIL? - Coming next...
Coming next...
You have just learnt: q what SMIL is, q who developed it, q what it is made of, q what the skeleton of a SMIL document is. Let's see if you are good at manipulating SMIL... Jump to Chapter 3 ! The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Chapter 3. Layout
Layout - Cover
Quick Access 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
The <layout> section Window settings Your first window appears! Absolute Positioning The Region The <region> tag The <img> tag Relative Positioning When two regions overlay z-index Images but also video, audio,... How to fit a media in its area? Make your medium fill its area Make your medium meet its area Make your medium slice its area Make your medium scroll within its area Coming next
Chapter 3. Layout
The first thing you will learn in this tutorial is to position your media wherever you want. We will make the difference beetween: q absolute positionning, and
q
relative positionning.
However, the scene is rendered within a window, so we have to give it width and height. The next step will teach you this.
http://www.helio.org/products/smil/tutorial/chapter2/sources/firstdocument.smil
<smil> <head> <meta name="copyright" content="Your Name" /> <layout>  </layout> </head> <body>  </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter2/sources/firstdocument.smil [4/7/2001 20:17:07]
firstdocument.smil.html
<smil> <head> <meta name="copyright" content="Your Name" /> <layout>  </layout> </head> <body>  </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter2/sources/firstdocument.smil.html [4/7/2001 20:17:08]
The SMIL Tutorial - Layout - The <layout> section
Chapter 3. Layout - screen 1 of 17
The <layout> section

Everything concerning layout - including window settings - is stored beetween the <layout> and the </layout> tags in the header, as shown in the above skeletton. <smil> <head> <layout>  </layout> </head> <body> [...] </body> </smil> The <layout> tag is located in the header. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Layout - Window settings
Window settings
You can set width and height for the window in which your presentation will be rendered. The following source will create a window with a 300x200 pixels dimension. <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> </layout> </head> <body> </body> </smil> Source (vim HTML version) The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Layout - Your first window appears!
Your first window appears!

Here is what you should see (with SOJA player) with the previous source file.
NB: this doesn't work with RealPlayer G2. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Layout - Absolute Positioning
Absolute Positioning
It is really easy to position media with SMIL. They are located from the upper left corner of the window.
The SMIL Tutorial - Layout - The Region
The Region
To insert a media within our presentation we must specify the region (the place) where it will be displayed. Let's say we want to insert the vim icon (32x32 pixels) at 75 pixels from the left border and at 50 pixels from the top border.
The SMIL Tutorial - Layout - The <region> tag
The <region> tag

We will use the region tag to position the vim icon. We must also assign an id that identifies the region. The header becomes: <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> </layout> </head> [...] The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Layout - The <img> tag
The <img> tag

To insert the vim icon in the region called "vim_icon", we use the <img> tag as shown in the source below. Note that the region attribute is a pointer to the <region> tag. <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> </layout> </head> <body> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" /> </body> </smil> Source - See it running in SOJA See also Media tags with no clip attributes: <img> and <text>. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter3/region_and_img.html [4/7/2001 20:17:17]
The SMIL Tutorial - Layout - Relative Positioning
Relative Positioning
You can also specify media positions relatively to the window's dimensions. For example, if you wish to display the vim icon at 50% from the left border and at 40% from the top border, modify the previous source and replace the left and top attributes. <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="50%" top="40%" width="32" height="32" /> </layout> </head> <body> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" /> </body> </smil> Source - See it running in SOJA The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter3/relative_positioning.html [4/7/2001 20:17:18]
The SMIL Tutorial - Layout - When two regions overlay
When two regions overlay

We have just seen how to position a media along x and y axes (left and top). Now... if two region overlay ? Which one should be displayed on top ? The following code points out the problem: <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="region_1" left="50" top="50" width="150" height="125" /> <region id="region_2" left="25" top="25" width="100" height="100" /> </layout> </head> <body> <par> <text src="text1.txt" region="region_1" /> <text src="text2.txt" region="region_2" /> </par> </body> </smil> Source What should SMIL do :
this...
... or that ?
http://www.helio.org/products/smil/tutorial/chapter3/overlay.html [4/7/2001 20:17:21]
The SMIL Tutorial - Layout - z-index
z-index
To be sure that one region is over the other, add z-index attribute to <region>. When two region overlay, the one with the greater z-index is on top. If both regions have the same z-index, the first rendered one is below the other. In the following code, we add z-index to region_1 and region_2... <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="region_1" left="50" top="50" width="150" height="125" z-index="2"/> <region id="region_2" left="25" top="25" width="100" height="100" z-index="1"/> </layout> </head> <body> <par> <text src="text1.txt" region="region_1" /> <text src="text2.txt" region="region_2" /> </par> </body> </smil> Source - See it running in SOJA What SMIL do :
http://www.helio.org/products/smil/tutorial/chapter3/overlay_zindex.html (1 de 2) [4/7/2001 20:17:22]
The SMIL Tutorial - Layout - z-index
Region 1 is over Region 2 The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter3/overlay_zindex.html (2 de 2) [4/7/2001 20:17:22]
The SMIL Tutorial - Layout - Images but also video, audio,...
Images but also video, audio,...

We saw images and texts in previous presentations but other media can be introduced within SMIL, depending on the player implementation. The table below sum-up what can be seen and the corresponding tag: Media GIF JPEG Microsoft Wav Sun Audio Sun Audio Zipped MP3 Plain text Real text Real movie AVI MPEG MOV Tag img img audio audio audio audio text textstream video video video video G2 OK OK OK OK OK OK OK OK OK OK OK GRiNS OK OK OK OK OK OK OK Soja OK OK OK OK OK -
Report any error in this table by clicking on the "Comments" link below. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter3/list_of_media.html [4/7/2001 20:17:24]
The SMIL Tutorial - Layout - How to fit a media in its area?
How to fit a media in its area?

You may wonder if your areas should always be the same size as your medias... the answer is NO! SMIL offers a mechanism to adapt your medias to their containers: the "fit" attribute. The next screens will show you how to do so. Click next to continue! The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Layout - Make your medium fill its area
Make your medium fill its area

Imagine that your media is smaller than your area. You would like to make it grow and fill the area as shown below:
Just add fit="fill" attribute in the <region> tag...
<smil> <head> <layout> <root-layout width="147" height="116" background-color="yellow" /> <region id="region_1" left="8" top="10" width="116" height="81" background-color="white" fit="fill" /> </layout> </head> <body>  <img src="madewithcss.gif" region="region_1" /> </body> </smil>
Source The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter3/fit_fill.html [4/7/2001 20:17:27]
The SMIL Tutorial - Layout - Make your medium meet its area
Make your medium meet its area

Now, you can also make your media grow -without any distortion- until it meets the region frontier.
Set the fit attribute to "meet" in your <region> tag. <smil> <head> <layout> <root-layout width="147" height="116" background-color="yellow" /> <region id="region_1" left="8" top="10" width="116" height="81" background-color="white" fit="meet" /> </layout> </head> <body>  <img src="madewithcss.gif" region="region_1" /> </body> </smil> Source The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter3/fit_meet.html [4/7/2001 20:17:41]
The SMIL Tutorial - Layout - Make your medium slice its area
Make your medium slice its area

This time, the media grows - without distortion - and fill entirely its region, as shown below.
Set the fit attribute to "slice" in your <region> tag. <smil> <head> <layout> <root-layout width="147" height="116" background-color="yellow" /> <region id="region_1" left="8" top="10" width="116" height="81" background-color="white" fit="slice" /> </layout> </head> <body>  <img src="madewithcss.gif" region="region_1" /> </body> </smil> Source The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter3/fit_slice.html [4/7/2001 20:18:08]
The SMIL Tutorial - Layout - Make your medium scroll within its area
Make your medium scroll within its area

And to conclude with the fit attribute, the last case is when the media is bigger than its region. You would like to scroll this area, as explain below.
Set the fit attribute to "scroll" in your <region> tag. <smil> <head> <layout> <root-layout width="147" height="116" background-color="yellow" /> <region id="region_1" left="8" top="10" width="116" height="81" background-color="white" fit="scroll"/> </layout> </head> <body>  <img src="eurotango.gif" region="region_1" /> </body> </smil> Source (vim HTML version) The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter3/fit_scroll.html [4/7/2001 20:18:25]
The SMIL Tutorial - Layout - Coming next
Coming next
You have learnt to position media on the screen, absolutely or relatively to the window's width and height. This is not the only thing you can do with SMIL! The next chapter, called "Synchronization", will demonstrate SMIL ability to play media with time constraints. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter3/sources/rootlayout.smil
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> </layout> </head> <body> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter3/sources/rootlayout.smil [4/7/2001 20:18:44]
rootlayout.smil.html
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> </layout> </head> <body> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter3/sources/rootlayout.smil.html [4/7/2001 20:18:49]
The SMIL Tutorial - Examples - Region example
Chapter 8. Examples - screen 1 of 9
Region example
This example shows how to position a media within a presentation. Click HERE to see the source in a new window. Please wait while loading SOJA (50Ko)...
http://www.helio.org/products/smil/tutorial/chapter8/region_and_img.html [4/7/2001 20:19:16]
The SMIL Tutorial - Reference - Media tags with no clip attributes: <img> and <text>
Chapter 7. Reference - screen 13 of 15
Media tags with no clip attributes: <img> and <text>

Media tags allow you to render media elements in a specified region. <img id="identifier" src="URL" alt="string" region="identifier" title="string" abstract="string" author="string" copyright="string" longdesc="string" type="string" begin="clock-value" end="clock-value" dur="clock-value" repeat="integer" fill="remove|freeze" system-bitrate="integer" system-captions="on|off" system-language="coma-separated-list" system-overdub-or-caption="caption|overdub" system-required="string" system-screen-depth="integer" system-screen-size="integerXinteger" /> Possible child q anchor The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Examples - Relative positioning example
Relative positioning example

This example shows how to position a media within a presentation, with relative positioning. The vim icon should appear at 50% from the left border and 40% from the top. Click HERE to see the source in a new window. Please wait while loading SOJA (50Ko)...
http://www.helio.org/products/smil/tutorial/chapter8/relative_positioning.html [4/7/2001 20:19:33]
The SMIL Tutorial - Examples - z-index example
z-index example
This example shows how to position a media "verticaly" (along z). Click HERE to see the source in a new window. Please wait while loading SOJA (50Ko)...
http://www.helio.org/products/smil/tutorial/chapter8/zindex.html [4/7/2001 20:19:42]
http://www.helio.org/products/smil/tutorial/chapter3/sources/fit_scroll.smil
<smil> <head> <layout> <root-layout width="147" height="116" background-color="yellow" /> <region id="region_1" left="8" top="10" width="116" height="81" background-color="white" /> </layout> </head> <body>  <img src="eurotango.gif" region="region_1" fit="scroll" /> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter3/sources/fit_scroll.smil [4/7/2001 20:19:48]
fit_scroll.smil.html
<smil> <head> <layout> <root-layout width="147" height="116" background-color="yellow" /> <region id="region_1" left="8" top="10" width="116" height="81" background-color="white" /> </layout> </head> <body>  <img src="eurotango.gif" region="region_1" fit="scroll" /> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter3/sources/fit_scroll.smil.html [4/7/2001 20:19:53]
The SMIL Tutorial - Chapter 4. Synchronization
Synchronization - Cover
Quick Access 1 2 3 4 5 6 7 8 9
The fourth dimension: time! The vim icon during 6 seconds... Delaying a media The "begin" parameter Sequence: a media... and then an other The <seq> tag Parallel: several media in the same time The <par> tag Coming next
Chapter 4. Synchronization
SMIL can synchronize media elements. This chapter will teach you: q how to add time parameter to media elements, q how to play several media one after the other, q how to play several media in parallel.
The SMIL Tutorial - Synchronization - The fourth dimension: time!
Chapter 4. Synchronization - screen 1 of 9
The fourth dimension: time!

Imagine you would like to make vim icon appear during 6 seconds. How could you make it possible? The timeline below shows what we want to do:
The SMIL Tutorial - Synchronization - The vim icon during 6 seconds...
The vim icon during 6 seconds...

Adding the duration ("dur") parameter and setting it to "6s" will make the vim icon be visible only 6 seconds. <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> </layout> </head> <body> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" dur="6s" /> </body> </smil> Source - See it running in SOJA The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Synchronization - Delaying a media
Delaying a media
Now we would like to wait 2 seconds before rendering the vim icon. The timeline below shows what we want to do:
The SMIL Tutorial - Synchronization - The "begin" parameter
The "begin" parameter

If you add begin="2s" in your <img> tag, you will see that the vim icon will appear 2 seconds after the document began and will remain during 6 other seconds. Have a look at the source: <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> </layout> </head> <body> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" dur="6s" begin="2s" /> </body> </smil> Source - See it running in SOJA The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Synchronization - Sequence: a media... and then an other
Sequence: a media... and then an other

Now we wish to: q make the vim icon appear during 6 seconds, q wait 1 second, q and make the SOJA icon appear during the next 4 seconds, as shown in the timeline below:
The SMIL Tutorial - Synchronization - The <seq> tag
The <seq> tag

The <seq> tag defines a sequence. Its children are executed one after the other. <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> <region id="soja_icon" left="150" top="50" width="100" height="30" /> </layout> </head> <body>  <seq> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" dur="6s" /> <img src="madewithsoja.gif" alt="Made with SOJA" region="soja_icon" dur="4s" begin="1s" /> </seq> </body> </smil> Source - See it running in SOJA NB: setting begin="1s" makes the SOJA icon render one second after the end of the VIM icon. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Synchronization - Parallel: several media in the same time
Parallel: several media in the same time

It would be logical to display the two icons in the same time, rather than on after the other... as shown below:
Using <par> tag makes it easy. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Synchronization - The <par> tag
The <par> tag

The <par> tag makes its children be executed in parallel. <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> <region id="soja_icon" left="150" top="50" width="100" height="30" /> </layout> </head> <body> <par> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" dur="6s" /> <img src="madewithsoja.gif" alt="Made with SOJA" region="soja_icon" dur="6s" /> </par> </body> </smil> Source - See it running in SOJA NB: adding a begin="1s" to the second <img> tag would make SOJA icon render one second after the beginning of the <par>. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Synchronization - Coming next
Coming next
You have just seen basic synchronization. Of course, it is possible to mix <par> and <seq> tags, for example for launch two sequences in parallel... The next chapter will teach you advanced concepts to control your presentation: events, parameters (<switch> tag), etc... The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Examples - Time example: duration
Time example: duration

This example illustrates media duration. The VIM icon should appear for a duration of 6 seconds and then vanish... Click HERE to see the source in a new window. Please wait while loading SOJA (50Ko)...
http://www.helio.org/products/smil/tutorial/chapter8/dur.html [4/7/2001 20:22:28]
The SMIL Tutorial - Examples - Time example: begin
Time example: begin

The begin attributes delays a medium's beginning. Here, the VIM icon will wait 2 seconds before appearing for a duration of 6 other seconds. Click HERE to see the source in a new window. Please wait while loading SOJA (50Ko)...
http://www.helio.org/products/smil/tutorial/chapter8/begin.html [4/7/2001 20:22:29]
The SMIL Tutorial - Examples - Time example: sequence
Time example: sequence

Two media are rendered one after the other thanks to <seq> tag. First, VIM icon will appear for a duration of 6 seconds and then disappear... After 1 second, SOJA icon is rendered with a duration of 4 seconds. Click HERE to see the source in a new window. Please wait while loading SOJA (50Ko)...
http://www.helio.org/products/smil/tutorial/chapter8/seq.html [4/7/2001 20:22:31]
The SMIL Tutorial - Examples - Time example: parallel
Time example: parallel

This example shows how to display two media in the same time (in parallel). SOJA and VIM icons will stand side by side during 6 seconds. Click HERE to see the source in a new window. Please wait while loading SOJA (50Ko)...
http://www.helio.org/products/smil/tutorial/chapter8/par.html [4/7/2001 20:22:32]
The SMIL Tutorial - Chapter 5. Advanced Users
Advanced Users - Cover
Quick Access 1 2 3 4 5 6 7 8 9 10 11
From basic synchronization... ... to event-based synchronization The "begin" event The "begin" event (source) Switching An example to understand The <switch> tag <switch> by the source Several tests in one tag What can be tested? Coming next
Chapter 5. Advanced Users

You have seen how to render images (let's say medias...) and how to show them in a sequence or in parallel. SMIL offers other nice features such as: an event model used to improve synchronization a <switch> tag allowing you to define which media you want to send over the network, depending of the client system capabilities Press NEXT to continue, or click HERE to jump to chapter 6: Tools.
The SMIL Tutorial - Reference - <par>
<par>
The tags under <par> are played at the same time. <par id="identifier" title="string" abstract="string" author="string" copyright="string" begin="clock-value" end="clock-value" dur="clock-value" end-sync="identifier|last|first" repeat="integer" system-bitrate="integer" system-captions="on|off" system-language="coma-separated-list" system-overdub-or-captions="captions|overdub" system-required="string" system-screen-depth="integer" system-screen-size="integerXinteger" /> Possible children q switch
q q q q q
any media tag with no clip attribute any media tag with clip arguments a (hyperlink) par seq
The SMIL Tutorial - Reference - <seq>
<seq>
The tags under <seq> are played one after the other. <seq id="identifier" title="string" abstract="string" author="string" copyright="string" begin="clock-value" end="clock-value" dur="clock-value" repeat="integer" system-bitrate="integer" system-captions="on|off" system-language="coma-separated-list" system-overdub-or-captions="captions|overdub" system-required="string" system-screen-depth="integer" system-screen-size="integerXinteger" /> Possible children q switch
q q q q q
The SMIL Tutorial - Advanced Users - From basic synchronization...
Chapter 5. Advanced Users - screen 1 of 11
From basic synchronization...

In a sequence or in a parallel tag, each "child" expresses its begin and end attributes relatively to its father. The following code will make vim32x32.gif and madewithsoja.gif start respectively 4 seconds and 6 seconds after the begining of the <par> tag: <smil>  <body> <par> <img src="vim32x32.gif" region="vim_icon" begin="4s" /> <img src="madewithsoja.gif" region="soja_icon" begin="6s" /> </par> </body> </smil> Source (vim HTML version) The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Advanced Users - ... to event-based synchronization
... to event-based synchronization

There is another way to synchronize media. It would be better to say: "madewithsoja.gif will begin 2s after vim32x32.gif begins". The following scheme shows what we want to do:
The SMIL Tutorial - Advanced Users - The "begin" event
The "begin" event

When a media begins, it sends a "begin" event. If another media waits for this event, it catches it. To make a media wait to an event, one of its synchronization attributes (begin or end) should be written has follow:  <tag begin="id(specifiedId)(begin)" />  <tag begin="id(specifiedId)(3s)" />  <tag begin="id(specifiedId)(end)" /> Event syntax The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Advanced Users - The "begin" event (source)
The "begin" event (source)

In our sample, the following source will make the madewithsoja.gif image begin 2s after vim32x32.gif begins. <smil>  <body> <par> <img src="vim32x32.gif" region="vim_icon" id="vim" begin="4s" /> <img src="madewithsoja.gif" region="soja_icon" begin="id(vim)(2s)" /> </par> </body> </smil> Source - See it running in SOJA The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Advanced Users - Switching
Switching
One of the greatest ideas proposed with SMIL is to adapt your presentation to the end-user system capabilities. For example, if the user's modem has a 14000 bps modem, it would be better to make it download light pictures. You could also want to translate parts of the presentation depending on the user language. A special tag, called <switch> makes it possible. Click NEXT to continue... The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Advanced Users - An example to understand
An example to understand
Our sample does not discuss with medias and synchronization... You are supposed to have fully understood previous chapters. The aim is to display to the user its system properties in a language he could understand. For example: q You are English q Your screen has a 800x600 resolution q Your bitrate is 14000 bps or:
q q q
Vous tes franais Votre cran est en 800x600 Le dbit est de 14000 bps
The SMIL Tutorial - Advanced Users - The <switch> tag
The <switch> tag

Here is the syntax for the switch tag: <switch>    </switch> The rule is: The first of the <switch> tag children whose test attributes are all evaluated to TRUE is executed. A tag with no test attributes is evaluated to TRUE. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Advanced Users - <switch> by the source
<switch> by the source

Our example can be written as follow: <body> <switch>  <par system-language="en"> <text src="you_are_english.txt" region="main_message" />  <switch> <text src="800_600.en.txt" region="size" system-screen-size="800X600" /> <text src="1024_768.en.txt" region="size" system-screen-size="1024X768" /> <text src="another_size.en.txt" region="size" /> </switch>  <switch> <text src="14000bps.en.txt" region="bitrate" system-bitrate="14000" /> <text src="28000bps.en.txt" region="bitrate" system-bitrate="28000" /> <text src="another_bitrate.en.txt" region="bitrate" /> </switch> </par>  <par system-language="fr"> <text src="vous_etes_francais.txt" region="main_message" />  <switch> <text src="800_600.fr.txt" region="size" system-screen-size="800X600" /> <text src="1024_768.fr.txt" region="size" system-screen-size="1024X768" /> <text src="another_size.fr.txt" region="size" /> </switch>  <switch> <text src="14000bps.fr.txt" region="bitrate" system-bitrate="14000" />
http://www.helio.org/products/smil/tutorial/chapter5/8.html (1 de 2) [4/7/2001 20:22:46]
The SMIL Tutorial - Advanced Users - <switch> by the source
<text src="28000bps.fr.txt" region="bitrate" system-bitrate="28000" /> <text src="another_bitrate.fr.txt" region="bitrate" /> </switch> </par>  <text src="unknown_language.txt" region="main_message" /> </switch> </body> Source - See it running in SOJA The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Advanced Users - Several tests in one tag
Several tests in one tag

Of course, you can make several tests in only one tag rather than splitting them into several switches. The two following short examples are equivalent: <body> <switch>  <switch system-language="fr">  <text src="french_28000.txt" system-bitrate="28000" />  <text src="french_14000.txt" system-bitrate="14000" /> </switch>  <switch system-language="en">  <text src="english_28000.txt" system-bitrate="28000" />  <text src="english_14000.txt" system-bitrate="14000" /> </switch> </switch> </body>
The SMIL Tutorial - Advanced Users - Several tests in one tag
<body> <switch>  <text src="french_14000.txt" system-language="fr" system-bitrate="28000" />  <text src="french_28000.txt" system-language="fr" system-bitrate="14000" />  <text src="english_14000.txt" system-language="en" system-bitrate="28000" />  <text src="english_28000.txt" system-language="en" system-bitrate="14000" /> </switch> </body> The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Advanced Users - What can be tested?
What can be tested?

You may wonder what can be tested within <switch> tags... <!-THE LANGUAGE (A coma-separated list of national codes) --> <XXX system-language="fr,en,it"> <!-THE BITRATE (An integer) --> <XXX system-bitrate="14000"> <!-THE SCREEN DIMENSION (Tow integers separated with an 'X') --> <XXX system-screen-size="800X600"> <!-THE SCREEN DEPTH (An integer: number of bits/pixel) --> <XXX system-screen-depth="4"> <!-CAPTIONS ("on" or "off") --> <XXX system-captions="on"> <!-CAPTION OR OVERDUB ("caption" or "overdub")
The SMIL Tutorial - Advanced Users - What can be tested?
--> <XXX system-captions="overdub"> <!-THE TYPE SUPPORTED BY THE VIEWER USED TO RENDER THE PRESENTATION (A mime-type) --> <XXX type="audio/x-auz"> Tests supported and an example for each of them The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Advanced Users - Coming next
Coming next
You have seen how to synchronize tags on events and also how SMIL is really good at switching beetween several possibilities depending on the end-user system. Next chapter will show you a few tools to render SMIL presentations. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Reference - <switch>
<switch>
<switch> sons are analyzed one after the other, looking at their system attributes. The first son that returns true to all the system tests is chosen. <switch id="identifier" title="string"> <!-<!-<!-<!-1st 2nd 3rd etc son --> son --> son --> -->
</switch>
Possible children in the head q layout
Possible children in the body q switch

q q q q q
The SMIL Tutorial - Chapter 6. Tools
Tools - Cover
Quick Access 1 2 3 4 5
Real Player TM (Real) Real Player window SOJA (Helio) GRINS (CWI) Coming next
Chapter 6. Tools
This small chapter is not a comparaison between tools but just a few guidelines to help you creating and rendering SMIL into presentations. We will show you the following tools: q Real Player G2 from Real
q q
SOJA from HELIO GRiNs from CWI
http://www.helio.org/products/smil/tutorial/chapter5/sources/basicSynchro.smil
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> <region id="soja_icon" left="150" top="50" width="100" height="30" /> </layout> </head> <body> <par> <img src="vim32x32.gif" region="vim_icon" begin="4s" /> <img src="madewithsoja.gif" region="soja_icon" begin="6s" /> </par> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter5/sources/basicSynchro.smil [4/7/2001 20:22:54]
basicSynchro.smil.html
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> <region id="soja_icon" left="150" top="50" width="100" height="30" /> </layout> </head> <body> <par> <img src="vim32x32.gif" region="vim_icon" begin="4s" /> <img src="madewithsoja.gif" region="soja_icon" begin="6s" /> </par> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter5/sources/basicSynchro.smil.html [4/7/2001 20:22:55]
The SMIL Tutorial - Examples - Advanced: events
Advanced: events
When a media begins, it sends a begin event. Other media can listen to its event and start or stop as soon as they receive the signal. Here, SOJA icon will render 2 seconds after the begining (begin event) of the VIM icon. Click HERE to see the source in a new window. Please wait while loading SOJA (50Ko)...
http://www.helio.org/products/smil/tutorial/chapter8/begin_event.html [4/7/2001 20:22:56]
The SMIL Tutorial - Examples - Advanced: switch
Advanced: switch
SMIL allows to switch, depending your language, bitrate, etc... Let's see what I can know about you ;-) Click HERE to see the source in a new window. Please wait while loading SOJA (50Ko)...
http://www.helio.org/products/smil/tutorial/chapter8/switch.html [4/7/2001 20:22:57]
The SMIL Tutorial - Tools - Real Player TM (Real)
Chapter 6. Tools - screen 1 of 5
Real Player TM (Real)

Real player was written by Real in 1998. Real participated in the creation of the SMIL language and released Real Player G2 in July 1998. The player is free and can be downloaded from here. Real player supports lots of file format and can use plugins. The main supported formats are: q Real formats: RealText, RealAudio, etc... q Images: GIF, JPEG q Audio: AU, WAV, MIDI, etc... Real Player uses streaming to render presentations. That means that it is not necessary to wait for all the components to be loaded to display something on the screen. The presentation is read and rendered in the same time, thanks to a buffer. The player works better when calling a SMIL file given by a Real Server, rather than from an HTTP one. The next screen shows you how the player looks like. Note that it is available for FREE under Microsoft Windows and Applet Macintosh. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Tools - Real Player window
Real Player window
1. 2. 3. 4. 5.
Play, Pause and Stop buttons Channels The screen where your presentations are rendered The progress bar shows you the current time The status bar gives you information about the network bandwidth.
The SMIL Tutorial - Tools - SOJA (Helio)
SOJA (Helio)
SOJA stands for SMIL Output in Java Applet. It was written by HELIO in 1998. HELIO is a French association based in Melun, France. The player is free and can be downloaded from here. SOJA is an applet that render SMIL in a web page or in a separate window. It supports the following formats: q Images: GIF, JPEG q Audio: AU and AUZ (AU zipped) q Text: plain text SOJA does not use streaming. HELIO chose to store media before rendering them. You have to wait until each of them has properly been loaded but the presentation will never be stopped. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Tools - GRINS (CWI)
GRINS (CWI)
GRINS stands for Graphical Interface for SMIL. It can be found at CWI. Coming up: more details. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Tools - Coming next
Coming next
The next chapter is a SMIL reference. You will find all the attributes that can be given to each of the SMIL tags. This can be really usefull for you if you begin programming in SMIL. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Chapter 7. Reference
Reference - Cover
Quick Access 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<smil> <head> <meta> <layout> <root-layout> <region> <body> <seq> <par> <switch> <a> <anchor> Media tags with no clip attributes: <img> and <text> Media tags with clip attributes: <video>, <audio>,... The End
Chapter 7. Reference
In the following pages, you will find all the tags used with SMIL 1.0. Click next to continue or jump directly to a tag by clicking in the left hand side column Please report any mistake you may notice to smil-tutorial@helio.org
The SMIL Tutorial - Reference - <smil>
<smil>
The smil tag should be found at the top of all SMIL documents. <smil id="identifier"> </smil> Possible children: q head
q
body
The SMIL Tutorial - Reference - <head>
<head>
In this section, all layout and meta elements are defined. <head id="identifier"> </head> Possible children: q meta
q q
layout switch
The SMIL Tutorial - Reference - <meta>
<meta>
<meta> gives additional informations about the current presentation. It can only be found under <head>. <meta name="string" content="string" skip-content="true|false" /> The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Reference - <layout>
<layout>
<layout> is used to define the layout on the screen. It can only be found under <head>. <layout type="string"> </layout>  <layout type="text/smil-basic-layout" /> </layout> Possible children: q root-layout
q
region
The SMIL Tutorial - Reference - <root-layout>
<root-layout>
<root-layout> is often used to define window's width, height and title. It can only be found under <layout>. <root-layout id="identifier" width="integer" height="integer" title="string" skip-content="true|false" /> The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Reference - <region>
<region>
<region> defines a rectangle within the main window. It can only be found under <layout>. <region id="identifier" left="integer" top="integer" z-index="integer" width="integer" height="integer" title="string" fit="hidden|fill|meet|scroll|slice" skip-content="true|false" /> The z-index parameter is used to position the rectangle along the z axis. A region with a z-index equal to 1 will be under a region with a z-index equal to 2. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Reference - <body>
<body>
The tags under <body> are played one after the other. <body> can be considered as a "special" <seq> tag, with no time attributes. <body id="identifier"> [...] </body> Possible children q switch
q q q q q
The SMIL Tutorial - Reference - <a>
<a>
<a> is almost the same in SMIL as in HTML. You specify an URL to go if the user clicks on one of the tag's sons. NB: to use an equivalent of the "target" argument in HTML, you can use show="the_target_frame" with the SOJA Player. <a id="identifier" show="replace|new|pause" href="URL">  </a> Possible children q switch
q q q q
any media tag with no clip attribute any media tag with clip arguments par seq
The SMIL Tutorial - Reference - <anchor>
<anchor>
<anchor> acts as <a> does but it is associated with only one medium and it has time properties. <anchor> is a son of a media element.. Its "begin" and "end" attributes are relative to the begining of its father. <anchor id="identifier" show="replace|new|pause" href="URL" skip-content="true|false" coords="x1,y1,x2,y2" begin="clock-value" end="clock-value" /> The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Reference - Media tags with clip attributes: <video>, <audio>,...
Media tags with clip attributes: <video>, <audio>,...

Media tags allow you to render media elements in a specified region. Those media have clip attributes. <video id="identifier" src="URL" alt="string" region="identifier" title="string" abstract="string" author="string" copyright="string" longdesc="string" type="string" begin="clock-value" end="clock-value" dur="clock-value" clip-begin="clock-value" clip-end="clock-value" repeat="integer" fill="remove|freeze" system-bitrate="integer" system-captions="on|off" system-language="coma-separated-list" system-overdub-or-caption="caption|overdub" system-required="string" system-screen-depth="integer" system-screen-size="integerXinteger" /> Possible child q anchor The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
The SMIL Tutorial - Reference - The End
The End
You have ended the SMIL Tutorial at helio.org: Congratulations! We hope that you have enjoyed it and also that you will soon produce good SMIL! Chapter 8 contains only SMIL presentations corresponding to what you learned during The SMIL tutorial. The author,
If you have comments about this tutorial, please send them to smil-tutorial@helio.org. The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page
http://www.helio.org/products/smil/tutorial/chapter7/end.html [4/7/2001 20:23:18]
The SMIL Tutorial - Chapter 8. Examples
Examples - Cover
Quick Access 1 2 3 4 5 6 7 8 9
Region example Relative positioning example z-index example Time example: duration Time example: begin Time example: sequence Time example: parallel Advanced: events Advanced: switch
Chapter 8. Examples
This chapter contains all the examples seen in this tutorial. Press "Next" to go through SMIL screens.
region.smil.html
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> </layout> </head> <body> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" /> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter8/sources/region.smil.html [4/7/2001 20:23:20]
region-relative.smil.html
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="50%" top="40%" width="32" height="32" /> </layout> </head> <body> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" /> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter8/sources/region-relative.smil.html [4/7/2001 20:23:21]
overlay_zindex.smil.html
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="region_1" left="50" top="50" width="150" height="125" z-index="2" background-color="#EEFFEE" /> <region id="region_2" left="25" top="25" width="100" height="100" z-index="1" background-color="#DDDDDD" /> </layout> </head> <body> <par> <text src="text1.txt" region="region_1" /> <text src="text2.txt" region="region_2" /> </par> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter8/sources/overlay_zindex.smil.html [4/7/2001 20:23:22]
6seconds.smil.html
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> </layout> </head> <body> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" dur="6s" /> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter8/sources/6seconds.smil.html [4/7/2001 20:23:23]
2then6seconds.smil.html
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> </layout> </head> <body> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" dur="6s" begin="2s" /> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter8/sources/2then6seconds.smil.html [4/7/2001 20:23:24]
6then1then4seconds.smil.html
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> <region id="soja_icon" left="150" top="50" width="100" height="30" /> </layout> </head> <body> <seq> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" dur="6s" /> <img src="madewithsoja.gif" alt="Made with SOJA" region="soja_icon" dur="4s" begin="1s" /> </seq> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter8/sources/6then1then4seconds.smil.html [4/7/2001 20:23:26]
2iconsDuring6seconds.smil.html
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> <region id="soja_icon" left="150" top="50" width="100" height="30" /> </layout> </head> <body> <par> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" dur="6s" /> <img src="madewithsoja.gif" alt="Made with SOJA" region="soja_icon" dur="6s" /> </par> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter8/sources/2iconsDuring6seconds.smil.html [4/7/2001 20:23:27]
beginEvent.smil.html
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> <region id="soja_icon" left="150" top="50" width="100" height="30" /> </layout> </head> <body> <par> <img src="vim32x32.gif" region="vim_icon" id="vim" begin="4s" /> <img src="madewithsoja.gif" region="soja_icon" begin="id(vim)(2s)" /> </par> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter8/sources/beginEvent.smil.html [4/7/2001 20:23:28]
switch.smil.html
<smil> <head> <layout> <root-layout width="300" height="200" background-color="#000066" /> <region id="main_message" width="50%" height="100%" left="0" top="0" background-color="#DDDDDD" /> <region id="size" width="200" height="50%" left="50%" top="0" background-color="#EEEEEE" /> <region id="bitrate" width="50%" height="50%" left="50%" top="50%" background-color="#EAEAEA" /> </layout> </head> <body> <switch> <par system-language="en"> <text src="you_are_english.txt" region="main_message" /> <switch> <text src="1024_768.en.txt" region="size" system-screen-size="1024X768" /> <text src="800_600.en.txt" region="size" system-screen-size="800X600" /> <text src="another_size.en.txt" region="size" /> </switch> <switch> <text src="28000bps.en.txt" region="bitrate" system-bitrate="28000" /> <text src="14000bps.en.txt" region="bitrate" system-bitrate="14000" /> <text src="another_bitrate.en.txt" region="bitrate" /> </switch> </par> <par system-language="fr"> <text src="vous_etes_francais.txt" region="main_message" /> <switch> <text src="1024_768.fr.txt" region="size" system-screen-size="1024X768" /> <text src="800_600.fr.txt" region="size" system-screen-size="800X600" /> <text src="another_size.fr.txt" region="size" /> </switch> <switch> <text src="28000bps.fr.txt" region="bitrate" system-bitrate="28000" /> <text src="14000bps.fr.txt" region="bitrate" system-bitrate="14000" /> <text src="another_bitrate.fr.txt" region="bitrate" /> </switch> </par> <text src="unknown_language.txt" region="main_message" /> </switch> </body> </smil>
http://www.helio.org/products/smil/tutorial/chapter8/sources/switch.smil.html [4/7/2001 20:23:30]

Produc

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Produc

Hochgeladen von

Copyright:

Verfügbare Formate

The SMIL Tutorial - Table of content

Go back to main page

The SMIL Tutorial - Table of contents

Chapter 2. What is SMIL?

http://www.helio.org/products/smil/tutorial/toc.html (1 de 3) [4/7/2001 20:16:45]

The SMIL Tutorial - Table of content

Chapter 5. Advanced Users

http://www.helio.org/products/smil/tutorial/toc.html (2 de 3) [4/7/2001 20:16:45]

The SMIL Tutorial - Table of content

The SMIL Tutorial is HELIO 1998-1999 all rights reserved

http://www.helio.org/products/smil/tutorial/toc.html (3 de 3) [4/7/2001 20:16:45]

Copyright 1998-1999 HELIO All Rights Reserved

http://www.helio.org/products/smil/tutorial/index.html [4/7/2001 20:16:47]

The SMIL Tutorial - Chapter 1. Introduction

The SMIL Tutorial is HELIO 1998-1999 all rights reserved

http://www.helio.org/products/smil/tutorial/chapter1/index.html [4/7/2001 20:16:50]

SMIL Tutorial History

Back to the Tutorial Home Page

Aug 23th, 1999

Aug 13th, 1999

May 26th, 1999 May 2nd, 1999 Mar 2nd, 1999

Jan 11th, 1999

Dec 13th, 1998

http://www.helio.org/products/smil/tutorial/history.html [4/7/2001 20:16:51]

The SMIL Tutorial - Index

Go back to main page

The SMIL Tutorial - Index

-Bboston Chapter 2. What is SMIL? - What does SMIL mean?

http://www.helio.org/products/smil/tutorial/index_file.html (1 de 3) [4/7/2001 20:16:52]

The SMIL Tutorial - Index

-Llayout Chapter 3. Layout - Cover

-Mmedia Chapter 3. Layout - Images but also video, audio,...

http://www.helio.org/products/smil/tutorial/index_file.html (2 de 3) [4/7/2001 20:16:52]

The SMIL Tutorial - Index

switch Chapter 5. Advanced Users - Switching

-Ttime Chapter 4. Synchronization - Cover

-Vvim Chapter 2. What is SMIL? - How to write a SMIL document

http://www.helio.org/products/smil/tutorial/index_file.html (3 de 3) [4/7/2001 20:16:52]

SMIL Tutorial Download

Back to the Tutorial Home Page

Download the tutorial

http://www.helio.org/products/smil/tutorial/download.html [4/7/2001 20:16:53]

The SMIL Tutorial - Introduction - Copyright

Chapter 1. Introduction - screen 1 of 3

http://www.helio.org/products/smil/tutorial/chapter1/copyright.html [4/7/2001 20:16:55]

The SMIL Tutorial - Introduction - Navigation

Chapter 1. Introduction - screen 2 of 3

http://www.helio.org/products/smil/tutorial/chapter1/1.html [4/7/2001 20:16:56]

The SMIL Tutorial - Introduction - Coming next...

Chapter 1. Introduction - screen 3 of 3

http://www.helio.org/products/smil/tutorial/chapter1/2.html [4/7/2001 20:16:57]

The SMIL Tutorial - Chapter 2. What is SMIL?

What is SMIL? - Cover

Chapter 2. What is SMIL?

The SMIL Tutorial is HELIO 1998-1999 all rights reserved

http://www.helio.org/products/smil/tutorial/chapter2/index.html [4/7/2001 20:16:58]

The SMIL Tutorial - What is SMIL? - What does SMIL mean?

Chapter 2. What is SMIL? - screen 1 of 7

What does SMIL mean?

http://www.helio.org/products/smil/tutorial/chapter2/1.html [4/7/2001 20:16:59]

Chapter 2. What is SMIL? - screen 2 of 7

What can you do with SMIL?