Mover Imagen con Mouse en Flash

Publicado el por

Nos Movemos, Puede preguntar sobre este tema en esta entrada en el NUevo Soportalo

[Click aqui para ir a el nuevo y mejorado Soportalo]

En este tip mostraré un código para los que necesitan hacer el scroll de una imagen por medio del movimiento del mouse, esto es útil en el manejo de mapas, exploración de imágenes, y varias aplicaciones mas. Primero pondremos este código en el primer frame de la película que sera para lograr el efecto de deslizamiento de la imagen explicado en este tip.

Código :

function mover(x,y, aceleracion) {
_root.show.foto.onEnterFrame = function() {
this._x += (x-this._x)/aceleracion;
this._y += (y-this._y)/aceleracion;
if (Math.abs(x-this._x)<0.5 && Math.abs(y-this._y)<0.5 ) {
this._x = x;
this._y = y;
delete this.onEnterFrame;
}
};
}

Después crearemos un cuadrado con relleno normal, lo seleccionaremos y lo convertiremos en clip (F8) con el punto de registro en la parte superior izquierda (esto es muy importante en cada uno de los clips que crearemos, verificar que el punto de registro sea el que se indica para cada uno de ellos) al clip que acabamos de crear le daremos el nombre de instancia show (recordar el nombre de instancia de los clips para poder hacer referencia y no perdernos, por que sera un poquito confuso) A este clip le asignamos estas acciones (que después explicare con detalle)

Código :

onClipEvent (mouseMove){
if (this.hitTest(_root._xmouse, _root._ymouse, true)){
_root.mover( -((foto._width-btn._width) /btn._width) * _xmouse,-((foto._height -btn._height) /btn._height) * _ymouse,7);
}
}

Seleccionamos el clip show y le damos doble clip, accederemos dentro de este y encontraremos el cuadrado, lo seleccionamos y lo convertimos en clip de nuevo, si de nuevo, es para generar otro clip dentro del clip show que es el que hará el efecto. Después de haberlo convertido en clip le asignaremos el nombre de instancia btn, posterior a esto, generaremos otras dos capas en la parte de abajo. Después en la segunda capa copiamos el keyframe de la primera y lo pegamos y en la tercera importamos una imagen a la cual convertimos en clip también (f8) y le asignamos el nombre de instancia foto, quedando en este orden:

  1. Capa, el cuadrado convertido en clip
  2. Capa la copia del keyframe del cuadrado, con lo cual tendremos dos cuadrados
  3. La imagen importada convertida en clip

A el clip ftoo lo seleccionamos y le asignamos en acciones (f9) este código

Código :

onClipEvent (load){
this._x=-(this._width/2)+(_parent.btn._width/2);
this._y=-(this._height/2)+(_parent.btn._height/2);
}

Que hará que la imagen se centre de inicio. Después de esto seleccionamos la segunda capa y damos click derecho, seleccionando la opción mascara del menú. Seleccionamos el clip de la primera capa y le damos efecto de alpha 0 para que sea transparente. Vamos a la película principal y listo, debe quedar algo como esto:

Ahora la parte de explicación. El código que hace las maravillas, y lo demás es solo adorno, es este:

Código :

onClipEvent (mouseMove){

Clic para ver Texto Plano


CODE:





    

  1. 

    if (this.hitTest(_root._xmouse, _root._ymouse, true)){ 
    

    2. 










_root.mover( -((foto._width-btn._width) /btn._width) * _xmouse,-((foto._height -btn._height) /btn._height) * _ymouse,7);
}
}

Al detectar que se mueve el mouse onClipEvent (mouseMove) hace una detección si el puntero del mouse hace contacto con este clip if (this.hitTest(_root._xmouse, _root._ymouse, true)){ hace el cálculo de esta manera a grandes rasgos, una regla de tres, si el cuadro pequeño se mueve 1 el grande se moverá 2 dependiendo del tamaño de la imagen, por eso se hace una equivalencia, y cabe notar que se le resta el ancho del cuadrado para que no salga del área total, y siempre se mantenga una proporción dentro de lo visible, esto se puede hacer inmediato sin llamar a la función, solo que con la función el efecto de easing lo hace mucho mas atractivo Cualquier error que se me haya pasado por favor comentarlo aquí para hacer la corrección. Actualizacion, Este es un codigo Diseñado por Teseo, uno de lso programadores que mas me impresionan y admiro Código :

function scrollvisor(imagen, x0, y0, w0, h0) {
   ori = this.createEmptyMovieClip("nulo", this.getNextHighestDepth());
   ori.rt = new flash.geom.Rectangle(x0,y0,w0,h0);
   if(imagen instanceof MovieClip){

     ori.img=g=new flash.display.BitmapData(imagen._width,imagen._height,true,0);
     ori.img.draw(imagen);
  } else {ori.img = g = flash.display.BitmapData.loadBitmap(imagen);}
   ori.w = w = ori.img.width; ori.h = h = ori.img.height;
  w < w0 ? ori.wt = wt = w : ori.wt = wt = w0;
  h < h0 ? ori.ht = ht = h : ori.ht = ht = h0;

   ori._x = x0; ori._y = y0;
   ori.tmp = new flash.display.BitmapData(wt, ht, true, 0);
   ori.attachBitmap(ori.tmp, 1, "auto", true);
   ori.tmp.copyPixels(g, new flash.geom.Rectangle((w-wt)/2,(h-ht)/2,wt,ht),null);
   ori.onRollOver = function() {
      with (this) {
         onMouseMove = function () {

            xm = this._xmouse; ym = this._ymouse;
            xm>rt.x && xm<rt.x+wt ? xx=(xm-rt.x)*(w-wt)/wt : xm>rt.x ? xx=w-wt : xx=0;
            ym>rt.y && ym<rt.y+ht ? yy=(ym-rt.y)*(h-ht)/ht : ym>rt.y ? yy=h-ht : yy=0;

            tmp.copyPixels(img, new flash.geom.Rectangle(xx, yy, wt, ht), null);
         }
      }
   }
   ori.onRollOut = function() {delete onMouseMove;}
}
/*
 Tipo de llamada a la función
 imagen : instancia de clip o nombre de imagen vinculada desde la biblioteca.
 x0, y0 : esquina superior izquierda donde mostrar.
 w0, h0 : ancho y alto de la zona donde mostrar.
*/
// Ejemplos:
//scrollvisor("imagen1", 0, 0, 300, 200);
//scrollvisor("imagen", 0, 200, 100, 100);
//scrollvisor(clip1, 100, 100, 200, 200);

Esto es lo que resulta con las 3 llamadas del ejemplo ( 2 son imágenes de biblioteca y otra un clip instanciado en el escenario. Si te sirvio este post y quieres divertirte un poco ahora da click aqui y Visita Soportalo.com Post nuevos todos los dias El primer ejemplo pueden descargarlo en cristalab.com, http://www.cristalab.com/ejemplos/descargar/99  el mismo archivo.

34 pensamientos en “Mover Imagen con Mouse en Flash”

  1. Excelente post!!! Me costó mucho encontrar algo así en la web, me salvaste.
    Lo apliqué en un mapa y quedó bien. El único error es que a la hora de bajar e irse a la derecha se sale de la imagen enmascarada. Por qué ocurre esto? Si me puedes indicar como arreglarlo, te lo agradecería mucho, mucho.
    Saludos y gracias nuevamente,
    Mi.

  2. recuerda que el punto de registro debe ser parte superior izquierda del clip cuando lo creas, muy probablemnte sea eso, el otro podria ser que tengas algo dentro del clip que no has visto, si no es asi hasle un trace para verificar anchura de tu clip

  6. Está genial, pero cómo podría hacer que varias imágenes se muevan??? lo que quiero hacer es que el fondo se mueva a una velocidad y otra imagen de un globo se mueva a otra, de esa forma se da algo de sensación de profundidad.

    Saludos

  7. Solo has mas grande la imagen de enfrente y chica la de fondo y manda la funcion mover dentro del mouseEvent dos veces una pro cada imagen con sus parametros

  10. La verdad que la explicación está excelente. Muy poca gente postea este tipo de cosas y hay que agradecerlo.
    Pero tengo un pequeño problema. Al probar la película no me funciona, es decir: hice todo paso a paso, descargue el ejemplo que nos diste y comprobé. Pero aunque la máscara me recorta la foto y todo, al pasar el mouse no pasa nada, queda estática.

    Por favor ayuda, y de nuevo muchas gracias.

  11. Hola me he dado cuenta que esta programacion solo funciona en reproductor FLASH PLAYER 6 ,y si kiero hacer modificacion al marco no me lo permite, no tendras lo mismo pero en reprodctor flah player 10 ?..

  12. Alguien podria decirme como hacer en action script de flash mx, hacer que un globo baje y se detenga a la mitad de la pantalla

  13. A mi también sólo me funciona en el reproductor flash player 6, ¿hay alguna manera de llevarlo al flash player 10?

  14. Ya vi como solucionar el problema de que solo se vea en flash player 6. Lo vi en cristalab. En el primer frame de la escena principal, en el script sale:

    function Mover(x,y, aceleracion) {
    _root.show.foto.onEnterFrame = function() {
    this._x += (x-this._x)/aceleracion;
    this._y += (y-this._y)/aceleracion;
    if (Math.abs(x-this._x)<0.5 && Math.abs(y-this._y)<0.5 ) {
    this._x = x;
    this._y = y;
    delete this.onEnterFrame;
    }
    };
    }

    Lo que hay que hacer es cambiar Mover por mover (con minúscula). Al parecer flash player 6 no diferenciaba si un nombre de instancia era con mayúscula o minúscula. Al cambiar eso funciona en todos los flash players.

  15. hola gente!! necesito de su ayuda

    quiero hacer algo parecido a lo explicado en este tutorial: un lienzo grande con un flecha en cada esquina y que se mueva cuando presiono las flechas.

    alguien podria ayudarme???

  17. hola! les escribo por que quiero comenzae a trabajar con templates, para editarlos y reemplazar contenido debo solo trabajar en flash o dreamweaver?
    gracias y ojala puedan ayudarme!!

  18. como puedo hacer para que el movimiento o el desplazamiento sea más lento o más rapido?

    como puedo hacer para que una imagen encima se desplace a diferente tiempo, como si hiciera un paisaje y las “montañas” en tercer plano se movieran mas lentas y los “arboles” más rapido?

    QUiciera hacer que los arboles fueran botones y al dar clic cargara un movie que tambien se moviera en tiempo y velocidad que de la impresión de estar ya sea en el plano de los arboles o mas cerca (encima) de ellos…

    Ojala no pasen 6 meses antes de recibir su respuesta.

    Saludos!

  19. Erich solo pon las funciones proporcionales para la segunda imagen que tambien seria un clip

  20. Hola Fento. Exelente tuto.
    Tengo una duda, y la verdad no se si lo que quiero hacer se puede hacer con lo que tu has puesto o es de otra manera completamente distinta…
    Lo que quiero conseguir esta en este enlace: http://gorillaz.com/Scene.php
    Se que el fondo es contínuo, lo que no se es como cojo… programar esto para que me pueda mover así por el escenario.

    A ver si me podéis echar una mano.

    Muchas gracias

  21. mira Victor, el ejemplo que muestras no es con este ejemplo, en este se detecta la posicion del mouse y se hace proporcional al tamaño de la imagen, en el ejemplo que pones solo detectan la posicion en 4 limites, alto bajo, derecha izquierda, pasando el limite se mueve al salir se detiene, te lo explico con un ejemplo, si el mouse en su posicion x es menor a 20 que es el limite y entoncess estaria entre la posicion 1 y 20 queire decir que queires moverlo a la derecha , y ejecutas la condicion , no se si me entendiste

  22. Hola! me sirvio muchisimo este post.Ahora una consulta, hice esto para usarlo en un portfolio, y como son varias imagenes las q utilizo hago las galerias externa. Ahora bien cuando llamo al swf q tiene este tipo de scroll, la imagen me queda estatica! y si abro el swf independiente me funciona ok… hay algun script q deba colocar en el index p q me funcione ok el swf externo?? agradeceria la ayuda!!!

  24. Hola estoy interesado en el mismo efecto que quiere victor
    si alguien sabe muy agradecido :D

  25. gentee necesito ayuda urgente! hago todo lo q dice pero no hay caso..no se mueve nose q es lo q hago mal o que puede ser… graciass

  28. lo siento pato pero el ejemploq ue me pones no se ve, podria s intentar con la propiedad escale del cli y jugar con ello

  29. Hola gente! me sirvio de gran ayuda este tuto y estoy muy agradecida.
    pero tengo un pequeño problemita que llevo varios días intentando solucionar. tengo un mapa que se mueve con este código, pero encima del mapa necesito desplegar menús y botones, y en cuanto se desplieguen parar el movimiento del mapa.
    lo he conseguido con linea de tiempo, pero no me sirve, ya que me crea otros problemas con las zonas activas de los menús.
    la pregunta es:hay alguna manera de activar/desactivar la función mover sin tener que irme a otro fotograma. algo que pueda poden en los rollover y rollout de los menús.
    Gracias!

  30. si, puedes entre muchas opciones mandar una variable y cuando la actives se inhabilite el onenterframe que mueve la imagen

  31. que rápido fento! gracias!
    no tengo mucha experiencia, por no decir nula, con variables. entiendo algo de action script, pero lo de las funciones, variables, condicionales y demás me cuesta bastante.
    podrías ponerme un código de ejemplo de como hacerlo?
    mil gracias!

  32. Hola, muy buen post, me sirvio mucho para un proyecto que estoy haciendo, lo que si tengo un pequeño problema, como puedo hacer para que se muevan dos objetos? un ejemplo simple: tengo dos imagenes, una a cada costado de la pantalla (izquierda y derecha), entonces quiero que las dos se muevan independientes…He tratado de modificar un poco el codigo pero no consigo nada, trato de duplicar el objeto y sigue moviendose solo una.

    De antemano muchas gracias :)

  33. MIL GRACIAS!!!! tengo una evaluación de AS 2.0 y no encontraba como hacerla mas atractiva, mil gracias y funciona 100 %

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>