Botones animados



 

 

Existen muchas formas de hacer botones animados en flash dependiendo del tiempo conocimiento que tengas de este puedes hacer botones increíbles para tu pagina web o simplemente para una animación.

A continuación te enseño una de las formas mas fáciles de hacer botones animados con distintas acciones de acuerdo a las acciones de tu mouse.
 

 

 


Paso 1: Diseñar nuestro botón

Lo primero que debemos hacer es diseñar nuestro botón e importarlo como un símbolo en flash (esta parte es sumamente importante ), si vas a hacer un menú y quieres evitarte la alineación posterior de los botones puedes dibujarlos todos juntos de una ves.

 

   

 

Paso 2 : Definir el espacio de trabajo e insertar nuestro botón

Debemos definir nuestro espacio de trabajo en flash el cual debe ser del mismo tamaño que nuestro botón o menú, posteriormente colocamos el botón en el espacio de trabajo.

   

Paso 3 : Crear un movie clip para la animacion d nuestro boton.


Creamos un movie-clip, con las capas que desees para darle vida a nuestro botón, es muy importante que el primer fotograma sea lleve la funcion “Stop”  para evitar movimientos no deseados.


Si tienes un botón con mas de una función o movimiento puedes hacerlo todo en un movie-clip, si estas trabajando un menú, es preferible que trabajes cada parte de la animación en un movie-clip distinto.

 

   

 

Paso 4: Crear una “Activador”para nuestro boton.

Ahora vamos a crear un triger o activador para nuestro botón, si estas usando un solo botón puedes usar este mismo símbolo para crearlo (por eso era importante en el paso 1), si estas usando un menu, puedes dibujar un rectángulo que cubra el área que deseas e importarlo como un botón.

 

   

 

Paso 5 : Ordenar las capas.

Casi terminamos, ahora hacemos una especie de “sándwich” de la siguiente forma, abajo pondremos el dibujo de nuestro botón, en medio los movie-clips y hasta arriba el triger o activador, como los movie-clips tiene el primer fotograma en blanco se mostraran como pequeños círculos blancos, asegúrate de alinearlos correctamente.

   

Paso 6 : Crear un movie clip para la animacion d nuestro boton.


A nuestro “triger” vamos a darle un alpha de 0% para que sea invisible y lo colocaremos cubriendo el área del botón, así cuando realicemos alguna acción con el mouse este triger activara los movie clips.

Pero vamos por partes:

Asegurate de ponerle a cada uno de tus movies clips un nombre unico como “texto1” o que desciba su funcion "texto de entrada”. Unas ves hecho esto coloca el triger en su lugar y dale el valor alpha de 0% y entra a “acciones”.

Como puedes ver he definido aquí 3 tipos de acciones mediante el comando _root

La primera hace que cuando el mouse pase sobre el botón el movie-clip “hola” se active a partir del fotograma 2 (recordemos que el uno esta en blanco y tiene la función “stop” ) mostrando el texto, “hola, que tal”

La segunda función, hace que al presionar el boton este diga “auch” usando la misma funcion anterior.

La tercera funcion registra cuando el mouse deja de estar sobre el boton y activa el movie-clip “adios” .

 

   

Espero que este Tutorial te sea util ya que es la base para realizar funciones mas complejas y por consiguiente animaciones mas llamativas

Sobre el autor