Comunidad de diseño web y desarrollo en internet online

Ajustar este code de easing

Citar            
MensajeEscrito el 21 Feb 2010 03:12 pm
Hola a todos, tengo este code para el efecto de entrada de un mc:

Código ActionScript :

import mx.transitions.Tween;
import mx.transitions.easing.*;  
var twMove:Tween = new Tween(mc, "_x", Elastic.easeOut, 900, -200, 9, true);


El problema está en que como el fondo está ajustado al 100% del navegador del usuario y los contenidos tb se posicionan según el navegador, pues quería saber si en vez (en el code anterior) de poner a mano las coordenadas (900,-200) podría poner algo así como que "mc" vaya a la izqda del ancho del navegador -80pixeles.

He probado con algo así:

Código ActionScript :

mc._x = (Stage.width - mc._width) /80;

Y algunas variantes, pensando que mc._x iba a sustituir a la _x del primer code que he puesto... pero no afecta en nada, así que no tengo idea de como puedo hacer lo que quiero.

Espero me puedan ayudar, desde ya muchas gracias.

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Feb 2010 07:24 pm
Hola,
con eso de Stage.width vas por buen camino, ¿desde qué coordenada quieres que se inicie la animación, y en cuál acaba?

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 21 Feb 2010 08:34 pm
Pues la verdad es que en la coordenada del root quiero que vaya de la x=1000 (q se encuentra fuera del stage) y termine en la x30, pero lo hice en el root y sin problemas por la coordenada, pero al convertirlo en un mc (más bien al agruparlo junto con otros mc's en uno solo) las coordenadas cambiaron, y no lo acabo de entender.

Por eso, en vez de hacerlo "númericamente" pensé hacerlo diciendole que vaya a la x0 +100px, que sería en el 100, lo pensé así pq como el contenido es autoajustable al 100% con el navegador del usuario, para que no haya desvaríos, aunque no sé si voy por buen camino, o no es necesario.

Gracias por la pronta respuesta.

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Feb 2010 10:55 pm
Al meter tu clip dentro de otro clip contenedor, sus propiedades _x e _y ya no están expresadas con respecto al stage, sino respecto del contenedor en el que está metido. Luego si antes para colocar el clip en la posición 80 ponías "mc._x = 80", ahora tendrás que poner "container._x = 80 - container.mc._x" (con lo que se moverán tanto el container como el clip, hasta que el clip esté en la posición 80) ó bien "container.mc._x = 80 - container._x" (en este caso el clip se situará en la posición 80, pero el container no se moverá).
Otra cosa es el tema de que el contenido sea autoajustable o no. Si quieres que el clip se posicione a 80 pixels respecto al borde izquierdo, no tienes que hacer nada diferente, pero si quieres que esté a 80 pixels respecto del derecho tienes que poner "Stage.width - 80". Eso teniendo en cuenta que siempre quieras que esté a 80 pixels, independientemente del ancho del stage (vamos, que la posición sea absoluta en lugar de relativa con respecto al ancho de tu stage).

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 25 Feb 2010 03:25 pm
Muchas gracias Isidoro! :)

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Mar 2010 11:52 am
He tenido que dejar parado un poco este tema pq he estado liada con otras cosas, pero lo acabo de retomar pensando que lo tenía solucinado, pero no, no lo consigo, creo que la mejor manera de ver el problema es con un ejemplo, mirad lo que me pasa aqui:

http://www.anabelendominguez.com/prueba.html

Si pincháis en el numero 1, véis que éste se va para arriba (ahora pongo el code exacto usado) y los demás se caen hacia abajo, pero una vez hecho ésto, si redimensionáis la pantalla (sea para más grande o más pequeña) no mantienen su posición, sino que el 1 se va más arriba, y lo que están abajo (si se amplia la pantalla) ya no están fuera sino que se ven... el code es éste:

Código ActionScript :

import mx.transitions.Tween;
import mx.transitions.easing.*;  

fotografia_mc.onPress = function():Void {  
   var twMove:Tween = new Tween(cuatro_mc, "_y", Bounce.easeOut, 500, 900, 2.5, true);
   var twMove:Tween = new Tween(dos_mc, "_y", Bounce.easeOut, 400, 900, 2.3, true);
   var twMove:Tween = new Tween(tres_mc, "_y", Bounce.easeOut, 200, 900, 2, true);
   var twMove:Tween = new Tween(uno_mc, "_y", Bounce.easeOut, 200, 30, 2, true);
   
}  


¿como puedo solucionarlo? estoy perdida.

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Mar 2010 12:48 pm
Hola de nuevo,
suponiendo que los clips de los números estén en la posición 0, 0 con respecto a su punto de registro, para hacer desaparecer los 3 clips el tween tiene que comenzar en su posición "y", y acabar en "Stage.height":

Código ActionScript :

import mx.transitions.Tween;
import mx.transitions.easing.*;

fotografia_mc.onPress = function():Void 
{
   var twMove:Tween = new Tween(cuatro_mc, "_y", Bounce.easeOut, cuatro_mc._y, Stage.height, 2.5, true);
   var twMove:Tween = new Tween(dos_mc, "_y", Bounce.easeOut, dos_mc._y, Stage.height, 2.3, true);
   var twMove:Tween = new Tween(tres_mc, "_y", Bounce.easeOut, tres_mc._y, Stage.height, 2, true);
   var twMove:Tween = new Tween(uno_mc, "_y", Bounce.easeOut, uno_mc._y, 30, 2, true);
}

Pero ojo! El clip uno_mc de esta forma siempre acabará en la posición _y = 30, independientemente de la resolución. Si quisieras colocarlo proporcionalmente, tendrías que pasarlo todo a porcentajes.

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 01 Mar 2010 09:07 pm
Gracias Isidoro por contestar tan rápido, pero me temo que el problema persiste :(

He hecho los cambios que me dices, y lo he vuelto a subir a la misma dirección: http://www.anabelendominguez.com/prueba.html

Todo va bien cuando haces click en 1 y ya está, pero por si casualidad el usuario después amplía la resolución de su navegador, entonces el número 1 da un salto para arriba (que no entiendo el porqué) y los demás que están abajo, se pueden ver, (yo , estos no quieron que se vean bajo ningún concepto, ya que se supone que la animación ha hecho que se vayan, ¿pq no se van? están ahi, y si el usuario amplia su navegador, lo puede ver todos juntitos, y queda muy mal)

:(

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Mar 2010 11:02 pm
¿Estás usando diagramación líquida? Si es así en el resize se estarán descolocando los clips de los números.
Para que no se vean los clips que se han ocultado usa onMotionFinished y ahí usa _visible = false

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 04 Mar 2010 10:19 pm
Lo he hecho, he puesto en el mismo sitio donde tengo el code de los tween, he puesto a continuación ésto:

Código ActionScript :

twMove.onMotionFinished = function() {
   dos_mc._visible=false;
   tres_mc._visible=false;
   cuatro_mc._visible=false;
};


Pero sigue igual... quizás lo tenga q poner en otro sitio, en root? (si, uso la diagramacion liquida)...

:(

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Mar 2010 10:52 pm
No hace falta que lo pongas en root (aunque le código quedaría más legible). La verdad es que los clips deberían desaparecer, aunque sería mejor que a cada tween le dieses un nombre diferente en lugar de llamar a todos twMove.
Y la importancia de usar diagramación líquida es que en el evento resize deberías recolocar todos los clips que haya visibles en la escena. Por ejemplo, si en el resize haces para esos 3 clips que su posición _y = Stage.height, al redimensionar siempre se colocarán en la parte de abajo, fuera de la zona visible.

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 07 Mar 2010 08:12 pm
El problema es que no puedo hacer que en el resize hagan _y=Stage.height; ya que en el root están los 4 mcs juntos. Te explico la estructura:

en ROOT:

Código ActionScript :

    menu_mc._x = (Stage.width/2)-(menu_mc._width/2);
   menu_mc._y = (Stage.height/2)-(menu_mc._height/2);


menu_mc, es el mc donde están los 4 mc's. Al entrar en dicho mc, ya aparecen los 4 mc's por separado, y con el code que ya hemos hablado arriba.

De todas formas, pienso que el problema está en que no me funciona el onMotionFinished, pq he probado con otras funciones, y no me funciona (he cambiado las variables twMove, y he puesto a cada una, una distinta).

Dentro de menu_mc, está el code easing y el onmotionfinished, pero no funciona.

He estado dándole vueltas estos días, y pensé en que una posible solución, es poner los 4 mc's directamente en el root, y lo he intentado, pero me topo con un pequeño problema, que no sé como hacer para que por ejemplo, uno_mc, esté siempre a 50 pixeles (por ejemplo, o en porcentaje, no sé como sería) de la "parte de arriba" del escenario, y a otros 50 px de la parte derecha del escenario...

Y haciendo éso, pienso que podría hacer "desaparecer" los mc con el _y=stage.height.

¿Me podrías ayudar con ese problemilla? A ver si así consigo solucionarlo todo?

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Mar 2010 10:31 pm
Por eso se descolocan los clips en el resize. Si has centrado el clip que los contiene, ya no está en la posición (0, 0), y por lo tanto tendrás que tener en cuenta eso a la hora de recolocarlos (la animación ya no acabaría en Stage.height, sino en Stage.height - menu_mc._y). Si los pones en el Stage te evitas algún cálculo que otro. Aquí te pongo 2 ejemplos con los 4 clips en _root (es el típico ejemplo de colocar cada uno en una esquina del Stage).
En este se colocan a 50 pixels de distancia:

Código ActionScript :

Stage.align = "TL";
Stage.scaleMode = "noScale";

var distancia:Number = 50;

var stageListener:Object = new Object();
Stage.addListener(stageListener);
stageListener.onResize = setStage;
setStage();

function setStage():Void
{
   uno_mc._x = distancia;
   uno_mc._y = distancia;
   dos_mc._x = Stage.width - dos_mc._width - distancia;
   dos_mc._y = distancia;
   tres_mc._x = Stage.width - tres_mc._width - distancia;
   tres_mc._y = Stage.height - tres_mc._height - distancia;
   cuatro_mc._x = distancia;
   cuatro_mc._y = Stage.height - cuatro_mc._height - distancia;
}

En este otro la distancia es de 10% del ancho total por los laterales, y de un 20% del alto total por arriba y por abajo:

Código ActionScript :

Stage.align = "TL";
Stage.scaleMode = "noScale";

var distanciaX:Number;
var distanciaY:Number;

var stageListener:Object = new Object();
Stage.addListener(stageListener);
stageListener.onResize = setStage;
setStage();

function setStage():Void
{
   distanciaX = Stage.width * (10 / 100); //situado al 10% del ancho total
   distanciaY = Stage.height * (20 / 100); //situado al 20% del alto total
   uno_mc._x = distanciaX;
   uno_mc._y = distanciaY;
   dos_mc._x = Stage.width - dos_mc._width - distanciaX;
   dos_mc._y = distanciaY;
   tres_mc._x = Stage.width - tres_mc._width - distanciaX;
   tres_mc._y = Stage.height - tres_mc._height - distanciaY;
   cuatro_mc._x = distanciaX;
   cuatro_mc._y = Stage.height - cuatro_mc._height - distanciaY;
}

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 09 Mar 2010 09:22 pm
Ante todo, muchisimas gracias por todas las molestias que te estás tomando, de verdad, gracias.

He hecho un copia y pega de tu code (para no equivocarme), pero ahora cuando se redimensiona el navegador, cada mc vuelve a su sitio (he probado el onmotionfinished y tampoco funciona, sigue volviendo a su sitio)

Mira... pincha en el uno, y luego redimensiona la pantalla.... :(

http://www.anabelendominguez.com/prueba1.html

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 10 Mar 2010 11:00 pm
Eso pasa porque en el resize se vuelven a colocar en función de esa primera posición que le hemos asignado. Hay que colocarlos en diferente lugar en función de si están visibles u ocultos. Podría hacerse así (nota: he hecho que al hacer el resize de eliminen los tweens porque sino quedan descolocados si haces el resize en medio del efecto tween. Quizá se pudiese arreglar usando Tween.continueTo, pero no estoy seguro):

Código ActionScript :

import mx.transitions.Tween;
import mx.transitions.easing.*;

Stage.align = "TL";
Stage.scaleMode = "noScale";

var twMove1:Tween;
var twMove2:Tween;
var twMove3:Tween;
var twMove4:Tween;

var distancia:Number = 50;
var cang2:Boolean = false;

var stageListener:Object = new Object();
Stage.addListener(stageListener);
stageListener.onResize = setStage;
setStage();

function setStage():Void
{
   uno_mc._x = distancia;
   dos_mc._x = Stage.width - dos_mc._width - distancia;
   tres_mc._x = Stage.width - tres_mc._width - distancia;
   cuatro_mc._x = distancia;
   
   if (cang2)
   {
      twMove2.fforward();
      twMove3.fforward();
      twMove4.fforward();
      
      uno_mc._y = 30;
      dos_mc._y = Stage.height;
      tres_mc._y = Stage.height;
      cuatro_mc._y = Stage.height;
   }
   else
   {
      uno_mc._y = distancia;
      dos_mc._y = distancia;
      tres_mc._y = Stage.height - tres_mc._height - distancia;
      cuatro_mc._y = Stage.height - cuatro_mc._height - distancia;
   }
}

uno_mc.onPress = function():Void
{
   cang2 = true;
   twMove1 = new Tween(uno_mc, "_y", Bounce.easeOut, uno_mc._y, 30, 2, true);
   twMove2 = new Tween(dos_mc, "_y", Bounce.easeOut, dos_mc._y, Stage.height, 2.3, true);
   twMove3 = new Tween(tres_mc, "_y", Bounce.easeOut, tres_mc._y, Stage.height, 2, true);
   twMove4 = new Tween(cuatro_mc, "_y", Bounce.easeOut, cuatro_mc._y, Stage.height, 2.5, true);
}

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 11 Mar 2010 08:33 pm
Isidoro.... a tus pies!! :alabado:

Ahora va perfecto! Mil gracias, por la ayuda, por la paciencia y por tu amabilidad :D ... ¡Gracias!

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 20 Feb 2011 01:48 pm
Alguien sabe como puedo hacer que el mc central de mi sitio hecho con diagramación líquida, al re acomodarse lo haga con easing?

Por cristianarce

46 de clabLevel



Genero:Masculino  

Diseño & Programación

firefox
Citar            
MensajeEscrito el 20 Feb 2011 09:28 pm
Pues sería así (cambiando la variable tuMovieClip por el nombre del tuyo, y poniendo el easing que quieras):

Código ActionScript :

import mx.transitions.Tween;
import mx.transitions.easing.*;

Stage.align = "TL";
Stage.scaleMode = "noScale";

var tweenX:Tween;
var tweenY:Tween;

var stageListener:Object = new Object();
Stage.addListener(stageListener);
stageListener.onResize = setStage;
setStage();

function setStage():Void
{
   var endX:Number = (Stage.width - tuMovieClip._width) / 2;
   var endY:Number = (Stage.height - tuMovieClip._height) / 2;
   tweenX = new Tween(tuMovieClip, "_x", Bounce.easeOut, tuMovieClip._x, endX, 2, true);
   tweenY = new Tween(tuMovieClip, "_y", Bounce.easeOut, tuMovieClip._y, endY, 2, true);
}

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 20 Feb 2011 09:59 pm
Muchas gracias Isidoro! Realmente agradecido por tu ayuda.

Al final usé este código, pero tu ayuda me dió el pie para probar :lol:

Código ActionScript :

import mx.transitions.Tween; 
import mx.transitions.easing.*; 

Stage.scaleMode = 'noScale';   
Stage.align = 'TL';   
redim = new Object();   
redim.onResize = redimensionar;   
Stage.addListener(redim);   
function redimensionar() {   
   fondo._width = Stage.width;   
   fondo._height = Stage.height; 
   x = (Stage.width - mc._width) / 2; 
   y = (Stage.height - mc._height) / 2; 
}   
redimensionar();  
miListener.onResize(); 

var tweenX:Tween; 
var tweenY:Tween; 
 
var stageListener:Object = new Object(); 
Stage.addListener(stageListener); 
stageListener.onResize = setStage; 
setStage(); 
 
function setStage():Void 
{ 
   var endX:Number = (Stage.width - mc._width) / 2; 
   var endY:Number = (Stage.height - mc._height) / 2; 
   tweenX = new Tween(mc, "_x", Regular.easeOut, mc._x, endX, 2, true); 
   tweenY = new Tween(mc, "_y", Regular.easeOut, mc._y, endY, 2, true); 
}


Saludos!

Por cristianarce

46 de clabLevel



Genero:Masculino  

Diseño & Programación

firefox
Citar            
MensajeEscrito el 21 Feb 2011 08:05 am
Me alegro de que te haya servido, pero hay un pequeño detalle en tu código:
estás creando 2 listener con 2 funciones callback cuando no es necesario hacerlo. Es mejor que pongas todo el código de las funciones "redimensionar" y "setStage" en una sola función, y así sólo tendrás que crear un listener ("redim" ó "stageListener") que use esa función como callback. Además esas variables "x" e "y" que estás usando son exactamente las mismas que las "endX" y "endY" que he usado yo, así que también sobran esas variables. Yo lo dejaría así:

Código ActionScript :

import mx.transitions.Tween;
import mx.transitions.easing.*;

Stage.align = "TL";
Stage.scaleMode = "noScale";

var x:Number;
var y:Number;
var tweenX:Tween;
var tweenY:Tween;

var stageListener:Object = new Object();
Stage.addListener(stageListener);
stageListener.onResize = setStage;
setStage();

function setStage():Void
{
   fondo._width = Stage.width;
   fondo._height = Stage.height;
   x = (Stage.width - mc._width) / 2;
   y = (Stage.height - mc._height) / 2;
   tweenX = new Tween(mc, "_x", Regular.easeOut, mc._x, x, 2, true);
   tweenY = new Tween(mc, "_y", Regular.easeOut, mc._y, y, 2, true);
}

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 21 Feb 2011 01:52 pm
PERFECTO! Muchas gracias Isidoro, supongo que ahora mi código está mas "depurado". Tienes msn así podemos estar en contacto? Saludos!

Por cristianarce

46 de clabLevel



Genero:Masculino  

Diseño & Programación

firefox

 

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