Soportalo
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 (F
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 (f y le asignamos el nombre de instancia foto, quedando en este orden:
- Capa, el cuadrado convertido en clip
- Capa la copia del keyframe del cuadrado, con lo cual tendremos dos cuadrados
- 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){
CODE:
-
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);
}
}
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.
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.
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
alguien tiene el archivo .fla ya echo, por que a mi no me sale.
puedes descargarlo de este enlace
http://www.cristalab.com/ejemplos/descargar/99
admin said millones de gracias, de corazon, saludos a todos!!! muy buena la web.
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
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
como hago para que la imagen se mueva solo de izquierda a derecha
Rich Lo que pides no lo entiendo muy bien, sin embargo creo que tu necesitas un efecto easing , que puedes ver en este ejemplo
http://www.fento.com.mx/Blog/2009/02/19/mover-objeto-deslizandoze-easing-en-flash/
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.
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 ?..
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
A mi también sólo me funciona en el reproductor flash player 6, ¿hay alguna manera de llevarlo al flash player 10?
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.
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???
Muy buen aporte fue de mucha utilidad!!!
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!!
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!
Erich solo pon las funciones proporcionales para la segunda imagen que tambien seria un clip
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
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
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!!!
Mira Pine, en ete enlace ya lo actualice con todos las rutas corregidas
http://www.soportalo.com/2010/04/28/mover-una-imagen-con-el-mouse-con-deslizamiento/
cualqueir duda aqui andamos