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:Number, Clip:MovieClip) {
-
-
Clip.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(_parent._xmouse, _parent._ymouse, true)){
-
-
_parent.mover( -((this.foto._width-this.btn._width) /this.btn._width) * _xmouse,-((this.foto._height -this.btn._height) /this.btn._height) * _ymouse,7,this.foto);
-
}
-
}
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 foto 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){
-
-
if (this.hitTest(_parent._xmouse, _parent._ymouse, true)){
-
-
_parent.mover( -((this.foto._width-this.btn._width) /this.btn._width) * _xmouse,-((this.foto._height -this.btn._height) /this.btn._height) * _ymouse,7,this.foto);
-
}
-
}
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(_parent._xmouse, _parent._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 && xmrt.x ? xx=w-wt : xx=0;
-
ym>rt.y && ymrt.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.
if (this.hitTest(_root._xmouse, _root._ymouse, true)){
_parent.mover( -((this.foto._width-this.btn._width) /this.btn._width) * _xmouse,-((this.foto._height -this.btn._height) /this.btn._height) * _ymouse,7,this.foto);
}
}
Post Relacionados :
Para mover Obejtos como Imagenes, Vectores o objetos que parecen deslizarse en Flash podemos ...
Siguiendo con los codigos que me apasionan, busque uno que hiciera que un clip de un ojo sig ...
Ahora que ya tenemos las bases para detectar si nuestro navegador soporta el canvas de HTML5 y l ...
Tags: AS, Deslizamiento, Familiar, Flash, Scroll
1 Trackbacks
Puedes enviar un trackback usando esta URL: http://www.soportalo.com/2010/04/28/mover-una-imagen-con-el-mouse-con-deslizamiento/trackback/
[...] [Click aqui para ir a el nuevo y mejorado Soportalo] [...]
16 Comentarios
Que tal, excelente tutorial, disculpa tengo una duda, hice un video swf con estos pasos y deseo exportarlo a un directorio raiz de otro swf para utilizarlo , y al exportarlo, solo se exportan los elementos , no el video ,¿como puedo solucionar esto? gracias
como que exportas el video ?, si lo capuras como video, solo correo como flv, no entieno si quieres decir que lo pasas como un swf externo?, te deberia funcionar por que son rutas relativas
perdon, me referia a un documento swf, lo importe al directorio raiz de otro documento para utilizarto, pero al terminar el proceso de importado, no aparece el archivo, solo los elmentos, archivos png y clips por separado.
Muchas gracias n_n , hice todo de nuevo dentro del otro documento swf , estan genial estos codigos , grax.
kike, supongo que algunos elementos que improtastes ocuparon los mismos de algunso que tenias y se hizo un desorden que bueno que ya resolviste tu problema
Estoy buscando este efecto en as3 , habría algo por ahí??
Gracias
aun no migro a AS3 me enfoco mas en buscar codigos que diseñar, lo siento pacman
hey saludos ante todo gracias es un buen ejemplo solo tengo una pregunta si yo hago una carga de swf en otro ya no me funciona el efecto como puedo hacer que este funcione o solo funciona en primer nivel
beranyer el ejemplo tiene rutas relativas, no deveria de tener problemas seguro lo cargas adecuadamente ?
amigos como puedo hacer para q cuando la imagen llegue a su top ya sea derecho o izq. se frene de golpe!! a ver si me explico .. recorriendo el mouse cuando la imagen se termina de haga stop.. como si fuese tope . porque tengo contenido q cuesta llegar a verse dado que esta justo al final de la imagen que de por si es muyyy larga ahaha.. gracias de antemano .. y muy buen tuto man.. gracias por compartir la sabiduria! XD
Muchas gracias, Excelente!!!
Hola,
Veo que el código está con as2, tenemos algo en as3 ?
Gracias
¿Que tal? Muy bueno el script!
Tengo el mismo problema que plantearon antes, es decir, en el swf original funciona perfecto, pero si lo cargo en otro clip se carga bien y ya no funciona. Modifiqué la línea:
_root.mi-clip-vacio-donde-lo-cargo.show.foto.onEnterFrame = function ()
Pero NO funciona tampoco, tengo que modificar otra ruta también ???
Si alguien puede aportar desde ya agradecido!
Saludos!
raul, no se de donde sacaste el root revise elc codigo y no lo vi, me lo podrias señalar por favor ademas todos ya los puse con parents para eliminar las rutas relativas
Gracias por responder tan rápido!
Tal vez no la veas porque yo utilicé el demo que tienes funcionando de muestra, y ahora viéndolo bien veo que es distinto al código que explicas en tu blog.
Como no me salió de primera el que explicas paso a paso, partí del que ya tienes funcionando a modo de demo.
Mira, la línea original esta: _root.show.foto.onEnterFrame = function ()
Es el script que está en el primer frame de tu película de muestra.
function Mover(x, y, aceleracion)
{
var _l1 = this;
_root.show.foto.onEnterFrame = function () // ESTA ES LA LÍNEA QUE EDITÉ
{
var _l1 = this;
_l1._x = _l1._x + (x – _l1._x) / aceleracion;
_l1._y = _l1._y + (y – _l1._y) / aceleracion;
if (Math.abs(x – _l1._x) < 0.500000 && Math.abs(y – _l1._y) < 0.500000)
{
_l1._x = x;
_l1._y = y;
delete _l1["onEnterFrame"];
} // end if
};
} // End of the function
Yo la modifiqué ya que al cargar el *.swf tal cual tu lo tienes dentro de otro que es el clip principal, la animación no funciona.
Como te mencioné, al ejecutarlo solo el, tu .*swf funciona perfectamente
Voy a tratar de intentar seguir tu tutorial nuevamente para ver si esta versión la puedo cargar dentro de otra.
Pero es que con AS no soy muy bueno!
Muchas gracias por tu tiempo!
Saludos!
FeNtO.
Ya lo solucioné repitiendo el tuturial y ahora si me funciona perfectamente!
Lo hice paso a paso tal cual como lo explicas y esta versión si se carga perfectamente dentro de otro clip.
Muchas gracias por tu tutorial!
Saludos!