CreaTV Digital: Manual de usuario

Manual de usuario
CreaTV Digital: Herramienta para la creación de aplicaciones NCL para el
middleware GINGA de Televisión Digital Terrestre
“CreaTV Digital” es una herramienta de fácil manejo destinada a desarrolladores de
contenidos con una interface orientada a la producción de contenidos interactivos de
Televisión Digital (TVD) de manera gráfica, sin la necesidad de conocimientos detallados
de los lenguajes NCL y Lua. La herramienta permite al usuario, por medio de una interfaz
gráfica e intuitiva, realizar el contenido (programa/película junto con su aplicación
interactiva) y generar automáticamente el código NCL correspondiente para poder ser
ejecutado en el middleware Ginga. La herramienta ha sido desarrollada en el lenguaje C++
bajo la biblioteca multiplataforma Qt.
Autores:
Cardozo, Sergio Alejandro (yojajo@gmail.com)
Schwartz, Sebastián Martin (seba.schwartz@gmail.com)
Director:
Lic. Marcelo Arroyo
Co-Directora:
Lic. María Laura Tardivo
Agosto de 2011

2
Contenido
1. Introducción................................................................................................................................ 4
2. Instalación ................................................................................................................................... 4
3. Inicio del programa ..................................................................................................................... 5
3.1. Crear un proyecto nuevo .................................................................................................... 6
3.2. Abrir un proyecto ya creado ............................................................................................... 6
Área Espacial
4. Regiones...................................................................................................................................... 7
4.1. Crear Regiones .................................................................................................................... 8
4.2. Modificar Regiones.............................................................................................................. 8
4.3. Tips para crear o modificar regiones estéticamente “perfectas” ..................................... 10
4.4. Eliminar Regiones.............................................................................................................. 11
4.5. Visualizar Regiones............................................................................................................ 11
4.6. Zoom ................................................................................................................................. 12
5. Formato de la pantalla .............................................................................................................. 13
5.1. Marcar formatos de pantalla en la sección de dibujo de regiones................................... 13
5.2. Establecer relación entre las regiones y el formato de pantalla....................................... 14
6. Medias....................................................................................................................................... 15
6.1. Importando Medias........................................................................................................... 16
6.2. Asignar Medias a una región............................................................................................. 18
6.3. Eliminar Medias................................................................................................................. 19
Área Temporal
7. Listas de medias ........................................................................................................................ 20
7.1. Funciones de las listas de medias ..................................................................................... 20
7.2. Eliminar un media ............................................................................................................. 22
8. Línea de tiempo......................................................................................................................... 23
8.1. Elementos de la línea de tiempo....................................................................................... 23
8.2. Arrastrar medias a la línea de tiempo............................................................................... 25
8.3. Eliminar un media de la línea de tiempo .......................................................................... 25
9. Interactividad ............................................................................................................................ 26
9.1. Crear interactividad........................................................................................................... 26

3
9.1.1. Control remoto........................................................................................................ 28
9.2. Modificar una interactividad............................................................................................. 29
9.2.1. Modificar el botón del control remoto asignado a la interactividad ............................ 29
9.3. Eliminar una interactividad ............................................................................................... 31
10. Asignar acciones a un media................................................................................................. 31
11. Asignar propiedades a los medias......................................................................................... 33
11.1. Asignar propiedades usando la cabeza de la línea de tiempo ...................................... 34
11.2. Asignar propiedades a un media a través de la acción setear...................................... 34
12. Tips para manejar la línea de tiempo de forma rápida y cómoda ........................................ 36
13. Navegación por flechas......................................................................................................... 38
14. Generar el código NCL y Correr la aplicación en ginga ......................................................... 44

CreaTV Digital – Agosto 2011
4
1. Introducción
Este manual le permitirá aprender a utilizar todas las funcionalidades de CreaTV Digital.
Si usted quiere observar algunos ejemplos de la aplicación para tener una idea general de cómo
funciona y comprenderla mejor, mire los videos que se encuentran en
http://code.google.com/p/creatvdigital/ donde también podrá descargar ejemplos de proyectos
creados con esta herramienta para que los pueda abrir y practicar modificándolos.
2. Instalación
CreaTV Digital se ha desarrollado sobre el Sistema Operativo Ubuntu 10.10 y fue testeado sobre
las distintas versiones de Ubuntu y KUbuntu.
Para la ejecución del código fuente1
del programa es necesario realizar los siguientes pasos:
1°) Lo primero que tenemos que hacer es descargar e instalar las librerías necesarias para un
correcto funcionamiento de la herramienta CreaTv Digital. A continuación listaremos las
bibliotecas que hay que instalar y la forma de hacerlo desde una terminal:
 Librerias Qt para desarrollo
- sudo apt-get install libqt4-dev
 Librerias C++
- sudo apt-get install g++
 Librerias Phonon (para tratamiento de archivos multimedia)
- sudo apt-get install libphonon-dev
 Librerias para tratamiento de archivos de video
- sudo apt-get install libxine1-ffmpeg
- sudo apt-get install ffmpeg
2°) Luego de instalar las librerías realizaremos los siguientes 3 pasos para compilar el código
fuente y luego ejecutarlo. Para ello debemos primero ubicarnos(a través de una consola) en la
carpeta donde se encuentra el código fuente (..../CreaTVDigital/) y luego generar el Makefile
ejecutando el siguiente comando:
- qmake
1
Para descargar el código fuente ingresar a http://code.google.com/p/creatvdigital/downloads/

5
3°) Seguimos desde la consola ubicados en la carpeta donde se encuentra el código fuente
(..../CreaTVDigital/) pero en este caso vamos a compilar CreaTV Digital ejecutando el comando:
- make
4°) Por último (desde la misma carpeta donde se encuentra el codigo fuente (..../CreaTVDigital/))
ejecutamos el comando:
- ./CreaTVDigital
Es importante aclarar que una vez que se hayan hecho estos pasos, para ejecutar nuevamente la
aplicación no es necesario volver a hacer todos los pasos nuevamente sino que solo basta con
hacer el paso 4°.
3. Inicio del programa
Al ejecutar CreaTV Digital se abre la ventana principal del programa permitiéndonos solo realizar
dos acciones: la de crear un proyecto nuevo o la de abrir un proyecto ya creado. Luego de
seleccionar alguna de estas dos acciones se habilitan todas opciones del programa.
La pantalla principal del programa está dividida en dos secciones importantes. Una de ellas es el
área espacial y la otra es el área temporal.
Área Temporal
Secciones principales de la herramienta
Área Espacial

6
3.1. Crear un proyecto nuevo
Para crear un proyecto nuevo podemos hacerlo presionando el ícono o a través del menú
Archivo/Nuevo. De esta manera se abrirá una nueva ventana donde podemos ingresar los datos
del proyecto nuevo.
Crear Nuevo Proyecto
Es importante destacar que los datos del formato de la pantalla pueden ser modificados durante el
desarrollo del proyecto. De esta forma, al comenzar con un nuevo proyecto puede seleccionar la
opción no especificar y luego durante el desarrollo del proyecto tenemos la opción de seleccionar
alguna.
3.2. Abrir un proyecto ya creado
Para abrir un proyecto podemos hacerlo presionando el ícono o a través del menú
Archivo/Abrir. De esta manera se abrirá una nueva ventana donde podemos buscar el proyecto
(con extensión .ctv que son las letras de CreaTV) que ya ha sido creado con anterioridad. Una vez
encontrado hacer un clic en el botón abrir, de esta forma se cargan todos los datos del proyecto
para que pueda ser modificado, generar el código fuente o solo ejecutarlo en ginga.
Nombre del
proyecto – Este
campo es
obligatorio
Descripción –
Aquí tenemos
la opción de
ingresar una
breve
descripción
del proyecto
Indicamos la posible
resolución del
dispositivo en la que
será mostrada la
aplicación

7
Abrir un proyecto
Área Espacial
4. Regiones
Una región representa un área de la pantalla de un dispositivo donde los medias serán
visualizados.
Región
Abrir
proyecto
Proyecto seleccionado para ser abierto

8
4.1. Crear Regiones
Para crear una nueva región debemos seleccionar el ícono que se encuentra en la barra
de herramientas del área espacial, y luego en el área de dibujo hacemos un clic para crear la
región y (sin soltar el botón del mouse) lo arrastramos para dar el tamaño deseado.
Crear región
4.2. Modificar Regiones
Una forma de modificar una región es seleccionando el ícono que se encuentra en la barra
de herramientas del área espacial y luego si lo que queremos modificar es el tamaño,
seleccionamos la región que deseamos modificar para posteriormente posicionarnos sobre alguno
de sus vértices (notar que cuando estemos sobre algún sector de la región que nos permite
modificarla, el puntero del mouse cambiará indicándonos hacia qué dirección podemos
desplazarnos para cambiar su tamaño) y manteniendo el botón izquierdo del mouse presionado
arrastrar el borde de la región ampliando o reduciendo su tamaño. Si lo que queremos modificar
es la posición, seleccionar la región y manteniendo el botón izquierdo del mouse presionado
arrastrarla hacia la posición que deseamos.
1° Seleccionar botón Crear Regiones
2° Crear la región dándole
un tamaño y una posición
con el mouse

9
Redimensionar una región
Otra forma de modificar una región es a través de la tabla que contiene las propiedades de cada
región. Esta tabla está formada por tres columnas: nombre de la propiedad, el valor y tipo de
valor. El tipo de valor nos permite indicar cómo esta expresado el valor de la propiedad, es decir, si
el valor esta en pixeles o en porcentaje.
Tabla de propiedades de una región
1° Seleccionamos el ícono
en formato de flecha
2° Posicionados sobre alguno de los sectores
que nos permite modificar la región, el cursor
se transformará indicando el sentido que
podemos redimensionarla.
3° por último redimensionamos la región

10
4.3. Tips para crear o modificar regiones estéticamente “perfectas”
La región es un elemento fundamental del programa y está asociado directamente con el aspecto
estético que tendrá una aplicación al ejecutarse en ginga. Por lo tanto debemos ser cuidadosos al
momento de crear o manipular una región. Es por esto que es importante tener en cuenta los
siguientes tips:
 Usar las reglas (tanto la regla vertical como la horizontal) que posee la interface de CreaTV
Digital para ubicarnos de forma precisa en el espacio.
 Tomar como punto de referencia los cuadrados blancos y grises que se encuentran como
fondo del área crear regiones.
 Usar las líneas azules que aparecen en las reglas que nos indican los bordes de la región.
 Usar las marcas rojas que aparecen en las reglas y que “siguen” el puntero del mouse en
cada movimiento. Esto se puede usar para tomar medidas en el área espacial usando el
puntero del mouse y observando la marca en la regla.
 Cuando se necesite ingresar algún valor concreto de una propiedad de una región usar la
“tabla de propiedades” que nos permite definir regiones de forma más específica.
 Utilizar la herramienta de zoom para obtener diversas vistas de las regiones y así poder
ubicarlas en el pixel exacto.
Tips Para crear o modificar Regiones
Línea azul indicando
el borde de la región
Línea roja indicando la posición
del puntero del mouse Regla horizontal
Regla vertical Puntero del mouse

11
4.4. Eliminar Regiones
Para eliminar una región solo debemos posicionarnos con el puntero del mouse sobre la región
que deseamos eliminar y luego hacemos un clic derecho y seleccionamos la opción eliminar. Tener
en cuenta que si eliminamos una región padre, también se eliminan todas sus regiones hijas.
Eliminar una región
4.5. Visualizar Regiones
La solapa “regiones” nos muestra un árbol con todas las regiones creadas. Podemos usar este
árbol para saber cuáles regiones son hijas de otra y para indicar si queremos que una región sea
visible o no (si tildamos la región -con un clic-, esta será visible. Si destildamos la región, esta no
será visible). Esto nos sirve para, por ejemplo, poder trabajar más cómodos con regiones que
quedan debajo de otras (de esta forma ocultando la región que tapa a otra, podemos trabajar
sobre la región que estaba debajo y luego volver a convertir en visible la región superpuesta).
1° Seleccionamos el ícono
en forma de flecha.
2° En la región que queremos eliminar hacemos
un clic derecho y seleccionamos Eliminar.

12
Árbol de regiones
La lectura de este árbol la podemos hacer de la siguiente forma:
 La región “0” es la primer región que se creó y no posee padre ni hijos. También podemos
decir que al tener una tilde (junto al nombre) esta región esta visible en el área de dibujo
de regiones.
 La región “1” posee 2 hijos que son la región “2” y la “3”.
 Las regiones “1” y “2” son visibles pero la “3” no es visible en este instante ya que no está
marcada.
 La región “4” posee un hijo que es la región “5” y, a su vez, la región “5” posee un hijo que
es la región “6”, todas ellas están visibles. Es importante marcar que si eliminamos la
región “5” también se elimina la región ”6” por ser hijo de la región eliminada, al igual que
si eliminamos la región “4” ocurre una eliminación en cadena de las regiones “5” y “6”
4.6. Zoom
La herramienta zoom permite obtener distintas vistas de las regiones, gracias a esto podemos
trabajar de forma más específica con las ellas.
Herramientas de zoom
Reestablecer Zoom
Aumentar Zoom
Disminuir Zoom
Nivel de Zoom

13
5. Formato de la pantalla
Durante el desarrollo de un proyecto podemos elegir entre 4 formatos de pantallas que son PAL N
(720x576 px), PAL Ancho (1024x576 px), HDTV 720p (1280x720 px), HDTV 1080i (1920x1080 px).
Existen dos objetivos para seleccionar un formato, una es para marcar el formato elegido en la
sección de dibujo de regiones (de esta forma nos guiamos con esta marca para crear o modificar
regiones) y el otro objetivo es establecer una relación entre las regiones y el formato de pantalla.
5.1. Marcar formatos de pantalla en la sección de dibujo de
regiones
Para marcar formatos de pantalla en la sección de dibujo de regiones debemos elegir una o más
de las siguientes opciones:
Estas opciones se encuentran en la barra de herramientas generales o también pueden
seleccionarse desde el menú ver (Ver/Marca de pantalla PALN, Ver/Marca de pantalla PAL Ancho,
Ver/Marca de pantalla HDTV 720p y Ver/Marca de pantalla HDTV 1080i).
Cada formato que seleccionemos crea una marca en la sección de dibujo del área temporal para
que podamos ubicarnos en la pantalla según el/los formato/s elegido/s. De esta forma podemos
crear y manipular regiones guiándonos por estas marcas.
En la siguiente imagen podemos observar la marca con una línea puntuada azul que nos indica el
formato de pantalla PALN – 720x576 px

14
Marca indicadora de formato de pantalla PALN – 720x576 px
5.2. Establecer relación entre las regiones y el formato de pantalla
Para establecer relación entre las regiones y el formato de pantalla debemos elegir una de las
siguientes opciones:
Estas opciones se encuentran en la barra de herramientas generales o también pueden
seleccionarse desde el menú ver (Ver/Relación Región PALN, Ver/Relación Región PAL Ancho,
Ver/Relación Región HDTV 720p, Ver/Relación Región HDTV 1080i).
Es importante tener en cuenta que solo las regiones que posean algunos de los valores de sus
atributos expresados en porcentaje pueden establecer esta relación con el formato de la pantalla.
Esto se debe a que si las propiedades (Eje x, Eje y, Ancho, Alto) de una región están expresadas en
pixel estamos especificando el lugar que queremos que se muestre esa región sin importar en que
formato de pantalla será exhibida. En cambio, si especificamos alguno o todos los atributos de una
región con porcentaje estamos indicando que según el formato de pantalla que elijamos será
representado el porcentaje ingresado. Por ejemplo, no es lo mismo definir una región con ancho =
50% del formato de pantalla PAL N (720x576 px) que el ancho = 50% del formato de pantalla de

15
HDTV 720p (1280x720 px) ya que en la segundo formato la región se verá mucho más ancha que
en el primer formato.
Para ver más claro este concepto mostramos a continuación 2 figuras donde la primera esta
seleccionado el botón y en la segunda el botón
Región de ancho =50% con relación al formato de pantalla PALN (720x576 px)
Región de ancho =50% con relación al formato de pantalla HDTV 720p (1280x720 px)
Con estas dos imágenes podemos observar claramente que una misma región con el valor de de
sus atributos expresados en porcentaje (como en este caso el atributo ancho = 50%) se verán de
forma distinta según la relación “región/Formato de pantalla” que elijamos.
6. Medias
Los medias son elementos de contenido multimedial. Es decir son los objetos que vamos a asignar
a alguna región para que luego cuando se ejecute la aplicación en ginga se muestren por pantalla.

16
6.1. Importando Medias
Tenemos la opción de importar entre 6 grupos de medias que son imagen, video, audio, texto, lua
y url. Luego de seleccionar un tipo de media presionamos el botón importar y buscamos el media
deseado. Cada grupo de media está representado por imágenes.
Medias Imagen que representa al media
Imagen La imagen en sí.
Video Alguno de los frames del video.
audio
Según su tipo por alguna de estas 7 imágenes:
texto
Según su tipo por alguna de estas 5 imágenes:
lua
url
Representación de los objetos medias
Solapa Importar Medias Solapa Importar otros

17
En la solapa Importar Medias hay 4 grupos de medias que son Videos, Sonidos, Imágenes y Texto,
mientras que en la solapa Importar Otros están los dos grupos de medias faltantes: Lua y Uri.
La razón de separarlos así es para dividir los medias en dos grupos según su utilidad y relación,
como así también para dar una mayor comodidad al usuario ya que generalmente se usaran más
los medias de la solapa Importar Medias.
Para importar un objeto Lua se hace de igual forma que importar Videos, Sonidos, Imágenes o
Texto. Cuando presionamos el botón Importar se abre la siguiente ventana:
Importar Media de tipo Imagen.
En el caso de importar un Uri se debe proceder de otra forma. Cuando queremos importar un Uri
nos posicionamos sobre la pestaña Uri, luego seleccionamos importar para que se abra la
siguiente ventana donde completaremos los datos y por último, presionamos el botón Aceptar.
Importar Uri
1° Asignamos un
nombre al Uri
2° Ingresamos
la dirección
Uri3° Asignamos
un tipo
4° Presionamos
botón “Aceptar”

18
Hay que tener en cuenta que todos los campos de esta ventana son obligatorios y cada Uri nuevo
que se agregue debe tener un nombre distinto a los anteriores. El tipo del Uri es importante
porque la aplicación se basa en ese tipo para manipularlo y asignarle propiedades relacionadas
con el tipo de media elegido.
6.2. Asignar Medias a una región
Una vez importado el media debemos asignarlo a alguna región. Hay dos formas de hacerlo:
 Una forma es seleccionar el media y arrastrarlo hacia la región que deseamos.
 La otra forma es seleccionando el media y la región que deseamos y por ultimo presionar
el botón .
Arrastrar el media hacia una región
Asignar un media a una región usando el botón “Asignar media”
1° Seleccionar el media2° Arrastrarlo hacia una región
1° Seleccionamos una región
2° Seleccionamos un media
3° Presionamos el botón para asignar medias

19
De cualquiera de las dos formas que elijamos, luego de realizar los pasos anteriormente
descriptos, aparecerá una nueva ventana que nos permite cambiar el nombre del media que va a
ser usado en el área temporal.
Nombre para el botón rojo Nombre para el botón verde
En caso que se quiera asignar más de una vez un media a una región, se debe cambiar el
identificador del media por cada vez que se asigna a una región.
6.3. Eliminar Medias
Para eliminar un media debemos primero seleccionar el media que queremos eliminar y luego
presionar el botón .
Eliminar Medias
1° Seleccionar el
media que
queremos eliminar
2° presionar el
botón “Eliminar”

20
Área Temporal
7. Listas de medias
En el área temporal tenemos 2 listas de medias, una es la lista “Medias Región” que hace
referencia a la lista de medias que posee una región en particular y la otra es la lista “Medias
Usados” que contiene todos los medias que fueron asignados a alguna región.
Lista de medias región Lista de medias usados
7.1. Funciones de las listas de medias
Las dos listas de medias del área temporal poseen diversas funciones como ser:
 Cuando en el área espacial seleccionamos alguna región, en la lista “Medias Región” se
muestran todos los medias que pertenecen a esa región. Esto nos permite llevar un
control de los medias que serán exhibido en cada región.
 La lista “Medias Usados” nos permite conocer todos los medias que hemos asignados a
por lo menos una región. De esta forma podemos llevar un control de todos los medias
que podemos usar en la línea de tiempo.
 Desde cualquiera de estas dos listas podemos arrastrar medias a la línea de tiempo para
indicarle en qué momento debe ser exhibido.
 Las listas poseen un campo llamado “usado” que nos permite saber si el media ya fue
asignado a la línea de tiempo o no.
A continuación mostramos un ejemplo de utilización de las dos listas. En este caso hay dos
regiones creadas donde cada región tiene asignada una lista de medias. Al hacer un clic sobre una
región, en la lista “Medias Región” nos mostrará todos los medias que posee esa región.

21
La primer región contiene los medias “botonrojo.png” y botonverde.png
La segunda región contiene los medias “paisaje1.jpg”, “paisaje2.jpg” y “paisaje3.jpg”
Al seleccionar una región, se muestra la lista de medias
que posee en la lista “Medias Región”
Al seleccionar una región, se muestra la lista de medias
que posee en la lista “Medias Región”

22
En la lista “Medias Usados” podemos ver los medias de las dos regiones
7.2. Eliminar un media
Para eliminar un media se siguen los mismos pasos en cualquiera de las dos listas. Lo primero que
debemos hacer es seleccionar el media que queremos eliminar y después presionar el ícono
.
Eliminar Media
Notar que cuando eliminamos un media de una lista también se elimina automáticamente de la
otra lista. También es importante resaltar la restricción de que no podemos eliminar un media que
se está usando en el área de dibujo de la línea de tiempo, es decir, no se pueden eliminar los
medias de la lista que posean una tilde en el campo “usado”. Para eliminar un media que se está
usando en la línea de tiempo, debemos primero eliminarlo de la línea de tiempo y luego eliminarlo
desde alguna de las dos listas.
2° Seleccionamos
botón Eliminar.
1° Seleccionamos
un media de una
de las listas.

23
8. Línea de tiempo
En el centro del área temporal está ubicada la línea de tiempo. Esta no es una línea de tiempo
convencional sino que posee otras características que hacen que se la pueda usar para modelado
de aplicaciones para la TV Digital. Es muy importante comprender el funcionamiento de esta línea
de tiempo para lograr desarrollar aplicaciones NCL de baja y alta complejidad.
La línea de tiempo que posee CreaTV Digital es una implementación del “Modelo de Línea de
Tiempo”2
que tuvimos que crear para cumplir con uno de nuestros principales objetivos que fue el
de crear una herramienta de fácil utilización para generar aplicaciones NCL.
La línea de tiempo está compuesta de dos partes, una es la cabeza y la otra es el cuerpo de la línea
de tiempo. Sus funcionalidades son distintas ya que en el cuerpo están las líneas de tiempo de
cada media indicando el tiempo de vida del media, mientras que en la cabeza se encuentra la
imagen y nombre que representan al media. A lo largo de esta sección veremos con mayor detalle
sus funcionalidades.
Cabeza y cuerpo de la línea de tiempo
8.1. Elementos de la línea de tiempo
En la línea de tiempo cada media ocupa una fila y cada fila contiene hasta 4 elementos que son la
imagen que representa al media, el nombre, la línea de tiempo de vida del media y posible
interactividad, de las cuales las tres primera siempre están presentes y la última (interactividad) es
opcional (es decir, puede o no estar presente dependiendo de nuestras necesidades).
2
Para más información sobre el modelo, dirigirse al informe de la herramienta “CreaTV Digital” a la sección
de diseño
Cabeza Cuerpo

24
Elementos de la línea de tiempo
El media creatvdigital.mpeg es el video principal y es el primer media que se soltó en la línea
de tiempo.
Este media posee una línea de tiempo simple que indica su tiempo de vida, es decir, desde
qué momento comienza y cuándo termina (estos dos extremos están indicados con una barra
vertical) y también posee una línea vertical que lo conecta con el video principal indicando una
relación entre ellos.
El media botonrojo.png posee puntos suspensivos indicando que la presentación de esta
imagen no tiene fin.
En la primer mitad del tiempo de vida de este media se ha creado una interactividad que
tiene asociado el botón rojo del control remoto.
El media paisaje1.jpg está relacionado con la interactividad creada en el paso anterior, esto
significa que cuando ejecutemos esta aplicación en ginga, al presionarse el botón rojo del control
remoto en alguna parte del trecho de tiempo de la interactividad se inicia la presentación de este
media. Notamos también que a los costados de la línea de tiempo del media hay líneas punteadas
que terminan en un rombo, estas se llaman margen de interactividad. Estas líneas nos indican el
rango de variabilidad de tiempo posible en el cual el media puede iniciar y terminar, es decir,
indica el menor tiempo en el que el media pueda empezar y el máximo tiempo que el media
pueda terminar (según la intervención del usuario presionando una tecla del control remoto)3
.
La última combinación que podemos realizar en la línea de tiempo es una línea de tiempo de
vida del media que es infinita y asociada a ella una interactividad que ocupa toda la línea de vida
3
Para más detalles ver “Modelo de Línea de Tiempo” del capítulo diseño del informe de CreaTVDigital.
1
2
3
4
5
6
1
2
3
4
5
6

25
del media, por lo tanto es también infinita. La interactividad tiene asociada el botón verde del
control remoto
8.2. Arrastrar medias a la línea de tiempo
Para indicar en qué momento debe exhibirse un media se lo arrastra desde alguna de las dos listas
de medias, “Medias Región” o “Medias Usados”, hacia el área de dibujo de la línea de tiempo, de
esta forma le indicamos el momento en el que queremos que el media sea presentado.
Es importante tener en cuenta que el media que ubiquemos como primer lugar en la línea de
tiempo será el media principal (en NCL se dice que este media es el principal y tiene un port).
Arrastrar un media a la línea de tiempo
Luego de soltar el media
8.3. Eliminar un media de la línea de tiempo
Para eliminar un media de la cabeza y cuerpo de la línea de tiempo, debemos hacerlo con la
herramienta goma. Lo primero que debemos hacer es seleccionar el ícono y luego
posicionarnos con el puntero del mouse sobre la “fila” o línea donde se encuentra la línea de
tiempo de vida del media a eliminar y luego hacer un clic. Notar que cuando nos desplazamos con
el puntero del mouse entre las distintas líneas de tiempo de vida de los medias, se sobresalta el
posible media (junto con su línea de vida) a ser eliminado.
1° Seleccionar un media2° Arrastrar el media hasta el lugar deseado
3° Soltar el media (notaremos que aparece una nueva línea vertical)

26
Eliminar línea de tiempo de un media
Después de eliminar la línea de tiempo de vida de un media
Es importante tener en cuenta que cuando vamos a eliminar una línea de tiempo de un media
también se eliminaran todas las líneas te tiempo de todos los medias que estén relacionados con
la línea de tiempo a eliminar. La forma de proceder es similar a la de un árbol, es decir, cuando se
elimina un padre también se eliminan sus hijos.
9. Interactividad
A toda línea de tiempo de vida de los medias se le puede agregar interactividad. Esto significa que
cada vez que un media es reproducido en ginga, este media está predispuesto a la realización de
alguna actividad al ser seleccionado por el usuario mediante algún botón del control remoto.
9.1. Crear interactividad
Para crear una interactividad primero debemos seleccionar el icono , luego debajo de la
línea de tiempo de vida del media que deseamos asignarle interactividad, hacemos un clic y
manteniendo presionado el botón izquierdo del mouse extendemos la interactividad al tiempo
deseado. Una vez que tenemos la longitud deseada soltamos el botón del mouse y se abrirá una
nueva ventana con forma de control remoto para que podamos seleccionar un botón del mismo
para la interactividad.
3° hacer un
clic, esto hace
que se elimine
la línea y los
medias que
están por
debajo suben
una posición
2° Desplazarnos con el puntero del mouse hasta la
fila donde se encuentra la línea de vida del media
1° Seleccionar el
botón “Goma”

27
Creando una interactividad – vista 1
3° Hacer un clic (izquierdo) y mantenerlo presionado hasta darle la longitud deseada.
2° Ubicar el puntero del mouse debajo de la línea de
tiempo a la que le vamos a asignar una interactividad.
1° Seleccionar el botón
de interactividad.
4° Seleccionar un botón (el rojo en este caso) y luego presionar Aceptar

28
Creando una interactividad – vista 4 (interactividad finalizada)
Es importante aclara que se pueden crear más de una interactividad en cada media
Múltiples interactividades
9.1.1. Control remoto
La ventana que simula a un control remoto nos permite seleccionar cualquier botón del control
remoto para asignarlo a una interactividad.
Control remoto general control remoto mostrando las letras

29
9.2. Modificar una interactividad
Para modificar una interactividad debemos primero posicionarnos con el puntero del mouse sobre
alguna de sus dos barras verticales que marcan los extremos de la interactividad, luego arrastrarla
(con el botón izquierdo del mouse presionado) hacia uno de los costados aumentando o
reduciendo la longitud de la línea de interactividad.
Cuando queremos que la longitud de la línea de una interactividad sea de igual tamaño que la
línea de vida del media a la cual esta asignada, tenemos la opción de hacerlo arrastrando sus
extremos como explicamos anteriormente o posicionándonos sobre algunas de sus dos barras
verticales que delimitan la interactividad, hacer un clic derecho para posteriormente seleccionar
(del menú desplegable) la opción “Adaptar al Media”.
Asignar a una interactividad la longitud de la línea de vida del media
Luego de seleccionar “Adaptar al Media”
Hay que tener en cuenta que la línea de la interactividad no puede ser más grande que la línea de
vida del media al cual ha sido asignada.
9.2.1. Modificar el botón del control remoto asignado a la interactividad
Para modificar el botón del control remoto asignado a una interactividad debemos primero
posicionarnos con el puntero del mouse sobre alguna de sus dos barras verticales que marcan los
extremos de la interactividad, luego hacer un clic derecho y posteriormente seleccionar (del menú
desplegable) la opción “Editar botón“. Una vez hecho esto se abrirá la ventana del control remoto
para que podamos seleccionar un nuevo botón para la interactividad.

30
Cambiar el botón de una interactividad – vista 1
Cambiar el botón de una interactividad – vista 2
Cambiar el botón de una interactividad – vista 3 (el botón amarillo cambia por el nuevo (rojo))
1° hacer un clic derecho sobre uno de los extremos de la interactividad y luego seleccionar “Editar boton”
2° Seleccionar un botón del control remoto (en este caso el botón rojo) y luego presionar “Aceptar”

31
9.3. Eliminar una interactividad
Para eliminar una interactividad debemos primero posicionarnos con el puntero del mouse sobre
alguna de sus dos barras verticales que marcan sus extremos, luego hacer un clic derecho y
posteriormente seleccionar (del menú desplegable) la opción “Eliminar Interactividad“.
Al eliminar una interactividad también se eliminan todas las líneas de tiempo de todos los medias
que están relacionados con la interactividad eliminada (es decir todos los medias que fueron
asignados a esa interactividad).
Eliminar Interactividad
Luego de eliminar la interactividad
Es importante tener en cuenta que también podemos eliminar una interactividad utilizando la
herramienta “goma” que está representada con el icono . Con esta herramienta
eliminamos la línea de tiempo de vida del media al cual fue asignada la interactividad, de esta
forma se elimina también la interactividad asociada.
10. Asignar acciones a un media
Existen tres elementos de un media a los que se les pueden asignar acciones. Uno es cuando
comienza el media (en la barra vertical que inicia la línea de vida del media) otro es cuando
termina (en la barra vertical que termina la línea de vida del media) y el último es en el botón de
una interactividad. Si queremos asignar acciones en cualquiera de las dos barras verticales de los
extremos del media, debemos hacerle un clic derecho y luego seleccionar (del menú desplegable)
la opción “Acciones”, esto hace que se habrá una nueva ventana que muestra todas las acciones
que podemos asignarle al media (comenzar, parar, pausar, reanudar, abortar y setear). Cualquiera

32
de las acciones que seleccionemos debemos indicarle sobre qué media queremos ejecutársela. Se
pueden asignar múltiples acciones en los distintos elementos de los medias, todas ellas se
ejecutarán en paralelo. La acción setear es un poco más compleja por lo que la explicaremos más
adelante en otro apartado.
Por otro lado, si lo que queremos es asignar acciones a un botón de una interactividad entonces
hay que presionarlo (hacerle un clic) para que se abra la ventana de acciones y luego proceder
como explicamos anteriormente.
Asignar acciones al botón de una interactividad – vista 1 de 4
Asignar acciones al botón de una interactividad – vista 2 de 4 (los pasos 2°, 3° y 4° se pueden
repetir para asignar más acciones y/o medias)
1° Hacer un
clic sobre el
botón de la
interactividad
2° Seleccionar
una acción
3° Seleccionar
un media 4° Presionar
botón “agregar
media”

33
Es importante notar que cuando terminemos de asignar acciones aparecerán, al costado del
elemento al que se las asignamos, figuras que nos indican qué acciones realiza el elemento
(comenzar , parar , pausar , reanudar , abortar y setear )
Las figuras que aparecen a la orilla del elemento nos ayuda a tener una visión general de la línea
de tiempo, y así evitar analizar cada evento (comienzo y fin de línea, botón de interactividad), si
queremos saber más detalles sobre a qué medias se les aplican la acción debemos pasar el mouse
sobre el elemento y se desplegara esta información. Si aún deseamos más información,
presionamos nuevamente el clic derecho sobre el elemento deseado y seleccionamos “Acciones”
para visualizar las acciones que hemos asignado hasta el momento
11. Asignar propiedades a los medias
Existen dos formas de asignar propiedades a un media, una es utilizando la cabeza de la línea de
tiempo y la otra es utilizando la herramienta Setear que se encuentra entre las acciones a asignar a
un media. La diferencia entre estas dos es que utilizando la cabeza de la línea de tiempo se pueden
cambiar solo las propiedades del media seleccionado y los cambios tienen efecto desde el
5° Presionar
“Aceptar”
Figura indicando que el botón rojo de la interactividad realiza la acción “parar”

34
comienzo de reproducción del media mientras que si utilizamos la herramienta Setear se pueden
asignar propiedades a otros medias (también al media seleccionado) y estos cambios en las
propiedades tienen efecto (según el lugar desde donde se lo asignemos) al iniciar o finalizar un
media o también al presionar un botón del control remoto.
11.1. Asignar propiedades usando la cabeza de la línea de tiempo
Para asignar propiedades a un media debemos hacer un clic en la cabeza de la línea de tiempo, en
la línea (o fila) donde se encuentra el media. Esto hace que se abra una nueva ventana que varía
según el tipo del media, es decir, la ventana mostrara las propiedades que se le puede asignar al
media según su tipo (Imagen, video, texto, audio, lua, uri).
Asignar propiedades a un media.
11.2. Asignar propiedades a un media a través de la acción setear
Para asignar propiedades a un media a través de la herramienta setear, debemos comenzar con
los mismos pasos que realizamos en el capítulo 9 “Asignar acciones a un media” seleccionando
setear entre las acciones disponibles, una vez hecho esto (al presionar aceptar) se mostrará una
nueva ventana donde podremos setear los distintos atributos de los medias seleccionados.
Para poder entender mejor realizaremos un ejemplo donde, en el botón de interactividad de un
media , seteamos las propiedades alto y ancho de una imagen, y el tamaño y color de un texto.
1° Posicionarnos con el puntero del mouse en
línea donde se encuentra el media en la cabeza
de la línea de tiempo y luego hacer un clic.
2° en la ventana que se abre asignar
los valores que deseamos y por
ultimo presionar “Aceptar”.

35
Setear – vista 1
5° Seleccionar uno de los dos
medias a setear
6° Habilitar (con un clic) las propiedades a
asignar algún valor (en este caso alto y ancho)
7° Ingresar
valor
Setear – vista 2
1° hacer un clic en el botón de interactividad
2° Seleccionar la
acción “Setear”
3° Asignar a la acción seleccionada los
medias “paisaje1.jpg” y “casa.txt”
4° Presionar “Aceptar”

36
Setear – vista3
12. Tips para manejar la línea de tiempo de forma rápida y
cómoda
La línea de tiempo es una de las claves de la performance de esta herramienta, por lo tanto es
importante conocerla bien para desarrollar aplicaciones de forma rápida y fácil. Por ello vamos a
ver algunos tips que nos van a ser de mucha utilidad:
 Al momento de intentar arrastrar un media de la lista “Medias Región” o “Medias Usados”
chequear en la tabla que el campo “usado” que le corresponde a ese media, no tenga una
tilde, ya que si la tiene este media ya se encuentra en la línea de tiempo. De esta forma
evitamos perder el tiempo de querer ubicarlo en algún sector de la línea de tiempo.
 Cuando vamos a insertar un nuevo media en la línea de tiempo, lo arrastramos de una de
las dos listas y lo llevamos a la línea de tiempo (como ya hemos mencionado), en este
instante es importante que nos guiemos con el tiempo que nos indica arriba de la línea
roja que aparece antes de soltar el media en la línea de tiempo.
 Cuando la línea de tiempo contiene varios medias e interactividad, aparecen los márgenes
de interactividad (que son las líneas punteadas que terminan en un rombo que se ubican a
8° Seleccionar el otro media
9° como en los pasos 6° y 7° habilitar propiedades y
asignar valores
10° Por último presionar Aceptar

37
los costados de la línea de tiempo de los medias) que, si bien son de mucha utilidad, hay
veces que es necesario hacerlos desaparecer para ubicarnos en la línea de tiempo, para
ello presionamos el botón .
 Tener en cuenta, como referencia rápida, las marcas de comenzar , parar , pausar
, reanudar , abortar y setear que aparecen en la línea de tiempo y en caso
de necesitar mayores datos posicionarnos sobre el elemento que contiene esas marcas de
esta forma aparece más información en un menú emergente y no necesitamos perder el
tiempo abriendo la ventana de acciones.
 Cuando arrastramos un media desde una de las listas “Medias Región” o “Medias Usados”
hacia la línea de tiempo, notaremos que se marca en azul la línea de tiempo de vida a la
cual el media que estamos arrastrando creara la relación cuando lo soltemos. Es
importante guiarnos con esta marca ya que nos va a ser de mucha utilidad cuando en la
línea de tiempo haya muchos medias con sus respectivas líneas de vida.
A continuación mostramos algunos consejos útiles para conocer mejor la línea de tiempo:
Boton de interactividad con 4 marcas de acciones Madias a los que se le aplica las acciones
Este menú se despliega al posicionar el
puntero del mouse sobre el botón
Chequear que el media
no posea una tilde
Notar que se pone en azul la línea
de vida del media al cual le vamos a
soltar el nuevo media
Indica el tiempo teniendo en cuenta el
inicio del media que se pone en azul
Marcas que nos ayudan a soltar el media
en el lugar exacto donde queremos

38
Extremos con marcas de acciones Madias a los que se le aplica las acciones
Línea de tiempo con los márgenes de interactividad visibles.
Línea de tiempo con los márgenes de interactividad ocultos.
13. Navegación por flechas
Una vez que en el área espacial tenemos asignado los medias a las regiones y en el área temporal
tenemos los medias asignado a la línea de tiempo, podemos crear la navegación por flechas entre
algunos o todos estos medias. Para realizar esto debemos presionar el icono y luego en la
ventana que se abre vamos a seleccionar un media para indicarle hacia que otros medias
queremos que navegue.
Presionar este botón para ocultar los márgenes de interactividad (o para volverlos a visualizar)

39
Veremos un ejemplo con 4 regiones a las que asignaremos una imagen a cada región, luego a los 4
medias los vamos a asignar a la línea de tiempo de tal forma que comiencen todos al inicio.
Ejemplo – vista 1 (Área espacial y temporal del ejemplo a desarrollar)
1° Seleccionar
botón
“navegación
por flechas”
2° Seleccionar
un media
Ejemplo – vista 2 (Selección del primer media para la navegación por flechas)

40
Ejemplo – vista 3 (Creación de la navegación desde el
media “paisaje1.jpg” hacia el media “paisaje2.jpg”)
3° Seleccionar navegación hacia
la derecha
4° Seleccionar el media hacia donde se va a navegar
5° Presionar botón
“Seleccionar”

41
Ejemplo – vista 4 (Fin de la asignación de navegación al media “pasisaje1.jpg”)
En esta imagen volvimos a repetir los pasos 3°, 4° y 5° de tal forma que el paso 3° seleccionamos
navegación hacia abajo, en el paso 4° seleccionamos el media “paiseja4.jpg” quedando el
resultado como la imagen presentada.
El icono que aparece al lado de cada flecha nos indica que podemos eliminar el media que
asignamos a la navegación.
Debemos tener en cuenta que se puede asignar un foco, esto es asignar propiedades a la
navegación tales como el color de posicionamiento (que es el rectángulo que enmarca la imagen a
la que se le asigno un foco), color de selección (este es el rectángulo que aparece al seleccionar la
figura que tiene el foco), espesor (de los bordes del rectángulo), transparencia, media de
posicionamiento y media de selección.

42
Ejemplo – vista 5 (Fin de la asignación de navegación al media “pasisaje2.jpg”)
En esta imagen volvimos a repetir los pasos 2°, 3°, 4° y 5° de tal forma que en el paso 2°
seleccionamos el media “paisaje2.jpg” como la imagen de partida para asignarle la navegación, en
este caso en el paso 3° seleccionamos navegación hacia izquierda, en el paso 4° seleccionamos el
media “paiseja1.jpg” . Lo siguiente que hicimos fue volver a repetir los pasos 3°, 4° y 5° de tal
forma que el paso 3° seleccionamos navegación hacia abajo, en el paso 4° seleccionamos el media
“paiseja3.jpg” quedando el resultado como la imagen presentada.
De esta forma podemos ver el funcionamiento de la navegación por flechas y entender que la
forma de proceder, para crear cualquier navegación por flechas, es similar en todos los casos y que
solo es cuestión de práctica. A continuación mostraremos las dos imágenes restantes para
terminar de completar este ejemplo, los pasos realizados fueron similares a los ya mencionados.

43
Ejemplo – vista 6 y 7 (Fin de la asignación de navegación al media “pasisaje3.jpg” y “paisaje4.jpg”)
De esta forma podemos decir que la visión global de la navegación por flechas de este ejemplo
sería la siguiente:
“paisaje1.jpg” “paisaje2.jpg”
“paisaje4.jpg” “paisaje3.jpg”

44
14. Generar el código NCL y Correr la aplicación en ginga
Una vez que terminamos el proyecto podemos generar el código NCL presionando el icono .
De esta manera se abrirá una nueva ventana donde seleccionaremos la ubicación y el nombre que
le queremos dar al código NCL a generar. Una vez hecho esto se genera el archivo con el código
NCL y con extensión “.ncl”.
Generar archivo NCL
Luego de generar el código NCL podemos correr la aplicación en ginga presionando el botón .
De esta manera se abrirá una nueva ventana de ginga mostrando nuestra aplicación, para ello es
necesario tener instalado ginga en nuestra PC. Es importante aclarar que de no tener ginga
instalado en la máquina se puede solo generar el archivo ncl, luego podemos correrlo en cualquier
computadora que posea ginga o directamente en un set-top-box.
2° Ingresar nombre del archivo NCL a crear1° Seleccionar la ubicación del archivo a crear
3° Por ultimo presionar “Guardar”

CreaTV Digital: Manual de usuario

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a CreaTV Digital: Manual de usuario

Similar a CreaTV Digital: Manual de usuario (20)

CreaTV Digital: Manual de usuario