Mi primera animación en Flash I

Creación de un símbolo en nuestra biblioteca flash.

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.

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.

biblioteca vacia

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.

Autor

Rubén Alvarez

Redactor de DesarrolloWeb.com

Compartir

Comentarios

UG

25/6/2005
En este ejercicio aprendí tip nuevo con el Mezclador de Colores. Cuando tenia muchos punteros de degradado (las casitas), no encontraba la forma de eliminarlas, fue cuando se me ocurrió presionar cada una y arrastrarlas al cuadro Espacio de color. Los felicito desarrolloweb, seguimos aprendiendo con sus valiosos manuales.

florencia

02/10/2006
como crear animaciones en fotogramas

Silvis

08/11/2006
quiero que todos sepan que odio al revelo y prefiero quedarme con el del culo grnde oseo el white porque es un supero papito ademas no tiene esa narisota tan fea

Gallopancio

14/3/2007
No entiendo como mover la imagen, mi flash 8 esta en ingles

Rolando

06/7/2007
He entrado por casualidad en este tutorial. me parecia estupendo pero acaba la pagina sin terminar el ejercicio y no encuentro la forma de enlazar con la siguiente página para terminarlo. ¿es torpeza mia o es que aquí termina esto?
agradeceria que me echasen una mano, no estoy muy ducho en esto de navegar por internet

itzel

31/7/2007
como puedo hacer una animacion en la cual tenga una inagen de fondo, despues tengo una caja y unas botellas como puedohacer para que de esa caja parezca que salen las botellas.

kike

26/11/2007
esto esta genial!!

marjo

10/3/2008
Ufff!! yo tampoco encontraba como segir la leccion, pero si te fijas bien, mas abajo hay un menu, de hecho si no me equiboco no es el primero hacia abajo.

Bueno el menu es asi:
Manuales relacionados con este artículo
Dentro de Manual de Flash
Siguiente: Mi primera animación en Flash II

Haces click en: mi primera animacion en flashII Eso.

franco

14/3/2009
muybueno

EDWINLEE

28/8/2009
MUCHA CARRETA
un ejemplo como este no necesita de tanta blablablabla...confundes a las personas que lo lean...bajale a la palabreria

miguel angel

26/9/2009
nada
Hola pero como se llama este programa dimelo gracias

RAUL

01/12/2009
BUEN APORTE
MUY BUEN TUTO ESPERO APROVECHARLO AL MAXIMO

jimmy

05/12/2009
como se llama el programa para hacer esas animaciones?
como se llama el programa para hacer esas animaciones'?