Tecnologías
Multimedia, Curso 10/11 - Práctica 7
SMIL (Lenguaje de
Integración de Multimedia Sincronizada)
Objetivos:
Esta sesión práctica pretende
ilustrar con ejemplos la funcionalidad básica del lenguaje SMIL (Synchronized Multimedia Integration
Language o Lenguaje de Integración de Multimedia
Sincronizada).
Desarrollo:
- Descarga los archivos
de medios
de la página de material práctico de la web de
la asignatura.
- Instala también el reproductor SMIL
“Ambulant
Player”, y QuickTime,
si no estaban instalados ya previamente. Estos pueden usarse (al final)
para comparar cómo se muestran las presentaciones en relación a RealPlayer, que es el reproductor que se usará a lo
largo del desarrollo de la práctica.
Layout
elemental
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL
2.0//EN"
"http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<body>
<seq repeatCount="3">
<img
src="imagenes/image1.jpg" dur="3s" />
<img
src="imagenes/image2.jpg" dur="3s" />
</seq>
</body>
</smil>
- El ejemplo anterior no se muestra
correctamente porque al no tener layout no resulta predecible dónde
aparecerá cada elemento ni cuándo se borrará.
- Modifica el ejemplo anterior
(guardándolo como ejemplo2.smil) para que se defina un tamaño para la
ventana (root-layout) de 330x210 y fondo azul, y en
ella haya una región de 320x200 de fondo amarillo, con un margen dentro de
la ventana de 5 pixels por arriba y por la
izquierda. Modifica también los elementos img para que se muestren ambos
en esta región.
- Prueba la modificación. ¿qué pasa si
la imagen es más pequeña o más grande que la región? Modifica el ejemplo
(guardándolo como ejemplo3.smil) para que al menos ambas imágenes queden
centradas en la región en que aparecen, aunque alguna pueda seguir
mostrándose incompleta. Haz pruebas poniendo sólo el atributo regPoint o
sólo el regAlign,
para comprender cómo interaccionan estos dos atributos.
- Añade un atributo fit a ambos
elementos img
y prueba diferentes valores para este atributo siguiendo los apuntes de
teoría. Observa con el reproductor cómo se muestra cada uno. Guarda la
versión que más te guste con el nombre ejemplo4.smil
- Escribe otro ejemplo llamado ejemplo-videos.smil,
análogo al que has venido desarrollando hasta ahora, sólo que en lugar de
alternar entre dos imágenes, lo hace entre dos vídeos, llamados video1.rm y video2.rm
(ambos en la carpeta videos). Haz que en este caso la ventana principal
sea de 250x190 y la región de 240x180, con márgenes de 5 pixels.
Temporización elemental
- Modifica ejemplo4.smil para que a la vez
que se muestran las imágenes, se escuche de fondo la música del archivo “Fille.mp3”
que tienes en la carpeta “audios”. Guárdalo como ejemplo5.smil
- Modifica ejemplo5.smil para que comience
oyéndose sólo la música durante 5 segundos, sin imágenes, y después
comience el bucle que repite las imágenes. La reproducción de música debe
parar a los 25 segundos de haber comenzado. Guárdalo como ejemplo6.smil
Interacción
elemental
- Vuelve al ejemplo4.smil y modifícalo para
que la primera imagen sea interactiva, de modo que cuando el usuario clique sobre ella, se salte a la presentación ejemplo-videos.smil
que has escrito antes. Guarda esta versión como ejemplo7.smil y comprueba que
funciona.
- Modifica el ejemplo anterior (y
guárdalo como ejemplo8.smil) de modo que el área interactiva dentro de
la primera región no sea la imágen completa,
sino solo la zona en la que aparece el smiley. (la imagen completa es de
200x200). Comprueba en el reproductor que pinchando fuera del área
circular no ocurre nada.
Extensiones
propietarias de RealPlayer
- Examina el fichero noticias.rt
en la carpeta textos. Como ves
es XML, pero no es SMIL. Se trata de una extensión de RealPlayer
denominada “RealText” que permite mostrar texto
temporizado e incluso animado, como un elemento más de una presentación
SMIL.
- Modifica el ejemplo5.smil (guardándolo como
ejemplo9.smil)
que mostraba dos imágenes con música de fondo para que también muestre el
texto del fichero anterior. Para ello debes añadir una región debajo de la
usada para las imágenes (probablemente debas aumentar el alto del root-layout para hacerle sitio) y añadir
en paralelo con la música un elemento textarea cuyo src sea el
fichero noticias.rt
- Examina el fichero ejemplo-imagenes.rp.
Como ves es XML, pero no es SMIL. Se trata de una extensión de RealPlayer, denominada “RealPic”
que permite hacer “pases de diapositivas”, mostrando una secuencia de
imágenes en una misma región y con diferentes efectos de transiciones
entre las mismas.
- Escribe un pequeño ejemplo (ejemplo10.smil)
que incluya este objeto (en un elemento img) en paralelo a la música de
fondo usada antes. Puedes partir de ejemplo5.smil y sustituir la secuencia de imágenes por
un único tag img cuyo src apunte al fichero ejemplo-imagenes.rp
- Combina ejemplo9.smil y ejemplo10.smil
(guardándo el resultado como ejmplo11.smil),
creando una presentación que use el pase de diapositivas RealPic y la zona de texto RealText.
Más
experimentos
ü
El vídeo videos\YouTube-subtitulos.mp4
ü
Los datos del fichero de textos\YouTube-Subtitulos.srt, que deberías convertir al formato RealText (aquí es donde el script puede serte útil, aunque
también puede hacerse “a mano”)
ü Puedes inspirarte
en el ejemplo smil_real-examples/smil/videosubtitles
- Descarga en el sitio web de la asignatura uno de los documentos SMIL
correspondiente a uno de los enlaces a lecciones on-line del material de teoría. Partiendo de la
presentación powerpoint con audio del trabajo
teórico de la asignatura y guardando previamente las diapositivas como
imágenes png, sincroniza las mismas con las
locuciones correspondientes modificando convenientemente el documento SMIL
anterior.