Uno de los tutoriales mas visitados y consultados es el Botón con fade-in y fade-out animado de Rosvel, dicho ejemplo esta echo en ActionScript 1, por lo que me puse a investigar como hacer algo bien simple en ActionScript 3. Vamos a basarnos en su código, y a crear una clase a partir de ello.
veamos el código que usa Rosvel en su botón:
Código :
on (rollOver) { mc_animado.onEnterFrame = function () { if (this._currentframe != 20) { this.nextFrame(); } else { this.stop(); delete this["onEnterFrame"]; } // end if }; } on (rollOut) { mc_animado.onEnterFrame = function () { if (this._currentframe != 1) { this.prevFrame(); }else { this.stop(); delete this["onEnterFrame"]; } // end if }; }
Bien, para hacerlo un poco mas reutilizable vamos a declarar esto, como ya dijimos en una clase. En primer lugar dibujamos nuestro botón, un simple clip con una animación.
Luego abrimos un archivo de actionscript y comenzamos con nuestra clase:
Código :
//para el ejemplo ubicaremos la clase en el mismo directorio que el fla package { // importamos la clase MovieClip, y los eventos de raton import flash.display.MovieClip; import flash.events.MouseEvent; import flash.events.Event; // public class BotonFade extends MovieClip { // public function BotonFade():void { // this.stop(); // detenemos la animación // asignamos los eventos de ratón this.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); this.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); }; //declaramos la función que hará avanzar la animación private function fadeIn(e:Event):void{ // if(this.currentFrame < this.totalFrames){ // this.nextFrame(); }else{ //borramos el enter frame una ves terminada la animación this.removeEventListener(Event.ENTER_FRAME, fadeIn); }; }; // asignamos la función fadeIn al pasar el ratón encima private function mouse_over(e:MouseEvent):void{ // this.addEventListener(Event.ENTER_FRAME, fadeIn); // para evitar algún bug borramos el enter frame del evento out this.removeEventListener(Event.ENTER_FRAME, fadeOut); }; // ahora la función para "rebobinar" la animación private function fadeOut(e:Event):void{ // if(this.currentFrame > 1){ // this.prevFrame(); }else{ // this.removeEventListener(Event.ENTER_FRAME, fadeOut); }; }; // y hacemos lo mismo que antes: asignamos le función y evitamos la superposición de funciones private function mouse_out(e:MouseEvent):void{ // this.addEventListener(Event.ENTER_FRAME, fadeOut); this.removeEventListener(Event.ENTER_FRAME, fadeIn); }; }; }
Bien, ahora resta asignarle la clase al clip, para ellos vamos a la opción de Linkage ne la librería y la pasamos nuestra clase:
Y ya tenemos nuestro botón:
Ahora bien, podemos ir un poco mas allá y simplificar nuestra clase usando un Tween para la animación, quedando nuestra clase de la siguiente manera:
Código :
package{ // import flash.display.MovieClip; import flash.events.MouseEvent; import flash.events.Event; import fl.transitions.Tween; import fl.transitions.easing.*; // public class BotonFade extends MovieClip { // private var fade:Tween; // public function BotonFade():void { // this.stop(); //this.buttonMode = true; // this.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); this.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); }; // private function mouse_over(e:MouseEvent):void{ // fade = new Tween(this, "alpha", Strong.easeOut, this.alpha, 0.7, 1, true); }; // private function mouse_out(e:MouseEvent):void{ // fade.yoyo(); }; }; }
De esta forma podemos crearnos pequeñas clases con distintas animaciones cambiando la propiedad en el tween.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por M@U el 06 de Septiembre de 2008
penHolder :
Err... Pusiste mal el archivo,pero me parece una buena actualización. Bien !
Por penHolder el 10 de Septiembre de 2008
Por Zguillez el 23 de Septiembre de 2008
penHolder :
Corregido!
Por Zguillez el 23 de Septiembre de 2008
penHolder :
Mejor que eso, puedes crearte una clase abstracta y pasarle los parámetros desde el constructor
Por LuisNovato el 24 de Octubre de 2008
"no se utiliza la clase base porque la clase especificada ya esta definida y amplia su propia subclase..."
se les agradece de ante mano
Por Chispa Cuajá el 29 de Octubre de 2008
Por Chispa Cuajá el 29 de Octubre de 2008
Por Caro el 06 de Noviembre de 2008
Por mumi83 el 17 de Marzo de 2009
hice el ejemplo... y lo que pasa es que la animacion del boton se reproduce automaticamente sin parar...
como puedo ahcer para enviarte el archivo y que lo veas?
Por wraven el 24 de Junio de 2009
Primero vamos a llamar nuestros paquetes y clases ya predefinidas:
import flash.events.MouseEvent;
import fl.transitions.easing.*;
import fl.transitions.Tween;
Sigo con bajar la opacidad a mi botón y hacer las respectivas llamadas a mi movie clip:
IM.alpha=.70
IM.addEventListener(MouseEvent.ROLL_OVER,IM_alpha);
IM.addEventListener(MouseEvent.ROLL_OUT,IM_alpha2);
Ahora creo mi función:
function IM_alpha($event:MouseEvent):void {
new Tween(IM, "alpha", Strong.easeIn, IM.alpha, 100, 3, true);
}
function IM_alpha2($event:MouseEvent):void {
new Tween(IM, "alpha", Strong.easeOut, IM.alpha, .70, 2, true);
}
Si nos damos cuenta es tan sencillo que parece que actionscript3 es lo de hoy, claro yo novato en dicho lenguaje solo aporto! y hoy me tomare unos minutos mas para explicar la funcion tween
new Tween(); <--- esta llamando la función y en los paréntesis pide que nosotros brindemos los parámetros que son los siguientes IM nuestro movie clip, alpha la transición que va a llevar acabo, Strong.easeOut o easeIn segun sea el caso estamos pidiendo que baje el alpha o lo suba, luego damos la expresión para ello que es alpha=, el siguiente numero es la declaración de la opacidad y este penúltimo numero tan bello es el tiempo del easeOut o In y por ultimo y obvio true o false para decir que lleve o no acabo lo que acabamos de escribir.
En lo personal esto me parece sencillo y difícil al parecer de creerlo esto es actionscript3 un verdadero lenguaje de programación en donde lo que nos va a llevar a trascender es simplemente el conocer los paquetes y clases que adobe preparo para nosotros. Espero sea de ayuda esto y un saludo.
Por ccenta el 18 de Agosto de 2009
Por Gerardo el 12 de Octubre de 2009
Aqui les dejo el coidgo arreglado, y me funciona super bien ademas con dos botones, para agregar mas, hay que poner el stop de su movie clip y cambiar el nombre de la funciones, vean que en el 2 boton añadi una p en lo que se debe de cambiar
Saludos
//propiedades AS3
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.Event;
//Stops Movie clips
mc_ub.stop();
mc_proy.stop();
//Boton Ubicacion
btn_trans.addEventListener(MouseEvent.MOUSE_OVER,mouse_over);
btn_trans.addEventListener(MouseEvent.MOUSE_OUT,mouse_out);
btn_trans.addEventListener(MouseEvent.CLICK,mouse_down);
//Boton Proyecto
btn_proy.addEventListener(MouseEvent.MOUSE_OVER,mouse_overp);
btn_proy.addEventListener(MouseEvent.MOUSE_OUT,mouse_outp);
btn_proy.addEventListener(MouseEvent.CLICK,mouse_downp);
//Funciones del Boton Ubicacion
function fadeIn(events:Event):void
{
if(mc_ub.currentFrame < mc_ub.totalFrames){
mc_ub.nextFrame();
}
else
{
mc_ub.removeEventListener(Event.ENTER_FRAME, fadeIn);
};
};
function mouse_over(events:MouseEvent):void{
btn_trans.addEventListener(Event.ENTER_FRAME, fadeIn);
btn_trans.removeEventListener(Event.ENTER_FRAME, fadeOut);
};
function fadeOut(events:Event):void{
if(mc_ub.currentFrame > 1){
mc_ub.prevFrame();
}
else
{
mc_ub.removeEventListener(Event.ENTER_FRAME, fadeOut);
};
};
function mouse_out(e:MouseEvent):void{
btn_trans.addEventListener(Event.ENTER_FRAME, fadeOut);
btn_trans.removeEventListener(Event.ENTER_FRAME, fadeIn);
};
function mouse_down(e:MouseEvent):void{
btn_trans.removeEventListener(Event.ENTER_FRAME, fadeIn);
btn_trans.removeEventListener(MouseEvent.MOUSE_OUT,mouse_out);
gotoAndPlay(302);
};
//Funciones del Boton Proyecto
function fadeInp(eventsp:Event):void
{
if(mc_proy.currentFrame < mc_proy.totalFrames){
mc_proy.nextFrame();
}
else
{
mc_proy.removeEventListener(Event.ENTER_FRAME, fadeInp);
};
};
function mouse_overp(eventsp:MouseEvent):void{
btn_proy.addEventListener(Event.ENTER_FRAME, fadeInp);
btn_proy.removeEventListener(Event.ENTER_FRAME, fadeOutp);
};
function fadeOutp(eventsp:Event):void{
if(mc_proy.currentFrame > 1){
mc_proy.prevFrame();
}
else
{
mc_proy.removeEventListener(Event.ENTER_FRAME, fadeOutp);
};
};
function mouse_outp(ep:MouseEvent):void{
btn_proy.addEventListener(Event.ENTER_FRAME, fadeOutp);
btn_proy.removeEventListener(Event.ENTER_FRAME, fadeInp);
};
function mouse_downp(ep:MouseEvent):void{
btn_proy.removeEventListener(Event.ENTER_FRAME, fadeInp);
btn_proy.removeEventListener(MouseEvent.MOUSE_OUT,mouse_outp);
gotoAndPlay(303);
};
Por juliuk el 06 de Enero de 2010
y ya gracias por todo!!
Por elcoka el 09 de Septiembre de 2010
ah! para los que tuvieron problema.. el archivo actionscript .as .. guardenlo como BotonFade, y en propiedades del movieclip del FLA principal, pongan en Class: BotonFade, nada mas! y funciona perfecto =) !!
saludos.
Por will el 18 de Noviembre de 2010
Por el_chejin el 29 de Junio de 2011
Código :
Por el_chejin el 30 de Junio de 2011
[as]
miboton_mc.buttonMode = true;
miboton_mc.useHandCursor = true;
[as]
y a cada boton debemos crearle este codigo digamos miboton2_mc miboton3_mc etc.
Por Hugo el 31 de Agosto de 2011
No podrian crear este mismo tutorial con ActionScript 3.0, pero haciendolo TODO desde cero y un poco más de imagenes con sus especificaciones, así podriamos guiarnos mucho mejor =D
Gracias!!