manual de usuario (crea tv)

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 ([email protected])

Schwartz, Sebastián Martin ([email protected])

Director:

Lic. Marcelo Arroyo

Co-Directora:

Lic. María Laura Tardivo

Agosto de 2011

http://code.google.com/p/creatvdigital/



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/


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

Uri 3° 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 media 2° 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 media 2° 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 crear 1° Seleccionar la ubicación del archivo a crear

3° Por ultimo presionar “Guardar”

manual de usuario (crea tv)

Documents