Icône de l'INRIA
Bandeau INRIA
Bandeau INRIA
Image de fond colorée Bandeau INRIA

SMIL et LimSee2

Romain Deltour, INRIA
romain.deltour@inrialpes.fr

Grenoble, 20 Octobre 2005

Introduction

Acteurs

Principes du Web

Le multimédia sur le Web

Motivations :

Besoin d'un langage Web commun.

Une réponse : SMIL

SMIL : Synchronized Multimedia Integration Language

SMIL est pour le multimédia ce que HTML est pour le texte

SMIL par l'exemple

Rappels sur XML

XML - Généralités

XML : eXtensible Markup Language

XML - Un langage de balisage

Le contenu est structurés en éléments typés qualifiés par des attributs avec des valeurs :

      <liste lang="fr">
         <item>Des balises décrivent la structure</item>
         <item>Structure arborescente</item>
      </liste>

XML - Un langage pour créer des langages

XML ne fixe que la syntaxe, pas les éléments et attributs.

On peut créer des langages de balisage en définissant:

=> Des langages adaptés au type d'information à décrire

Exemples : XHTML, MathML, SVG, SMIL, etc.

XML - Internationalisation

XML - Document "bien formé"

Bien formé (well-formed) : respecte les règles de la syntaxe XML

XML - Type de document et DTD

Un language XML peut être typé par une DTD : Document Type Definition

Exemple :

  <!ELEMENT memo    (to, from, date, subject?, body) >
  <!ATTLIST memo security (public | member | team) 'public'
                 status   (draft | finished) #REQUIRED >
  <!ELEMENT to      (#PCDATA) >

  <!ELEMENT from    (#PCDATA) >
  <!ELEMENT date    (#PCDATA) >
  <!ELEMENT subject (#PCDATA) >
  <!ELEMENT body    (p+) >
  <!ELEMENT p       (#PCDATA | em)* >
  <!ELEMENT em      (#PCDATA) >
    

XML - Document "valide"

SMIL : Synchronized Multimedia Integration Language

SMIL - Histoire

Développement de SMIL au W3C

Un format ouvert défini conjointement par les principaux acteurs du domaine :

SMIL - Fonctionalités

SMIL assure 4 grandes fonctions :

SMIL - Architecture (1)

SMIL 2.0 est constitué de 45 modules répartis en 10 groupes :

  1. Timing (19 modules) : le coeur de SMIL
  2. Time Manipulations (1 module) : changement du cours du temps
  3. Animation (2 modules) : évolution temporelle des valeurs d'un attribut
  4. Content Control (4 modules) : sélection de contenu, adaptation, optimisation
  5. Layout (4 modules) : positionnement sur l'écran et sur les canaux audio
  6. Linking (3 modules) : navigation hypermédia
  7. Media Objects (7 modules) : les médias de base
  8. Meta-information (1 module) : méta-données sur le contenu
  9. Structure (1 module) : structure principale d'un document
  10. Transitions (3 modules) : fondus, effets visuels

SMIL - Architecture (2)

SMIL 2.0 est une famille de langages définis chacun par un profil

Un profil  :

Les profils SMIL :

SMIL - Structure d'un document

Un document SMIL contient deux parties (comme dans HTML) :

entête <head>
Layout

Méta-information

Transitions

corps <body>
Contenus et liens

Gestion du temps : scénario temporel, animations, transitions

SMIL - Exemple

<smil xmlns="http://www/w3.org/2000/SMIL20/Language">

  <head>
    <layout type="text/smil-basic">
      <region id="left-video" left="20" top="50" z-index="1"/>
      <region id="left-text" left="20" top="120" z-index="1"/>
      <region id="right-text" left="150" top="120" z-index="1"/>
    </layout>
  </head>

  <body>
    <par>

      <seq>
        <img src="graph" region="left-video" dur="45s"/>
        <text src="graph-text" region="left-text"/>
      </seq>

      <par>
        <a href="http://www.w3.org/People/Berners-Lee">
          <video src="tim-video" region="left-video"/>
        </a>
        <text src="tim-text" region="right-text"/>
      </par>

      <seq>
        <audio src="joe-audio"/>
        <video id="jv" src="joe-video" region="right-video"/>
      </seq>
    </par>
  </body>
</smil> 
    

SMIL - Aspect spatial

SMIL Regions

SMIL - Synchronization

Le corps du document <body> contient la structure temporelle et les médias

SMIL - Contenus

Les contenus sont

Types de contenus :

SMIL - Adaptabilité

Objectif: Fournir un contenu adapté à la plateforme cible.

Choix fondé sur :

Exemple :

  <par>
    <text .../>
    <switch>
      <par bitrate="40000">
         ...
      </par>
      <par bitrate="24000">
         ...
      </par>
      ........
    </switch>
  </par>
  <switch>
    <audio src="joe-audio-better-quality" language="fr"/>
    <audio src="joe-audio" language="en"/>
  </switch>
    

SMIL - Animations

Plusieurs éléments :

Exemple :

<img src="sources/plans/crypte.gif" region="navig_crypte">

    <set targetElement="bouton3" attributeName="backgroundColor"
         to="red"  begin="par03.begin" end="par03.end"/>
         
    <set targetElement="bouton3" attributeName="backgroundColor"
         to="white" begin="par03.end"/>
         
</img>
    

SMIL - Transitions

Transitions :

Exemple :

<transition id="wipe1" type="zigZagWipWipe" subtype="leftToRight" dur="1s"/>
<transition id="wipe2" type="veeWipe" subtype="leftToRight" dur="1s"/>

...

<seq>
  <img src="butterfly.jpg" dur="5s"... />
  <img src="eagle.jpg" dur="5s" fill="transition" transIn="wipe1" ... />
  <img src="wolf.jpg" dur="5s" fill="transition" transIn="wipe2" transOut="wipe1" ... />
</seq>
    

SMIL - Outils disponibles

Outils de présentations :

Outils d'édition (authoring) :

LimSee2

LimSee2 - Présentation

LimSee2 - Généralités

Quatre vues synchronisées

Capture d'écran de LimSee2

LimSee2 - Vue "Layout"

LimSee2 - Vue "Timing"

LimSee2 - Vue "Structure"

LimSee2 - Vue "Attributs"

LimSee2 - Autres fonctionnalités

Perspectives : LimSee3

Projet LimSee3 en cours

Première version prévue pour juin 2006 ...

Questions ?

Index des slides