Comunidad de diseño web y desarrollo en internet online

Movimiento Tweener con Blur segun velocidad.

Citar            
MensajeEscrito el 19 Oct 2008 09:29 pm
Muy buenas. A ver si me podeis ayudar.

Quiero q a este codigo:

import caurina.transitions.Tweener;
this.mc.addEventListener ('mouseOver', function() {
Tweener.addTween(mc, {x:300,y:100,time:1,transition: "easeOutCubic"});
});

..se le añada blur al mc. y que esté proporcional a la velocidad que esta tomando la transicion el mc.

gracias!

Por Smallart

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 20 Oct 2008 02:22 pm
Si utilizas TweenMax puedes hacer transiciones de filtros junto con las transciciones de otras propiedades sin mucha dificultad.

Código ActionScript :

TweenMax.to(mc, 1, {x:300, y:100, blurFilter:{blurX:2, blurY:2}, ease:Cubic.easeOut});

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 20 Oct 2008 04:36 pm
ok gracias!

pero, al acabar la animacion sigue con blur.
yo quiero q el blur quede acorde con la velocidad.
al principio no haya blur.que el blur vaya creciendo segun el tipo de transicion.y que al final vuelva a estar sin blur, porque ya no hay movimiento.

espero q me hayas entendido.

gracias!

Por Smallart

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 20 Oct 2008 09:40 pm
Ya veo, es algo más complicado de lo que creí, para este caso específico es mejor que lo hagas tu mismo, que haya una función que chequee la diferencia de posiciones y asigne un blur. Pero de todas maneras si utilizas TweeGroup puedes lograr lo que deseas, ya que puedes hacer secuencias de animaciones.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 21 Oct 2008 07:13 am
A las Tweens de Caurina le puedes añadir como argumento una función a ejecutar cuando acaba la transición y/o cuando cambia el valor de la variable.
Lo más sencillo puede ser que le hagas un blur al principio y en la función marcada en el onComplete ponerle el blur a 0
Si lo que quieres realmente es hacer un blur proporcional a la velocidad deberás usar la función que hayas creado en el onUpdate.
Para ello:
Antes de hacer el tween guardas la posición actual de tu MC en una variable

Código :

mc.x0=mc.x

Y en el onUpdate
1.-hayas la diferencia del valor de x con el valor de x anterior que tendrás que haber guardado en una variable que pertenezca al MC

Código :

var dif=this.x-this.x0

2.-Haces el blur proporcional a esa diferencia
3.-igualas la propiedad donde guardamos la x anterior a la x actual

Código :

this.x0=this.x

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Oct 2008 08:32 pm
muchas gracias a los dos!
elchininet: gracias por tu aportacion, pero prefiero seguir con el metodo tweener.
Eliseo2: me has salvado, pero por favor, no se como aplicarlo. Crees qe podrias hacerlo con esto?:

import caurina.transitions.properties.*;
import caurina.transitions.Tweener;
FilterShortcuts.init();

this.mc.addEventListener (MouseEvent.CLICK, function() {
Tweener.addTween(mc, {x:300, y:100, _Blur_blurX: 5 ,_Blur_blurY: 5, time:1,transition:"easeOutQuint"});
});

gracias!!

Por Smallart

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Oct 2008 09:56 pm
Siempre mira este test de velocidad antes de convencerte elegir uno u otro, te lo dice alguien que llevaba muchos años con Caurina y al descubrir las de GreenSocks no ha vuelto atrás.
TweenMax tiene los mismos eventos que Caurina, en mi opinión van a la par.

Lo que te recomendó Eliseo fue lo mismo que te comenté, no lo lograrás usando solo la clase, debes unir a la clase una función que se llame en el evento onUpdate y depende de lo que haya recorrido el movie aplique el respectivo blur.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 22 Oct 2008 06:50 am
No tengo a caurina a mano, pero mi idea es

Código :

import caurina.transitions.Tweener;
this.mc.addEventListener ('mouseOver', function() {
   //damos los valores iniciales de x0 e y0
   this.mc.x0=this.mc.x
   this.mc.y0=this.mc.y

   //fijaté que le pasamos como argumento una función
   Tweener.addTween(mc, {x:300,y:100,time:1,transition: "easeOutCubic",onUpdate:cambiarBlur});
});
function cambiarBlur(){
   //hallamos la diferencia al cuadrado
   var velx2:Number=(this.x0-this.x)*(this.x0-this.x)
   var vely2:Number=(this.y0-this.y)*(this.y0-this.y)
   //hallamos unos valores proporcionales a dicho blur
   var blurX:Number=velx2*.3
   var blurY:Number=vely2*.3
   //aplicamos el blur
   var filter::BitmapFilter=new (BlurFilter(blurX, blurY, BitmapFilterQuality.HIGH));
   var myFilters:Array = new Array();
   myFilters.push(filter);
   this.filters = myFilters;
   this.x0=this.x
   this.y0=this.y
}


NOTA: Haz tamien una función onComplete para poner el blur a 0

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Oct 2008 07:42 pm
gracias por vuestras respuestas.

Eliseo2, con tu codigo, solo puedo aplicarlo a mc.
he creado una cosilla, para aplicarlo a la animacino q qiera.. pero no es del todo lo q pretendia desde un principio. ademas, cuando la transicion "x", si pulso otra vez el mc, se vuelve a efectuar la transicion blur indefinidamente.. ahi va:

import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();
function blur():void{
Tweener.addTween(mc, {_Blur_blurX:20, time:0.5, transition:"easeOutQuint"});
Tweener.addTween(mc, {_Blur_blurX:0, time:0.7, delay:0.6, transition:"easeOutQuint"});
}
this.mc.addEventListener (MouseEvent.CLICK, function() {
Tweener.addTween(mc, {y:200,x:700,rotation:50, time:2, transition:"easeOutQuint", onStart:blur});
});

Por Smallart

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Dic 2008 10:12 am

Por clipdepelicula

237 de clabLevel



 

Valencia (España)

firefox

 

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