Tutorial Flash: Creando una animacion basica.

Donmuerte · Ultima edición por Donmuerte el Dom Jun 27, 2004 12:13 pm, editado 1 vez

Qu? es Flash

Flash es la tecnolog?a m?s com?nmente utilizada en el Web que permite la creaci?n de animaciones vectoriales. El inter?s en el uso de gr?ficos vectoriales es que ?stos permiten llevar a cabo animaciones de poco peso, es decir, que tardan poco tiempo en ser cargadas por el navegador.

Como puede que sep?is, existen dos tipos de gr?ficos:
Los gr?ficos vectoriales, en los cuales una imagen es representada a partir de l?neas (o vectores) que poseen determinadas propiedades (color, grosor...). La calidad de este tipo de gr?ficos no depende del zoom o del tipo de resoluci?n con el cual se est? mirando el gr?fico. Por mucho que nos acerquemos, el gr?fico no se pixeliza, ya que el ordenador traza autom?ticamente las l?neas para ese nivel de acercamiento.
Las im?genes en mapa de bits. Este tipo de gr?ficos se asemejan a una especie de cuadr?cula en la cual cada uno de los cuadrados (p?xeles) muestra un color determinado. La informaci?n de estos gr?ficos es guardada individualmente para cada p?xel y es definida por las coordenadas y color de dicho p?xel. Este tipo de gr?ficos son dependientes de la variaci?n del tama?o y resoluci?n, pudiendo perder calidad al modificar sucesivamente sus dimensiones.
As?, Flash se sirve de las posibilidades que ofrece el trabajar con gr?ficos vectoriales, f?cilmente redimensionables y alterables por medio de funciones, as? que de un almacenamiento inteligente de las im?genes y sonidos empleados en sus animaciones por medio de bibliotecas, para optimizar el tama?o de los archivos que contienen las animaciones.

Esta optimizaci?n del espacio que ocupan las animaciones, combinada con la posibilidad de cargar la animaci?n al mismo tiempo que ?sta se muestra en el navegador (t?cnica denominada streaming), permite aportar elementos visuales que dan vida a una web sin que para ello el tiempo de carga de la p?gina se prolongue hasta l?mites insoportables por el visitante.

Adem?s de este aspecto meramente est?tico, Flash introduce en su entorno la posibilidad de interaccionar con el usuario. Para ello, Flash invoca un lenguaje de programaci?n llamado Action Script. Orientado a objetos, este lenguaje tiene claras influencias del Javascript y permite, entre otras muchas cosas, gestionar el relleno de formularios, ejecutar distintas partes de una animaci?n en funci?n de eventos producidos por el usuario, saltar a otras p?ginas, etc.

De este modo, Macromedia pone a nuestra disposici?n una tecnolog?a pensada para aportar vistosidad a nuestra web al mismo tiempo que nos permite interaccionar con nuestro visitante. Por supuesto, no se trata de la ?nica alternativa de dise?o vectorial aplicada al Web pero, sin duda, se trata de la m?s popular y m?s completa de ellas.

Entorno de trabajo en Flash

Evidentemente, aprender a hacer animaciones con este programa requiere por una parte un conocimiento del software y por otra, una aplicaci?n inteligente de los recursos que se nos ofrecen. En este manual intentaremos hacer hincapi? en lo segundo dejando al lector la posibilidad de descubrir poco a poco la aplicaci?n.

Para la redacci?n de este manual, nos hemos servido de Flash MX. Cabe esperar que lo dicho para esta versi?n sea aplicable en gran medida a las versiones precedentes y las que salgan en un futuro.

Nada m?s instalar y abrir la aplicaci?n por primera vez, accederemos a una ventana de di?logo que nos propone tres modos de uso distintos:
Modo dise?ador, destinado a crear animaciones y gr?ficos
Modo general, en el que dispondremos de todas las opciones de Flash adem?s de la ayuda.
Modo desarrollador, enfocado a la creaci?n de aplicaciones con formularios, botones y otros componentes.

Este men? aparecer? ?nicamente la primera vez que abramos Flash, no obstante, podremos acceder a ?l desde la barra de herramientas en la secci?n Ayuda>Bienvenido.

Ya dentro del programa, tras haber cerrado algunos paneles con el objeto de disponer de espacio de trabajo, haremos frente a una interface como la que se muestra en la figura:

Dentro de esta interface, podemos distinguir tres partes principales:

El escenario Se trata del espacio en el cual llevaremos a cabo todas las tareas de edici?n de gr?ficos. En cierto modo es como el papel en el cual dibujaremos lo que haga falta.

La l?nea de tiempo Esta secci?n es donde podremos organizar en el tiempo cada una de las im?genes dise?adas en el escenario. Podemos subdividirla en dos partes: La parte izquierda, donde podremos organizar las capas y la parte de la derecha que queda reservada a la gesti?n de los fotogram?s. Ambos elementos, capas y fotogram?s ser?n tratados m?s adelante.

La caja de herramientas Aqu? encontraremos las herramientas de edici?n grafica que Flash pone a nuestra disposici?n. Como puede observarse, ?stas son muy parecidas a las que podemos encontrar en otros program?s de edici?n grafica que ya sea vectorial o no.
Capas y fotogramas en Flash
La l?nea de tiempo es donde podremos organizar la sucesi?n de im?genes que dan lugar a una animaci?n. En este cap?tulo introduciremos los conceptos de capa y fotograma, vitales para una compresi?n del funcionamiento de Flash.

En cierta medida, Flash trabaja como si fuese una pel?cula. Una animaci?n es una sucesi?n de im?genes fijas que, al pasar r?pidamente unas detr?s de otras, dan la impresi?n de un movimiento. Cada una de estas im?genes fijas es llamada tambi?n fotograma. Los fotogramas son representados bajo forma de rect?ngulos en la parte derecha del escenario.

En estos rect?ngulos podemos alojar tres tipos diferentes de im?genes:
Im?genes clave Se trata de las im?genes que nosotros mismos dibujaremos

Im?genes fijas Son las im?genes claves copiadas en los fotogramas siguientes al de la primera imagen clave de manera a producir un efecto de objeto est?tico.

Im?genes de interpolaci?n Se trata de im?genes calculadas por Flash que permiten la transici?n gradual entre dos im?genes claves. Este tipo de im?genes muy ?tiles ya que se generan autom?ticamente y proporcionan un efecto suave de movimiento o transformaci?n.

Por otra parte, una animaci?n esta generalmente constituida de una variedad de objetos diferentes, cada uno de los cuales se introduce en un momento diferente y presenta un comportamiento independiente al resto de los objetos. De manera a organizar y editar todos estos elementos Flash permite el uso de capas o calcos.

As?, una animaci?n Flash esta compuesta de una superposici?n de capas en cada una de las cuales introduciremos un objeto que tendr? su propia l?nea de fotogramas. Estas capas nos permiten trabajar la animaci?n en distintos planos independientes.

Por defecto, al comenzar una nueva escena encontraremos en nuestra l?nea de tiempo una sola capa. Progresivamente iremos introduciendo m?s capas que nos permitan separar cada uno de los elementos de la animaci?n: objetos, fondo, sonidos o trayectorias.

Un uso inteligente de las capas es la base para crear animaciones de calidad.

Bibliotecas en Flash
El concepto de capa y fotograma y subrayamos la necesidad de utilizarlos inteligentemente. Otro elemento de Flash que necesita una gesti?n lo m?s sabia posible es la biblioteca.

Como dijimos previamente, Flash permite la optimizaci?n del espacio ocupado por la animaci?n, o lo que es lo mismo, del tiempo que el usuario tarda en cargarla. Uno de los elementos que contribuye a ello es las denominadas bibliotecas.

Una biblioteca no es m?s que un almac?n de objetos (gr?ficos o sonidos) que podr?n ser utilizados en una misma animaci?n en una o m?s ocasiones. Dependiendo del rango que presente esta biblioteca, ?sta puede ser propia a la animaci?n, compartida por varias animaciones, o bien permanente (empleada por la totalidad de animaciones).

Cada uno de los elementos que constituyen una biblioteca son denominados s?mbolos. Como hemos dicho, estos elementos podr?n ser utilizados en nuestra animaci?n cuantas veces lo deseemos. No obstante, cada una de estas utilizaciones no es llamada s?mbolo, sino ocurrencia.

Por lo tanto, una ocurrencia es cada una de las ocasiones en las que un s?mbolo almacenado en nuestra biblioteca es utilizado en nuestra animaci?n.

Cambiando las propiedades de un s?mbolo de la biblioteca , cambiamos todas cada una de las ocurrencias que aparecen en la animaci?n. Contrariamente, la modificaci?n de una ocurrencia no altera al s?mbolo de la biblioteca ni a las otras ocurrencias de la animaci?n. Como podemos observar, el uso de las bibliotecas no solo nos ayuda a aligerar el archivo, sino que nos permite una creaci?n, edici?n y borrado r?pidos de cada una de las ocurrencias.

En cap?tulos posteriores abordaremos con m?s detalle la gesti?n de bibliotecas s?mbolos y ocurrencias. Pasaremos a continuaci?n a la aplicaci?n de lo aprendido a partir de la creaci?n de una animaci?n.

Mi primera animaci?n en Flash I

Despu?s de haber introducido los conceptos b?sicos de Flash, vamos a poner en practica algunos de ellos de manera a comenzar a familiarizarnos con la interface.

Para empezar, comenzaremos por generar un documento en blanco por medio de:

Archivo > Nuevo

Como podemos observar en la l?nea de tiempo, nuestra animaci?n consta de una sola capa y un ?nico fotograma representado por un rect?ngulo con un c?rculo. Este c?rculo significa que se trata de un fotograma que contiene una imagen clave vac?a.

La animaci?n que pretendemos crear consiste en un movimiento de traslaci?n de una esfera con una trayectoria el?ptica. As? pues, lo primero que debemos hacer es dibujar la esfera. Sin embargo, para empezar con las buenas costumbres, no dibujaremos la esfera directamente sobre nuestro fotograma vac?o, sino que crearemos un s?mbolo en nuestra biblioteca.
VER EJEMPLO

Para crear nuestro s?mbolo en la biblioteca:

Ventana > Biblioteca

Llegados a este punto veremos aparecer en la pantalla una ventana como la que veis en la ilustraci?n.

Para insertar el s?mbolo lo podemos hacer a partir del bot?n con una cruz situado en la parte inferior izquierda de la ventana de la biblioteca, o bien ir a la barra de men?s y hacer:

Insertar > Nuevo S?mbolo

Una nueva ventana de dialogo aparece ante nuestros ojos (ver figura abajo). En ella podremos definir el nombre (para este caso la llamaremos esfera) y el comportamiento (elegiremos gr?fico). Por el momento no entraremos en la explicaci?n de la opci?n comportamiento, ya lo veremos m?s adelante.

Al rellenar debidamente la ventana anterior y Aceptar, veremos como el escenario se agranda y la barra superior del escenario nos muestra la palabra Esfera. Lo que ha pasado es que hemos salido de nuestra animaci?n para meternos en un espacio en el que podemos editar el s?mbolo que queremos crear. As? que nos ponemos manos a la obra con nuestra labor de artistas.

Para dibujar la esfera vamos a servirnos de las herramientas de dibujo. Comenzamos por elegir la herramienta ?valo, representada por un c?rculo. Una vez elegida nos colocamos en el escenario y, apretando la tecla may?sculas y pulsando el bot?n izquierdo del rat?n (el ?nico para los usuarios Mac), desplazamos el rat?n hacia cualquier direcci?n. Veremos aparecer un c?rculo con los colores definidos en el apartado colores de la barra de herramientas.

Ahora, para darle la sensaci?n de perspectiva a la esfera, vamos a colorearla en su interior usando un degradado radial. Para ello, visualizamos el panel mezclador de colores:

Ventana > Mezclador de color

Llegados aqu?, veremos una ventana como la de la figura:

En este panel, seleccionaremos en el men? desplegable la opci?n Radial. Veremos como la ventana cambia de aspecto pareci?ndose a la imagen siguiente:

Lo que haremos es seleccionar dos colores (los que os gusten) para cada una de las casitas que se encuentran en la parte inferior de la barra de degradado. Para ello, clicaremos sobre cada una de las casitas y a continuaci?n, elegiremos un color en la paleta desplegable situada en la parte superior izquierda del panel. Repetiremos el proceso para la otra casita.

Una vez definido el degradado, podemos seleccionar la herramienta cubo de pintura y clicaremos con el bot?n izquierdo sobre la parte rellena del c?rculo. Si todo funciona correctamente, deberemos obtener una esfera similar a la de la figura mostrada:

Sugerimos repetir este proceso de relleno del c?rculo con un degradado jugando con las opciones que nos ofrece el panel mezclador de colores. Podemos ver que es posible a?adir m?s casitas para conseguir un efecto de coronas o bien cambiar el tipo de degradado a lineal y m?s cosas...

Despu?s de dejarnos llevar por nuestra vena creativa podemos volver a cosas m?s serias. Para empezar, podemos alinear la esfera con la cruz que define el punto de alineamiento del s?mbolo. Para ello, elegiremos la herramienta flecha y seleccionaremos la esfera desplazando el rat?n al mismo tiempo que mantenemos pulsado el bot?n izquierdo. Para mover la esfera lo haremos del mismo modo, desplazando el rat?n hasta el lugar apropiado manteniendo pulsado el bot?n izquierdo. Podemos precisar el desplazamiento usando las flechas del cursor que nos permitir?n desplazarnos p?xel por p?xel.

Mi primera animaci?n en Flash II

Vale, ya hemos definido el s?mbolo en la biblioteca. Ahora vamos a empezar a trabajar con la animaci?n propiamente dicha. Lo primero que debemos de hacer es salir del espacio de creaci?n del s?mbolo y colocarnos en el escenario de la animaci?n. Para ello, pincharemos en la palabra Escena 1 que aparece en la parte superior izquierda del escenario.

Ya dentro del escenario, vamos a incluir en el primer fotograma el s?mbolo que acabamos de crear. Antes de nada, iremos a la ventana biblioteca (si la ten?is cerrada pod?is abrirla con Ventana > Biblioteca) y seleccionaremos el s?mbolo esfera. A continuaci?n, pincharemos y arrastraremos el s?mbolo hasta el escenario. El resultado deber?a ser algo como lo que se muestra en la imagen inferior:

Podemos observar que el c?rculo vac?o del primer fotograma se ha convertido ahora en un c?rculo lleno, lo que significa que la imagen clave no esta vac?a.

Pasemos ahora a estudiar el tipo de animaci?n que vamos a hacer. Como hemos dicho, pretendemos simular un movimiento de traslaci?n de la esfera con una trayectoria el?ptica, dando la impresi?n de un c?rculo en perspectiva. Esta animaci?n podr?a ser definida por tres im?genes clave:
La esfera situada en primer plano al principio de su movimiento.
La esfera situada en segundo plano a mitad de su ciclo de traslaci?n.
La esfera llegada al final del ciclo, aproximadamente en la misma posici?n que la primera esfera.
Podemos ver cuales serian estas tres im?genes clave en el siguiente esquema:

De modo que ya disponemos de la primera imagen clave. Ahora, introduciremos la segunda en el lugar aproximado que le corresponder?a. Para ello llevamos a cabo las siguientes operaciones:

Insertamos una imagen clave en la capa 1, m?s o menos sobre el fotograma 15.
Para ello nos situamos en la capa 1, en el fotograma 15. Pulsamos el bot?n derecho del rat?n y seleccionamos Insertar fotograma clave. Podemos observar como, una vez realizada la operaci?n, un nuevo c?rculo aparece en ese fotograma, indicando la presencia de otra imagen clave que ser? id?ntica a la imagen de nuestro primer fotograma..

Modificamos este nuevo fotograma clave.
Para ello, situados en este fotograma, seleccionamos el objeto (u ocurrencia) y modificamos su posici?n y tama?o. La posici?n la modificamos empuj?ndolo hacia arriba con la tecla del cursor o bien pinchando y arrastrando, como ya hemos visto antes. Para modificar el tama?o, seleccionaremos la herramienta transformaci?n libre. Una vez hecho esto, seleccionaremos la opci?n escalar, que nos permitir? bloquear las proporciones del objeto y reduciremos el tama?o de la esfera pinchando y arrastrando en uno de los puntos de las esquinas de la marca que rodea la esfera.
La figura siguiente os ilustra la tarea de redimensionamiento y os da una idea del aspecto que debe tener el fotograma una vez modificado:

A continuaci?n vamos a crear el tercer y ultimo fotograma clave, correspondiente al momento en que la esfera esta a punto de completar el ciclo. Este fotograma deber?a en principio parecerse al primero con la diferencia de que la esfera no ha llegado a completar el ciclo, sino que esta de cera de conseguirlo. Realizaremos los siguientes pasos:
Insertamos un fotograma clave vac?o en el fotograma 29 (Insertar>Fotograma clave vac?o)
Volvemos al fotograma 1 y lo copiamos (Edici?n>copiar)
Volvemos al fotograma 29 y lo pegamos (Edici?n>pegar)
El resultado es un fotograma id?ntico al 1 en el cual deberemos mover ligeramente la ocurrencia a la izquierda, algo que haremos m?s tarde.

Mi primera animaci?n en Flash III

De modo que ya disponemos de las im?genes claves que definen la animaci?n. Lo que necesitamos ahora es definir una trayectoria el?ptica que las una. Esta trayectoria ha de ser definida en una capa especial llamada gu?a de movimiento. La gu?a de movimiento no es m?s que una capa que contiene una l?nea sobre la cual podemos colocar nuestros objetos de manera a que dicho objeto se mueva de una posici?n a otra respectando la trayectoria definida por esta l?nea.

En nuestro caso, dado que lo que buscamos es una trayectoria c?clica, para no confundir al objeto definiremos dos l?neas distintas, correspondientes a cada media vuelta. Si no tom?semos esta precauci?n, el objeto tendr?a dos posibles sentidos para llegar a una misma posici?n. Pasemos pues a definir estas l?neas:

Creamos la gu?a de movimiento. Para ello, seleccionamos la capa 1 (o donde hayamos creado nuestras im?genes clave) y hacemos Insertar>gu?a de movimiento. Constatamos la aparici?n de una nueva capa llamada Gu?a: Capa 1 (ver figura).

Seleccionamos el primer fotograma de esta nueva capa y dibujamos una elipse sin relleno. Podemos servirnos de la herramienta ?valo utilizada para la creaci?n de la esfera, pero esta vez no elegimos ning?n color en la paleta de relleno (la ausencia de color viene simbolizada por un cuadro blanco barrado en diagonal por una banda roja). El resultado es una figura tal que esta:

Con la herramienta lazo, seleccionamos la mitad (izquierda o derecha, como prefieras) y la cortamos (Edici?n>cortar). El resultado es la obtenci?n de una semielipse.

Nos colocamos en el fotograma 15 de esta misma capa y lo convertimos en un fotograma clave vac?o (Insertar>fotograma clave vac?o)

Pegamos la otra media elipse, que se quedar? descolocada con respecto a la otra. Para ajustar las semielipses podemos por supuesto hacerlo a ojo pivotando entre el fotograma 14 y el 15 hasta que las dos se solapen correctamente. Sin embargo, una opci?n m?s interesante es la de usar le edici?n simultanea de varios fotogramas. Esta opci?n, disponible en la l?nea de tiempo (ver figura), nos permite la visualizaci?n y edici?n simultanea de varios fotogramas. De este modo, podemos seleccionar una de las semielipses y moverla por medio de los cursores hasta hacerla coincidir con la otra media. Deseleccionaremos este modo una vez finalizada la operaci?n.

Mi primera animaci?n en Flash IV

Llegados a este punto, podemos comenzar a definir la primera media vuelta de la esfera. Para generar el movimiento existente entre los fotogramas clave, hemos de crear lo que se denomina una interpolaci?n de movimiento. Como ya hemos dicho, eso es algo que Flash calcula autom?ticamente, evit?ndonos la modificaci?n sistem?tica de cada uno de lo fotogramas intermedios que forman parte de la secuencia. Para crear la interpolaci?n de movimiento, seleccionaremos los fotogramas de la capa 1y haremos:

Insertar>Crear interpolaci?n de movimiento.

Hecho esto, podremos constatar la aparici?n en la capa 1de una flecha entre el fotograma 1 y 15 y otra entre el 15 y el 29. Si ahora nos colocamos en alguno de los fotogramas intermedios, veremos que la imagen que contiene no es la misma que la de los fotogramas clave 1 o 15, sino un intermedio de posici?n y tama?o entre ellas. Como puede verse, el objeto se desplazar?a desde 1 hasta 15 y seguidamente de 15 a 29 siguiendo una l?nea recta. Para obligarlo a adoptar una trayectoria el?ptica como la definida en la gu?a de movimiento, tendremos que localizarnos en cada una de las im?genes clave (1, 15 y 29) y , usando la herramienta flecha, colocaremos el centro del objeto sobre la l?nea de la elipse en cada una de las extremidades correspondientes.

Podemos comprobar que el objeto esta bien colocado en la trayectoria si al intentar moverlo fuera de la l?nea, vuelve a colocarse autom?ticamente sobre ella.

Llegados a este punto, ya solo nos queda ocultar la capa de la trayectoria. Esto puede hacerse seleccion?ndola y pinchando sobre el punto que se encuentra bajo el ojo. El punto se convierte en una cruz, que significa que la capa no es visible, aunque por supuesto sigue existiendo.

Ya tenemos construida la animaci?n. Para probarla r?pidamente podemos hacer:

Control>Probar escena

Veremos como hemos saltado a otra nueva ventana que nos muestra la escena creada, tal y como la ver?amos en realidad. Esta ventana nos ofrece m?ltiples posibilidades que ya abordaremos en otros cap?tulos. No obstante, os aconsejamos el echar un vistazo al tipo de opciones que propone.
RESULTADO

El resultado, es una animacion como esta:Si lo que deseas es ver la animaci?n directamente en el navegador, es posible hacerlo seleccionando:

Archivo>Previsualizacion de la publicaci?n>HTML

Habiendo llegado a este punto, habr?is descubierto algunas de las muchas posibilidades que Flash ofrece para la creaci?n de animaciones y, lo que es m?s importante, os hab?is familiarizado con el tipo de t?cnicas y conceptos que emplea.

Donmuerte · Publicado: Dom Jun 27, 2004 12:11 pm **Asunto**:

Enga gente pues ahi teneis un tutorial basico de como hacer una animacion sencilla, yo creo que es muy facil de entender y digamos que es lo mas fundamental para aprender un poco el sistema de trabajo de flash. Si no teneis ni pajolera idea de flash y siempre que abris el programa se os queda esta cara

solo teneis que siguer el tutorial paso a paso y prestando atencion vereis que no es tan dificil de manejar. Espero que os sirva de ayuda y deciros que en breve pondre una continuacion sobre alguna otra de las posibilidades de este peaaaaaaso de programa

. p? na, lo dicho, que la cabeza se os llene de buenas

y os hagais unos fieras del flash.

kc · Publicado: Lun Jun 28, 2004 12:15 am **Asunto**:

Yo tb me apunto a trabajar y haber como sale, gracias por la currada Don Muerte.

Seal_Bcn · Publicado: Lun Jun 28, 2004 7:50 am **Asunto**:

IMPRESIONANTE Donmuerte!!!

10 Puntos para ti

por el manual

creo que tal y como esta explicado, en poco tiempo vamos a tener que tomarnos en serio eso de ponernos en la creacion de la seccion de FLASH y TRABAJOS DE LOS USUARIOS... ( aun pending... aixxxxx )

Saludos y asias ,)

Donmuerte · Publicado: Mar Jun 29, 2004 8:38 pm **Asunto**:

muuuuuchas gracias

, la verdad es que me esta costando por que no ando muy bien de tiempo y el pu?etero ordenata me esta dando MUCHOS PROBLEMAS pero bueno poco a poco quiero ir poniendo mas cosillas para ver si la gente se anima mas y empezamos a ver mas creaciones propias. Lo dicho muchas gracias y a seguir currando

Seal_Bcn · Publicado: Mie Jun 30, 2004 9:09 am **Asunto**:

Pues con la calma Donmuerte... que creo que todos hemos pasado por eso

y sabemos perfectamente lo que es.... aixxxxxx

Pero hay que reconocer que esta serie de manuales son realmente muy PRACTICOS!!!

A ver que tal os va con el primer contacto con el mundo de la animacion con esta poderosa herramienta compa?er@s

Saludos