DIW07.- Contenidos multimedia en la Web: Animaciones.
Contenidos multimedia en la Web: Animaciones.
Caso práctico
Como todas las semanas, se reúnen los miembros del equipo de trabajo de la empresa BK programación para comentar las incidencias de la semana anterior.
Ana ha realizado un storyboard del proyecto de animación para la presentación de la panadería "Migas amigas" y se lo muestra a sus compañeros para que le den su opinión.
–Tened en cuenta que esto es sólo una planificación previa que sirve para hacerse una idea del orden en el que se van presentar los diferentes elementos –dice Ana mientras se lo va mostrando a sus compañeros.
–¿Quiere decir eso que no son las escenas definitivas? –pregunta María.
–¡Claro! –le responde Ana, que continúa diciendo: –Aquí falta todo el colorido que queramos añadir, las texturas, el movimiento, el fondo de la escena, y todo lo que se nos ocurra.
Ana interviene diciendo: –A mí me parece que has hecho un guión muy original y a la vez muy detallado. No creo que tengáis problema para desarrollarlo, no queda ningún detalle que añadir salvo lo que ya has dicho. ¿Tienes alguna idea en mente?
–La verdad es que tengo algunas, pero no me he decidido todavía por ninguna en concreto –responde Ana.
–¿Qué te parece si me las comentas y realizamos las dos que creamos mejores? –pregunta Carlos y añade –yo puedo ayudarte a hacer una de ellas.
–Me parece estupendo, gracias Carlos, me serás de gran ayuda –dice Ana.
Ana, sabe que realizar una animación es una labor divertida pero que lleva muchas horas de trabajo. Siempre anima a todo el equipo en las labores que realizan valorando sus esfuerzos y procurando realizar críticas constructivas que sirvan para futuros proyectos. En este caso les recuerda que tratándose de una animación en una página principal hay que facilitar al usuario el que se salte la animación, ya que a los usuarios no les gusta tener que ver siempre la misma animación cuando acceden a un sitio Web; y como todas las semanas da por terminada la reunión diciendo: –Pues a trabajar todos.
Es un conjunto de ilustraciones mostradas en secuencia con el objetivo de servir de guía para entender una historia, previsualizar una animación o seguir la estructura de una película antes de realizarse o filmarse.
Carlos está muy contento de que Ana le permita colaborar en la realización de una animación. El ya ha explorado algunas herramientas para realizar animaciones y se ha centrado en la herramienta Flash.
Ha hecho algunas animaciones de prueba, pero nada serio, y está deseando realizar algo que realmente tenga alguna utilidad.
Según la definición de la wikipedia: animación es un proceso utilizado para dar la sensación de movimiento a imágenes o dibujos. Los cuadros se pueden generar dibujando, pintando o fotografiando los minúsculos cambios hechos repetidamente a un modelo de la realidad o a un modelo tridimensional virtual.
En la unidad de trabajo de Imágenes vimos que el formato GIF era un formato empleado en las imágenes que tienen entre 2 y 256 colores y que uno de sus usos principales seguía siendo el mostrar imágenes animadas en las páginas Web aunque se solía emplear en la creación de los iconos que acompañan a los enlaces y los logotipos y, en general, en aquellas imágenes con grandes áreas de color sólido.
Hay distintos formatos de archivo que permiten visualizar animaciones en la Web. Algunos como el GIF y el SVG ya se mencionaron en unidades anteriores, pero hay otros como:
El SWF que es un formato de archivo de gráficos vectoriales creado por la empresa Macromedia (actualmente Adobe Systems) que suele emplearse en la Web debido a que con un tamaño reducido de archivo permite una gran interactividad de los usuarios con la web incluso a los que tienen un ancho de banda escaso.
El MNG que es un formato de fichero, libre de derechos, para imágenes animadas y es una extensión del formato de imagen PNG.
En esta unidad hablaremos de las diferentes formas de realizar animaciones para su uso en la Web y nos centraremos en la la tecnología flash, aunque en noviembre de 2011, ante la llegada del HTML5, Adobe anunció su abandono de la tecnología flash para los dispositivos móviles aunque también anunciaron que seguirían desarrollando esta tecnología para los equipos de escritorio.
Recuerda que, como ya hemos dicho más de una vez, los recursos gráficos se emplean mucho en la Web y que, utilizados adecuadamente, pueden mejorar el aprendizaje del usuario y añadir valor a nuestro sitio pero que si se utilizan de forma incorrecta producen el efecto contrario y causan un enorme rechazo del usuario.
El que las personas que se dedican al diseño de interfaces puedan usar las tecnologías a su alcance y tengan mucha experiencia en el uso de estas tecnologías, no significa que deban usarlas siempre.
1.1.- Herramientas para crear animaciones.
Las animaciones se suelen utilizar en la Web para insertar publicidad mediante el uso de banners o como complementos visuales del diseño: rollovers, botones animados, etc.
Tenemos varias formas de añadir animación a la Web:
Usando diferentes formatos de archivo que permiten añadir animación, tal y como ya dijimos en el apartado anterior: GIF, MNG, SVG y SWF.
Utilizando el potencial de las reglas de estilo para simular la animación de los botones, enlaces, elementos de formulario, etcétera.
Aunque si nos ceñimos a la definición de animación dada en el apartado anterior, sólo emplearemos la primera forma para añadir animación a la Web y emplearemos las otras dos para la interacción del usuario con el sitio.
El mercado de la Web es muy amplio y el abanico de software para la realización de animaciones es muy extenso y en constante evolución. La tabla siguiente refleja algunos de los programas empleados por las personas dedicadas al diseño de interfaces cuando quieren incorporar animaciones a su diseño. El uso de uno u otro estará determinado por el tipo de animación a realizar y el presupuesto que tengamos.
Software de animación.
Programa.
Descripción.
Flash / Animate
Se trata de una aplicación multiplataforma de creación y manipulación de gráficos vectoriales destinada a la realización de animaciones y a la producción de contenido interactivo usando el lenguaje ActionScript.
Se utilizan para las animaciones web y para incorporar anuncios a la Web.
Al ser un programa que trabaja con imágenes vectoriales, permite realizar cambios de forma, posición y tamaño en las imágenes generando animaciones que ocupan poco espacio.
Actualmente se ha renombrado a Animate, y soporta animacions HTML5.
Stykz
Aplicación multiplataforma gratuita, con la que se pueden elaborar atractivas animaciones haciendo uso de muñecos dibujados con trazos y que pueden ser importadas en otras aplicaciones. Permite realizar exportaciones en formato GIF y MOV.
Microsoft GIF Animator
Aplicación gratuita que permite crear un GIF animado a partir de una colección de imágenes o vídeo con opciones para optimizar el tamaño y la duración.
Pencil2D
Programa que permite realizar cortos de animación combinando técnicas de ilustración tradicional con gráficos vectoriales.
Efecto simple utilizado en las páginas Web que consiste en variar alguna propiedad de un elemento HTML (HyperText Markup Language), de forma dinámica (sin necesidad de recargar la página).
En toda animación confluyen dos tipos de elementos que se complementan entre sí. Por un lado están los objetos gráficos que están representados en cada uno de los fotogramas. Estos objetos permanecen inmóviles en cada fotograma. Por otro lado, están los elementos propios de la animación que representan los cambios que se producen en los objetos a lo largo de los fotogramas.
Los objetos gráficos, son los elementos visuales del diseño con sus características de forma, medida, color y textura que, influenciados por los elementos de relación del diseño: posición, dirección, espacio y gravedad, se convierten en unos elementos prácticos del diseño con su representación, significado y/o función.
Todas las características de los objetos gráficos mencionados en el párrafo anterior ya las has visto en la unidad de Planificación de interfaces gráficas cuando estudiaste el apartado de Elementos del diseño. Si tienes alguna duda sobre alguna de estas características deberás repasar dicha unidad.
Debes conocer
Flash / Animate permite trabajar con diferentes tipos de objetos gráficos cada uno de los cuales tiene sus propias características. Debes saber que:
Un gráfico es cualquier objeto en formato vectorial dibujado con las herramientas disponibles en el programa o importado desde otro programa. Estos gráficos son la base de de cualquier animación.
Un símbolo es cualquier gráfico que se ha añadido a la biblioteca para poder ser utilizado en uno o más proyectos de animación una o más veces. Cuando empleamos un símbolo varias veces en la misma animación decimos que empleamos varias INSTANCIAS del símbolo.
Un clip de película es cualquier símbolo de una animación en el que se realizan transformaciones de posición, tamaño, forma, color, etcétera. La línea de tiempo de un símbolo de clip de película es independiente de la duración de la línea de tiempo de la escena, lo cual quiere decir que, si en la escena hay en una capa un fotograma que contiene un clip de película que dura 24 fotogramas y en otra capa un símbolo gráfico que dura dos fotogramas, la duración total será la de los 24 fotogramas del clip de película. El tiempo dependerá del valor FPS establecido.
El uso de las instancias de símbolos en las animaciones tiene varias ventajas:
La información del símbolo se almacena una sola vez y no tantas como instancias tengamos de él, por lo que el archivo resultante ocupará menos espacio.
Si modificamos el símbolo original, todas las instancias que tengamos de ese símbolo se modifican automáticamente.
Pero, además de los objetos gráficos, en una animación hay una serie de elementos importantes a tener en cuenta si se quiere transmitir la sensación de realidad:
Claridad en la acción o en la puesta en escena de manera que permita transmitir la idea de forma que el espectador la pueda interpretar fácilmente.
Sentido del tiempo, relacionado con la percepción visual y la persistencia de una imagen en el cerebro de una persona. Este elemento es el que dota a una animación de un ritmo más rápido o más lento.
Compresión y extensión de la forma de los objetos gráficos para evitar su rigidez y conseguir una apariencia más realista. Esto es de especial importancia cuando los objetos gráficos representan formas orgánicas.
Anticipación de las acciones que preparan al espectador y captan su atención. El espectador es consciente de que algo va a ocurrir.
Continuidad en la acción buscando una fluidez en la escena que evite el efecto "robot".
Terminación de la acción de forma adecuada y que transmita la sensación de gravedad o pesadez del objeto gráfico involucrado.
La animación debe recoger todos los cambios que se producen en los elementos que conforman una escena: los decorados, la iluminación, la caracterización de los personajes de la animación y tener en cuenta la perspectiva desde la cual el espectador está mirando la escena.
En la unidad de vídeo definíamos la palabra "Fotograma" como: "Cada una de las imágenes individuales captadas por cámaras de video y registradas analógica o digitalmente".
En aquel momento dijimos que el tamaño del fotograma es el número de píxeles de ancho y de alto que tienen los fotogramas de un clip de película y que el número de fotogramas por segundo (FPS) es el número de imágenes estáticas que se suceden en un segundo.
En una animación nosotros trabajamos directamente creando los distintos fotogramas donde incluimos los diferentes objetos gráficos. Las pequeñas diferencias en estos objetos a lo largo de los distintos fotogramas son las que nos transmiten la sensación de movimiento.
Cuando trabajamos con un software para crear una animación tenemos que definir las propiedades del documento:
FPS: Al igual que en el caso del vídeo representa el número de fotogramas por segundo. Este valor determinará la duración de la animación ya que si creamos 24 fotogramas distintos y establecemos este valor en 24, la duración total de la animación será de 1 segundo.
Tamaño: Definimos el número de píxeles de ancho y de alto del documento o escenario, o lo que es lo mismo, el tamaño de todos los fotogramas de la animación.
Color de fondo: Definimos un color de fondo para el escenario.
Adobe(Todos los derechos reservados)
Una vez configurado el escenario tendremos que utilizar la línea de tiempo para añadir los fotogramas que compondrán la animación. La línea de tiempo está dividida en fotogramas numerados aunque sólo se muestran (además del 1) los números que son múltiplos de 5. La imagen que ilustra este apartado muestra un rectángulo de color rosa semitransparente con una línea vertical del mismo color situado en el fotograma número 51 de la línea de tiempo. Este símbolo señaliza el fotograma que se está visualizando en ese momento, sobre el que se van a realizar las modificaciones.
Para realizar una animación disponemos de las Capas y de los diferentes Tipos de fotogramas.
La utilidad de las capas en el software de animación es la misma que en el software de edición de imágenes. Permite que los objetos de cada capa no interfieran con los de las demás. La imagen que ilustra este apartado muestra un ejemplo de la línea de tiempo de una animación realizada con el Adobe Flash Professional CS5.5. Esta animación consta de 7 capas que leídas de arriba a abajo son: Interpolación de movimiento clásica, Clave e intermedios vacíos, Interpolación de forma, Interpolación de movimiento, Fotograma a fotograma, Objeto estático y Capa 9.
Los nombres de las capas se escogen de forma que identifiquen la parte de la escena que se está representando en la animación. Por ejemplo, si la escena contiene el lanzamiento de un balón a una canasta, puede que tengamos una capa llamada "Balón" donde está representado el balón con su movimiento, otra capa llamada "Canasta" donde está dibujada la canasta, una capa llamada "Campo de juego" donde está representado el fondo de imagen de la escena y una capa llamada "Sonido" donde se encuentra el sonido del balón cuando choca con el tablero de la canasta. En el caso de la imagen se han elegido estos nombres para ilustrar la representación gráfica que da el programa a cada tipo de fotograma.
Con las capas se pueden realizar diferentes operaciones: insertar nuevas capas, cambiar de posición una capa en la pila de capas de modo que afecta al orden de visualización de los objetos en una escena, duplicar una capa, borrar, nombrar, bloquear para evitar cambios accidentales, etcétera. Si queremos evitar borrados accidentales es recomendable bloquear todas las capas excepto aquella con la que vayamos a trabajar.
Cada capa tiene un cuadrado de color a la izquierda del primer fotograma que permite configurar si los objetos dibujados se presentan con relleno o sólo con el borde. Basta con hacer un clic sobre este cuadrado para intercambiar la configuración.
Pero la parte más importante de una animación son los fotogramas que pueden ser de los siguientes tipos:
Fotograma clave: Se representa con una círculo de color negro. En la imagen se muestran muchos fotogramas de este tipo. De hecho la capa de nombre "Fotograma a fotograma" sólo contiene fotogramas de este tipo. Representa un fotograma en el que hay al menos un objeto representado. Cada fotograma clave representa un cambio en la escena con respecto al fotograma anterior.
Fotograma clave en blanco: Se representa con una circunferencia. En la imagen se muestran dos fotogramas de este tipo en el primer fotograma de la línea de tiempo de la segunda y séptima capa. Representa un fotograma en el que no hay ningún objeto representado.
Fotograma de fin de secuencia: Se representa con un rectángulo. En la imagen se muestran tres fotogramas de este tipo en el fotograma número 51 de la línea de tiempo de la segunda, sexta y séptima capa. Representa el último fotograma de una secuencia de fotogramas iguales.
Fotograma intermedio: Su representación dependerá del grupo de fotogramas del que forme parte. Así si forma parte de:
Una interpolación de forma: Tiene un fondo de color verde claro y una flecha dibujada entre dos fotogramas clave consecutivos no contiguos (los cuales tienen el mismo color de fondo).
Una interpolación de movimiento clásica: Tiene un fondo de color lila o violeta claro y una flecha dibujada entre dos fotogramas clave consecutivos no contiguos (los cuales tienen el mismo color de fondo).
Una interpolación de movimiento: Tiene un fondo de color azul claro (los fotogramas clave tienen también este color de fondo).
Una secuencia de fotogramas vacíos: Tiene un fondo de color blanco (los fotogramas clave y de terminación de secuencia también tienen este color de fondo).
Una secuencia de fotogramas iguales: Tiene un fondo de color gris claro (los fotogramas clave y de terminación de secuencia tienen el mismo color de fondo).
En animación consiste en la creación de fotogramas intermedios a partir de dos fotogramas clave no contiguos, realizando las variaciones oportunas (posición, color, forma, etcétera) en el objeto contenido en el primer fotograma clave.
Una vez que ya has visto la utilidad de las capas y cómo representa el programa cada tipo de fotograma, primero debes distinguir cuándo utilizar un tipo de animación u otro y después debes saber cómo realizar cada tipo de animación.
Flash permite realizar dos tipos de animaciones distintas: Fotograma a fotograma y por Interpolación de fotogramas.
La animación fotograma a fotograma está pensada para realizar animaciones en las que cada fotograma tiene una ligera variación respecto al fotograma anterior. Este es el caso de los dibujos animados o cuando representamos el movimiento de un personaje.
Este tipo de animación se caracteriza porque cada uno de sus fotogramas es un fotograma clave cuyo contenido es bastante complejo como puede ser un dibujo que representa una persona que camina, o un animal corriendo, o el movimiento de las ramas de un árbol con el viento.
Los pasos a seguir para crear una animación de este tipo son:
Crear un fotograma clave en el fotograma número 1.
Dibujar en dicho fotograma el objeto o personaje que queramos animar.
Crear un fotograma clave a continuación del anterior. El objeto o personaje se duplica en este nuevo fotograma.
Realizamos las pequeñas variaciones en el objeto o personaje del nuevo fotograma.
Repetimos los dos pasos anteriores hasta completar la animación.
La animación por interpolación de fotogramas está pensada para la realización de animaciones sencillas: un balón girando, un objeto desplazándose, un cambio de forma en un objeto, un cambio de color.
Este tipo de animación se caracteriza por necesitar solamente dos fotogramas clave distintos, uno inicial y otro final, separados entre sí por una serie de fotograma intermedios. La interpolación es la que se va a encargar de crear todos los fotogramas intermedios que haya entre los dos fotogramas clave.
Los pasos a seguir para crear una animación de este tipo dependerá del tipo de interpolación a realizar. Disponemos de distintos tipos de interpolación:
Interpolación de forma: Es aquella que nos permite transformar un objeto en otro (un cuadrado en un círculo, o algo más complejo). Los objetos deben ser editables, no pueden formar parte de un grupo. Se puede realizar este tipo de animación aunque los objetos de los dos fotogramas clave no estén situados en la misma posición ya que en este caso realiza simultáneamente un cambio de posición del objeto en cada uno de los fotogramas intermedios siguiendo una trayectoria rectilínea. También se puede emplear este tipo de interpolación para realizar un cambio gradual de color en un objeto.
Interpolación de movimiento: Es aquella que nos permite cambiar un objeto de posición, de tamaño y/o rotarlo. También permite variar la velocidad del movimiento a lo largo de la escena y aplicar efectos de color a los símbolos en cada fotograma clave. Este tipo de interpolación se puede realizar tanto con objetos agrupados como con símbolos.
En la presentación siguiente se especifica paso a paso cómo crear una interpolación de forma.
Interpolación de Forma
Interpolación de Forma
En la siguiente presentación verás:
Cómo iniciar un proyecto con Flash.
Cómo cambiar el tamaño y color de fondo del escenario.
Cómo poner nombre a una capa.
Cómo elegir el objeto a dibujar.
Cómo establecer su color.
Cómo dibujarlo en el escenario.
Cómo realizar una interpolación de forma.
Cómo ver la secuencia completa, fotograma a fotograma utilizando el papel cebolla.
Interpolación de Forma
Paso 1: Abrimos el programa y creamos un nuevo proyecto.
Interpolación de Forma
Paso 1: Resultado del nuevo proyecto. Escenario por defecto.
Interpolación de Forma
Paso 2: Cambiamos el tamaño y el color del escenario
Interpolación de Forma
Paso 2: Resultado del cambio realizado.
Interpolación de Forma
Paso 3: Ponemos el nombre a la capa.
Interpolación de Forma
Paso 3: Escribimos Interpolación Forma.
Interpolación de Forma
Paso 4: Escogemos el objeto a dibujar.
Interpolación de Forma
Paso 6: Escogemos su color.
Interpolación de Forma
Paso 6: También podemos escoger el color de esta forma.
Interpolación de Forma
Paso 7: Dibujamos el objeto manteniendo el ratón pulsado entre los dos vértices opuestos.
Interpolación de Forma
Paso 7: Resultado. Hemos creado un fotograma clave. En el fotograma número 1.
Interpolación de Forma
Paso 8: Creamos, con el menú contextual, un fotograma clave en blanco en el número de fotograma 55.
Interpolación de Forma
Paso 8: Resultado. Se muestra el fotograma clave 55 vacío y se han creado fotogramas intermedios iguales al fotograma número 1.
Interpolación de Forma
Paso 9: Elegimos la elipse como objeto a dibujar en el fotograma 55.
Interpolación de Forma
Paso 10: Elegimos el color de la elipse.
Interpolación de Forma
Paso 11: Dibujamos la elipse al igual que hicimos con el rectángulo.
Interpolación de Forma
Paso 11: Resultado. Ahora tenemos un fotograma clave con una elipse que aparece en el escenario.
Interpolación de Forma
Paso 12: Creamos una interpolación de forma con el menú contextual sobre el fotograma número 1.
Interpolación de Forma
Paso 12: Resultado. Aparecen todos los fotogramas de color verde claro con una flecha.
Interpolación de Forma
Paso 13: Activamos el papel cebolla para ver la secuencia completa.
Interpolación de Forma
Paso 13: Resultado. Nos muestra en el escenario un conjunto de fotogramas seguidos que aparecen en la línea de tiempo marcados en color gris oscuro.
Interpolación de Forma
Paso 14: Extendemos el papel cebolla en la línea de tiempo para que abarque todos los fotogramas. Podemos ver que hay una trayectoria lineal que une los objetos de ambos fotogramas clave.
En la siguiente animación puedes comprobar el funcionamiento de la interpolación anterior.
1.5.- Animación de imágenes. Interpolación de movimiento.
Además de la interpolación de forma vista en el apartado anterior tenemos, en el Adobe Flash Professional CS5.5, dos tipos de interpolación de movimiento:
La interpolación de movimiento clásica: Es la única interpolación que había hasta la versión CS4, llamada interpolación de movimiento y similar en su funcionamiento a la interpolación de forma con la excepción de que el objeto representado en el primer fotograma clave debe convertirse en símbolo antes de colocar una instancia nueva de él en el siguiente fotograma clave. Es a esta segunda instancia del símbolo a la que se hacen las variaciones de forma, tamaño, posición y/o color.
La interpolación de movimiento: Existe desde la versión CS4. Es una nueva forma de interpolación de movimiento mucho más versátil que la interpolación de movimiento clásica ya que permite hacer lo mismo y más que ésta última pero de forma mucho más cómoda. Permite hacer modificaciones en la ruta, alterar la curvatura de la trayectoria en cualquier punto, o la velocidad, pudiendo hacer efectos de aceleración y frenado de objetos.
Para convertir un objeto en un símbolo basta con utilizar dicha opción en el menú contextual estando el símbolo seleccionado.
Cuando se crea una interpolación de movimiento clásica en un objeto del primer fotograma, éste se convierte automáticamente en símbolo.
Los efectos de color sólo se pueden poner en los símbolos de los fotogramas clave.
Recomendación
En el siguiente enlace tienes la información sobre el método numérico conocido como Curvas de Bézier ideado por el ingeniero francés Pierre Bézier para ser usado en los dibujos técnicos. Te recomiendo que veas las animaciones GIF porque son bastante instructivas. Estas curvas se emplean mucho en cualquier software de diseño ya sea de imágenes o de animaciones y se nombrarán más adelante.
En la siguiente presentación se especifica paso a paso cómo crear una interpolación de movimiento con el nuevo método incorporado por Flash desde su versión CS4.
Interpolación de Movimiento
Interpolación de Movimiento
En la siguiente presentación verás:
Cómo convertir un objeto en símbolo gráfico.
Cómo realizar una interpolación de movimiento.
Cómo modificar la ruta del movimiento en el escenario.
Cómo editar el movimiento para conseguir un efecto de aceleración y/o frenado.Cómo iniciar un proyecto con Flash.
Interpolación de Movimiento
Primeros pasos.
Deberás seguir los mismo pasos que viste en la presentación de la interpolación de forma para:
Crear un nuevo proyecto.
Cambiar las propiedades del documento: color, tamaño, FPS.
Dibujar un objeto en el primero fotograma y seleccionarlo.
El ejemplo se ha realizado partiendo de un círculo de color amarillo, sin borde.
Interpolación de Movimiento
Paso 1: Dibujamos el círculo de color amarillo sin borde en una esquina del escenario y lo seleccionamos.
Interpolación de Movimiento
Paso 2: Creamos una interpolación de movimiento en el primer fotograma con el menú contextual
El círculo amarillo aparece con una trama en el momento de seleccionar el fotograma.
Interpolación de Movimiento
Paso 2: Resultado. El programa nos avisa de que para hacer la interpolación el objeto debe ser convertido antes en símbolo.
El círculo amarillo aparece con una trama en el momento de seleccionar el fotograma.
Interpolación de Movimiento
Paso 2: Resultados.
1. El símbolo se añade a la biblioteca.
2. El símbolo tiene otra representación en el escenario.
3. Se añade la interpolación de movimiento hasta el fotograma 24 que pasa a ser el fotograma actual. Esto se debe a que el documento está configurado con 24 FPS.
Interpolación de Movimiento
Paso 3: Desplazamos la instancia del símbolo del fotograma 24.
1. Colocamos la instancia en la esquina superior derecha del escenario.
2. Aspecto que adquiere el símbolo inicial durante el desplazamiento.
Interpolación de Movimiento
Paso 3: Resultado.
Aparece el símbolo del círculo representado como tal (envuelto por un cuadrado de color azul con un círculo azul en el centro).
2. Aparece una trayectoria de color verde que va desde el centro del símbolo inicial (que ya no se ve en el fotograma 24) hasta el centro del símbolo final, con puntos en sus extremos y con puntos por el medio a intervalos regulares.
Interpolación de Movimiento
Modificación de la ruta.
Podemos modificar:
La posición del principio de la ruta sin modificar la trayectoria rectilínea ni la posición final.
La posición del final de la ruta sin modificar la trayectoria rectilínea ni la posición inicial.
La curvatura de la ruta sin modificar las posiciones inicial y final.
La posición de la ruta completa.
La posición inicial modificando la curvatura de la trayectoria sin alterar la posición final.
La curvatura de la trayectoria con los puntos de anclaje o nodos de control de las curvas de Bézier de la posición inicial.
La curvatura de la trayectoria con los puntos de anclaje o nodos de control de las curvas de Bézier de la posición final.
La posición final modificando la curvatura de la trayectoria sin alterar la posición inicial.
Transformando la trayectoria de forma libre:
Sesgando la trayectoria.
Cambiando la escala de la trayectoria.
Invirtiendo la trayectoria.
Añadiendo fotogramas clave a la trayectoria para poder trazar nuevas curvas.
Modificando las curvas en los fotogramas clave.
A continuación se muestra cada operación mediante capturas de pantalla.
Interpolación de Movimiento
1. Para modificar la posición del principio de la ruta sin modificar la trayectoria rectilínea ni la posición final.
a. Nos situamos en el punto inicial de la trayectoria.
b. Lo señalamos, desplazamos y soltamos.
2. Para modificar la posición del principio de la ruta sin modificar la trayectoria rectilínea ni la posición final.
a. Nos situamos en el punto inicial de la trayectoria.
b. Lo señalamos, desplazamos y soltamos.
Interpolación de Movimiento
3. Para modificar la curvatura de la ruta sin modificar las posiciones inicial y final.
a. Nos situamos en el punto a curvar.
b. Señalamos y comenzamos a desplazarlo.
c. Cuando alcancemos la curvatura deseada.
d. Soltamos el botón del ratón.
Interpolación de Movimiento
4. Para desplazar la ruta completa.
a. Seleccionamos la herramienta de subselección.
b. Nos situamos en un punto de la curva.
c. Seleccionamos y desplazamos.
d. Soltamos el botón del ratón.
Interpolación de Movimiento
5. Para desplazar la posición inicial modificando la curvatura de la trayectoria sin alterar la posición final.
6. Para cambiar la curvatura con los puntos de anclaje o nodos de control de las curvas de Bézier de la posición inicial.
a. Seleccionamos el nodo.
b. Lo desplazamos y lo soltamos.
Interpolación de Movimiento
7. Para cambiar la curvatura con los puntos de anclaje o nodos de control de las curvas de Bézier de la posición final.
a. Seleccionamos el nodo.
b. Lo desplazamos.
c. Soltamos el nodo.
Interpolación de Movimiento
8. Para modificar la posición final cambiando la curvatura de la trayectoria sin alterar la posición inicial.
a. Seleccionamos el punto final de la trayectoria.
b. Lo desplazamos.
c. Lo soltamos.
Interpolación de Movimiento
9. Para transformar de forma libre la trayectoria.
a. Abrimos el menú contextual en cualquier punto.
b. Escogemos la opción Transformación libre.
9.1. Para sesgar.
a. No situamos en un punto central del lateral.
b. Lo señalamos, nos desplazamos y soltamos.
Interpolación de Movimiento
9.2. Para cambiar la escala.
a. Nos situamos en un punto de una esquina.
b. Lo señalamos, nos desplazamos y soltamos.
10. Para invertir los puntos inicial y final de la trayectoria.
a. Escogemos en el menú contextual Ruta de movimiento-Invertir ruta.
Interpolación de Movimiento
11. Para crear fotogramas clave en los números de fotograma 7, 13 y 18.
a. Nos situamos en un cada fotograma y seleccionamos la opción Posición de la opción del menú contextual Insertar fotograma clave.
Interpolación de Movimiento
Paso 11: Resultado.
1. Hemos creado nuevos fotogramas clave en los números de fotogramas 7, 13 y 18.
2. Los fotogramas creados aparecen marcados en la trayectoria con una circunferencia. En el escenario se está visualizando el contenido del fotograma 13.
Interpolación de Movimiento
12. Para modificar las curvas del fotograma clave 13.
a. Nos situamos en el punto central.
b. Lo señalamos, mostrando los puntos de control.
c. Lo desplazamos hasta el lugar deseado.
d. Soltamos el botón del ratón.
Interpolación de Movimiento
12. Para modificar las curvas del fotograma clave 18. (sin necesidad de estar en el fotograma)
a. Nos situamos en el nodo a mover.
b. Lo señalamos y desplazamos.
c. Soltamos el botón.
d. Hacemos lo mismo con el nodo del fotograma 8.
En la siguiente animación puedes comprobar el funcionamiento de la interpolación anterior.
Relaciona los Tipos de animación con el Uso habitual que se le suele dar, escribiendo el número asociado al Uso en el hueco correspondiente.
Los dibujos animados se suelen realizar utilizando una animación fotograma a fotograma. Para hacer un cambio de posición con una trayectoria curva tenemos que usar una interpolación de movimiento ya que la de forma traza una trayectoria rectilínea y para hacer un cambio de objeto empleamos la interpolación de forma.
Ahora que ya conoces cómo animar objetos en tu escenario, ¿qué te parece si añadimos algo de texto? Normalmente las animaciones publicitarias suelen ir acompañadas de texto en movimiento, texto que aparece o desaparece, o sufre transformaciones o efectos, y para Flash el texto es un objeto más del que debes saber unas cuantas cosas.
La versión de Flash que estamos empleando admite dos motores de texto:
Texto clásico: Es el único motor de texto que había hasta la aparición de la versión CS5 de Flash.
Texto TLF: Incorporado en la versión CS5, este motor de texto incluye algunas mejoras respecto al anterior. Permite ligar los textos contenidos en diferentes cuadros de texto de forma que el texto que no cabe en el primer cuadro de texto continúa viéndose en el segundo cuadro y así sucesivamente, de forma similar a la vinculación de cuadros de texto del procesador de textos Word de Microsoft. También permite poner el texto en columnas dentro del cuadro que queramos.
Hay una serie de características configurables en ambos tipos de motores de texto. Estas son:
Posición: Son los valores X e Y correspondientes a la esquina superior izquierda de la caja contenedora del texto respecto a la esquina superior izquierda del escenario.
Tamaño: Son los valores de ancho y de alto en píxeles que ocupará la caja contenedora del texto en el escenario.
Carácter: Son los valores de la familia de la fuente escogida para visualizar el texto, el estilo (cursiva, negrita, …), el tamaño de la fuente en puntos, el color de la fuente, el espaciado entre las letras (valores comprendidos entre -60 y 60 puntos para el texto clásico y entre -1000 y 1000 milavos de guión largo para el texto TLF), el interlineado que se puede establecer en puntos o en porcentaje pero sólo en el motor de texto TLF.
Párrafo: Son los valores de la alineación del párrafo (izquierda, centro, derecha o justificado), la sangría de primera línea, los márgenes izquierdo y derecho (en el caso de texto clásico) o inicial y final (en el caso de texto TLF) que separan el texto de su caja contenedora. Si elegimos texto clásico también podremos establecer el espaciado interlineal y, en el caso del texto TLF, podremos configurar el espacio anterior y posterior del párrafo.
Además de estas propiedades, muchas de ellas comunes a ambos motores de texto, hay otras que dependen del tipo de texto que elijamos. Para cada motor de texto hay varios tipos de texto para elegir. Así, en el caso del texto clásico tenemos los tipos: Texto estático, Texto dinámico e Introducción de texto, mientras que para el texto TLF tenemos los tipos: Sólo lectura, Seleccionable y Editable.
El Texto estático es aquel cuyo contenido (las palabras que lo forman y la posición de éstas) no varía durante toda la animación, pudiendo variar cualquiera de sus propiedades, forma, rotación y/o posición.
El Texto dinámico permite la modificación del contenido durante la animación mediante el empleo de la programación.
El Introducción de texto está pensada para la interactividad con el usuario mediante la introducción de datos.
El Sólo lectura impide que el usuario pueda realizar una selección para copiar y pegar.
El Seleccionable, al contrario que el anterior, permite realizar una operación de selección de texto.
El Editable, al igual que el de introducción de texto, permite introducir datos al usuario.
Al ser un objeto, el texto puede ser tratado como tal, realizando cualquier tipo de animación que queramos. Ahora bien, si lo que quieres es animar cada letra por separado, es más fácil si cada letra está en una capa diferente. Si ya has escrito el texto y has cambiado sus propiedades, y decides después animar las letras por separado puedes hacerlo:
Seleccionando la caja que contiene el texto con la herramienta de selección.
Utilizando la opción del menú contextual Separar.
Utilizando la opción del menú contextual Distribuir en capas.
Si lo haces debes saber que:
El motor de texto TLF convierte en objetos de dibujo cada una de las letras cuando realiza la separación por lo que dejan de ser letras y ya no se pueden cambiar por otras. Por otro lado, podemos realizar cualquier operación que podríamos hacer con cualquier otro dibujo, como por ejemplo, seleccionarla con la herramienta de Subselección y modificar sus curvas mediante los puntos de control. Para ello basta con hacer un primer clic en el dibujo para seleccionarlo y un segundo clic en el contorno del dibujo. Esto es así si el icono del ratón está acompañado de un cuadrado hueco en el momento de aproximarnos al contorno del dibujo (ya que en ese caso veremos ya los puntos de control de cada curva). En el caso de que en el momento de hacer el segundo clic el icono mostrara un cuadrado de color negro sólo se mostrarían unos círculos en el objeto, con lo que necesitaríamos de un tercer clic sobre uno de estos círculo para ver sus puntos de control de la curva.
El motor de texto clásico separa las letras, pero siguen siendo letras modificables aunque también puedes convertir cada letra en un símbolo para añadir a la biblioteca y editarlo deformándolo a tu antojo con la opción Envoltura del menú contextual. Cuando se realiza la distribución en capas, cada capa tiene como nombre automáticamente, el nombre de la letra, y quedan apiladas por orden (la letra de más a la izquierda queda más abajo en la pila de capas).
1.7.- Integración de audio en una animación. Sincronización.
Reflexiona
Ya tienes gran parte del camino recorrido, sabes hacer una animación que incluye gráficos y texto. Has realizado, no sin mucho esfuerzo, una animación de un personaje visto de espaldas que va caminando por un sendero cubierto de hojas secas hasta llegar a una casa vieja y destartalada con un aspecto terrorífico. Cuando llega a la puerta el escenario cambia y muestra un primer plano de la mano del personaje girando el pomo de la puerta, que se ve oxidado y medio desencajado, y a continuación empuja esa puerta. ¿No crees que falta algo en toda la animación?
Adobe(Todos los derechos reservados)
De todos los formatos de sonido que vimos anteriormente en otra unidad, los que más se suelen utilizar con Flash son: WAV y MP3. Recuerda los parámetros que afectaban a la calidad del sonido y los que influían sobre el peso del archivo ya que la animación tendrá un mayor peso cuanto mayor sea el peso de los archivos que utilice.
Podemos reproducir un sonido en la escena en cualquier momento. Para ello bastará con seguir los siguientes pasos:
Incorporar el archivo de sonido a la biblioteca. Podemos importarlo con la opción "Importar a la biblioteca" de la opción "Importar" del menú "Archivo", o arrastrarlo desde la carpeta donde esté almacenado, y dejarlo caer en el panel de la biblioteca. Una vez en la biblioteca, podremos distinguir el archivo porque estará acompañado del símbolo de un altavoz.
Crear una capa donde se pondrá el sonido. Si se simultanean varios sonidos a la vez habrá que crear una capa para cada uno de ellos. En este último caso es conveniente nombrar adecuadamente la capa para distinguir el sonido que reproducimos en ella. También puedes crear una carpeta que contenga todas las capas de sonido.
Crear un fotograma clave en blanco en el momento de la escena donde queremos que comience a sonar.
Arrastrar el archivo de sonido desde la biblioteca al escenario en ese fotograma.
Los archivos de sonido se reproducen de principio a fin. Por ello, si pones sonidos en la misma capa y sus fotogramas clave no están separados lo suficiente, puede que el segundo sonido comience a reproducirse antes de que termine el primero. Es por ello, también, que la animación no termina hasta que termina el sonido.
Por la misma razón, si reproduces de forma cíclica una animación y llega al fotograma que contiene el sonido antes de que haya terminado su reproducción, el nuevo se solapará con el anterior. Esto se debe a que por defecto, el Flash tiene el "modo Evento" como forma de sincronismo.
La sincronización del sonido es un aspecto muy a importante a tener en cuenta para evitar reproducciones repetidas de forma accidental o para evitar que la animación se interrumpa durante la descarga del archivo de sonido.
Flash dispone en el panel de propiedades del sonido de distintas formas de sincronización:
Sincronismo de tipo Evento: El sonido se reproduce de forma automática cada vez que la animación llega al fotograma clave que lo contiene, y se reproduce hasta el final (según lo que dure) aunque la animación se reproduzca de forma cíclica, pudiendo producir solapamientos de sonido, tal y como ya se ha dicho.
Sincronismo de tipo Inicio: Funciona parecido al anterior pero evita la duplicidad del sonido, lo que significa que hasta que termine el primero no volverá a reproducir el mismo sonido, pudiendo saltarse alguna reproducción.
Sincronismo de tipo Detener: Impide que un determinado sonido continúe más allá del fotograma en el cual indiquemos este tipo de sincronismo.
Sincronismo de tipo Flujo: Es el modo que se debe emplear cuando queremos reproducir una animación desde Internet que contenga un archivo de sonido de larga duración para evitar que la descarga de este archivo afecte a la visualización de la animación de forma correcta. Con este modo, el archivo de sonido se fragmenta en pequeños trozos sincronizados con los fotogramas y se descargan a la misma velocidad que la animación.
Flash también permite importar vídeos a nuestra animación pero deberán estar en un formato apropiado para él. Estos formatos son FLV, F4V.
Formato de Adobe, basado en el formato ISO (International Standard Organization), MP4.
Para saber más
En el siguiente enlace puedes consultar una información detallada sobre los formatos de vídeo y audio que son compatibles con las diferentes versiones de Flash Player desde la página de Adobe.
Cuando deseamos incorporar un archivo de vídeo a nuestra animación podemos hacerlo, al igual que hacíamos con el sonido, arrastrándolo directamente desde la carpeta que lo contiene al panel "Biblioteca" o importarlo utilizando la opción "Importar vídeo" de la opción "Importar" del menú "Archivo".
El resultado final en ambos casos es el mismo: se abre el cuadro de diálogo del asistente para importación de vídeo. La única diferencia es que en el primer caso, mientras no se termine el proceso de importación, el vídeo arrastrado al panel "Biblioteca" figura con un nombre correlativo de "Símbolo" que luego se transforma en el nombre del archivo y pasa a estar acompañado del icono de una cámara de vídeo.
El asistente nos permite indicar si el vídeo está en la máquina local o en una ubicación remota en cuyo caso habrá que indicar la URL correspondiente.
Un vídeo que se encuentre en el equipo local podemos importarlo de dos formas distintas: como un componente de reproducción y directamente en la línea de tiempo. Realmente existe una tercera opción que es importarlo como vídeo de dispositivo móvil. Esta última opción no la veremos puesto que Adobe ha anunciado su abandono del desarrollo de esta tecnología para dispositivos móviles en beneficio del HTML5.
El asistente para la importación como componente de reproducción nos solicita primero que escojamos entre una amplia lista de formatos de reproductores, aunque también nos permite escoger un aspecto personalizado siempre que lo tengamos ya creado y exportado como archivo SWF.
Una vez resuelto este paso el programa nos informa de que creará un componente Flash Vídeo en el escenario y que lo configurará para reproducirlo localmente, y nos avisa de que el archivo debe ser implementado en el servidor y de la necesidad de actualizar la URL de la ubicación del vídeo en la Web en el panel de Propiedades antes de exportar e implementar el .swf.
Cuando se termina el proceso el nombre del aspecto del componente elegido figurará en el panel "Biblioteca" acompañado del icono que representa un reproductor multimedia.
Si por el contrario, elegimos la opción de importar directamente en la línea de tiempo, el programa nos dará a elegir su incorporación como tres tipos distintos de símbolos: "Vídeo incorporado", "Clip de película" y "Gráfico", además de permitirnos escoger si queremos colocar, o no, la instancia del símbolo en el escenario y, en caso afirmativo, si queremos prolongar la línea de tiempo el número de fotogramas necesarios que necesite la reproducción total del vídeo y si queremos incluir el audio del vídeo. En cualquier caso y, después de un resumen informativo de nuestra elección, el nombre del archivo es añadido a la lista de nombres del panel "Biblioteca" acompañado de un icono de una cámara de vídeo.
El empleo de vídeo incorporado sólo se recomienda para archivos de vídeo muy pequeños debido a que aumentan mucho el peso del archivo SWF y puede producir fallos de sincronización con el audio en vídeos largos.
1.9.- Efectos y filtros de efectos.
Todas las animaciones se pueden mejorar y darles un aspecto más profesional cuando se aplican ciertos efectos sobre los objetos que la componen. En este apartado veremos los efectos de color que se pueden aplicar al texto o a cualquier símbolo ya sea éste algo tan simple como un cuadrado o algo más complejo como un vídeo importado, los efectos sonoros que se pueden aplicar a una secuencia de sonido y los filtros de efectos que se pueden aplicar a los elementos gráficos.
Efectos de color.
Los efectos de color que podemos aplicar son:
Ninguno: Quita cualquier efecto que pudiera tener el objeto.
Brillo: Establece el porcentaje de luminosidad del objeto, con valores que van desde -100% o negro (sin luz) a 100% o blanco (brillo total).
Tinta: Establece el porcentaje de color del objeto, con valores que van desde 0% o negro (nada de color) al 100% del color elegido (la combinación de rojo, verde y azul elegida).
Alfa: Establece el porcentaje de transparencia del objeto, con valores que van desde 0% o totalmente transparente al 100% o totalmente opaco.
Avanzadas: Permite establecer los porcentajes de transparencia y color de un objeto con valores desde 0% hasta 100% y variar la cantidad de un determinado color (rojo, verde y/o azul) con valores que van desde -255 hasta 255.
Adobe(Todos los derechos reservados)
Efectos sonoros.
El Flash aún sin ser un programa de edición de sonido, permite realizar algunas modificaciones en los sonidos aplicándoles los siguientes efectos en el panel Propiedades:
Ninguno: Quita cualquier efecto sonoro que tuviera el sonido.
Canal izquierdo: Elimina el sonido del canal derecho.
Canal derecho: Elimina el sonido del canal izquierdo.
Reducción progresiva a la derecha: El sonido va cambiando de forma progresiva partiendo del canal izquierdo al canal derecho.
Reducción progresiva a la izquierda: El sonido va cambiando de forma progresiva partiendo del canal izquierdo al canal derecho.
Aumento progresivo: El sonido va en aumento de forma progresiva en ambos canales.
Desvanecimiento: El sonido va en descenso de forma progresiva en ambos canales.
Personalizado: Permite modificar a voluntad los efectos de sonido mediante la edición del mismo en un cuadro de diálogo. En este cuadro se muestran ambos canales de sonido y sobre cada uno de ellos se pueden realizar los siguientes cambios:
Modificar el volumen inicial y final desplazando el punto de control.
Añadir puntos de control intermedios con un solo clic.
Modificar la posición de los puntos de control intermedios.
Cambiar la duración del archivo modificando sus puntos de inicio y/o fin.
Los filtros de efectos se pueden aplicar tanto a los textos clásicos, como a los TLF, a los botones y a los clips de película. Se puede acceder a ellos en la parte inferior del panel "Propiedades" cuando el elemento está seleccionado. Estos filtros son:
Sombra: Permite configurar la sombra de un objeto cambiando, entre otras, sus propiedades de color, desplazamiento y ángulo respecto al objeto original.
Desenfoque: Permite configurar la nitidez de los bordes y detalles del objeto con valores comprendidos entre 0 y 255.
Iluminado: Tiene dos versiones, normal y degradado. Permiten aplicar color al borde del objeto, desenfocarlo y extenderlo como si fuese una radiación luminosa degradada en tres tonos del mismo color o, en el caso de la opción "Iluminado degradado", en múltiples colores.
Bisel: Tiene dos versiones, normal y degradado. Permite simular el efecto de relieve de los objetos aplicando colores a la parte iluminada y a la parte que está en sombra.
Ajustar color: Permite establecer valores para el Brillo, el Contraste, la Saturación y el Color, todos con valores comprendidos entre -100 y 100 a excepción del color cuyos valores pueden estar comprendidos entre -180 y 180.
Como todas las semanas, se reúnen los miembros del equipo de trabajo de la empresa BK programación para comentar las incidencias de la semana anterior.
Carlos está muy contento de que Ana le permita colaborar en la realización de una animación. El ya ha explorado algunas herramientas para realizar animaciones y se ha centrado en la herramienta 
