Comunidad de diseño web y desarrollo en internet online

Problema con efecto easing [ayuda]

Citar            
MensajeEscrito el 29 Ago 2008 05:39 am
Hola compañeros , les necesito de su ayuda !
bueno primero estaba viendo de hace un efecto easing pero no pude asi que me descargué
de este "tutorial" que no entendí nada asi que me bajé el ejemplo en .fla
http://www.cristalab.com/tutoriales/57/menu-con-efecto-de-easing-para-novatos.html

bueno traté de editarlo :?
pero lllegué a sierta parte donde quiero agregar más imagenes y se me van montando no sé que podrá hacer .. querria saber la forma de ir agregando mas imagenes a la corrida y sin que se monten




mi pregunta es como ir integrando más imagenes sin que se monten por favor se les agredecería su ayuda :cool:
saludos

Por <^[E]nS[E]R`>

3 de clabLevel



 

Chile

firefox
Citar            
MensajeEscrito el 29 Ago 2008 08:51 am
Si no posteas tu código, es muy difícil aconsejarte algo para que lo arregles.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 29 Ago 2008 03:49 pm
allí les dejo el código completo que tengo en uso

Este código es del primer Frame!

Código ActionScript :

//Declaramos variables
// Variable para saber la posición _x del mouse
var xposMouse:Number = _root._xmouse;
// Variable para asignar la velocidad máxima del movimiento de los MC
var velMax:Number = 6;
// Velocidad mínima de los MC
var velMin:Number = 0;
// Variable para asignar el punto medio de la escena
var xMitadEscena:Number = 300;
// La siguiente var, sirve para determinar cuando el mc está al
//límite _x de la pantalla, en este caso es de 600 pixels
var anchoEscena:Number = 600;
// A esta le asignaremos el ancho del mc, para saber cuando a desaparecido del
// todo de la escena y establecer las separaciones entre mcs
var anchoMC:Number = 149.9;
//variable factor, que en realidad es la función matemática
// f(x) = ax + b
var factor:Number = xposMouse*(velMax-velMin)/xMitadEscena+2*velMin-velMax;
//No queremos que factor pase de 6, o de  -6
if (factor>velMax) {
   factor = velMax;
} else if (factor<-velMax) {
   factor = -velMax;
}
//Si el mc se ha salido por la derecha, ponerlo
//en la izquierda o viceversa.
//para el rojo
if (rojo_mc._x>anchoEscena) {
   this.rojo_mc._x = -anchoMC;
}
if (rojo_mc._x<-anchoMC) {
   this.rojo_mc._x = anchoEscena;
}
//para el amarillo
if (amarillo_mc._x>anchoEscena) {
   this.amarillo_mc._x = -anchoMC;
}
if (amarillo_mc._x<-anchoMC) {
   this.amarillo_mc._x = anchoEscena;
}
//verde
if (verde_mc._x>anchoEscena) {
   this.verde_mc._x = -anchoMC;
}
if (verde_mc._x<-anchoMC) {
   this.verde_mc._x = anchoEscena;
}
//cian
if (cian_mc._x>anchoEscena) {
   this.cian_mc._x = -anchoMC;
}
if (cian_mc._x<-anchoMC) {
   this.cian_mc._x = anchoEscena;
}
//azul
if (azul_mc._x>anchoEscena) {
   this.azul_mc._x = -anchoMC;
}
if (azul_mc._x<-anchoMC) {
   this.azul_mc._x = anchoEscena;
}
//espacio
if (azul2_mc._x>anchoEscena) {
   this.azul2_mc._x = -anchoMC;
}
if (azul2_mc._x<-anchoMC) {
   this.azul2_mc._x = anchoEscena;
}
// Y ahora Al ataqueeeee!!! pasamos al frame 2
play();[/code]

Este es del segundo Frame
[code]//Si la posición del mouse está más alla de la mitad derecha +30 pixels,
//mover hacia la izquierda (a la velocidad del factor)
if (xposMouse>(xMitadEscena)+30) {
   this.rojo_mc._x -= factor;
   this.amarillo_mc._x -= factor;
   this.verde_mc._x -= factor;
   this.cian_mc._x -= factor;
   this.azul_mc._x -= factor;
   this.azul2_mc._x -= factor;
   }
//Si lo está a menos de 30 pixels de la mitad izquierda,
//mover a la derecha (a la velocidad del factor)
if (xposMouse<(xMitadEscena)-30) {
   this.rojo_mc._x -= factor;
   this.amarillo_mc._x -= factor;
   this.verde_mc._x -= factor;
   this.cian_mc._x -= factor;
   this.azul_mc._x -= factor;
   this.azul2_mc._x -= factor;
}
/*
Debido a que el número factor es incremental, se debe
proceder a una corrección de la posición de los mc, de
forma que la posiciones de los mc dependan unas de otras
*/
//Corrección del rojo
if (this.azul2_mc._x<anchoEscena-anchoMC) {
   this.rojo_mc._x = this.azul2_mc._x+anchoMC;
}
//corrección del amarillo
if (this.rojo_mc._x<anchoEscena-anchoMC) {
   this.amarillo_mc._x = this.rojo_mc._x+anchoMC;
}
//corrección del verde
if (this.amarillo_mc._x<anchoEscena-anchoMC) {
   this.verde_mc._x = this.amarillo_mc._x+anchoMC;
}
//corrección del cian
if (this.verde_mc._x<anchoEscena-anchoMC) {
   this.cian_mc._x = this.verde_mc._x+anchoMC;
}
//corrección del azul
if (this.cian_mc._x<anchoEscena-anchoMC) {
   this.azul_mc._x = this.cian_mc._x+anchoMC;
}
//corrección del azul
if (this.azul_mc._x<anchoEscena-anchoMC) {
   this.azul2_mc._x = this.azul_mc._x+anchoMC;
}
// Vamonoooooos !!!
gotoAndPlay(1);


y cada imnagene tiene una accion de si el mouse está encima o no...

Código ActionScript :

on (rollOver) {
   this.verde_mc._alpha = 100;
}
// si no, 50%
on(rollOut){
   this.verde_mc._alpha = 50;
}



por favor se les agredeceria su ayuda ^^

Por <^[E]nS[E]R`>

3 de clabLevel



 

Chile

firefox
Citar            
MensajeEscrito el 29 Ago 2008 04:40 pm
Es muy complicado tu código y le tienes una acción a cada imagen, si quisieras añadir otra de repente te costaría mucho trabajo, mejor sigue este método, nombra por ejemplo a tus movieClips "thumb0", "thumb1", "thumb2", etc, para poder manejarlos con un ciclo y de esta forma si quiseras añadir otro no tendrías que cambiar nada en el código, solamente un número que sería la cantidad de movies, harias algo como esto por ejemplo:

Código ActionScript :

var cantidad:Number = 5;

this.onEnterFrame = function():Void{

   var thumb:MovieClip;

   var posX:Number = Stage.width/2 - this._xmouse;
   
   //---Movimiento
   for (var i:Number = 0; i < cantidad; i++) {
      
      thumb = this["thumb" + i];
      thumb._x += posX / 10;
      
   }

}


Esto haría que todas tus imágenes se muevan a la misma vez hacia un lado o hacia otro, cuando tengas esto hecho te puedo ayudar con que cuando se salgan del escenario pasen al final de la lista.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 29 Ago 2008 05:18 pm
Listo compadre
Execelknte alli me resultó todo lo que dijiste
y ahora claro ahora si necesito que me enseñes para que se mustre de nuevo cuando da vuelta !
aki dejo el resultado




Grcias! :wink:

Por <^[E]nS[E]R`>

3 de clabLevel



 

Chile

firefox
Citar            
MensajeEscrito el 29 Ago 2008 05:31 pm
La cantidad de imágenes es muy poca para el ancho de tu stage si se hace de esta manera se notará la "trampa" de quitar una imagen y ponerla al final... y debes dejarle un espacio entre imagen e imagen me parece, añade algunas imágenes más o achica tu stage en el ancho y dime el valor de la separación que vas a poner entre estas.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 29 Ago 2008 05:59 pm
ya ok copadre !
se le agradece la paciencia
mira asi lo e dejado ! con ese espacio entre peliculas y le e añadido dos peliculas más

Por <^[E]nS[E]R`>

3 de clabLevel



 

Chile

firefox
Citar            
MensajeEscrito el 29 Ago 2008 07:47 pm
Ahora solo debes chequear que cada una de las fichas no haya sobrepasado el margen establecido (por la derecha y por la izquierda), de hacerlo entonces se calcula cuál es la imagen a la que tiene que seguir y se sitúa en esa posición, he creado una variable para el ancho de las imágenes, tu si quieres puedes tomar este ancho dinámicamente o lo puedes poner harcode, también hay una variable para el espacio y otra variable para la cantidad de imágenes, si no funciona postea, lo he estado revisando y en teoría debe funcionar sin problemas:

Código ActionScript :

//---Movimiento de las imágenes

var imagesSize:Number = 100; //---Este es el ancho de las imágenes
var spacing:Number = 20; //---Este es el espacio entre las imágenes

var imagesonScreen:Number = Math.round(Stage.width / (imagesSize + spacing));

var cantidad:Number = 7; //---Cantidad de imágenes
 
this.onEnterFrame = function():Void{ 
   
   var posX:Number = Stage.width/2 - _root._xmouse;
   var thumb:MovieClip;
   
   //---Movimiento
   for (var i:Number = 0; i < cantidad; i++) {
      
      thumb = this["thumb" + i];
      thumb._x += posX / 10;
      
   }
   
   //---Chequeo de posicion
   for (var i:Number = 0; i < cantidad; i++) {
      
      thumb = this["thumb" + i];
      
      //---Por la izquierda
      
      if(thumb._x < - (imagesSize + spacing) * (cantidad - imagesonScreen - 2)){
         
         if(i == 0){
         
            thumb._x = this["thumb" + (cantidad - 1)]._x + imagesSize + spacing;
         
         }else{
            
            thumb._x = this["thumb" + (i - 1)]._x + imagesSize + spacing;
            
         }
         
      }
      
      //---Por la derecha
      
      if(thumb._x > Stage.width + (imagesSize + spacing) * (cantidad - imagesonScreen - 2)){
         
         if(i == cantidad - 1){
         
            thumb._x = this.thumb0._x - imagesSize - spacing;
         
         }else{
            
            thumb._x = this["thumb" + (i + 1)]._x - imagesSize - spacing;
            
         }
         
      }
      
   }
   
   
}

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 30 Ago 2008 05:02 am
queria darle las gracias por la paciencia
y el conocmiento que me brindaron !
saludos y aki dejo mi final auque voy a atener que finar algunos detalles pero algo e aprendido
salduos!
y garcias nuevamente ^^

Por <^[E]nS[E]R`>

3 de clabLevel



 

Chile

firefox
Citar            
MensajeEscrito el 30 Ago 2008 12:51 pm
Las imágenes no mantienen la separación, debes buscar donde está el problema.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 02 Sep 2008 06:14 pm

elchininet escribió:

Las imágenes no mantienen la separación, debes buscar donde está el problema.


sisis si me e dado cuenta ese el detalle que e tratado de arreglar :?
pero no me resulta arreglar :(


saludos

Por <^[E]nS[E]R`>

3 de clabLevel



 

Chile

firefox
Citar            
MensajeEscrito el 03 Sep 2008 08:19 am
Debe estar en la parte del chequeo de posición, recuerda que esto lo hice en el aire y no lo he probado, empieza a cambiar variables hasta que te resulte.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox

 

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