Comunidad de diseño web y desarrollo en internet online

MC's con fadeIn y fadeOut en AS3. Simple, Vistoso, Funcional

Citar            
MensajeEscrito el 07 Nov 2009 11:34 pm
Que tal amigos, espero que se encuentren muy bien.
Tengo la siguiente duda:
Hay alguna forma en as3 para hacer efecto de fadeIn y fadeOut de manera simple, algo como esto:

Código ActionScript :

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);
}

O algo como esto:

Código ActionScript :

import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fade, direction:Transition.IN, duration: 3, easing:Back.easeOut})

Pero teniendo un mejor control de la animacion, ya que el primer ejemplo no permite (Que yo sepa) ser implementado con brillo (fade) y el segundo no permite introducirle parametro de cuanto fade quieres que lleve la animacion solo si es IN o OUT (direction:Transition.IN).
Nota: ya consulte este tutorial: http://www.cristalab.com/tips/boton-con-efecto-de-fade-in-y-fade-out-en-actionscript-3-c60694l/

Por tonatiuh

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 08 Nov 2009 05:32 pm
No entendi bien tu pregunta :S

Nota: El 100 que le das a tu alfa cambialo por 1, ya que en AS3 1 es un 100% de alfa asi como tu .7 es un 70% ;P

Por Angel Roberto

Claber

248 de clabLevel



 

firefox
Citar            
MensajeEscrito el 09 Nov 2009 07:27 pm
Sip gracias, eso ya lo corregi y de hecho ya pude crear el efecto pero me funciona solo para el alpha, me gustaria tambien poder realizar algo asi de simple pero con el brillo, sera posible hacerlo de la misma manera de simple que con el tween del alpha?..limitandonos a no utilizar entreFrame de preferencia.

Por tonatiuh

21 de clabLevel



 

msie8
Citar            
MensajeEscrito el 09 Nov 2009 07:41 pm
ps yo tampoco entiendo tu pregunta , pero mas o menos lo que puedes hacer es agregar un listener cuando se finalize una transisicon de Tween y ahi vuelves a poner otra transicion , aunque no se muy bien lo que quieres hacer.

Jonathan

Por maneuver

243 de clabLevel



Genero:Masculino  

Mexico City

firefox
Citar            
MensajeEscrito el 10 Nov 2009 01:25 am

jn_Flash escribió:

ps yo tampoco entiendo tu pregunta , pero mas o menos lo que puedes hacer es agregar un listener cuando se finalize una transisicon de Tween y ahi vuelves a poner otra transicion , aunque no se muy bien lo que quieres hacer.

Jonathan

Disculpen, la pregunta es esta:
¿Hay alguna forma en as3 para hacer efecto de fadeIn y fadeOut de manera simple? y que ademas permita tener un "buen" control del fade(brillo), es decir algo como el fade en el transition manager pero con posibilidad de ponerle numeros como parametros (obteniendo mayor libertad) tal y como se hace con los "tweens" (ya puse un ejemplo en la primer parte de este post).

Por tonatiuh

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 10 Nov 2009 07:38 pm
Es un poquito mas complicado modificar el brillo(por lo menos de la maner que yo lo hago) si alguien sabe una mas facil por favor ilustrenos.

La manera que yo conozco de cambiarle el brillo a un clip es mediante su propiedad "colorTransform":

Código ActionScript :

import fl.motion.*;
import fl.transitions.*;
import fl.transitions.easing.*;

var c:Color=new Color()
c.brightness=1;
a.transform.colorTransform=c;


Entonces sabiendo eso puedes hacer una transicion de brillo a tu objeto Color en este caso "c":

Código ActionScript :

var t:Tween=new Tween(c,"brightness",Regular.easeIn,0,.9,1,true);
//observa los parametros del tween:
//el primero es el objeto ques e vera afectado
//la propiedad a cambiar
//la ecuacion de aceleracion
//VALOR INICIAL
//VALOR FINAL
//DELAY (en segundos)
//Segun entiendo este ultimo es una bandera para visualizar los estados de la transicion (si quieres ver la animacion siempre usa true)


Es en valor inicial/final donde modificas los valores que menciones en este aso la transicion sera entre 0 y .9 y va durar un segundo.

Con lo anterior logras una trnasicion de brillo pero en un objeto color para esto cada que cambie de estado la animacion hay que asignarle el brillo a nuestro clip:

Código ActionScript :

//Suponiendo que tengo un clip que se llama "a" y le quiero cambira el brillo:
import fl.motion.*;
import fl.transitions.*;
import fl.transitions.easing.*;

var c:Color=new Color()
c.brightness=1;

var t:Tween=new Tween(c,"brightness",Regular.easeIn,0,.9,1,true);
//motion change se despacha cada que obvio cambia la animacion XD
//-entonces es aqui donde cambio el brillo del clip :P
t.addEventListener(TweenEvent.MOTION_CHANGE,function(){a.transform.colorTransform=c});

Por Angel Roberto

Claber

248 de clabLevel



 

firefox
Citar            
MensajeEscrito el 10 Nov 2009 09:11 pm
gracias por tu respuesta amigo, me parece efectiva, ya la pruebo y te digo que paso..

Por tonatiuh

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Nov 2009 02:37 am
Companero Angel Roberto, te comento que probe el codigo que me mostraste y me parece efectivo, pero me encontre con una libreria (ya te comentaba en el otro post) llamada Tweener en internet, la descargue y me ha dado resultados magnificos, hasta ahorita no he probado para lo del brillo, pero pues puede hacer transiciones al color que tu quieras y pues me parece que eso te da posibilidades mucho mas grandes que solo editar el brillo, diria yo que con el poder hacer transiciones de color ya puedes "imitar" alphas y phades (claro, esa libreria te da muchas posibilidades entre las cuales se encuentra el alpha, rotacion, delay, entre varias otras, la verdad apenas comienzo a utilizarla pero me ha resultado de gran ayuda). Aqui comparto mi codigo, por si a alguien le puede servir.

Código ActionScript :

import caurina.transitions.Tweener;//Importo la clase Tweener

mcBB.addEventListener(MouseEvent.ROLL_OVER, bHandler);
mcBB.addEventListener(MouseEvent.ROLL_OUT, bHandler);
mcBB.addEventListener(MouseEvent.CLICK, bHandler);

mcBF.addEventListener(MouseEvent.ROLL_OVER, bHandler);
mcBF.addEventListener(MouseEvent.ROLL_OUT, bHandler);
mcBF.addEventListener(MouseEvent.CLICK, bHandler);

function bHandler(e:Event) {
   switch (e.type) {
      case "rollOver" :
         Tweener.addTween(e.currentTarget, {_color:0xffffff, time:0.5, transition:"easeOutQuart"});//Transicion a color blanco
         break;
      case "rollOut" :
         Tweener.addTween(e.currentTarget, {_color:null, time:0.5, transition:"easeOutQuart"});//Transicion al color default del mc
         break;
      case "click" :
         Tweener.addTween(e.currentTarget, {_color:null, time:0, transition:"easeOutQuart"});//Con esta y la linea de abajo hago que se vea el "cambio" de color en el mc cuando el usuario le da click a este
         Tweener.addTween(e.currentTarget, {_color:0xffffff, time:0.5, transition:"easeOutQuart"});
         break;
   }
}

Aprovecho para preguntar nuevamente, alguien sabe como "reducir" o implementar de una forma mas "elegante" estas lineas de codigo?:

Código ActionScript :

mcBB.addEventListener(MouseEvent.ROLL_OVER, bHandler);
mcBB.addEventListener(MouseEvent.ROLL_OUT, bHandler);
mcBB.addEventListener(MouseEvent.CLICK, bHandler);

mcBF.addEventListener(MouseEvent.ROLL_OVER, bHandler);
mcBF.addEventListener(MouseEvent.ROLL_OUT, bHandler);
mcBF.addEventListener(MouseEvent.CLICK, bHandler);

Sustituir esas lineas por algo como esto (pero que si funcione, ya que esto no me funciona):

Código ActionScript :

mcBB&mcBF.addEventListener(MouseEvent.ROLL_OVER, bHandler);//Asignar el evento ROLL_OVER a los dos mc's(mcBB y mcBF) al mismo tiempo.
mcBB&mcBF.addEventListener(MouseEvent.ROLL_OUT, bHandler);
mcBB&mcBF.addEventListener(MouseEvent.CLICK, bHandler);

Por tonatiuh

21 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.