Sistemi Ipermediali SMIL 2.0 Obiettivi di SMIL SMIL

Transcript

Obiettivi di SMIL
Synchronized Multimedia Integration Language è un linguaggio per
l’integrazione di diversi media multimediali.
Permette di creare documenti multimediali in cui:
•
Sistemi Ipermediali
SMIL 2.0
•
•
•
diversi oggetti distribuiti nel web sono sincronizzati tra loro,
l’utente può interagire con essi in modo coerente,
il layout è definito in modo preciso,
l’integrazione è realizzata attraverso un formato testuale, in particolare un
linguaggio XML.
Ombretta Gaggi
Università Ca’ Foscari Venezia
Sistemi Ipermediali - 2
SMIL - Cronologia
Cosa non è SMIL?
15 Giugno 1998: vengono pubblicate le specifiche di SMIL 1.0 come W3C
recommendation.
Non è un nuovo protocollo per la trasmissione di media.
22 Giugno 2000: viene pubblicato un working draft con le specifiche di
SMIL-Boston.
Non è un’alternativa a Flash anche se permette la formulazione di
animazioni.
1 Marzo 2001: vengono pubblicate le specifiche di SMIL 2.0 come W3C
working draft.
Non è uno strumento di authoring di media.
7 Agosto 2001: Le specifiche di SMIL 2.0 diventano una W3C
recommendation.
Febbraio 2004: Profilo per gli MMS
SMIL vs HTML
SMIL permette di… (SMIL 1.0)
HTML permette l’integrazione di diversi oggetti in una pagina web.
disporre degli oggetti multimediali in punti precisi dello schermo
Come HTML, SMIL non permette la creazione di nessun tipo di media
(ma diversamente da HTML, anche i file di testo vengono creati
esternamente).
descrivere il comportamento temporale dei diversi elementi di una
presentazione ipermediale
Diversamente ad HTML, gestisce in modo completo l’utilizzo di media
continui:
•
•
Sincronizzazione,
Interazione…
adeguare la riproduzione di una presentazione secondo alcuni parametri
relativi alla stazione di lavoro dell’utente
•
lingua, bit-rate, risorse disponibili…
interagire con link ad altre presentazioni o parti di esse
SMIL permette di… (SMIL 2.0)
SMIL Profiles
utilizzare più finestre indipendenti,
Sono un tentativo di far interagire diversi player e browser,
modificare la riproduzione “on-the-fly” sulla base di alcuni eventi
scatenati dall’utente
modificare alcuni parametri relativi alle caratteristiche temporali dei
media (ad es. la velocità)
inserire animazioni nella timeline della presentazione
inserire degli effetti di transizione tra un oggetto e l’altro
•
•
una presentazione deve poter essere eseguita da più player (attualmente
questo non è in generale vero)
su dispositivi diversi → PDAs, lettori MP3,…
Tre language profile sono stati definiti:
•
•
•
•
SMIL 2.0 Language Profile
SMIL 2.0 Basic Language Profile
XHMLT+SMIL 2.0 Language Profile
MMS SMIL
Player e browser
Sistemi autore
Player: strumento per la riproduzione
di media continui.
Come linguaggio di markup, SMIL può essere editato con un semplice
editor di testo, ad esempio WordPad.
Browser: ha come scopo principale la
navigazione tra le pagine.
Gli strumenti di authoring specifici offrono delle interfacce grafiche che
esplicitano meglio l’andamento del tempo.
RealOne (per SMIL 1 è sufficiente
RealPlayer)
Alcuni esempi:
QuickTime 5.0 (?)
•
GRiNS
Veon V-Active Editor
RealSlideShow
•
maggiori dettagli sul sito http://www.w3.org/AudioVideo/
•
•
Internet Explorer 5.5 (XHTML+TIME) e
successivi
GRiNS
SOJA
Ambulant Player
gfdsg
Struttura di un documento SMIL
SMIL come linguaggio XML
SMIL è un linguaggio di markup con una struttura molto simile ad un
documento HTML ma
<smil>
<head>

<layout>

</layout>
</head>
<body>

</body>
•
•
•
•
i tag sono case sensitive,
deve sempre esserci un tag di chiusura,
i tag devono essere aperti e chiusi nell’ordine corretto,
gli attributi vanno riportati tra “virgolette”.
I browser HTML cercano di visualizzare al meglio codice non corretto.
I player SMIL non eseguono codice non corretto.
</smil>
La sezione Head
Contiene informazioni relative al contenuto della presentazione (tag
meta),
la disposizione spaziale (layout) dei media:
•
•
la definizione delle finestre e
delle regioni della presentazione in cui sono visualizzati i media,
la definizione delle transizioni utilizzate nella presentazione.
La sezione Head: codice
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<meta name="title" content="…" />
<meta name="author" content="…" />
<meta name="abstract" content="..." />
<layout>
<root-layout width="500" height="400"
backgroundColor="white" />
<region id="region" …/>
….
</layout>
<transition id="upSlide" type="slideWipe"
subtype="fromBottom" />
</head>
Layout
Posizionamento delle regioni
Il tag layout definisce la disposizione spaziale della presentazione: è
possibile definirvi:
Le regioni sono porzioni dello schermo entro cui inserire i media della
presentazione. Vanno definite all’interno di una finestra o di un’altra regione.
•
•
•
finestre,
regioni,
punti di ancoraggio.
La finestra principale è definita come <root-layout>.
Le altre finestre sono definite come <topLayout>.
→posizionamento
→volume
Si considera come origine l’angolo superiore sinistro della finestra principale, e
si calcola la distanza in numero di pixel.
Origine
Top
Attributi: height, width, backgroundColor [background-color], open, close.
Left
Height
Width
Posizionamento relativo e z-index
<head>
Un esempio di definizione di regione
<head>
<layout>
<root-layout width= “500” height=“400”
background-color=“white” />
<layout>
<root-layout width= “300” height=“200”
backgroundColor=“white” />
<region id= “rettangolo” left=“33%” top=“50%”
width=“50” height= “70” z-index=“1” />
<region id= “cerchio” left=“25%” top=“25%”
width=“100” height= “100” z-index=“2” />
</layout>
</head>
<body> <par>
<region id= “icona” left=“25” top=“50”
width=“450” height= “313” />
</layout>
</head>
<body>
<seq dur="10s">
<img src=“river_01.jpg” alt=“Immagine”
<img src=“rettangolo.gif” region=“rettangolo” />
<img src=“cerchio.gif” region=“cerchio” />
</par></body>
</smil>
L’attributo Fit
region=“icona” />
</seq>
</body>
</smil>
Punti di ancoraggio
Sono punti definiti nello schermo della presentazione, utilizzati per
allineare gli oggetti o posizionarli all’interno di regioni più grandi.
L’allineamento avviene con l’angolo superiore sinistro dell’oggetto.
Sono definiti in modo relativo:
<layout>
<regPoint id=“10dentro” top=“10” left=“10” />
<region id=“uno” …/>
<region id=“due” …/>
</layout>
Attributi per il layout
La sezione Body
Contiene la descrizione dei contenuti della presentazione (path, regione
occupata…),
backgroundColor
regionName
bottom, left, right, top
showBackground
close, open
soundLevel
le descrizione del comportamento temporale della presentazione
multimediale,
fit
z-index
le modalità di interazione con l’utente,
id
le animazioni definite nella presentazione (SMIL 2!).
height, width
regPoint
regAlign
region
La sezione Body: codice
Riproduzione parallela
Il tag <par> permette la riproduzione parallela di più oggetti.
<body>
Tramite degli attributi è possibile cambiare l’inizio e la fine della riproduzione
dei media.
<seq>
<par dur="00:12.0" >
<img src="pour.gif" transIn="rightSlide"
region="rp" fill="hold" />
<audio src="audio/guitar.rm" dur="10s"/>
</par>
<par>
<img src="heating.gif" transIn="rightSlide" region="vid" />
<par> 
<audio src=“colonna_sonora” />
<audio src=“commento_parlato” />
</par>
<par> 
<audio src=“colonna_sonora” dur=“15s” />
<audio src=“commento_parlato” begin=“10s”/>
</par>
<audio src="audio/piano.rm" begin="2s"/>
</par>
</seq>
</body>
Riproduzione in sequenza
Il tag <excl>
Il tag <seq> permette la riproduzione sequenziale di più oggetti.
Il tag <excl> permette la scelta tra più elementi: solo uno, tra i suoi
figli, può essere attivo in un certo istante.
La sincronizzazione si realizza annidando i tag <seq> e <par>.
È simile a <seq> ma non impone un ordine sequenziale.
<seq> 
<audio src=“primo_comento” />
<audio src=“secondo_commento” />
</seq>
I figli in genere vengono attivati da un’interazione dell’utente.
Se un figlio inizia la sua riproduzione mentre un altro è attivo,
quest’ultimo viene terminato.
Classi di priorità tra i media
Attributi per gestire la priorità
È possibile dare maggiore o minore priorità a un media su di un altro
tramite il tag <priorityClass>.
<excl>
È usato insieme al tag <excl> per gestire il comportamento degli altri
elementi quando ne viene scelto uno.
<excl>
<priorityClass peers=“pause” >
<audio id=“primo” src=“guitar.wav” />
<audio id=“secondo” src=“piano.wav” />
</priorityClass>
</excl>
<priorityClass id=“first”>
<audio id=“primo”
src=“guitar.wav” />
<audio id=“secondo”
src=“piano.wav” />
</priorityClass>
<priorityClass id=“second”
higher=“pause” >
<audio id=“terzo”
src=“violino.wav” />
</priorityClass>
</excl>
<excl>
<priorityClass id=“first”>
<audio id=“primo” src=“guitar.wav”
lower=“defer” />
<audio id=“secondo” src=“piano.wav”
lower=“never” />
</priorityClass>
<priorityClass id=“second”>
<audio id=“terzo”
src=“violino.wav” />
</priorityClass>
</excl>
Attributi per gestire la priorità: valori
La sincronizzazione dei media
peers gestisce la sincronizzazione tra oggetti con la stessa priorità,
La gestione della sincronizzazione avviene tramite 3 tag: par, seq, e
excl e
higher gestisce il comportamento di un oggetto in relazione
all’attivazione di un oggetto con priorità maggiore,
lower gestisce il comportamento di oggetti con priorità minore.
tutte le informazioni relative alla visualizzazione degli oggetti incluse
nella definizione dei media:
•
•
•
peers
stop, pause, defer, never
higher
stop, pause
lower
defer, never
durata di un oggetto,
inizio,
fine.
L’utilizzo di questi attributi può cambiare notevolmente la disposizione
temporale.
Gli attributi begin e end
Eventi
Vengono utilizzati nella sia nella definizione dei tag <seq>, <par> e
<excl>, sia nella definizione dei media.
È possibile sincronizzare due o più oggetti sulla base del verificarsi di un
evento: per fare un riferimento ad un evento particolare lo costruisco
indicando:
Valori ammessi:
•
begin=“2s” (RealPlayer) begin=“2sec” (QuickTime)
end=“00:00:25.0”
begin=“+5s” 5 secondi dopo l’elemento padre
begin=“id_oggetto.begin+5s” 5 secondi dopo l’elemento id_oggetto
end=“id_oggetto.end-5s” 5 secondi prima che l’elemento id_oggetto finisca
end=“accesskey(s)” quando l’utente digita s
•
E’ ammissibile il valore “id_oggetto.click-5s”?
•
•
•
•
•
•
l’id dell’oggetto che lo ha subito + “.” + l’evento stesso.
Si possono combinare gli eventi:
<par end=“bottone.click; commento_parlato.end”>
<audio src=“colonna_sonora.wav” id=“musica”/>
<audio src=“commento_parlato.wav” id=“commento”/>
<img src=“stop.jpg” id=“bottone”/>
</par>
Utilizzo degli attributi
Durata della visualizzazione
dur → durata dell’oggetto
<par>
<img src=“im1.jpg” dur=“15s”/>
<img src=“im2.jpg” begin=“5s” dur=“15s”/>
</par>
min, max
repeat, repeatCount
•
valori: (1.0..indefinite), sono possibili anche valori decimali
repeatDur
•
valori: intervallo di tempo durante il quale il media ripete la sua riproduzione
<seq>
<audio src=“musica.wav” id=“musica”/>
<audio src=“commento_parlato.wav” id=“commento”
begin=“musica.begin+5s” />
<img src=“stop.jpg” id=“bottone” begin=“commento.begin+5s” />
</seq>
Dopo la visualizzazione: l’attributo fill
L’attributo endsync
L’attributo fill (o fillDefault) stabilisce il comportamento dell’oggetto
una volta terminata la sua riproduzione.
Era usato in SMIL 1.0 per terminare contemporaneamente un gruppo di oggetti.
•
valori:
9 remove → l’oggetto viene rimosso.
9 freeze → l’oggetto rimane visualizzato.
9 hold → l’oggetto rimane visualizzato fino alla terminazione dell’elemento
padre.
9 transition → l’oggetto rimane visualizzato fino alla terminazione della
transizione.
9 auto → il valore di fill dipende da altri valori.
9 default → il valore di fill dipende dal valore dell’attributo fillDefault
dell’elemento padre.
9 inherit → fillDefault dipende dallo stesso valore nel padre.
<par endsync=“id(video)” >
<video id=“video” src=“video.mpeg” />
<img src=“im1.jpg”/>
</par>
<par end=“video.end” >
<video id=“video” src=“video.mpeg” />
<img src=“im1.jpg”/>
</par>
valori: first, last, all, media, un id.
Sincronizzazione fine
Realizzare la sincronizzazione fine
Fino ad ora ci siamo occupati di sincronizzazione per punti o ad eventi.
5 attributi permettono di realizzare la sincronizzazione fine:
La sincronizzazione fine si occupa di sincronizzare due media durante la
loro riproduzione
•
Ex: il video di uno speaker e il relativo audio.
•
syncBehavior, syncBehaviorDefault → realizzano la sincronizzazione fine
9 canSlip, locked, independent, default, inherit,
•
syncTolerance, syncToleranceDefault → intervallo di tolleranza,
•
syncMaster → valore booleano che indica il media a cui gli altri devono
sincronizzarsi. È ignorato se l’elemento è in pausa.
La definizione dei media
Attributi per la descrizione del contenuto
Contiene tutte le informazioni relative al media: il tipo, il path del file
sorgente, le informazioni temporali (offset),…
abstract → viene usato per auto-generare un indice. In SMIL 2 è
preferibile l’uso dei tag meta.
Ogni oggetto è definito da un media diverso a seconda del suo tipo ma il
player determina il suo tipo reale dal tipo MIME.
alt → visualizzato quando un certo media non può essere riprodotto.
•
•
•
•
<animation>
<audio>
<img>
<ref>
•
•
•
•
•
<text>
<textstream>
<video>
<brush>
<param>
longdesc → URI che punta ad una descrizione più particolareggiata del
media specifico
author, copyright, title
src → path del file sorgente
type → contiene il tipo MIME di un media
color → solo per il tag brush
•
i colori vengono costruiti secondo lo standard RGB (“#FF0000”).
Attributi per le proprietà temporali
clip-begin/clipBegin, clip-end/clipEnd → spostano l’inizio/la fine della
riproduzione relativamente alla riproduzione del file sorgente.
<par>
<audio src=“audio.jpg” clipBegin=“5s” />
Altri attributi
sensitivity → con valori opaque, transparent o una percentuale indica
quanto l’oggetto è sensibile all’interazione con l’utente.
name, value e valuetype → usati con il tag param indicano
rispettivamente il nome, il valore e il tipo del valore del parametro.
</par>
0
tempo
Le transizioni
Definizione delle transizioni (1)
Le transizioni sono filtri o effetti che rendono meno netto il passaggio
da un media ad un altro.
Sono definite in due modi: con il tag <transition> nella sezione head e
utilizzate nella definizione dei media. In questo modo possono essere
riutilizzate.
Un media può avere una transizione di entrata e una transizione di
uscita.
Le transizioni non modificano la durata degli oggetti.
<head>
Per creare un effetto devo conoscere tre dati:
</head>
...
<body>
<par dur="5s" >
•
•
•
il media iniziale (sorgente o background),
il media finale (destinazione),
la progressione della transizione (tipo, durata…).
<transition id="fade_1" dur="1s" type="fade" />
<img id=“img_1" transIn="fade_1" …/>
<img id=“img_2" transOut="fade_1" …/>
</par>
</body>
Definizione delle transizioni (2)
Tipo di transizione
Con il tag <transitionFilter> direttamente nella sezione body,
all’interno della definizione dei media. In questo caso la transizione è
valida solo per quel media.
L’effetto risultante dalla transizione è ottenuto combinando i valori di
due attributi:
•
•
<body>
<par dur="5s" >
<img id="m_1a" …>
type indica un insieme di transizioni,
subtype indica un effetto particolare e può essere omesso.
<transitionFilter type=“barWipe” mode=“in” />
barWipe
boxWipe
veeWipe
</img>
</par>
</body>
InlineTransitions: si adattano maggiormente al media.
http://www.w3.org/TR/smil20/smil-transitions.html
Durata della transizione
Progressione
È definita dall’attributo dur=“Ns”. Se transIn inizia con il media e dura
N secondi, se transOut inizia N secondi prima della fine del media e
termina con lui.
Alcuni attributi possono variare la progressione e la visualizzazione di
una transizione:
Il tag transitionFilter può essere utilizzato per definire transizioni
durante la riproduzione di un media, utilizzando gli attributi begin e
end.
Un effetto definito con il tag transitionFilter può essere ripetuto con gli
attributi repeatCount o repeatDur.
•
•
•
•
•
calcMode
values
direction
endProgress, startProgress, to, from
horzRepeat, vertRepeat
Attenzione: non tutti i player implementano tutte le
caratteristiche delle transizioni.
Le animazioni
Esempi
In SMIL è possibile creare delle animazioni che:
<layout>
•
•
•
•
muovono un oggetto,
ne modificano le dimensioni,
cambiano un colore o
cambiano il valore di un parametro in modo dinamico,
attraverso i tag:
•
•
•
•
<root-layout width="600“
<img id="m_15a" top="53“ left="100" />
height="400" />
<animateMotion targetElement="m_15a“
<region id="region_one" z-index="2" />
<region id="region_2" z-index="3"/>
</layout>
animate,
animateMotion,
animateColor,
set.
<par>
…
<par>
<img id="m_1a" region="region_2" />
<set targetElement="region_2"
attributeName="z-index"
to="1" begin="3s" dur="4s" />
to="100,200" dur="6s" />
</par>
<par>
<img id="m_15a" region="region_one" />
<animateColor targetElement="region_one"
attributeName="backgroundColor"
begin="2s" values="black;red;
green;black" dur="8s" />
</par>
</par>
Attributi per le animazioni
targetElement
media a cui si applica l’animazione
attributeName
attributo a cui si applica l’animazione
from/to
valore di partenza/fine dell’animazione
by
in alternativa a to indica l’offset
values
valori utilizzati nell’animazione
calcMode
indica l’interpolazione dell’animazione
accumulate/
additive
indicano la modalità di progressione dell’animazione
path
percorso del movimento
keytimes
controlla la velocità del movimento
keysplines
controlla il variare della velocità del movimento
keytimes
È usato con i tag animate, animateMotion e animateColor, e definisce la
velocità dell’animazione in certi intervalli.
<smil:par begin="inizio.click" dur="10s">
<smil:animateMotion begin="0" dur="6" calcMode="linear"
targetElement="auto” values="0,0;200,0;300,0"
keyTimes="0;.25;1" />
</smil:par>
<div style="top:0;left:0;width:50“ id="auto“ >
<img id="auto" src="media/auto.jpg" />
</div>
keySplines
Hyperlink
È usato con i tag animate, animateMotion e animateColor, e definisce il
variare graduale della velocità dell’animazione in certi intervalli
secondo una curva di Bezier.
SMIL supporta link unidirezionali molto simili a quelli offerti dal
linguaggio HTML.
Richiedono calcMode = “spline”.
Di un link si definisce:
•
•
•
la sorgente,
la destinazione,
il comportamento della sorgente e della destinazione del link.
<par id=“text_and_video” >
<video src=“file_video” region=“video” />
<text src=“file_testo” region=“testo” />
</par>
<a href=“presentazione.smil#text_and_video” show=“pause”>
<video src=”altro_file_video" region=“altra_regione”/>
</a>
http://www.w3.org/TR/smil-animation/
Definizione degli hyperlink
Il tag switch
<a> contiene la sorgente del link e definisce la destinazione
nell’attributo href
permette di regolare la riproduzione della presentazione sulla base di alcune
informazioni relative all’utente
<area> descrive la sorgente di un link come una porzione di un media di
forma shape e delimitata dalle coordinate coord.
può essere inserito sia nella sezione layout che nella sezione body
show, sourcePlaystate e sourceLevel definiscono lo stato della sorgente.
<switch>
<region id=“caption" systemAudioDesc=“on" />
</switch>
<switch>
<audio src="audio_migliore" system-bitrate="16000" />
<audio src=”audio_peggiore" system-bitrate="8000" />
</switch>
<switch>
<audio src=”audio_italiano" system-language=”it"/>
<audio src=”audio_inglese" system-language="en"/>
</switch>
destinationPlaystate e destinationLevel definiscono lo stato della
destinazione.
Cosa si può testare?
Un esempio in SMIL 1.0
la lingua,
il bit-rate,
la potenza di calcolo della CPU,
il sistema operativo,
la dimensione e la profondità dello schermo,
alcune scelte fatte dall’utente:
•
•
•
caption o overdub,
descrizioni audio,
sottotitoli…
quali tipi MIME l’utente è in grado di riprodurre.
Definizione delle regioni
Sincronizzazione: l’
l’indice e la regione video
<head>
<par id=“text_and_video” >
<layout>
<text src="toc.rt" region="toc" />
<root-layout height="425" width="625” background-color="black"/>
<seq>
<region id="title" left="5" top="150" width="400" height="200"

z- index="1"/>
<region id="full" left="0" top="0" height="425" width="450"
background-color="#602030"/>

</seq>
</par>
<region id="video" left="260" top="240" height="120”
<seq>
<text src="title.rt" region="title" dur="20s“>
<par>
width="160" z-index="2"/>
<audio src="map_narration.rm"/>
<region id="toc" left="450" top="0" height="425"
<img src="map.rp" region="full"
fill="freeze"/>
width="175"/>
</layout>
</par>
</head>

</seq>
Video Slide Show
Come inserire un puntatore ad un file SMIL
Una presentazione in cui il codice SMIL è integrato in un file HTML, si
collega creando un normale link ad una pagina HTML.
<par>
<switch>
<img src="slideshow.rp" region="full" fill="freeze"
system-bitrate="45000"/>
<img src="slideshow_low.rp" region="full" fill="freeze"
system-bitrate="20000"/>
</switch>
Un file SMIL può essere messo a disposizione su un web server o su un
RealServer:
•
•
nel primo caso è necessario creare un file RAM,
nel secondo caso il protocollo da utilizzare nel link è RSTP e si può evitare di
creare il file RAM.
<seq>
<video src="video_narration.rm" region="video" dur="27s"/>
<audio src="video_narration_audio_only.rm" clip-begin="27s"
http://webserver.com/path/file.smi
dur="53s"/>
<video src="video_narration.rm" clip-begin="80s" region="video"/>
</seq>
</par>
Limitazioni di SMIL 1.0
Un esempio di SMIL in un documento HTML
La gestione dell’interazione con l’utente è molto limitata.
Non permette la creazione di transizioni o di animazioni.
•
RealPlayer risolve questo tipo di limitazioni definendo due nuovi linguaggi:
9 RealPix per la creazione di slideshow temporizzati e
9 RealText per la creazione di textstream.
Uno schema per introdurre SMIL in HTML
<html xmlns:t ="urn:schemas-microsoft-com:time" >
<?import namespace="t" implementation="#default#time2">
Definizione degli oggetti
<t:img class="time" src="images/Villalogo.gif" id="logo" style="position:absolute;
top:150px; left:220px" width="346" height="126" />
<head>
<title>…</title>
<style>
.time {behavior: url(#default#time2);}
<div class="time" id="presents" style="position:absolute; top:200px; left:300px;
font-size:28pt; color:gray“ / > presents </div>
p { font-family:arial; color:black; font-size:10pt }
div { font-family:arial black; font-size:18pt; color:black }
<t:img class="time" src="images/anatour.gif" id="artarch“ style="position:absolute;
top:150px; eft:130px; z-index:5" width="525" height="125" />
</style>
</head>
<body>
<t:audio class="time" id="audio" src="audio/bach.asf" />
…
</body>
<span id="orange" style="position:absolute;top:230px;left:75px;
</html>
height:0px;width:350px; background-color:#FFCC66; z-index:4“ />
Temporizzazione e transizioni
<t:img begin="intro.click" dur="5" src="images/Villalogo.gif" id="logo" />
<t:transitionFilter targetElement="logo" type="fade" begin="logo.end-2"
dur="2" mode="out" from="0.0" to="1.0" calcmode="linear" />
<div class="time" begin="logo.end" dur="2" id="presents">
<t:transitionFilter begin="presents.begin" dur="1" mode="in" type="fade"/>
<t:transitionFilter begin="presents.end-1" dur="1" mode="out" type="fade"/>
presents </div>
<t:audio class="time" id="audio" src="audio/bach.asf" begin="presents.begin" />
<t:par>
<t:img class="time" id="artarch" begin="presents.end" dur="5" />
<t:transitionFilter targetElement="artarch" type="fade" begin="artarch.begin"
dur="2" mode="in" from="0.0" to="1.0" calcmode="linear" />
<t:transitionFilter targetElement="artarch" type="fade" begin="artarch.end-2"
dur="2" mode="out" from="0.0" to="1.0" calcmode="linear" />
</t:par>
Animazioni
<t:par dur="indefinite">
<span id="orange">
<t:animate targetElement="orange" attributeName="top" from="230"
to="135" begin="artarch.end-1" dur="2" fill="freeze" />
<t:animate targetElement="orange" attributeName="height" from="0"
to="240" begin="artarch.end-1" dur="2" fill="freeze" />
</span>
<span id="brown"> …</span>
<span id="yellow"> ….</span>
</t:par> <t:par>
<t:img class="time" begin="artarch.end+1" id="smlogo" />
<t:animateMotion targetElement="smlogo" values="0,0; -210,0"
calcMode="spline" keyTimes="0;1" keySplines="0 0 .35 1" fill="freeze" />
<t:img class="time" begin="artarch.end+1" id="smartarch"/>
</t:par>
Documentazione in rete su SMIL
Specifiche SMIL
•
•
http://www.w3.org/TR/smil20/
http://www.w3.org/AudioVideo/
Libro
•
T. Kennedy, M. Slowinsky, SMIL, Adding Multimedia to the Web, SAMS
Articoli
•
•
D. Bulterman, SMIL 2.0. Part 1: Overview, Concepts and Structure
D. Bulterman, Standards: SMIL 2.0. Part 2: Example and Comparisons
SMIL tutorial
•
•
http://www.empirenet.com/~joseram/ (Learn SMIL with a SMIL )
http://www.cwi.nl/~media/SMIL/Tutorial/
SMIL 1.0 in italiano
•
http://web.tiscalinet.it/dotnet/testosmile.html
HTML + SMIL
•
http://hotwired.lycos.com/webmonkey/01/24/index3a.html?tw=authoring
•
http://msdn.microsoft.com/workshop/author/behaviors/reference/time2_entry.asp

Sistemi Ipermediali SMIL 2.0 Obiettivi di SMIL SMIL

Transcript

Documenti analoghi

Le nuove tecnologie nell`insegnamento apprendimento della

la scelta “essenziale” per il comfort geldof b0186 s3 src

Immagini, mappe

OPERATIVO VOLI AZ 316 FCO PAR 07H55 10H05 AZ 329 PAR

rottama la tua vecchia scheda audio (anche non

Immagine perfetta. Surround spettacolare.

audionote - Sperimentando

guida_raccolta_differenziata.jpg (immagine JPEG, 1186 × 1018

Techsolo TC-B16: scheda audio 5.1

SCONTRO TRA TITANI