Manual de Usuario PDF

Manual de usuario
CreaTV Digital: Herramienta para la creacin de aplicaciones NCL para el

middleware GINGA de Televisin Digital Terrestre

CreaTV Digital es una herramienta de fcil manejo destinada a desarrolladores de
contenidos con una interface orientada a la produccin de contenidos interactivos de
Televisin Digital (TVD) de manera grfica, sin la necesidad de conocimientos detallados
de los lenguajes NCL y Lua. La herramienta permite al usuario, por medio de una interfaz
grfica e intuitiva, realizar el contenido (programa/pelcula junto con su aplicacin
interactiva) y generar automticamente el cdigo 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, Sebastin Martin (seba.schwartz@gmail.com)
Director:
Lic. Marcelo Arroyo
Co-Directora:
Lic. Mara Laura Tardivo
Agosto de 2011

2

Contenido
1. Introduccin ................................................................................................................................ 4
2. Instalacin ................................................................................................................................... 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 estticamente 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 seccin de dibujo de regiones ................................... 13
5.2. Establecer relacin entre las regiones y el formato de pantalla ....................................... 14
6. Medias ....................................................................................................................................... 15
6.1. Importando Medias ........................................................................................................... 16
6.2. Asignar Medias a una regin ............................................................................................. 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. Lnea de tiempo ......................................................................................................................... 23
8.1. Elementos de la lnea de tiempo ....................................................................................... 23
8.2. Arrastrar medias a la lnea de tiempo ............................................................................... 25
8.3. Eliminar un media de la lnea 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 botn 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 lnea de tiempo ...................................... 34
11.2. Asignar propiedades a un media a travs de la accin setear ...................................... 34
12. Tips para manejar la lnea de tiempo de forma rpida y cmoda ........................................ 36
13. Navegacin por flechas ......................................................................................................... 38
14. Generar el cdigo NCL y Correr la aplicacin en ginga ......................................................... 44

CreaTV Digital Agosto 2011
4

1. Introduccin
Este manual le permitir aprender a utilizar todas las funcionalidades de CreaTV Digital.
Si usted quiere observar algunos ejemplos de la aplicacin para tener una idea general de cmo
funciona y comprenderla mejor, mire los videos que se encuentran en
http://code.google.com/p/creatvdigital/ donde tambin podr descargar ejemplos de proyectos
creados con esta herramienta para que los pueda abrir y practicar modificndolos.
2. Instalacin
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 ejecucin del cdigo fuente
1
del programa es necesario realizar los siguientes pasos:
1) Lo primero que tenemos que hacer es descargar e instalar las libreras necesarias para un
correcto funcionamiento de la herramienta CreaTv Digital. A continuacin 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 libreras realizaremos los siguientes 3 pasos para compilar el cdigo
fuente y luego ejecutarlo. Para ello debemos primero ubicarnos(a travs de una consola) en la
carpeta donde se encuentra el cdigo fuente (..../CreaTVDigital/) y luego generar el Makefile
ejecutando el siguiente comando:
- qmake

1
Para descargar el cdigo fuente ingresar a http://code.google.com/p/creatvdigital/downloads/
5

3) Seguimos desde la consola ubicados en la carpeta donde se encuentra el cdigo 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
aplicacin 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 permitindonos 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 travs 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
opcin no especificar y luego durante el desarrollo del proyecto tenemos la opcin de seleccionar
alguna.
3.2. Abrir un proyecto ya creado
Para abrir un proyecto podemos hacerlo presionando el cono o a travs del men
Archivo/Abrir. De esta manera se abrir una nueva ventana donde podemos buscar el proyecto
(con extensin .ctv que son las letras de CreaTV) que ya ha sido creado con anterioridad. Una vez
encontrado hacer un clic en el botn abrir, de esta forma se cargan todos los datos del proyecto
para que pueda ser modificado, generar el cdigo fuente o solo ejecutarlo en ginga.

Nombre del
proyecto Este
campo es
obligatorio
Descripcin
Aqu tenemos
la opcin de
ingresar una
breve
descripcin
del proyecto
Indicamos la posible
resolucin del
dispositivo en la que
ser mostrada la
aplicacin
7

Abrir un proyecto

rea Espacial
4. Regiones
Una regin representa un rea de la pantalla de un dispositivo donde los medias sern
visualizados.

Regin
Abrir
proyecto
Proyecto seleccionado para ser abierto
8

4.1. Crear Regiones
Para crear una nueva regin 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
regin y (sin soltar el botn del mouse) lo arrastramos para dar el tamao deseado.

Crear regin

4.2. Modificar Regiones
Una forma de modificar una regin es seleccionando el cono que se encuentra en la barra
de herramientas del rea espacial y luego si lo que queremos modificar es el tamao,
seleccionamos la regin que deseamos modificar para posteriormente posicionarnos sobre alguno
de sus vrtices (notar que cuando estemos sobre algn sector de la regin que nos permite
modificarla, el puntero del mouse cambiar indicndonos hacia qu direccin podemos
desplazarnos para cambiar su tamao) y manteniendo el botn izquierdo del mouse presionado
arrastrar el borde de la regin ampliando o reduciendo su tamao. Si lo que queremos modificar
es la posicin, seleccionar la regin y manteniendo el botn izquierdo del mouse presionado
arrastrarla hacia la posicin que deseamos.

1 Seleccionar botn Crear Regiones
2 Crear la regin dndole
un tamao y una posicin
con el mouse
9

Redimensionar una regin

Otra forma de modificar una regin es a travs de la tabla que contiene las propiedades de cada
regin. Esta tabla est formada por tres columnas: nombre de la propiedad, el valor y tipo de
valor. El tipo de valor nos permite indicar cmo esta expresado el valor de la propiedad, es decir, si
el valor esta en pixeles o en porcentaje.

Tabla de propiedades de una regin
1 Seleccionamos el cono
en formato de flecha
2 Posicionados sobre alguno de los sectores
que nos permite modificar la regin, el cursor
se transformar indicando el sentido que
podemos redimensionarla.

3 por ltimo redimensionamos la regin
10

4.3. Tips para crear o modificar regiones estticamente perfectas
La regin es un elemento fundamental del programa y est asociado directamente con el aspecto
esttico que tendr una aplicacin al ejecutarse en ginga. Por lo tanto debemos ser cuidadosos al
momento de crear o manipular una regin. 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 lneas azules que aparecen en las reglas que nos indican los bordes de la regin.
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 algn valor concreto de una propiedad de una regin usar la
tabla de propiedades que nos permite definir regiones de forma ms especfica.
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
Lnea azul indicando
el borde de la regin
Lnea roja indicando la posicin
del puntero del mouse Regla horizontal
Regla vertical Puntero del mouse
11

4.4. Eliminar Regiones
Para eliminar una regin solo debemos posicionarnos con el puntero del mouse sobre la regin
que deseamos eliminar y luego hacemos un clic derecho y seleccionamos la opcin eliminar. Tener
en cuenta que si eliminamos una regin padre, tambin se eliminan todas sus regiones hijas.

Eliminar una regin

4.5. Visualizar Regiones
La solapa regiones nos muestra un rbol con todas las regiones creadas. Podemos usar este
rbol para saber cules regiones son hijas de otra y para indicar si queremos que una regin sea
visible o no (si tildamos la regin -con un clic-, esta ser visible. Si destildamos la regin, esta no
ser visible). Esto nos sirve para, por ejemplo, poder trabajar ms cmodos con regiones que
quedan debajo de otras (de esta forma ocultando la regin que tapa a otra, podemos trabajar
sobre la regin que estaba debajo y luego volver a convertir en visible la regin superpuesta).
1 Seleccionamos el cono
en forma de flecha.
2 En la regin 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 regin 0 es la primer regin que se cre y no posee padre ni hijos. Tambin podemos
decir que al tener una tilde (junto al nombre) esta regin esta visible en el rea de dibujo
de regiones.
La regin 1 posee 2 hijos que son la regin 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 regin 4 posee un hijo que es la regin 5 y, a su vez, la regin 5 posee un hijo que
es la regin 6, todas ellas estn visibles. Es importante marcar que si eliminamos la
regin 5 tambin se elimina la regin 6 por ser hijo de la regin eliminada, al igual que
si eliminamos la regin 4 ocurre una eliminacin 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 ms especfica 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
seccin de dibujo de regiones (de esta forma nos guiamos con esta marca para crear o modificar
regiones) y el otro objetivo es establecer una relacin entre las regiones y el formato de pantalla.
5.1. Marcar formatos de pantalla en la seccin de dibujo de
regiones
Para marcar formatos de pantalla en la seccin de dibujo de regiones debemos elegir una o ms
de las siguientes opciones:

Estas opciones se encuentran en la barra de herramientas generales o tambin 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 seccin de dibujo del rea temporal para
que podamos ubicarnos en la pantalla segn el/los formato/s elegido/s. De esta forma podemos
crear y manipular regiones guindonos por estas marcas.
En la siguiente imagen podemos observar la marca con una lnea 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 relacin entre las regiones y el formato de pantalla
Para establecer relacin 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 tambin pueden
seleccionarse desde el men ver (Ver/Relacin Regin PALN, Ver/Relacin Regin PAL Ancho,
Ver/Relacin Regin HDTV 720p, Ver/Relacin Regin 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 relacin con el formato de la pantalla.
Esto se debe a que si las propiedades (Eje x, Eje y, Ancho, Alto) de una regin estn expresadas en
pixel estamos especificando el lugar que queremos que se muestre esa regin sin importar en que
formato de pantalla ser exhibida. En cambio, si especificamos alguno o todos los atributos de una
regin con porcentaje estamos indicando que segn el formato de pantalla que elijamos ser
representado el porcentaje ingresado. Por ejemplo, no es lo mismo definir una regin 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 regin se ver mucho ms ancha que
en el primer formato.
Para ver ms claro este concepto mostramos a continuacin 2 figuras donde la primera esta
seleccionado el botn y en la segunda el botn

Regin de ancho =50% con relacin al formato de pantalla PALN (720x576 px)

Regin de ancho =50% con relacin al formato de pantalla HDTV 720p (1280x720 px)
Con estas dos imgenes podemos observar claramente que una misma regin con el valor de de
sus atributos expresados en porcentaje (como en este caso el atributo ancho = 50%) se vern de
forma distinta segn la relacin regin/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 regin para que luego cuando se ejecute la aplicacin en ginga se muestren por pantalla.

16

6.1. Importando Medias
Tenemos la opcin 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 botn importar y buscamos el media
deseado. Cada grupo de media est representado por imgenes.
Medias Imagen que representa al media
Imagen La imagen en s.
Video Alguno de los frames del video.

audio
Segn su tipo por alguna de estas 7 imgenes:

texto
Segn su tipo por alguna de estas 5 imgenes:

lua

url

Representacin 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, Imgenes y Texto,
mientras que en la solapa Importar Otros estn los dos grupos de medias faltantes: Lua y Uri.
La razn de separarlos as es para dividir los medias en dos grupos segn su utilidad y relacin,
como as tambin para dar una mayor comodidad al usuario ya que generalmente se usaran ms
los medias de la solapa Importar Medias.
Para importar un objeto Lua se hace de igual forma que importar Videos, Sonidos, Imgenes o
Texto. Cuando presionamos el botn 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 pestaa Uri, luego seleccionamos importar para que se abra la
siguiente ventana donde completaremos los datos y por ltimo, presionamos el botn Aceptar.

Importar Uri
1 Asignamos un
nombre al Uri
2 Ingresamos
la direccin
Uri 3 Asignamos
un tipo
4 Presionamos
botn 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 aplicacin se basa en ese tipo para manipularlo y asignarle propiedades relacionadas
con el tipo de media elegido.
6.2. Asignar Medias a una regin
Una vez importado el media debemos asignarlo a alguna regin. Hay dos formas de hacerlo:
Una forma es seleccionar el media y arrastrarlo hacia la regin que deseamos.
La otra forma es seleccionando el media y la regin que deseamos y por ultimo presionar
el botn .

Arrastrar el media hacia una regin

Asignar un media a una regin usando el botn Asignar media
1 Seleccionar el media 2 Arrastrarlo hacia una regin
1 Seleccionamos una regin
2 Seleccionamos un media
3 Presionamos el botn 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 botn rojo Nombre para el botn verde
En caso que se quiera asignar ms de una vez un media a una regin, se debe cambiar el
identificador del media por cada vez que se asigna a una regin.
6.3. Eliminar Medias
Para eliminar un media debemos primero seleccionar el media que queremos eliminar y luego
presionar el botn .

Eliminar Medias
1 Seleccionar el
media que
queremos eliminar
2 presionar el
botn Eliminar
20

rea Temporal
7. Listas de medias
En el rea temporal tenemos 2 listas de medias, una es la lista Medias Regin que hace
referencia a la lista de medias que posee una regin en particular y la otra es la lista Medias
Usados que contiene todos los medias que fueron asignados a alguna regin.

Lista de medias regin 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 regin, en la lista Medias Regin se
muestran todos los medias que pertenecen a esa regin. Esto nos permite llevar un
control de los medias que sern exhibido en cada regin.
La lista Medias Usados nos permite conocer todos los medias que hemos asignados a
por lo menos una regin. De esta forma podemos llevar un control de todos los medias
que podemos usar en la lnea de tiempo.
Desde cualquiera de estas dos listas podemos arrastrar medias a la lnea 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 lnea de tiempo o no.
A continuacin mostramos un ejemplo de utilizacin de las dos listas. En este caso hay dos
regiones creadas donde cada regin tiene asignada una lista de medias. Al hacer un clic sobre una
regin, en la lista Medias Regin nos mostrar todos los medias que posee esa regin.

21

La primer regin contiene los medias botonrojo.png y botonverde.png

La segunda regin contiene los medias paisaje1.jpg, paisaje2.jpg y paisaje3.jpg

Al seleccionar una regin, se muestra la lista de medias
que posee en la lista Medias Regin
Al seleccionar una regin, se muestra la lista de medias
que posee en la lista Medias Regin
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 despus presionar el cono
.

Eliminar Media
Notar que cuando eliminamos un media de una lista tambin se elimina automticamente de la
otra lista. Tambin es importante resaltar la restriccin de que no podemos eliminar un media que
se est usando en el rea de dibujo de la lnea 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 lnea de tiempo, debemos primero eliminarlo de la lnea de tiempo y luego eliminarlo
desde alguna de las dos listas.

2 Seleccionamos
botn Eliminar.
1 Seleccionamos
un media de una
de las listas.
23

8. Lnea de tiempo
En el centro del rea temporal est ubicada la lnea de tiempo. Esta no es una lnea de tiempo
convencional sino que posee otras caractersticas que hacen que se la pueda usar para modelado
de aplicaciones para la TV Digital. Es muy importante comprender el funcionamiento de esta lnea
de tiempo para lograr desarrollar aplicaciones NCL de baja y alta complejidad.
La lnea de tiempo que posee CreaTV Digital es una implementacin del Modelo de Lnea de
Tiempo
2
que tuvimos que crear para cumplir con uno de nuestros principales objetivos que fue el
de crear una herramienta de fcil utilizacin para generar aplicaciones NCL.
La lnea de tiempo est compuesta de dos partes, una es la cabeza y la otra es el cuerpo de la lnea
de tiempo. Sus funcionalidades son distintas ya que en el cuerpo estn las lneas 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 seccin veremos con mayor detalle
sus funcionalidades.

Cabeza y cuerpo de la lnea de tiempo
8.1. Elementos de la lnea de tiempo
En la lnea 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 lnea de tiempo de vida del media y posible
interactividad, de las cuales las tres primera siempre estn presentes y la ltima (interactividad) es
opcional (es decir, puede o no estar presente dependiendo de nuestras necesidades).

2
Para ms informacin sobre el modelo, dirigirse al informe de la herramienta CreaTV Digital a la seccin
de diseo
Cabeza Cuerpo
24

Elementos de la lnea de tiempo
El media creatvdigital.mpeg es el video principal y es el primer media que se solt en la lnea
de tiempo.
Este media posee una lnea de tiempo simple que indica su tiempo de vida, es decir, desde
qu momento comienza y cundo termina (estos dos extremos estn indicados con una barra
vertical) y tambin posee una lnea vertical que lo conecta con el video principal indicando una
relacin entre ellos.
El media botonrojo.png posee puntos suspensivos indicando que la presentacin 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 botn rojo del control remoto.
El media paisaje1.jpg est relacionado con la interactividad creada en el paso anterior, esto
significa que cuando ejecutemos esta aplicacin en ginga, al presionarse el botn rojo del control
remoto en alguna parte del trecho de tiempo de la interactividad se inicia la presentacin de este
media. Notamos tambin que a los costados de la lnea de tiempo del media hay lneas punteadas
que terminan en un rombo, estas se llaman margen de interactividad. Estas lneas 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 mximo tiempo que el media
pueda terminar (segn la intervencin del usuario presionando una tecla del control remoto)
3
.
La ltima combinacin que podemos realizar en la lnea de tiempo es una lnea de tiempo de
vida del media que es infinita y asociada a ella una interactividad que ocupa toda la lnea de vida

3
Para ms detalles ver Modelo de Lnea de Tiempo del captulo diseo del informe de CreaTVDigital.

1

2

3

4

5

6

1

2

3

4

5

6
25

del media, por lo tanto es tambin infinita. La interactividad tiene asociada el botn verde del
control remoto
8.2. Arrastrar medias a la lnea de tiempo
Para indicar en qu momento debe exhibirse un media se lo arrastra desde alguna de las dos listas
de medias, Medias Regin o Medias Usados, hacia el rea de dibujo de la lnea 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 lnea 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 lnea de tiempo

Luego de soltar el media
8.3. Eliminar un media de la lnea de tiempo
Para eliminar un media de la cabeza y cuerpo de la lnea 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 lnea donde se encuentra la lnea 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 lneas de tiempo de vida de los medias, se sobresalta el
posible media (junto con su lnea de vida) a ser eliminado.

1 Seleccionar un media 2 Arrastrar el media hasta el lugar deseado
3 Soltar el media (notaremos que aparece una nueva lnea vertical)
26

Eliminar lnea de tiempo de un media

Despus de eliminar la lnea de tiempo de vida de un media
Es importante tener en cuenta que cuando vamos a eliminar una lnea de tiempo de un media
tambin se eliminaran todas las lneas te tiempo de todos los medias que estn relacionados con
la lnea de tiempo a eliminar. La forma de proceder es similar a la de un rbol, es decir, cuando se
elimina un padre tambin se eliminan sus hijos.
9. Interactividad
A toda lnea 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 realizacin de
alguna actividad al ser seleccionado por el usuario mediante algn botn del control remoto.
9.1. Crear interactividad
Para crear una interactividad primero debemos seleccionar el icono , luego debajo de la
lnea de tiempo de vida del media que deseamos asignarle interactividad, hacemos un clic y
manteniendo presionado el botn izquierdo del mouse extendemos la interactividad al tiempo
deseado. Una vez que tenemos la longitud deseada soltamos el botn del mouse y se abrir una
nueva ventana con forma de control remoto para que podamos seleccionar un botn del mismo
para la interactividad.
3 hacer un
clic, esto hace
que se elimine
la lnea y los
medias que
estn por
debajo suben
una posicin
2 Desplazarnos con el puntero del mouse hasta la
fila donde se encuentra la lnea de vida del media
1 Seleccionar el
botn 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 lnea de
tiempo a la que le vamos a asignar una interactividad.
1 Seleccionar el botn
de interactividad.
4 Seleccionar un botn (el rojo en este caso) y luego presionar Aceptar
28

Creando una interactividad vista 4 (interactividad finalizada)
Es importante aclara que se pueden crear ms de una interactividad en cada media

Mltiples interactividades
9.1.1. Control remoto
La ventana que simula a un control remoto nos permite seleccionar cualquier botn 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 botn izquierdo del mouse presionado) hacia uno de los costados aumentando o
reduciendo la longitud de la lnea de interactividad.
Cuando queremos que la longitud de la lnea de una interactividad sea de igual tamao que la
lnea de vida del media a la cual esta asignada, tenemos la opcin de hacerlo arrastrando sus
extremos como explicamos anteriormente o posicionndonos sobre algunas de sus dos barras
verticales que delimitan la interactividad, hacer un clic derecho para posteriormente seleccionar
(del men desplegable) la opcin Adaptar al Media.

Asignar a una interactividad la longitud de la lnea de vida del media

Luego de seleccionar Adaptar al Media
Hay que tener en cuenta que la lnea de la interactividad no puede ser ms grande que la lnea de
vida del media al cual ha sido asignada.
9.2.1. Modificar el botn del control remoto asignado a la interactividad
Para modificar el botn 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 opcin Editar botn. Una vez hecho esto se abrir la ventana del control remoto
para que podamos seleccionar un nuevo botn para la interactividad.
30

Cambiar el botn de una interactividad vista 1

Cambiar el botn de una interactividad vista 2

Cambiar el botn de una interactividad vista 3 (el botn 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 botn del control remoto (en este caso el botn 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 opcin Eliminar Interactividad.
Al eliminar una interactividad tambin se eliminan todas las lneas de tiempo de todos los medias
que estn 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 tambin podemos eliminar una interactividad utilizando la
herramienta goma que est representada con el icono . Con esta herramienta
eliminamos la lnea de tiempo de vida del media al cual fue asignada la interactividad, de esta
forma se elimina tambin 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 lnea de vida del media) otro es cuando
termina (en la barra vertical que termina la lnea de vida del media) y el ltimo es en el botn 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 opcin 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 ejecutrsela. Se
pueden asignar mltiples acciones en los distintos elementos de los medias, todas ellas se
ejecutarn en paralelo. La accin setear es un poco ms compleja por lo que la explicaremos ms
adelante en otro apartado.
Por otro lado, si lo que queremos es asignar acciones a un botn 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 botn de una interactividad vista 1 de 4

Asignar acciones al botn de una interactividad vista 2 de 4 (los pasos 2, 3 y 4 se pueden
repetir para asignar ms acciones y/o medias)
1 Hacer un
clic sobre el
botn de la
interactividad
2 Seleccionar
una accin
3 Seleccionar
un media
4 Presionar
botn agregar
media
33

Es importante notar que cuando terminemos de asignar acciones aparecern, 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 visin general de la lnea
de tiempo, y as evitar analizar cada evento (comienzo y fin de lnea, botn de interactividad), si
queremos saber ms detalles sobre a qu medias se les aplican la accin debemos pasar el mouse
sobre el elemento y se desplegara esta informacin. Si an deseamos ms informacin,
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 lnea 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 lnea 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 botn rojo de la interactividad realiza la accin parar
34

comienzo de reproduccin del media mientras que si utilizamos la herramienta Setear se pueden
asignar propiedades a otros medias (tambin al media seleccionado) y estos cambios en las
propiedades tienen efecto (segn el lugar desde donde se lo asignemos) al iniciar o finalizar un
media o tambin al presionar un botn del control remoto.
11.1. Asignar propiedades usando la cabeza de la lnea de tiempo
Para asignar propiedades a un media debemos hacer un clic en la cabeza de la lnea de tiempo, en
la lnea (o fila) donde se encuentra el media. Esto hace que se abra una nueva ventana que vara
segn el tipo del media, es decir, la ventana mostrara las propiedades que se le puede asignar al
media segn su tipo (Imagen, video, texto, audio, lua, uri).

Asignar propiedades a un media.
11.2. Asignar propiedades a un media a travs de la accin setear
Para asignar propiedades a un media a travs de la herramienta setear, debemos comenzar con
los mismos pasos que realizamos en el captulo 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 botn de interactividad de un
media , seteamos las propiedades alto y ancho de una imagen, y el tamao y color de un texto.
1 Posicionarnos con el puntero del mouse en
lnea donde se encuentra el media en la cabeza
de la lnea 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 algn valor (en este caso alto y ancho)
7 Ingresar
valor
Setear vista 2

1 hacer un clic en el botn de interactividad
2 Seleccionar la
accin Setear
3 Asignar a la accin seleccionada los
medias paisaje1.jpg y casa.txt
4 Presionar Aceptar
36

Setear vista3
12. Tips para manejar la lnea de tiempo de forma rpida y
cmoda
La lnea 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 rpida y fcil. 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 Regin 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 lnea de tiempo. De esta forma
evitamos perder el tiempo de querer ubicarlo en algn sector de la lnea de tiempo.
Cuando vamos a insertar un nuevo media en la lnea de tiempo, lo arrastramos de una de
las dos listas y lo llevamos a la lnea de tiempo (como ya hemos mencionado), en este
instante es importante que nos guiemos con el tiempo que nos indica arriba de la lnea
roja que aparece antes de soltar el media en la lnea de tiempo.
Cuando la lnea de tiempo contiene varios medias e interactividad, aparecen los mrgenes
de interactividad (que son las lneas 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 lnea de tiempo de los medias) que, si bien son de mucha utilidad, hay
veces que es necesario hacerlos desaparecer para ubicarnos en la lnea de tiempo, para
ello presionamos el botn .
Tener en cuenta, como referencia rpida, las marcas de comenzar , parar , pausar
, reanudar , abortar y setear que aparecen en la lnea de tiempo y en caso
de necesitar mayores datos posicionarnos sobre el elemento que contiene esas marcas de
esta forma aparece ms informacin 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 Regin o Medias Usados
hacia la lnea de tiempo, notaremos que se marca en azul la lnea de tiempo de vida a la
cual el media que estamos arrastrando creara la relacin cuando lo soltemos. Es
importante guiarnos con esta marca ya que nos va a ser de mucha utilidad cuando en la
lnea de tiempo haya muchos medias con sus respectivas lneas de vida.

A continuacin mostramos algunos consejos tiles para conocer mejor la lnea 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 botn
Chequear que el media
no posea una tilde
Notar que se pone en azul la lnea
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
Lnea de tiempo con los mrgenes de interactividad visibles.

Lnea de tiempo con los mrgenes de interactividad ocultos.
13. Navegacin 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 lnea de tiempo, podemos crear la navegacin 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 botn para ocultar los mrgenes de interactividad (o para volverlos a visualizar)
39

Veremos un ejemplo con 4 regiones a las que asignaremos una imagen a cada regin, luego a los 4
medias los vamos a asignar a la lnea de tiempo de tal forma que comiencen todos al inicio.

Ejemplo vista 1 (rea espacial y temporal del ejemplo a desarrollar)

1 Seleccionar
botn
navegacin
por flechas
2 Seleccionar
un media
Ejemplo vista 2 (Seleccin del primer media para la navegacin por flechas)
40

Ejemplo vista 3 (Creacin de la navegacin desde el
media paisaje1.jpg hacia el media paisaje2.jpg)
3 Seleccionar navegacin hacia
la derecha
4 Seleccionar el media hacia donde se va a navegar
5 Presionar botn
Seleccionar
41

Ejemplo vista 4 (Fin de la asignacin de navegacin al media pasisaje1.jpg)
En esta imagen volvimos a repetir los pasos 3, 4 y 5 de tal forma que el paso 3 seleccionamos
navegacin 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 navegacin.
Debemos tener en cuenta que se puede asignar un foco, esto es asignar propiedades a la
navegacin tales como el color de posicionamiento (que es el rectngulo que enmarca la imagen a
la que se le asigno un foco), color de seleccin (este es el rectngulo que aparece al seleccionar la
figura que tiene el foco), espesor (de los bordes del rectngulo), transparencia, media de
posicionamiento y media de seleccin.

42

Ejemplo vista 5 (Fin de la asignacin de navegacin 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 navegacin, en
este caso en el paso 3 seleccionamos navegacin 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 navegacin 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 navegacin por flechas y entender que la
forma de proceder, para crear cualquier navegacin por flechas, es similar en todos los casos y que
solo es cuestin de prctica. A continuacin mostraremos las dos imgenes 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 asignacin de navegacin al media pasisaje3.jpg y paisaje4.jpg)
De esta forma podemos decir que la visin global de la navegacin por flechas de este ejemplo
sera la siguiente:

paisaje1.jpg paisaje2.jpg

paisaje4.jpg paisaje3.jpg
44

14. Generar el cdigo NCL y Correr la aplicacin en ginga
Una vez que terminamos el proyecto podemos generar el cdigo NCL presionando el icono .
De esta manera se abrir una nueva ventana donde seleccionaremos la ubicacin y el nombre que
le queremos dar al cdigo NCL a generar. Una vez hecho esto se genera el archivo con el cdigo
NCL y con extensin .ncl.

Generar archivo NCL
Luego de generar el cdigo NCL podemos correr la aplicacin en ginga presionando el botn .
De esta manera se abrir una nueva ventana de ginga mostrando nuestra aplicacin, para ello es
necesario tener instalado ginga en nuestra PC. Es importante aclarar que de no tener ginga
instalado en la mquina 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 crear 1 Seleccionar la ubicacin del archivo a crear
3 Por ultimo presionar Guardar

Manual de Usuario PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual de Usuario PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Manual de usuario

CreaTV Digital: Herramienta para la creacin de aplicaciones NCL para el

Das könnte Ihnen auch gefallen