UF1248 - Generación de elementos interactivos en proyectos audiovisuales multimedia.

Por Cristina Manzano Cánovas y Esther Lozano García

La finalidad de esta Unidad Formativa es enseñar a crear e integrar los elementos interactivos siguiendo los diseños establecidos, para generar las pantallas y páginas.

Además, sus diferentes estados se generarán favoreciendo su identificación por parte del usuario, y ajustándose a las características estéticas y narrativas del proyecto, mediante software de autor.

Por otra parte, la introducción de datos por parte del usuario y del cliente, se lleva a cabo mediante la creación de campos de entrada de información del usuario, según las variables definidas en el proyecto.

Tema 1. Elementos interactivos
1.1 Características funcionales.
1.2 Estados.
1.3 Generación de estados gráficos de elementos interactivos.
1.4 Creación de elementos de formulario.

Tema 2. Integración con herramientas de autor
2.1 Herramientas de autor.
2.2 Configuración de la interfaz o ventana de trabajo.
2.3 Líneas de tiempo.
2.4 Velocidad de reproducción.
2.5 Propiedades.
2.6 Acciones o eventos.

Tema 3. Opciones características de software de autor
3.1 Requisitos hardware/software.
3.2 Players y actualizaciones.
3.3 Formatos soportados de importación y exportación.
3.4 Publicación de contenidos y compatibilidad.
3.5 Dispositivos y plataformas de destino.

Tema 4. Estructuración de archivos según software
4.1 Ubicación y acceso.
4.2 Protecciones de acceso y restricciones.
4.3 Sincronización de fuentes.
4.4 Exportación e importación de fuentes.

• Idioma: Español
• Editorial: Editorial Elearning
• Fecha de lanzamiento: 14 ene 2019

Vista previa del libro

1.png

UF1248: Generación de elementos interactivos en proyectos audiovisuales multimedia

Elaborado por: Cristina Manzano Cánovas y Esther Lozano García

Edición: 5.0

EDITORIAL ELEARNING S.L.

ISBN: 978-84-16199-50-1 • Depósito legal: MA 1200-2014

No está permitida la reproducción total o parcial de esta obra bajo cualquiera de sus formas gráficas

o audiovisuales sin la autorización previa y por escrito de los titulares del depósito legal.

Impreso en España - Printed in Spain

Identificación de la unidad formativa:

Bienvenido a la Unidad Formativa 1248: Generación de elementos interactivos en proyectos audiovisuales multimedia. Esta Unidad Formativa pertenece al Módulo Formativo 0945_3: Integración de elementos y fuentes mediante herramientas de autor y de edición que forma parte del Certificado de Profesionalidad IMSV0209: Desarrollo de productos audiovisuales multimedia interactivos.

Presentación de los contenidos:

Crear e integrar los elementos interactivos siguiendo los diseños establecidos, para generar las pantallas y páginas. Además, sus diferentes estados se generarán favoreciendo su identificación por parte del usuario, y ajustándose a las características estéticas y narrativas del proyecto, mediante software de autor.

Por otra parte, la introducción de datos por parte del usuario y del cliente, se lleva a cabo mediante la creación de campos de entrada de información del usuario (formularios), según las variables definidas en el proyecto.

Objetivos de la unidad formativa:

–Integrar elementos interactivos y añadir los códigos partir de los editores y el software de autor.

–Describir las diferentes posibilidades (listas desplegables, selectores, ocultos), estados (activado, pasivo, sobre, fuera, y otros) y características funcionales de los elementos interactivos (botones y campos de entrada) que pueden aplicarse a un proyecto.

UD1. Elementos interactivos

1.1. Características funcionales 11

1.2. Estados 15

1.2.1. Activo 24

1.2.2. Pasivo 25

1.2.3. Sobre (Rollover/Rollout) 25

1.2.4. Zona activa y usabilidad 29

1.2.5. Activado/Anulado 32

1.2.6. Arrastres (Drag, Dragover, Dragout) 36

1.2.7. Click y dobleclick 41

1.2.8. Otros 49

1.2.9. Interacción con el puntero y punteros especiales 54

1.3. Generación de estados gráficos de elementos interactivos 58

1.4. Creación de elementos de formulario 59

UD2. Integración con herramientas de autor

2.1. Herramientas de autor 113

2.1.1. Tipos de programas de autor 113

2.2.1. Elementos a integrar (fuentes y formatos). 115

2.1.3. Elementos predefinidos / preprogramados 124

2.1.4. Editor manual de código 127

2.2. Configuración de la interfaz o ventana de trabajo 130

2.2.1. Paletas y paneles 132

2.2.2. Acceso a herramientas (barras de herramientas y atajos

de teclado) 134

2.3. Líneas de tiempo 136

2.3.1. Trabajar con capas 142

2.3.2. Capas de máscara y con máscara 146

2.3.3. Capa guía y guías de movimiento 148

2.3.4. Tipos de Fotograma 149

2.3.5. Fotogramas claves (keyframes) 151

2.3.6. Espacios. Fotogramas vacíos y fotogramas clave vacíos 152

2.3.7. Interpolación de movimiento 152

2.3.8. Interpolación de forma 155

2.3.10. Agrupación y Anidamiento 159

2.3.11. Bucles y Clips de película 160

2.4. Velocidad de reproducción 163

2.4.1. Modificación de velocidad de fotogramas. Optimización 165

2.4.2. Velocidad FPS y problemas de ejecución/peso 166

2.5. Propiedades 167

2.5.1. Tamaños de escenario, archivo o pantalla 169

2.5.2. Color 171

2.5.3. Visualización a pantalla completa y reescalado 173

2.5.4. Transparencia 176

2.6. Acciones o eventos 179

UD3. Opciones características de software de autor

3.1. Requisitos hardware/software 191

3.2. Players y actualizaciones 193

3.3. Formatos soportados de importación y exportación 194

3.4. Publicación de contenidos y compatibilidad 198

3.5. Dispositivos y plataformas de destino 215

UD4. Estructuración de archivos según software

4.1. Ubicación y acceso 229

4.2. Protecciones de acceso y restricciones 234

4.3. Sincronización de fuentes 236

4.4. Exportación e importación de fuentes 238

Glosario 259

Soluciones 261

1.1. Características funcionales

1.2. Estados

1.2.1. Activo

1.2.2. Pasivo

1.2.3. Sobre (Rollover/Rollout)

1.2.4. Zona activa y usabilidad

1.2.5. Activado/Anulado

1.2.6. Arrastres ( Drag, Dragover, Dragout)

1.2.7. Click y dobleclick

1.2.8. Otros

1.2.9. Interacción con el puntero y punteros especiales

1.3. Generación de estados gráficos de elementos interactivos

1.4. Creación de elementos de formulario

1.1. Características funcionales

El objetivo del programador interactivo debe ser conseguir equilibrio y armonía entre contenido y el uso de elementos interactivos.

Objetivo que se logrará si contenido y recursos interactivos tienen el mismo peso y protagonismo, es decir, ambos deben ser complementarios. Será fundamental para un buen proyecto interactivo que los recursos utilizados expresen correctamente el contenido.

En consecuencia, podremos simplemente programar una serie de botones y links que respondan a determinadas acciones del usuario, explicando el contenido con elementos visuales y/o textos.

Pero la interactividad es algo más. La interactividad hace referencia siempre a un receptor activo que participa en el proceso comunicativo. De esta manera el programador deberá aprovechar la interfaz que esté diseñando como un medio de comunicación en el que los recursos interactivos que se utilicen serán de vital importancia.

Este medio de comunicación interactivo posee sus propios códigos. Códigos que es necesario conocer y aprovechar.

Lo primero que tendremos que tener en cuenta en el momento de afrontar un proyecto de este tipo es que tendremos que recoger toda la información posible con respecto al tema de que se trate, tanto textos como imágenes, publicidad que se haya realizado en torno a él, etc. para comenzar a plantear posibilidades hasta que surja una buena idea para nuestro proyecto.

El contenido, como vimos al principio del tema, es tan importante como la forma en que se desarrollará la interactividad. Por ello hemos de tener en cuenta los elementos de que se compone este contenido:

–El objeto que se comunica, que puede ser un concepto, unos valores, un producto, un evento, etc.

–La dirección, que se constituye con el tono, forma o matiz que se va a transmitir del objeto.

–El destino, constituido por el público objetivo al que se quiere llegar.

Conviene también recordar que interactividad y diversión están estrechamente unidas. Lo interactivo produce sensaciones emocionantes y sorprendentes como mensaje bidireccional que es y que se construye en tiempo real.

El programador multimedia recogerá las acciones del usuario a través de las acciones que este pueda realizar a través de su teclado, ratón, micrófono o cámara web.

Los eventos, como por ejemplo hacer clic, pasar el botón por encima o pulsar una tecla x, recogen estas acciones realizadas por el usuario y producirán una respuesta.

En un proyecto interactivo, el componente de navegación facilita los hipervínculos que llevarán a los distintos contenidos. Esta estructura de navegación debe ser siempre original, usable y fácil de entender, y es importante no perder estos conceptos de vista porque es esta estructura de navegación la que más interactividad admite y no conviene pasarse.

En el caso de que nos encontremos en un proyecto en el que sea necesario un rápido acceso a los contenidos lo mejor será utilizar el clásico sistema de navegación jerárquico, pero en otro tipo de proyecto será más interesante utilizar diferentes contenedores para los menús, incluso utilizar determinados eventos para el despliegue de los menús.

Algunas ideas que te ayudarán a la hora de añadir creatividad a tus proyectos son:

–Aleatoriedad. Posibilitar al azar intervenir en la comunicación con el usuario hará que este se sienta más libre.

–Repetición. Ya sea de acciones o de imágenes, dan lugar a una nueva realidad.

–Personalizar el puntero del ratón.

–Comunicación intuitiva. Basándonos en los principios fundamentales de la comunicación interactiva, como puede ser que al mover el ratón, pulsar una tecla, etc… se vayan produciendo efectos en pantalla ayudará al uso interactivo que se haga del proyecto.

–Exclusividad. Como todo acto comunicativo, toda experiencia interactiva es única y exclusiva. Fomentar esta exclusividad siempre será un éxito.

–Cambio. El cambio es una característica fundamental de la interactividad. Este cambio puede programarse para que parta de la fecha y la hora, del usuario o del azar.

–Imitar la realidad. Llevar a la pantalla objetos reales para que el usuario interactúe con ellos puede dar buenos resultados, teniendo siempre en cuenta que se pretende más el efectivismo que el realismo.

Las fases que implica el desarrollo de un proyecto multimedia interactivo son:

–Análisis. Como ya hemos comentado es de suma importancia conocer el público objetivo de nuestro proyecto y su nivel de conocimiento respecto al uso de herramientas informáticas, analizar el contenido que vamos a transmitir.

–Diseño. En esta fase será fundamental realizar un planteamiento en papel de los caminos que el usuario podrá recorrer, indicando los enlaces entre las distintas pantalla y los eventos programados, así como los recursos multimedia que se vayan a utilizar.

Es crucial también en esta fase la definición de la interfaz de usuario, ya que este será el lugar en el que el usuario interactuará con el proyecto, a través de ratón, teclado y/o pantalla.

–Desarrollo. En esta fase se creará un prototipo con el diseño que tendrá finalmente el proyecto, se elaboran los elemento multimedia que se utilizarán y se integrarán en este prototipo.

–Validación. En este momento se evalúa la calidad de proyecto, estudiando tanto el uso que los usuarios realizarán de los diferentes componentes como su utilidad yse analizará cómo interactúan los usuarios con el prototipo en busca de insuficiencias y mejoras.

–Versión definitiva. Una vez solventados los problemas e inconvenientes que se hayan podido encontrar en la fase de validación, se realizará la versión definitiva del proyecto.

1.2. Estados

Prácticamente casi cualquier elemento puede adquirir interactividad. El ejemplo más básico de interactividad podríamos decir que es el hipervínculo. Estos elementos, por defecto, tienen un aspecto distinto al resto de elementos para indicar al usuario de que se trata de algo especial, diferente. Además, cuando pasamos el puntero del ratón sobre ellos, su aspecto cambia indicándonos que podemos hacer algo con ellos, además el puntero del ratón cambia de forma. Por otra parte, cuando ya hemos hecho clic sobre un hipervínculo, éste suele mostrarse de un color distinto a los hipervínculos del resto de la pantalla sobre los que todavía no hemos pulsado, para ayudarnos a recordar qué hemos visto ya y qué no hemos visto todavía.

Cuando desarrollamos proyectos interactivos es muy conveniente que los diferentes estados queden claros al usuario:

–Debemos aplicar un diseño especial a todos aquellos elementos de una pantalla con los que el usuario pueda interactuar. Señalarlos de algún modo.

–Es interesante que cuando el usuario pase el puntero del ratón sobre el elemento, este cambie de estado para confirmar al usuario que, efectivamente sucederá algo si pulsa con el ratón sobre ese elemento.

–Es también conveniente que, si el resultado de haber hecho clic en un elemento se visualiza a la par que ese elemento, este elemento quede desactivado para que el usuario tenga claro que está viendo lo que está sucediendo en pantalla es producto de haber hecho clic en ese elemento y no vuelva a interactuar con él por error.

–Para terminar, conviene también, que un elemento interactivo sobre el que ya