Tema 3. Gestión de proyectos de desarrollo. Elementos de diseño. Contenido dinámico - Animación

Transcripción

1 Tema 3. Gestión de proyectos de desarrollo multimedia y sistemas web. Elementos de diseño. Contenido dinámico - Animación Diseño Centrado en el Usuario. Diseño para la Multimedia Dra. Sandra Baldassarri Objetivos Desarrollo de proyectos multimedia y sistemas web utilizando técnicas de diseño centrado en el usuario. Características de las aplicaciones multimedia y web Definición de elementos multimedia: Texto Imagen / Gráficos Audio Video / Animaciones Algunas consideraciones prácticas: Diseño para web. Guías de estilo.

2 Animación La animación se define como la creación de imágenes (o texto) en movimiento con un frame por instante de tiempo. Existen técnicas para realizar animaciones de forma tradicional o de forma digital. Muchas de estas técnicas se pueden aplicar a ambos tipos de animaciones, aunque con ligeras diferencias. Animación tradicional La animación tradicional se realiza a partir de dibujos o pinturas en un papel donde cada aspecto de la imagen tiene que redibujarse en cada frame (shot). Hay diferentes técnicas: cel animation, stop-motion, claymation Las animaciones que se realizan utilizando estas técnicas capturan un frame por vez por medio de cámaras conectadas a un ordenador (en lugar de grabar la filmación).

3 Animación tradicional Cel animation: los elementos o caracteres de una escena que se van a mover se dibujan en material transparente (celuloide). El fondo se realiza de forma separada. Animación tradicional Stop-motion: esta técnica permite crear animaciones tridimensionales a partir de formas bidimensionales. Hay diversas formas de hacerlo, pero todas utilizan miniaturas tridimensionales en las que los objetos se mueven con muchísimo cuidado entre cada shot. Ejemplo

4 Animación tradicional Claymation: Animación con plastilina. Normalmente incluye técnica de stop-motion. Animación tradicional Combinación de animación con personajes reales: se realiza trabajando con técnicas tradicionales de animación.

5 Animación digital Todas las técnicas de animación tradicional tienen su contraparte digital. Además, existen técnicas puramente digitales it en las cuales no hay limitaciones como ratio de aspecto, tamaño de los frames, etc. Algunos formatos de animación digital soportan transparencia y canal chroma. Animación digital En animación digital hay que resaltar la animación tridimensional generada por ordenador (CG3G) Esta técnica incluye generación de shaders, simulación del cuerpo humano, ropas, cabello, agua, montañas, efectos especiales, etc.

6 Animación: secuencia de imágenes Las animaciones se pueden crear digitalmente. Cada frame individual puede corresponder a imágenes bitmap o imágenes vectoriales. Las imágenes bitmap son conceptualmente más simples, pero la animación suele ser más laboriosa. Las imágenes vectoriales ofrecen más posibilidades para la creación y manipulación. Una secuencia de imágenes se puede guardar como ficheros de imágenes consecutivas numeradas, que luego se trabajan en programas de edición de vídeo oenflash Flash. Animación: secuencia de imágenes Composición por capas: Los contenidos de cada frame se trabajan utilizando composición de capas (layer comps), que se mantienen como una secuencia de frames en el mismo documento.

7 Animación: secuencia de imágenes Rotoscopia: esta técnica recibe el nombre por el dispositivo patentado por Max Fleischer en 1915 (Betty Boop) Animación: secuencia de imágenes GIF Animados: consisten en múltiples imágenes bitmaps en un solo fichero. Las imágenes individuales se visualizan como una secuencia en los browser web o por otros programas sin necesidad de plug-in.

8 Animación: secuencia de imágenes Los GIF Animados son adecuados para animaciones cortas y simples. Características: Color indexado Compresión intraframe sin pérdidas ( eficiencia?) No poseen pista de sonido ni controles de reproducción Arriba: Original Abajo: Gif Animación: secuencia de imágenes GIF Animados: Material adecuado Arriba: Original Abajo: Gif

9 Animación: secuencia de imágenes GIF Animados: Material no adecuado Arriba: Original Abajo: Gif Animación: Interpolación La técnica de interpolación (o in-betweening) se utiliza tanto para animación tradicional como para animación digital. En animación tradicional, los animadores principales dibujan los cuadros claves de la animación y los dibujantes secundarios crean frames intermedios.

10 Animación: Interpolación Los programas de animación generan cuadros intermedios interpolando los valores de propiedades como la posición entre los cuadros claves, etc. La interpolación se puede aplicar a imágenes bitmap o a propiedades de los objetos vectoriales. Animación vectorial Las imágenes vectoriales son más fáciles de tratar con la técnica de interpolación. La interpolación se puede aplicar: a la forma de los objetos (traslación, rotación, escalado, deformaciones etc) a otras propiedades (cambio de color, iluminación, etc) Los frames intermedios sólo contienen instrucciones de las modificaciones en los parámetros que definen las propiedades de los objetos. La animación vectorial produce ficheros compactos.

11 Animación vectorial Las películas Flash (ficheros SWF) son el formato de animación web más popular. La animación en Flash se organiza con una línea de tiempo. Los objetos vectoriales se crean como un escenario, con herramientas convencionales de dibujo vectorial. Animación vectorial en Flash Los diferentes objetos gráficos se guardan en una librería de símbolos. Se crean instancias de los objetos para reutilizarlos, transformándolos de forma independiente y aplicando diferentes efectos visuales. Se aplica interpolación sobre cada instancia.

12 Animación vectorial en Flash Hay tres tipos de símbolos en Flash: Símbolos gráficos: son objetos vectoriales reutilizables. Movie clips: son animaciones auto-contenidas con sus propias líneas de tiempo, que se ejecutan dentro de una animación principal y se controlan por scripts. Símbolos botones: actualmente reemplazados por compontes de la IU. Se pueden animar símbolos gráficos y movie clips. Animación: Motion Graphics Se denomina Motion Graphics al diseño gráfico animado. After Effects es la aplicación líder en ordenadores personales para crear gráficos en movimiento, y ofrece los controles más sofisticados. Los efectos más simples se logran reposicionando o alterando propiedades de las capas de las imágenes bitmap de forma independiente. Las capas se pueden mover siguiendo caminos de movimiento (motion paths).

13 Ejemplo simple Animación: Motion Graphics Animación: Motion Graphics Se puede utilizar interpolación para modificar Se puede utilizar interpolación para modificar diferentes propiedades y sus valores.

14 Animación: Motion Graphics Se pueden aplicar efectos basados en el tiempo, como desintegración, desaparición, etc Resumen La animación consiste en una secuencia de imágenes en movimiento. Entre las técnicas de animación tradicional hallamos: Cel animation, Stop-motion, Claymation La animación ió digital it puede realizarse sobre imágenes bitmap o vectoriales. Las técnicas más utilizadas son: Composición por capas, rotoscopia Interpolación (in-betweening en animación tradicional)

15 Referencias - Multimedia Lecturas recomendadas: Animación tradicional: p _ animation Digital Multimedia, N. Chapman &J J. Chapman, Wiley Capítulos 7 (Animación)