RSS : Articles / Comments


interpolaciones de movimiento clasicas en flash

domingo, enero 10, 2010, Posted by Xabier Pérez, No Comment

Las interpolaciones de movimiento clásicas son uno de los tipos de animación que Adobe Flash nos permite realizar. En ellas conseguimos que un texto o gráfico cobre vida a través de la línea de tiempo.


Según el Manual Oficial de Adobe Flash, en las interpolaciones de movimiento de tipo clásico se definen propiedades tales como la posición, el tamaño y la rotación de una instancia de símbolo, un grupo o un bloque de texto en un momento específico, y estas propiedades se pueden cambiar en otro momento. De la misma forma nos dice que también se puede crear una interpolación de movimiento a lo largo de un trazado.

Las animaciones interpoladas son una forma eficaz de crear movimiento y realizar cambios, ya que reduce al mínimo el tamaño del archivo. En esta animación, solo se guardan los valores de los cambios producidos entre fotogramas. Con Adobe Flash podemos crear interpolaciones clásicas que nos permitan  modificar el tamaño, la posición y la rotación de un texto o de un gráfico, así como sesgar, realizar cambios graduales del color o hacer aparecer o desaparecer  instancias de forma paulatina.

A partir de Adobe Flash CS4, las interpolaciónes que hasta ese momento se llamaban de movimiento (dos fotogramas clave que contienen respectivamente el objeto inicial y final) pasaron a denominarse Interpolaciones Clásicas. En el ejemplo a abordar en este tutorial trabajeremos normalmente si tenemos Adobe Flash CS3 o una versión anterior, pero si disponemos de Adobe Flash CS4, tendremos que realizar un paso más que indicaré convenientemente cuando lleguemos a él. Veamos como realizar un ejemplo sencillo como el que figura debajo.



Como siempre en Flash, lo primero será crear un nuevo archivo. Para este caso crearemos un archivo de ActionScript 2.0. Si no te aparece de principio la Ventana de Inicio, tendrás que ir a Archivo>Nuevo y después hacer clic en la opción Archivo de Flash ActionScript 2.0.



Si nos fijamos en la pantalla que nos aparece, tendremos a la izquierda la Barra de Herramientas, arriba la Línea de Tiempo donde escogeremos el fotograma en el que queremos trabajar y en el centro el Escenario. Pues bien, lo primero que tendremos que hacer será seleccionar en la Barra de Herramientas la herramienta Texto y trazar un rectángulo en el centro del Escenario, ya que será dentro de ese recuadro donde escribiremos el texto que vamos a animar.



Al trazar el recuadro, en la parte inferior de nuestra interface se encuentra el Panel de Propiedades. Este panel es móvil, ya que dependiendo de la herramienta que tengamos seleccionada aparecerán unas opciones u otras. Tras haber trazado el rectángulo nos aparecerán entonces la opciones de Texto. Antes de escribir nada, modificaremos estas opciones cambiando el Tipo de Letra, el Tamaño y el Color.


Una vez modificadas estas opciones, será cuando escribamos el texto con el que vamos a crear la interpolación de movimiento. Para crear la interpolación será necesario convertir el texto a Símbolo. Con el Texto todavía seleccionado iremos entonces a Modificar>Convertir en Símbolo en el Panel de Control.



Se nos abrirá entonces una ventana emergente donde le pondremos nombre a nuestro nuevo Símbolo y escogeremos entre una de estas tres opciones:
  1. Clip de Película: son los símbolos más flexibles, ya que se puede aplicar filtros, configuraciones de color y modos de mezcla.
  2. Botón: son los símbolos indicados para crear botones Flash, también se puede aplicar filtros, modos de mezcla y configuraciones de color (para ver tutorial sobre como crear un símbolo botón clic aquí).
  3. Gráfico: son los símbolos menos flexibles, aunque se pueden animar los controles interactivos y los símbolos no funcionan.
Para el ejercicio que nos ocupa, convertiremos el Texto en un Símbolo de Clip de Película.



Prestaremos atención ahora a la Línea de Tiempo. Ya que mi intención es que el Texto se anime durante un tiempo determinado, lo tendré que poner entre dos momentos (o fotogramas clave): el momento inicial, que es el que viene por defecto y equivale al Fotograma 1, y el momento final que corresponderá al Fotograma 30 que colocaremos a continuación. La interpolación en Flash será crear el movimiento entre un momento y otro y ésto lo hará Flash automáticamente. Para crear el momento final en el Fotograma 30, será necesario insertar un Fotograma Clave. Para ello haremos clic con el botón derecho del ratón sobre el Fotograma 30 y seleccionaremos la opción Insertar Fotograma Clave (también es posible hacerlo  en el Panel de Control por medio de Insertar>Linea de Tiempo>Fotograma Clave). Como dije anteriormente, si trabajamos con Flash CS4, deberemos dar un paso previo a la inserción del Fotograma Clave: haremos clic con el botón derecho del ratón sobre el primer fotograma y seleccionaremos la opción Crear Interpolación Clásica. A partir de ahí proseguiremos la explicación con la inserción del Fotograma Clave en el Fotograma 30.



Modificaremos entonces la apariencia del Texto en el Fotograma 30, por ejemplo cambiando su tamaño. Para ello seleccionaremos en la Barra de Herramientas la herramienta Transformación Libre y, tirando de una de las esquinas del recuadro del Texto, haremos éste más grande.



Volveremos ahora al Fotograma 1 y haremos al texto transparente para que, aparte de hacerse más grande, vaya apareciendo de la nada. Para ello, con la herramienta Selección (la flecha negra), seleccionamos el Texto y en el Panel de Propiedades, en la opción Color, cambiamos ninguna por Alfa.



Moveremos entonces el Alfa a 0, consiguiendo que en el Fotograma 1 el texto se haga transparente.



Una vez que ya tenemos nuestros dos momentos (o fotogramas clave) terminados, crearemos la Interpolación de Movimiento. Para crearla basta con hacer clic con el botón derecho del ratón sobre cualquier fotograma que quede entre el Fotograma 1 y el Fotograma 30 y seleccionar la opción que aparece en la ventana emergente Crear Interpolación de Movimiento (si trabajamos con Adobe Flash CS4 este paso no será necesario ya que la interpolación se creará automáticamente).



La animación entre el Fotograma 1 y el 30 ya estaría rematada. Pero vamos a crear una nueva interpolación entre el Fotograma 30 y el Fotograma 60. Para ello, como vimos antes, haremos clic con el botón derecho del ratón sobre el Fotograma 60 y seleccionaremos la opción Insertar Fotograma Clave (también es posible hacerlo pulsando en nuestro teclado F6).



Nuevamente volveremos a modificar la apariencia del texto en el Fotograma 60. Esta vez, tras haber hecho clic en el texto con la herramienta de Selección (la flecha negra), en el Panel de Propiedades, en la Opción Color escogeremos Tinta y tras ello uno de los colores que nos permite escoger.



Por último volveremos a crear la Interpolación de Movimiento entre el Fotograma 30 y el Fotograma 60 para que Flash modifique gradualmente el color del texto. Pulsaremos el botón derecho del ratón en cualquiera de los fotogramas comprendidos entre el 30 y el 60, y escogeremos la opción Crear Interpolación de Movimiento.


Para observar los resultados de la Animación podemos ir a Control > Probar Película.



No Comment