You are on page 1of 114

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]

The SMIL Tutorial - Table of content

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

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

The SMIL Tutorial - Table of content

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

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

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.

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

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

The SMIL Tutorial - Index


-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]

The SMIL Tutorial - Index

-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)

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

-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

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


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

Chapter 1. Introduction - screen 2 of 3

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...

Chapter 1. Introduction - screen 3 of 3

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

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

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 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?


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

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

The SMIL Tutorial - What is SMIL? - What can you do with SMIL?

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

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

http://www.helio.org/products/smil/tutorial/chapter2/2.html [4/7/2001 20:17:00]

The SMIL Tutorial - What is SMIL? - How to write a SMIL document

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

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

http://www.helio.org/products/smil/tutorial/chapter2/3.html [4/7/2001 20:17:01]

The SMIL Tutorial - What is SMIL? - Your first SMIL document

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

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 tags --> </layout> </head> <body> <!-- media and synchronization tags --> </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

http://www.helio.org/products/smil/tutorial/chapter2/4.html [4/7/2001 20:17:02]

The SMIL Tutorial - What is SMIL? - The code in detail

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

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

http://www.helio.org/products/smil/tutorial/chapter2/5.html [4/7/2001 20:17:03]

The SMIL Tutorial - What is SMIL? - Tags can end with a slash

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

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

http://www.helio.org/products/smil/tutorial/chapter2/6.html [4/7/2001 20:17:04]

The SMIL Tutorial - What is SMIL? - Coming next...

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

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

http://www.helio.org/products/smil/tutorial/chapter2/7.html [4/7/2001 20:17:05]

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.

The SMIL Tutorial is HELIO 1998-1999 all rights reserved

http://www.helio.org/products/smil/tutorial/chapter3/index.html [4/7/2001 20:17:06]

http://www.helio.org/products/smil/tutorial/chapter2/sources/firstdocument.smil

<smil> <head> <meta name="copyright" content="Your Name" /> <layout> <!-- layout tags --> </layout> </head> <body> <!-- media and synchronization tags --> </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 tags --> </layout> </head> <body> <!-- media and synchronization tags --> </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 tags --> </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

http://www.helio.org/products/smil/tutorial/chapter3/1.html [4/7/2001 20:17:09]

The SMIL Tutorial - Layout - Window settings

Chapter 3. Layout - screen 2 of 17

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

http://www.helio.org/products/smil/tutorial/chapter3/2.html [4/7/2001 20:17:10]

The SMIL Tutorial - Layout - Your first window appears!

Chapter 3. Layout - screen 3 of 17

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

http://www.helio.org/products/smil/tutorial/chapter3/3.html [4/7/2001 20:17:11]

The SMIL Tutorial - Layout - Absolute Positioning

Chapter 3. Layout - screen 4 of 17

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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter3/4.html [4/7/2001 20:17:13]

The SMIL Tutorial - Layout - The Region

Chapter 3. Layout - screen 5 of 17

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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter3/5.html [4/7/2001 20:17:15]

The SMIL Tutorial - Layout - The <region> tag

Chapter 3. Layout - screen 6 of 17

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

http://www.helio.org/products/smil/tutorial/chapter3/6.html [4/7/2001 20:17:16]

The SMIL Tutorial - Layout - The <img> tag

Chapter 3. Layout - screen 7 of 17

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

Chapter 3. Layout - screen 8 of 17

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

Chapter 3. Layout - screen 9 of 17

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 ?

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter3/overlay.html [4/7/2001 20:17:21]

The SMIL Tutorial - Layout - z-index

Chapter 3. Layout - screen 10 of 17

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,...

Chapter 3. Layout - screen 11 of 17

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?

Chapter 3. Layout - screen 12 of 17

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

http://www.helio.org/products/smil/tutorial/chapter3/11.html [4/7/2001 20:17:25]

The SMIL Tutorial - Layout - Make your medium fill its area

Chapter 3. Layout - screen 13 of 17

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> <!-- this image is smaller than its region --> <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

Chapter 3. Layout - screen 14 of 17

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> <!-- this image is smaller than its region --> <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

Chapter 3. Layout - screen 15 of 17

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> <!-- this image is smaler than its region --> <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

Chapter 3. Layout - screen 16 of 17

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> <!-- this image is BIGGER than its region --> <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

Chapter 3. Layout - screen 17 of 17

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/17.html [4/7/2001 20:18:39]

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)...

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

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

http://www.helio.org/products/smil/tutorial/chapter7/13.html [4/7/2001 20:19:29]

The SMIL Tutorial - Examples - Relative positioning example

Chapter 8. Examples - screen 2 of 9

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)...

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter8/relative_positioning.html [4/7/2001 20:19:33]

The SMIL Tutorial - Examples - z-index example

Chapter 8. Examples - screen 3 of 9

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)...

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

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> <!-- this image is BIGGER than its region --> <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> <!-- this image is BIGGER than its region --> <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 is HELIO 1998-1999 all rights reserved

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

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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter4/1.html [4/7/2001 20:20:32]

The SMIL Tutorial - Synchronization - The vim icon during 6 seconds...

Chapter 4. Synchronization - screen 2 of 9

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

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

The SMIL Tutorial - Synchronization - Delaying a media

Chapter 4. Synchronization - screen 3 of 9

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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter4/3.html [4/7/2001 20:21:19]

The SMIL Tutorial - Synchronization - The "begin" parameter

Chapter 4. Synchronization - screen 4 of 9

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

http://www.helio.org/products/smil/tutorial/chapter4/4.html [4/7/2001 20:21:37]

The SMIL Tutorial - Synchronization - Sequence: a media... and then an other

Chapter 4. Synchronization - screen 5 of 9

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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter4/5.html [4/7/2001 20:22:02]

The SMIL Tutorial - Synchronization - The <seq> tag

Chapter 4. Synchronization - screen 6 of 9

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> <!-- the sequence starts bellow with the "seq" tag --> <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

http://www.helio.org/products/smil/tutorial/chapter4/6.html [4/7/2001 20:22:19]

The SMIL Tutorial - Synchronization - Parallel: several media in the same time

Chapter 4. Synchronization - screen 7 of 9

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

http://www.helio.org/products/smil/tutorial/chapter4/7.html [4/7/2001 20:22:24]

The SMIL Tutorial - Synchronization - The <par> tag

Chapter 4. Synchronization - screen 8 of 9

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

http://www.helio.org/products/smil/tutorial/chapter4/8.html [4/7/2001 20:22:25]

The SMIL Tutorial - Synchronization - Coming next

Chapter 4. Synchronization - screen 9 of 9

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

http://www.helio.org/products/smil/tutorial/chapter4/9.html [4/7/2001 20:22:26]

The SMIL Tutorial - Examples - Time example: duration

Chapter 8. Examples - screen 4 of 9

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)...

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter8/dur.html [4/7/2001 20:22:28]

The SMIL Tutorial - Examples - Time example: begin

Chapter 8. Examples - screen 5 of 9

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)...

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter8/begin.html [4/7/2001 20:22:29]

The SMIL Tutorial - Examples - Time example: sequence

Chapter 8. Examples - screen 6 of 9

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)...

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter8/seq.html [4/7/2001 20:22:31]

The SMIL Tutorial - Examples - Time example: parallel

Chapter 8. Examples - screen 7 of 9

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)...

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

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 is HELIO 1998-1999 all rights reserved

http://www.helio.org/products/smil/tutorial/chapter5/index.html [4/7/2001 20:22:33]

The SMIL Tutorial - Reference - <par>

Chapter 7. Reference - screen 9 of 15

<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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter7/9.html [4/7/2001 20:22:35]

The SMIL Tutorial - Reference - <seq>

Chapter 7. Reference - screen 8 of 15

<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

any media tag with no clip attribute any media tag with clip arguments a (hyperlink) par seq

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter7/8.html [4/7/2001 20:22:36]

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> <!-- head (skipped) --> <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

http://www.helio.org/products/smil/tutorial/chapter5/1.html [4/7/2001 20:22:37]

The SMIL Tutorial - Advanced Users - ... to event-based synchronization

Chapter 5. Advanced Users - screen 2 of 11

... 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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter5/2.html [4/7/2001 20:22:39]

The SMIL Tutorial - Advanced Users - The "begin" event

Chapter 5. Advanced Users - screen 3 of 11

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: <!-- if you want tag to start when another tag begins --> <tag begin="id(specifiedId)(begin)" /> <!-- if you want tag to start 3s after another tag begins --> <tag begin="id(specifiedId)(3s)" /> <!-- if you want tag to start when another tag ends --> <tag begin="id(specifiedId)(end)" /> Event syntax The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter5/3.html [4/7/2001 20:22:40]

The SMIL Tutorial - Advanced Users - The "begin" event (source)

Chapter 5. Advanced Users - screen 4 of 11

The "begin" event (source)


In our sample, the following source will make the madewithsoja.gif image begin 2s after vim32x32.gif begins. <smil> <!-- head (skipped) --> <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

http://www.helio.org/products/smil/tutorial/chapter5/4.html [4/7/2001 20:22:42]

The SMIL Tutorial - Advanced Users - Switching

Chapter 5. Advanced Users - screen 5 of 11

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

http://www.helio.org/products/smil/tutorial/chapter5/5.html [4/7/2001 20:22:43]

The SMIL Tutorial - Advanced Users - An example to understand

Chapter 5. Advanced Users - screen 6 of 11

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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter5/6.html [4/7/2001 20:22:43]

The SMIL Tutorial - Advanced Users - The <switch> tag

Chapter 5. Advanced Users - screen 7 of 11

The <switch> tag


Here is the syntax for the switch tag: <switch> <!-- child1 testAttributes1 --> <!-- child2 testAttributes2 --> <!-- child3 testAttributes3 --> </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

http://www.helio.org/products/smil/tutorial/chapter5/7.html [4/7/2001 20:22:45]

The SMIL Tutorial - Advanced Users - <switch> by the source

Chapter 5. Advanced Users - screen 8 of 11

<switch> by the source


Our example can be written as follow: <body> <switch> <!-- English only --> <par system-language="en"> <text src="you_are_english.txt" region="main_message" /> <!-- testing the screen size --> <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> <!-- testing the bitrate --> <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> <!-- French only --> <par system-language="fr"> <text src="vous_etes_francais.txt" region="main_message" /> <!-- testing the screen size --> <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> <!-- testing the bitrate --> <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> <!-- The following text is displayed for other languages --> <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

http://www.helio.org/products/smil/tutorial/chapter5/8.html (2 de 2) [4/7/2001 20:22:46]

The SMIL Tutorial - Advanced Users - Several tests in one tag

Chapter 5. Advanced Users - screen 9 of 11

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> <!-- if you are French --> <switch system-language="fr"> <!-- if your bitrate is greater than 28000 --> <text src="french_28000.txt" system-bitrate="28000" /> <!-- if your bitrate is greater than 14000 --> <text src="french_14000.txt" system-bitrate="14000" /> </switch> <!-- if you are English --> <switch system-language="en"> <!-- if your bitrate is greater than 28000 --> <text src="english_28000.txt" system-bitrate="28000" /> <!-- if your bitrate is greater than 14000 --> <text src="english_14000.txt" system-bitrate="14000" /> </switch> </switch> </body>

http://www.helio.org/products/smil/tutorial/chapter5/9.html (1 de 2) [4/7/2001 20:22:48]

The SMIL Tutorial - Advanced Users - Several tests in one tag

<body> <switch> <!-- French *AND* if a bitrate greater than 28000 --> <text src="french_14000.txt" system-language="fr" system-bitrate="28000" /> <!-- French *AND* if a bitrate greater than 28000 --> <text src="french_28000.txt" system-language="fr" system-bitrate="14000" /> <!-- English *AND* if a bitrate greater than 28000 --> <text src="english_14000.txt" system-language="en" system-bitrate="28000" /> <!-- English *AND* if a bitrate greater than 14000 --> <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

http://www.helio.org/products/smil/tutorial/chapter5/9.html (2 de 2) [4/7/2001 20:22:48]

The SMIL Tutorial - Advanced Users - What can be tested?

Chapter 5. Advanced Users - screen 10 of 11

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")
http://www.helio.org/products/smil/tutorial/chapter5/10.html (1 de 2) [4/7/2001 20:22:50]

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

http://www.helio.org/products/smil/tutorial/chapter5/10.html (2 de 2) [4/7/2001 20:22:50]

The SMIL Tutorial - Advanced Users - Coming next

Chapter 5. Advanced Users - screen 11 of 11

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

http://www.helio.org/products/smil/tutorial/chapter5/11.html [4/7/2001 20:22:51]

The SMIL Tutorial - Reference - <switch>

Chapter 7. Reference - screen 10 of 15

<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

any media tag with no clip attribute any media tag with clip arguments a (hyperlink) par seq

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter7/10.html [4/7/2001 20:22:52]

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

The SMIL Tutorial is HELIO 1998-1999 all rights reserved

http://www.helio.org/products/smil/tutorial/chapter6/index.html [4/7/2001 20:22:53]

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

Chapter 8. Examples - screen 8 of 9

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)...

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter8/begin_event.html [4/7/2001 20:22:56]

The SMIL Tutorial - Examples - Advanced: switch

Chapter 8. Examples - screen 9 of 9

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)...

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

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

http://www.helio.org/products/smil/tutorial/chapter6/1.html [4/7/2001 20:22:58]

The SMIL Tutorial - Tools - Real Player window

Chapter 6. Tools - screen 2 of 5

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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter6/2.html [4/7/2001 20:23:01]

The SMIL Tutorial - Tools - SOJA (Helio)

Chapter 6. Tools - screen 3 of 5

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

http://www.helio.org/products/smil/tutorial/chapter6/3.html [4/7/2001 20:23:02]

The SMIL Tutorial - Tools - GRINS (CWI)

Chapter 6. Tools - screen 4 of 5

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

http://www.helio.org/products/smil/tutorial/chapter6/4.html [4/7/2001 20:23:03]

The SMIL Tutorial - Tools - Coming next

Chapter 6. Tools - screen 5 of 5

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

http://www.helio.org/products/smil/tutorial/chapter6/5.html [4/7/2001 20:23:03]

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 is HELIO 1998-1999 all rights reserved

http://www.helio.org/products/smil/tutorial/chapter7/index.html [4/7/2001 20:23:05]

The SMIL Tutorial - Reference - <smil>

Chapter 7. Reference - screen 1 of 15

<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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter7/1.html [4/7/2001 20:23:06]

The SMIL Tutorial - Reference - <head>

Chapter 7. Reference - screen 2 of 15

<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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter7/2.html [4/7/2001 20:23:07]

The SMIL Tutorial - Reference - <meta>

Chapter 7. Reference - screen 3 of 15

<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

http://www.helio.org/products/smil/tutorial/chapter7/3.html [4/7/2001 20:23:08]

The SMIL Tutorial - Reference - <layout>

Chapter 7. Reference - screen 4 of 15

<layout>
<layout> is used to define the layout on the screen. It can only be found under <head>. <layout type="string"> </layout> <!-- default is: --> <layout type="text/smil-basic-layout" /> </layout> Possible children: q root-layout
q

region

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter7/4.html [4/7/2001 20:23:09]

The SMIL Tutorial - Reference - <root-layout>

Chapter 7. Reference - screen 5 of 15

<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

http://www.helio.org/products/smil/tutorial/chapter7/5.html [4/7/2001 20:23:10]

The SMIL Tutorial - Reference - <region>

Chapter 7. Reference - screen 6 of 15

<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

http://www.helio.org/products/smil/tutorial/chapter7/6.html [4/7/2001 20:23:11]

The SMIL Tutorial - Reference - <body>

Chapter 7. Reference - screen 7 of 15

<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

any media tag with no clip attribute any media tag with clip arguments a (hyperlink) par seq

The SMIL Tutorial is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter7/7.html [4/7/2001 20:23:13]

The SMIL Tutorial - Reference - <a>

Chapter 7. Reference - screen 11 of 15

<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"> <!-- sons: clicking on them will lead the user to the specified 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 is HELIO 1998-1999 all rights reserved Comments about this page

http://www.helio.org/products/smil/tutorial/chapter7/11.html [4/7/2001 20:23:14]

The SMIL Tutorial - Reference - <anchor>

Chapter 7. Reference - screen 12 of 15

<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

http://www.helio.org/products/smil/tutorial/chapter7/12.html [4/7/2001 20:23:15]

The SMIL Tutorial - Reference - Media tags with clip attributes: <video>, <audio>,...

Chapter 7. Reference - screen 14 of 15

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

http://www.helio.org/products/smil/tutorial/chapter7/14.html [4/7/2001 20:23:16]

The SMIL Tutorial - Reference - The End

Chapter 7. Reference - screen 15 of 15

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.

The SMIL Tutorial is HELIO 1998-1999 all rights reserved

http://www.helio.org/products/smil/tutorial/chapter8/index.html [4/7/2001 20:23:19]

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]