Tutorial Boton Fade-in Fade-out en Flash con AS2.0

12 03 2008

He decidido empezar con este tutorial, ya que es de los primeros efectos que aprendí a hacer con flash. El código esta en ActionScript 2.0.

Al hacer un botón normal en flash, si pasamos demasiado rápido sobre el puede que la animación se corte a mitad, con el efecto Fade-in Fade-out , cuando salgamos del botón la animación se parará y se reproducirá hacia atrás.

Lo primero siempre es una buena organización para trabajar, así que siempre procuraremos tener nuestras capas bien organizadas, diferenciando entre la parte de diseño y la parte de programación.

Organización de capas.

img_1 img_1

En la primera capa siempre colocaremos la mayor cantidad de código posible, para así tenerlo localizado si hubiese que cambiar algo. En el resto de las capas pondremos el botón en cuestión y el resto de componentes gráficos, como el fondo y el él letrero en este caso.

Una vez hemos dibujado el botón, tendremos que hacer la animación que queremos que se reproduzca. Para ello transformaremos nuestro dibujo en un MovieClip. Una forma rápida de hacer esto es teniendo seleccionado nuestro dibujo y pulsando F8. Le damos un nombre cualquiera. En mi caso Le he llamado botón, y le puse boton_mc como nombre de instancia.

img_2img_2

Bien, con esto ya tendríamos preparados nuestro boton_mc para hacer la animación que queremos que se reproduzca al pasar el cursor sobre él y poner el código necesario para que funcione correctamente.

Haciendo la animación del botón.

img_3img_3

Nuevamente hemos diferenciado la parte de programación de la de diseño, aunque dentro de este mc el código va a ser bastante sencillo. Solo tenemos que poner en el primer y último fotograma un stop. Esto lo haremos seleccionando 1º uno de ellos, pulsamos F9 y escribiremos:

stop(); //esto controla que no se ejecute la animación a no ser q se lo digamos.

Repetiremos lo mismo con el último fotograma.

*Nota: mi animación es de 20 fotogramas y esta a 30fps, pero esto es a gusto del consumidor.

Cuando tengamos listo el mc (diseño del botón y animación del mismo) estaremos totalmente listos para volver a la escena donde esté. En mi caso la escena principal del fla (img_1) .

Una vez en el lugar correcto seleccionaremos el fotograma de la capa “as” y pulsaremos nuevamente F9.

Código:

boton_mc.onRollOver=function(){
onEnterFrame=function(){
if(boton_mc._currentframe!=20){
boton_mc.nextFrame();
}else{
this.stop();
delete this[“onEnterFrame”];
}
}
}
boton_mc.onRollOut=function(){
onEnterFrame=function(){
if(boton_mc._currentframe!=1){
boton_mc.prevFrame();
}else{
this.stop();
delete this[“onEnterFrame”];
}
}
}

Descargar archivos del tutorial

Anuncios

Acciones

Information

4 responses

22 03 2008
codigoleprechaun

*blog en construccion, disculpen las molestias.

8 05 2008
pedro

esta bastante completo el curriculum….enhorabuena

14 10 2008
Diego

Muy buenas noches, esta excelente el tutorial, pero me gustaria molestar con la siguiente pregunta, que debo hacer para ponerle acciones a este boton, como ir a otra escena o a otro fotograma? Muchas gracias por la respuesta

15 10 2008
codigoleprechaun

q tal diego?
pues es sencillo, solo tendrias que hacer lo siguiente:

boton_mc.OnRelease=function(){
lo que quieras hacer….
…..
….
…..
}

de esta forma le estas diciendo q cuando hagas click se ejecute la siguiente funcion. Y en el interior de esa funcion escribiriamos lo que quieres que haga el btn.

un saludo y gracias por leerme.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: