Foros del Web » Creando para Internet » Flash y Actionscript »

Efecto scroll con Imagen

Estas en el tema de Efecto scroll con Imagen en el foro de Flash y Actionscript en Foros del Web. Saludos Mi problema es el siguiente, tengo una pelicula de 400x400 (ancho,alto) y una imagen de 700x400(ancho,alto). La cuestion es que como la imagen no ...
  #1 (permalink)  
Antiguo 15/12/2004, 00:30
Avatar de ORendon  
Fecha de Ingreso: diciembre-2004
Ubicación: Med-Colombia
Mensajes: 46
Antigüedad: 13 años
Puntos: 0
De acuerdo Efecto scroll con Imagen

Saludos
Mi problema es el siguiente, tengo una pelicula de 400x400 (ancho,alto) y una imagen de 700x400(ancho,alto).
La cuestion es que como la imagen no alcanza a verse totalmente, necesito lograr un efecto que al pasar el mouse por el extremo derecho de la imagen, esta se desplace hacia la izquierda, y obviamente al pasar el mouse por el extremo izquierdo de la imagen, esta se desplae a la derecha.
Habia pensado poner un Boton en cada extremo y en el rollOver cambiar la propiedad ._x de la imagen, pero no he tenido mucho exito.
Ademas hay que validar varias cosas y no se como.
Tendria q validar q cuando la imagen se este desplazando a la izkierda, el extremo derecho de la misma no sobrepasara al extremo derecho de la pelicula, igualmente cuando la imagen se desplace a la derecha que el limite sea el borde izkierdo de la pelicula.
No se si me hago entender.

Agradeceria enormemente cualquier tipo de ayuda
  #2 (permalink)  
Antiguo 15/12/2004, 02:02
Avatar de Mahalo  
Fecha de Ingreso: julio-2004
Ubicación: Mallorca (Illes Balears)
Mensajes: 1.121
Antigüedad: 13 años, 4 meses
Puntos: 12
Hola.
Lo que tienes que hacer es colocar el clip de película con la imagen en la escena, seleccionarlo y aplicar el código onClipEvent. En dicho código recoges los datos del _xmouse mediante un condicional (if). Si es menor de 50 (por ejemplo), que la imagen se vaya desplazando. Sería algo así:
Código:
onClipEvent (entreFrame){
   if (_root._xmouse<50){
      this._x+=1;
      if (this._x>350){
         this._x=350;
      }
   }
   if (_root._xmouse>350){
      this._x-=1;
      if (this._x<50){
         this._x=50;
      }
   }
}
No lo he probado, y puede que me haya equivocado en algún dato o variable. Espero que te sirva, un saludo.
  #3 (permalink)  
Antiguo 15/12/2004, 03:12
Avatar de ORendon  
Fecha de Ingreso: diciembre-2004
Ubicación: Med-Colombia
Mensajes: 46
Antigüedad: 13 años
Puntos: 0
Nuevo Problem...

Hola Mahalo, muchas gracias por atender

El codigo que posteaste funciona perfectamente, solo fue cuestion de cambiarle los rangos para adaptarlos a la pelicula, y de coregir el error de sintaxis '(entreFrame)' por '(enterFrame)'. jeje, Muchas Gracias x ese AScript.

Ahora surge otro problema con respecto al mouse, resulta de que la imagen debe moverse cuando el puntero del mouse esta en uno de los dos extremos de la pelicula, pero esta sucediendo que si pasamos el mouse por alguno de los dos extremos, y luego retiramos el mouse de la pelicula, la imagen se sigue moviendo como si el mouse todavia estuviera allí, pareciese como si la ultima posicion del mouse fuera almacenada y se siguiera ejecutando el codigo con esa ultima posicion.

Ahora la pregunta es, como se hace para Validar si el mouse AUN se encuentra situado dentro de la pelicula ?, para que cuando no lo esté, no se desplaze la imagen.

El AS se encuentra de esta forma:
Código:
//Tamaño pelicula 400x400
//Tamaño imagen 700x400
onClipEvent (enterFrame){
   if (_root._xmouse<50){
      this._x+=5;
      if (this._x>10){
         this._x=10;
      }
   }
   if (_root._xmouse>350){
      this._x-=5;
      if (this._x<-300){
         this._x=-300;
      }
   }
}
Que linea, o instruccion se tendria que agregar para corregir el error actual ?

De ante mano muchas gracias, Bienvenida sea cualquier ayuda, o aclaracion.

Caho
  #4 (permalink)  
Antiguo 15/12/2004, 05:58
Avatar de Mahalo  
Fecha de Ingreso: julio-2004
Ubicación: Mallorca (Illes Balears)
Mensajes: 1.121
Antigüedad: 13 años, 4 meses
Puntos: 12
Hola de nuevo.
Primero perdón por el error del entreFrame, je, je, ni me di cuenta.
Y para el problema pues tienes varias opciones. Puedes convertir la imagen en un botón y que se ejecute la acción con un rollOver. También puedes añadir más datos al condicionante, por ejemplo para ir a la izquierda que compruebe si el _xmouse es menor que 50 y que además sea mayor que 0; es decir, crearías un intervalos de acción:
Código:
if (_root._xmouse<50 && _root._xmouse>0){
...
}
Por supuesto también tendrías que añadir el condicionante para cuando el ratón se sale de la pantalla por arriba o abajo, puesto que mi código sólo actúa en horizontal.
Un saludo.
  #5 (permalink)  
Antiguo 15/12/2004, 11:38
Avatar de ORendon  
Fecha de Ingreso: diciembre-2004
Ubicación: Med-Colombia
Mensajes: 46
Antigüedad: 13 años
Puntos: 0
Qu pasará¿?

Hola Mahalo, ya tengo hasta pena con tigo, estoy dele y dele y dele con lo mismo.
Pero sucede que el 85% de las veces la imagen se comporta de manera adecuada, el otro 15% saco el mouse de la pelicula y la imagen sigue movinedose.
No se que podar ser, le he dado nuevos intervalos pero no funciona al 100%.
El AS esta de esta forma:
Código:
//Tamaño pelicula 400x400
//Tamaño imagen 700x400
onClipEvent (enterFrame){
	if ((_root._ymouse>10)&&(_root._ymouse<390)){
		if ((_root._xmouse<50) && (_root._xmouse>5)){
			this._x+=5;
			if (this._x>10){
				this._x=10;
      		             }
		}
		if ((_root._xmouse>350)&&(_root._xmouse<395)){
			this._x-=5;
		    if (this._x<-300){
				this._x=-300;
		    }
		}
	}
}
A mi parecer los intervalos estan bien, no se porque aveces no se cumple el condicional...

Gracias x la atencion

Caho
  #6 (permalink)  
Antiguo 15/12/2004, 11:59
Avatar de Mahalo  
Fecha de Ingreso: julio-2004
Ubicación: Mallorca (Illes Balears)
Mensajes: 1.121
Antigüedad: 13 años, 4 meses
Puntos: 12
Hola.
Te propongo otra cosa puesto que hay un lío de variables:
En la escena principal, en una capa inferior a la de la imagen, y sin que se vean, colocas dos clips de película de dos cuadrados del tamaño que quieras que el cursor haga su efecto. Esos cuadrados harán la función de botón, pero sin que salga el dedito de la flecha.
Entonces haces un hitTest del cursor con los cuadrados.
Algo así:
Código:
onClipEvent (enterFrame){
   if (this.hitTest(_root._xmouse,_root._ymouse)){
      _root.imagen._x+=1;
   }
}
Eso sería para el cuadro de la izquierda. Para el de la derecha tan sólo cambia el el "+" por "-", claro. Ten en cuenta que la instancia de la imagen se llama "imagen".
Un saludo.
  #7 (permalink)  
Antiguo 15/12/2004, 13:20
Avatar de ORendon  
Fecha de Ingreso: diciembre-2004
Ubicación: Med-Colombia
Mensajes: 46
Antigüedad: 13 años
Puntos: 0
De acuerdo Thanx

Muchisisisisisimas gracias, Mahalo.
El AS funciona perfectamente y en unas pequeñas lineas de codigo.
Solo una cosilla...
No entiendo que hace la instruccion hitTest...
Código:
onClipEvent (enterFrame){ //Esta linea si la entiendo
   if (this.hitTest(_root._xmouse,_root._ymouse)){//esta linea NO lo entiendo
      _root.imagen._x+=1; // esta linea tambien la entiendo
   }
}
Te agradeceria me explicaras para que sirve "hitTest(x,y)", que pena pero es que me gusta saber que es lo que hace exactamente el codigo que voy a usar en la pelicula.
No entiendo que es lo que realmente se esta preguntando en el IF(..), ya que no entiendo para que sirve hitTest.

Saludos

Caho
  #8 (permalink)  
Antiguo 15/12/2004, 16:55
Avatar de Mahalo  
Fecha de Ingreso: julio-2004
Ubicación: Mallorca (Illes Balears)
Mensajes: 1.121
Antigüedad: 13 años, 4 meses
Puntos: 12
Hola. La línea que dices no entender comprueba si hay contacto entre la instancia donde está el código y las coordenadas del ratón.
Puedes comprobar contactos entre instancias de película cambiando lo que hay en el paréntesis por el nombre de instancia con su ruta correspondiente (_root.mc).
Un saludo.
  #9 (permalink)  
Antiguo 15/12/2004, 23:46
Avatar de ORendon  
Fecha de Ingreso: diciembre-2004
Ubicación: Med-Colombia
Mensajes: 46
Antigüedad: 13 años
Puntos: 0
Gracias de nuevo

Una vez mas te doy las gracias Mahalo
Con lo que me explicaste y con lo que lei en las ayudas de flash, me ha quedado todo muy muy claro.

Muchas garcias x todo

Caho
  #10 (permalink)  
Antiguo 16/12/2004, 17:59
Avatar de Mauri1  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago de Chile
Mensajes: 558
Antigüedad: 15 años
Puntos: 0
Hola Mahalo. Muy bueno tu Script.
Mira, yo lo ocupe y le hice algunos cambios, pero no consigo que a medida que el cursor se desplaze hacia la derecha, la velocidad de desplazamineto de la imagen aumente progresivamnete. Lo hice colocando varios movieclip, uno al lado del otro, y cada uno hacia la derecha le iba aumentando el valor de _x-=1 y resulta !!!. Pero quiero hacerlo con Acciones.
¿ sabes hacerlo ?
Y que además, cuando se haya alcanzado el borde de la imagen, se detenga el desplazamiento hacia ese lado y esté activado sólo para el otro extremo.
Muchas gracias.

Aquí está el Código

_root.onEnterFrame = function() {
x = Math.round(_xmouse);
if (this.hitTest(_root._xmouse, _root._ymouse)) {
if (_xmouse<194) {
_root.imagen._x += 2;
} else {
_root.imagen._x -= 2;
}
}
};

Aquí está el resultado
http://codecool.webcindario.com/DesplazarImagen.html

Última edición por Mauri1; 16/12/2004 a las 18:08
  #11 (permalink)  
Antiguo 17/12/2004, 02:10
Avatar de Mahalo  
Fecha de Ingreso: julio-2004
Ubicación: Mallorca (Illes Balears)
Mensajes: 1.121
Antigüedad: 13 años, 4 meses
Puntos: 12
Hola.
Primero, para que la imagen se detenga tienes que quedarte con los valores _x que supongan los límites. Por ejemplo x1 a la izquierda y x2 a la derecha.
Código:
onClipEvent (enterFrame){
   if (this._x<x1){
      this._x=x1;
   }
   if (this._x>x2){
      this._x=x2;
   }
}
Para el movimiento más o menos rápido del scroll, basta una simple relación matemática. Por poner un ejemplo, tenemos en cuenta que tu tamaño es de 388 de ancho, queremos que lo más rápido sea 10. Entonces quedaría algo así:
Código:
onClipEvent (enterFrame){
   if (this.hitTest(_root._xmouse,_root._ymouse){
      i=((_root._xmouse)-194)/20;
      _root.imagen-=i;
   }
}
i es el incremento en el movimiento. Haz las cuentas: si _xmouse igual a 100, i=-5 (aprox); si _xmouse=300, i=5 (aprox). Si es igual a 194 (la mitad), i=o (imagen parada).
No lo he probado, tan sólo a papel y lápiz, pero creo que va bien.
Un saludo.
  #12 (permalink)  
Antiguo 17/12/2004, 17:20
Avatar de Mauri1  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago de Chile
Mensajes: 558
Antigüedad: 15 años
Puntos: 0
Muchas gracias Mahalo, lo probaré y te cuento.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:58.