Comunidad de diseño web y desarrollo en internet online

scrolling imagen con xmouse ymouse

Citar            
MensajeEscrito el 19 Feb 2009 03:28 pm
Hola, tema visto (sip!, ya se!) de hecho con apoyo de este tuto hacer-scroll-en-una-imagen-con-el-mouse-en-flash-c39741l/ by FeNtO :cool: . Bueno mi gran duda es: Y si la imagen se moviera a partir de la posicion de mask_mc y no de Stage, es decir, no es 0,0 sino otro punto, el que determine mask_mc. Ahi va la prueba que ando haciendo, es solo que no puedo mover la figura con las coordenadas de mask_mc:

Código ActionScript :

this.createEmptyMovieClip("pic_mc", this.getNextHighestDepth());
pic_mc.beginFill(0xFF0000);
pic_mc.moveTo(0, 0);
pic_mc.lineTo(640, 0);
pic_mc.lineTo(640, 480);
pic_mc.lineTo(0, 480);
pic_mc.lineTo(0, 0);
pic_mc.endFill();

this.createEmptyMovieClip("mask_mc", this.getNextHighestDepth());
mask_mc.beginFill(0xFF33DD, 50);
mask_mc.moveTo(0, 0);
mask_mc.lineTo(320, 0);
mask_mc.lineTo(320, 240);
mask_mc.lineTo(0, 240);
mask_mc.lineTo(0, 0);
mask_mc.endFill();

mask_mc._x = Stage.width/2 - mask_mc._width/2;
mask_mc._y = Stage.height/2 - mask_mc._height/2;

pic_mc._x = mask_mc._x -(pic_mc._width/2)+(mask_mc._width/2);
pic_mc._y = mask_mc._y -(pic_mc._height/2)+(mask_mc._height/2);

// diseñado por Fento Computacion
// pagina ww.fento.com.mx  (buscando hosting)

function Mover(x,y, aceleracion, px, py)
{ 
   pic_mc.onEnterFrame = function()
   { 
   diffX = -((pic_mc._width-mask_mc._width) /mask_mc._width)*x;
   diffY = -((pic_mc._height -mask_mc._height) /mask_mc._height)*y;
   this._x += (diffX-this._x)/aceleracion;
   this._y += (diffY-this._y)/aceleracion; 
   
      if (Math.abs(diffX-this._x)<0.5 && Math.abs(diffY-this._y)<0.5 ) { 
      this._x = diffX;
      this._y = diffY;
       coords_txt.htmlText += "<br /><br />mask_mc X:"+mask_mc._x+", Y:"+mask_mc._y+"<br />pic_mc X:"+pic_mc._x+", Y:"+pic_mc._y;
      delete this.onEnterFrame; 
      } 
   }; 
}


var mouseListener:Object = new Object();
mouseListener.onMouseMove = function()
{
   if (mask_mc.hitTest(_xmouse, _ymouse, true))
   {

   var point:Object = {x:_xmouse, y:_ymouse};
    mask_mc.globalToLocal(point);
    var rowHeaders = "<b> &nbsp; \t</b><b>_xmouse\t</b><b>_ymouse</b>";
    var row_1 = "_root\t"+_xmouse+"\t"+_ymouse;
    var row_2 = "mask_mc\t"+point.x+"\t"+point.y;
    coords_txt.htmlText = "<textformat tabstops='[100, 200]'>";
    coords_txt.htmlText += rowHeaders;
    coords_txt.htmlText += row_1;
    coords_txt.htmlText += row_2;
    coords_txt.htmlText += "</textformat>";

   Mover(_xmouse, _ymouse, 5, point.x, point.y);
   //
   updateAfterEvent();
   }
};

Mouse.addListener(mouseListener);

this.createTextField("coords_txt", this.getNextHighestDepth(), mask_mc._x+5, mask_mc._y+5, 100, 22);
coords_txt.html = true;
coords_txt.multiline = true;
coords_txt.autoSize = true;

Por comicSans

Claber

151 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Feb 2009 09:38 pm
Hola, jejeje, Te has hecho un lio increible, colocas variables y calculos y no se que tantas cosas mas, le agregaste parametros extra a la funcion mover, parametros que nunca usas, je, todo un lio, mira aqui te lo reescribo, ve lo facil que era la solucion, usamos la funcion mover, la orginal, esa no se debe modificar, lo que se modifica es el punto a donde se mueve la imagen y un coords_txt.selectable = false; para que no interfiera con el ejemplo. Suerte.

Código ActionScript :

this.createEmptyMovieClip("pic_mc", this.getNextHighestDepth()); 
pic_mc.beginFill(0xFF0000); 
pic_mc.moveTo(0, 0); 
pic_mc.lineTo(640, 0); 
pic_mc.lineTo(640, 480); 
pic_mc.lineTo(0, 480); 
pic_mc.lineTo(0, 0); 
pic_mc.endFill(); 
 
this.createEmptyMovieClip("mask_mc", this.getNextHighestDepth()); 
mask_mc.beginFill(0xFF33DD, 50); 
mask_mc.moveTo(0, 0); 
mask_mc.lineTo(320, 0); 
mask_mc.lineTo(320, 240); 
mask_mc.lineTo(0, 240); 
mask_mc.lineTo(0, 0); 
mask_mc.endFill(); 
 
mask_mc._x = Stage.width/2 - mask_mc._width/2; 
mask_mc._y = Stage.height/2 - mask_mc._height/2; 
 
pic_mc._x = mask_mc._x -(pic_mc._width/2)+(mask_mc._width/2); 
pic_mc._y = mask_mc._y -(pic_mc._height/2)+(mask_mc._height/2); 
 
// diseñado por Fento Computacion 
// pagina ww.fento.com.mx  (buscando hosting) 
 
function Mover(x,y, aceleracion) 
{  
   pic_mc.onEnterFrame = function() 
   {
   this._x += (x-this._x)/aceleracion; 
   this._y += (y-this._y)/aceleracion;  
    
      if (Math.abs(x-this._x)<0.5 && Math.abs(x-this._y)<0.5 ) {  
      this._x = x; 
      this._y = y; 
       coords_txt.htmlText += "<br /><br />mask_mc X:"+mask_mc._x+", Y:"+mask_mc._y+"<br />pic_mc X:"+pic_mc._x+", Y:"+pic_mc._y; 
      delete this.onEnterFrame;  
      }  
   };  
} 
 
var mouseListener:Object = new Object(); 
mouseListener.onMouseMove = function() 
{ 
   if (mask_mc.hitTest(_xmouse, _ymouse, true)) 
   { 
 
      var point:Object = {x:mask_mc._xmouse, y:mask_mc._ymouse}; 
    mask_mc.globalToLocal(point); 
    var rowHeaders = "<b> &nbsp; \t</b><b>_xmouse\t</b><b>_ymouse</b>"; 
    var row_1 = "_root\t"+_xmouse+"\t"+_ymouse; 
    var row_2 = "mask_mc\t"+point.x+"\t"+point.y; 
    coords_txt.htmlText = "<textformat tabstops='[100, 200]'>"; 
    coords_txt.htmlText += rowHeaders; 
    coords_txt.htmlText += row_1; 
    coords_txt.htmlText += row_2; 
    coords_txt.htmlText += "</textformat>";
   Mover(-point.x, -point.y, 5); 
   updateAfterEvent(); 
} 
}; 
 
Mouse.addListener(mouseListener); 
 
this.createTextField("coords_txt", this.getNextHighestDepth(), mask_mc._x+5, mask_mc._y+5, 100, 22); 
coords_txt.html = true; 
coords_txt.multiline = true; 
coords_txt.autoSize = true; 
coords_txt.selectable = false;

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

firefox
Citar            
MensajeEscrito el 20 Feb 2009 04:02 pm
Hola LongVie, oye gracias por la respuesta, fijate que con esta funcion de Mover, si redimensiono las imagenes, como que no mueve los objetos muy bien. Mira me haye esta a ver que te parece:
(le agregue un delay para que termine el enterFrame al detectar !hitTest en mask_mc)

Código ActionScript :

/* ///////////// EJEMPLO 1 ////////////////
 ///// funcionando desde _root    OK    /////
/////////////////////////////////////////// */
this.createEmptyMovieClip("pic_mc", this.getNextHighestDepth());
pic_mc.beginFill(0xFF0000);
pic_mc.moveTo(0, 0);
pic_mc.lineTo(800, 0);
pic_mc.lineTo(800, 600);
pic_mc.lineTo(0, 600);
pic_mc.lineTo(0, 0);
pic_mc.endFill();

this.createEmptyMovieClip("mask_mc", this.getNextHighestDepth());
mask_mc.beginFill(0xFF33DD, 50);
mask_mc.moveTo(0, 0);
mask_mc.lineTo(320, 0);
mask_mc.lineTo(320, 240);
mask_mc.lineTo(0, 240);
mask_mc.lineTo(0, 0);
mask_mc.endFill();

mask_mc._x = Stage.width/2 - mask_mc._width/2;
mask_mc._y = Stage.height/2 - mask_mc._height/2;

pic_mc._x = mask_mc._x -(pic_mc._width/2)+(mask_mc._width/2);
pic_mc._y = mask_mc._y -(pic_mc._height/2)+(mask_mc._height/2);

// VARIABLES PARA MOVER IMAGEN
leftMouse = mask_mc._x;
rightMouse = mask_mc._x + mask_mc._width;
topMouse = mask_mc._y;
bottomMouse = mask_mc._y + mask_mc._height;

leftClip = mask_mc._x;
topClip = mask_mc._y;
rightClip = mask_mc._x + mask_mc._width - pic_mc._width;
bottomClip = mask_mc._y + mask_mc._height - pic_mc._height;


function Mover() //x,y, aceleracion, px, py)
{ 
var delay:Number = 0;
pic_mc.onEnterFrame = function()
{
   var rx = (_root._xmouse - leftMouse)/(rightMouse - leftMouse);
   var ry = (_root._ymouse - topMouse)/(bottomMouse - topMouse);
   rx = Math.max(0, Math.min(1, rx));
   ry = Math.max(0, Math.min(1, ry));
   var dx = leftClip + (rightClip - leftClip)*rx;
   var dy = topClip + (bottomClip - topClip)*ry;
   this._x += (dx - this._x)*.2;
   this._y += (dy - this._y)*.2;
   
   (mask_mc.hitTest(_xmouse, _ymouse, true)) ? delay=0 : delay++;

   if(delay>10)
   {
   coords_txt.htmlText += '<br />DELAY:'+delay+'<br />\nrx:'+rx+', ry:'+ry+' | X:'+this._x+', Y:'+this._y;
   delete this.onEnterFrame;
   }
}
}


var mouseListener:Object = new Object();
mouseListener.onMouseMove = function()
{
   if (mask_mc.hitTest(_xmouse, _ymouse, true))
   {

   var point:Object = {x:_xmouse, y:_ymouse};
    mask_mc.globalToLocal(point);
    var rowHeaders = "<b> &nbsp; \t</b><b>_xmouse\t</b><b>_ymouse</b>";
    var row_1 = "_root\t"+_xmouse+"\t"+_ymouse;
    var row_2 = "mask_mc\t"+point.x+"\t"+point.y;
    coords_txt.htmlText = "<textformat tabstops='[100, 200]'>";
    coords_txt.htmlText += rowHeaders;
    coords_txt.htmlText += row_1;
    coords_txt.htmlText += row_2;
    coords_txt.htmlText += "</textformat>";

   Mover(); //_xmouse, _ymouse, 5, point.x, point.y);
   //
   updateAfterEvent();
   }
};

Mouse.addListener(mouseListener);

this.createTextField("coords_txt", this.getNextHighestDepth(), mask_mc._x+5, mask_mc._y+5, 100, 22);
coords_txt.html = true;
coords_txt.multiline = true;
coords_txt.autoSize = true;


Funciona excelente, si cambias el tamaño al crear el pic_mc (800x600, 540x720, n...)

PEeeeeeeeeeeeero! aqui es 'donde la puerca torcio el rabo' :D
Todo esto lo estoy haciendo para un mapa, entonces al ampliar el zoom (salirse de las dimensiones de mask_mc) es cuando debe empezar este scrolling la imagen. Entonces, si estas dos formas las meto dentro de un clip contenedor, y deben estar (alineadas al centro) centradas con el, es ahi donde ya valio, porque las variables estan guardando valores negativos.

Código ActionScript :

/* ///////////// EJEMPLO 2 ////////////////
 ///// ya no funciono dentro de clip  ;(  /////
/////////////////////////////////////////// */
var clipcontainer:MovieClip = _root.createEmptyMovieClip('clipcontainer', this.getNextHighestDepth());
clipcontainer._x = Stage.width/2;
clipcontainer._y = Stage.height/2;

var pic_mc:MovieClip = clipcontainer.createEmptyMovieClip("pic_mc", clipcontainer.getNextHighestDepth());  
pic_mc.beginFill(0xFF0000);  
pic_mc.moveTo(0, 0);  
pic_mc.lineTo(800, 0);  
pic_mc.lineTo(800, 600);  
pic_mc.lineTo(0, 600);  
pic_mc.lineTo(0, 0);  
pic_mc.endFill();  
  
var mask_mc:MovieClip = clipcontainer.createEmptyMovieClip("mask_mc", clipcontainer.getNextHighestDepth());  
mask_mc.beginFill(0xFF33DD, 50);  
mask_mc.moveTo(0, 0);  
mask_mc.lineTo(320, 0);  
mask_mc.lineTo(320, 240);  
mask_mc.lineTo(0, 240);  
mask_mc.lineTo(0, 0);  
mask_mc.endFill();  
  
var centro:MovieClip = clipcontainer.createEmptyMovieClip("centro", clipcontainer.getNextHighestDepth());  
centro.beginFill(0x00CC66);  
centro.moveTo(0, 0);  
centro.lineTo(10, 0);  
centro.lineTo(10, 10);  
centro.lineTo(0, 10);  
centro.lineTo(0, 0);  
centro.endFill();  
  
mask_mc._x = -(mask_mc._width/2);
mask_mc._y = -(mask_mc._height/2);
  
pic_mc._x = -(pic_mc._width/2);
pic_mc._y = -(pic_mc._height/2);
  
centro._x = centro._y -= 5;

// VARIABLES PARAMOVER IMAGEN
leftMouse = mask_mc._x;
rightMouse = mask_mc._x + mask_mc._width;
topMouse = mask_mc._y;
bottomMouse = mask_mc._y + mask_mc._height;

leftClip = mask_mc._x;
topClip = mask_mc._y;
rightClip = mask_mc._x + mask_mc._width - pic_mc._width;
bottomClip = mask_mc._y + mask_mc._height - pic_mc._height;


function Mover() //x,y, aceleracion, px, py)
{ 
var delay:Number = 0;
pic_mc.onEnterFrame = function()
{
   var rx = (_root._xmouse - leftMouse)/(rightMouse - leftMouse);
   var ry = (_root._ymouse - topMouse)/(bottomMouse - topMouse);
   rx = Math.max(0, Math.min(1, rx));
   ry = Math.max(0, Math.min(1, ry));
   var dx = leftClip + (rightClip - leftClip)*rx;
   var dy = topClip + (bottomClip - topClip)*ry;
   this._x += (dx - this._x)*.2;
   this._y += (dy - this._y)*.2;
   
   (mask_mc.hitTest(_xmouse, _ymouse, true)) ? delay=0 : delay++;

   if(delay>10)
   {
   coords_txt.htmlText += '<br />DELAY:'+delay+'<br />\nrx:'+rx+', ry:'+ry+' | X:'+this._x+', Y:'+this._y;
   delete this.onEnterFrame;
   }
}
}


var mouseListener:Object = new Object();
mouseListener.onMouseMove = function()
{
   if (mask_mc.hitTest(_xmouse, _ymouse, true))
   {

   var point:Object = {x:_xmouse, y:_ymouse};
    mask_mc.globalToLocal(point);
    var rowHeaders = "<b> &nbsp; \t</b><b>_xmouse\t</b><b>_ymouse</b>";
    var row_1 = "_root\t"+_xmouse+"\t"+_ymouse;
    var row_2 = "mask_mc\t"+point.x+"\t"+point.y;
    coords_txt.htmlText = "<textformat tabstops='[100, 200]'>";
    coords_txt.htmlText += rowHeaders;
    coords_txt.htmlText += row_1;
    coords_txt.htmlText += row_2;
    coords_txt.htmlText += "</textformat>";

   Mover(); //_xmouse, _ymouse, 5, point.x, point.y);
   //
   updateAfterEvent();
   }
};

Mouse.addListener(mouseListener);
  
var coords_txt:TextField = clipcontainer.createTextField("coords_txt", clipcontainer.getNextHighestDepth(), mask_mc._x+5, mask_mc._y+5, 100, 22);  
coords_txt.html = true;  
coords_txt.multiline = true;  
coords_txt.autoSize = true;  
coords_txt.selectable = false; 


He estado usando un poco lo de GlobalToLocal, LocalToGlobal pero no se si esto auyde, no secomo poner los valores correctos, se supone que pic_mc se mueve a partir de mask_mc, entonces no importa si esta a partir de (0,0), o no.

Gracias x tu(sus) ayuda(s)
Salu2!

Por comicSans

Claber

151 de clabLevel



 

firefox

 

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