Página inicial

Unidad 13. Animaciones de Movimiento (II)


Animación de Textos

 

Es indudable que para comunicar algún mensaje, en la mayoría de las ocasiones, no basta con imágenes o iconos, y es aquí donde el texto cobra gran importancia. No obstante, se debe tener cuidado con la animación de los textos, ya que resulta bastante complicado leer un texto que se desplaza o cambia de tamaño.

    Por este motivo, un texto animado debería estar sólo en las presentaciones o bien formar parte de una animación corta y, lo que es más importante no debería estar reproduciéndose infinitamente.

    En las presentaciones, se utilizan multitud de efectos que veremos más adelante. Sin embargo, con lo visto hasta ahora se pueden obtener efectos interesantes. Una de las opciones más utilizadas es separar las letras de los textos y animarlas independientemente

    Aquí tienes un ejemplo de una presentación sencilla mediante texto utilizando esta técnica.

    Si no tienes claro cómo realizar una animación te recomendamos que realices el Ejercicio Animar Texto por Bloques. 

 

Animación de Líneas

 

  Una buena animación no tiene que porqué estar compuesta sólo por  textos o imágenes espectaculares. En ocasiones conviene darle a la película un aire más sencillo o añadir determinados efectos que la hagan vistosa sin necesidad de cargar mucho la película visualmente, y en cuanto a tamaño de archivo se refiere. 

 

     Esto lo podemos conseguir simplemente animando líneas y haciendo que se muevan por el escenario. Esta técnica nos permite dar dinamismo a la animación o crear formas distintas a lo largo de su recorrido.

     Son especialmente útiles y vistosas en fondos oscuros y se suelen usar para formar rectángulos que se aprovechan para insertar imágenes.

     Aquí podemos ver un ejemplo de este tipo de presentaciones:

Para crear esta animación deberás crear tantas capas como animaciones de líneas vayas a crear, en el ejemplo hemos creado 4 capas. Una para el movimiento de líneas de abajo a arriba, otra para el movimiento de arriba a abajo, otra para izquierda a derecha y finalmente una última para el movimiento de derecha a izquierda.

También crearemos una capa que situaremos en la posición superior donde colocaremos las imágenes que formarán el mensaje de bienvenida.

El funcionamiento de la animación es claro, deberemos crear interpolaciones de movimiento para cada una de las capas de líneas que en su posición final emplazaremos en su lado contrario de la pantalla, por ejemplo, las líneas situadas en un principio en la parte inferior al final de la animación se encontrarán en la parte superior. Realizaremos esto con las 4 capas de líneas.

En la capa Imágenes crearemos animaciones que harán aparecer las imágenes que forman el mensaje de bienvenida de forma secuencial, es decir, del fotograma 5 al 10 se mostrará una imagen, del 11 al 16 otra y la última la mostraremos del fotograma 17 al 22. De esta forma, habiendo creado los fotogramas claves en cada uno de los fotogramas de inicio (5, 11 y 17), arrastraremos desde la Biblioteca (menú VentanaBiblioteca) las imágenes para colocarlas en su lugar en el fotograma. Estas imágenes se mostrarán únicamente durante el tiempo que dure el fotograma para desaparecer más tarde dando paso a la otra imagen.

Consejo: Si quieres añadir un fondo deberás hacerlo en una nueva capa y colocar ésta debajo de todas las existentes.

 

     Aquí mostramos la forma de crear una animación de este tipo.

Interpolación mediante Guía de Movimiento

 

  Anteriormente hemos visto como las interpolaciones de movimiento desplazaban símbolos Flash en línea recta. Puesto que esto supone una cierta limitación, Flash incluye la Guía de movimiento.

     Una guía de movimiento es una capa especial que marca una trayectoria para los símbolos de la capa a la que afecta, para que dichos símbolos la sigan, durante el movimiento. Esta capa es invisible durante la reproducción y permite dibujar cualquier tipo de dibujo vectorial, que nos permitirá crear un movimiento no forzosamente rectilíneo.

     Crear un movimiento mediante esta técnica es bastante sencillo, basta con crear una interpolación de movimiento en una capa, seleccionarla (debemos asegurarnos de esto para evitar que la guía se asocie a otra capa), y colocar el símbolo del último fotograma al final del trazado que realizaremos previamente en la capa de la guía. No es necesario colocarlos al principio del trazado ya que Flash lo hace automáticamente.

     Vemos como la capa a la que se asocia la guía aparece debajo y alineada a la derecha.

    

Crear interpolaciones de movimiento guiadas es muy sencillo, Lo primero que deberás hacer es crear una animación de movimiento, para ello:

  1. Crea un fotograma clave pulsando F6 e inserta en él el símbolo que quieres que realice el movimiento.

  2. Crea un nuevo fotograma clave para marcar la duración de la animación, por ejemplo, si creaste el primer fotograma en la posición 5, crea el nuevo en la posición 25, así tendrás una animación que durará 20 fotogramas.

  3. Selecciona todos los fotogramas que intervengan en la animación y haz clic derecho sobre uno de ellos en la Línea de tiempos. Selecciona la opción Crear interpolación de movimiento.

Una vez creada la interpolación y con la capa seleccionada pulsa el botón Añadir guía de movimiento. Se creará una nueva capa asociada a aquella donde tienes creada la animación.

Ahora el procedimiento es fácil, selecciona la herramienta Lápiz y dibuja en la capa guía el recorrido que debe seguir el símbolo.

Cuando lo hayas creado selecciona el último fotograma de la animación y coloca el símbolo en su punto final. Recuerda que el símbolo debe estar siempre en contacto con la línea de guía tanto en el primer como último fotogramas.

 

Aquí se puede ver cómo realizarlo.

 

     Podemos ver un efecto más vistoso que el que realizamos con la interpolación sencilla del principio del tema.

 

Muchos movimientos complicados pueden ser duplicados fácilmente sobre otros objetos utilizando ActionScript 3, puedes ver cómo realizarlo en este videotutorial:

 

Podeis poner a prueba vuestros conocimientos realizando:

  Ejercicios del Tema 13.

  Prueba evaluativa del Tema 13.


 
   
Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está permitido descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.