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.
De esta forma podemos crearnos pequeñas clases con distintas animaciones cambiando la propiedad en el tween.
Mejor que eso, puedes crearte una clase abstracta y pasarle los parámetros desde el constructor Por:Zguillez
excelente pero tengo una duda como soy un novato me da un error cuando intento la clase base en BotonFade el error es el siguiente:
"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:LuisNovato-blog
A mi tampoco me funciona el primer codigo. Por:Chispa Cuajá
Si pusieron un error adrede no tiene gracia. es muy complicado aprender y ademas hacer de profesor corrigiendo errores. Por:Chispa Cuajá
Chicos muchas gracias!!! Excelente. Por:Caro-blog
hola!
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:mumi83
Mi hermano, excelente tutorial solo que no me imagino, bajo que terribles sircunstancias te encontraste para tener que usar enterframe etc... jajajaja bueno dejame decirte que veo mas sencillo.
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:wraven
Bien la idea, pero ahora ando un poco perdido todo lo relacion con actionscript 3.0. estoy investigando y me parece muy interesante la pagina, espero poder sumergirme mas al mundo de la actualizacion cs4 as3, mil gracias amigo por sus grandes conocimiento. Por:ccenta
Hola como estan?
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
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:Gerardo-blog
esta bien!! llevaba horas intentando hacer lo mismo jajajaa , bueno almenos me lagro que iba por buen camino, solo me faltaba ordenar un poco el código... gracias hombre!!... y repecto a lo que dice Wraven de hacerlo con el Tween, también esta bien - pero para el ejemplo - ... ya que el codigo del post nos sirve es para hacer animaciones mas complejas, botones mas elaborados...
