Ver post original:[/url]
Ahora la solucion... Creamos y posicionamos en nuestra esena cuatro diferentes Sprite Objects, estos seran tres cuadrados a mover y un rectangulo contenedor llamado "holder".
Código ActionScript :
//Parte I -- Creamos los graficos var holder:Sprite = new Sprite(); var block1:Sprite = new Sprite(); var block2:Sprite = new Sprite(); var block3:Sprite = new Sprite(); this.addChild(holder); this.addChild(block1); this.addChild(block2); this.addChild(block3); holder.graphics.beginFill(0xDDDDDD); holder.graphics.lineStyle(2,0); holder.graphics.moveTo(0,0); holder.graphics.lineTo(0,300); holder.graphics.lineTo(100,300); holder.graphics.lineTo(100,0); holder.graphics.endFill(); holder.x = 350; holder.y = 50; block1.graphics.beginFill(0xDDDDFF); block1.graphics.lineStyle(0,0); block1.graphics.moveTo(0,0); block1.graphics.drawRect(0,0,100,100); block1.graphics.endFill(); block1.x = 50; block1.y = 50; block2.graphics.beginFill(0xFFDDDD); block2.graphics.lineStyle(0,0); block2.graphics.moveTo(0,0); block2.graphics.drawRect(0,0,100,100); block2.graphics.endFill(); block2.x = 50; block2.y = 200; block3.graphics.beginFill(0xDDFFDD); block3.graphics.lineStyle(0,0); block3.graphics.moveTo(0,0); block3.graphics.drawRect(0,0,100,100); block3.graphics.endFill(); block3.x = 175; block3.y = 100;
Como podemos ver cada cuadrado es creado y posicionado en nuestra escena, asi tambien al darle una ubicacion en las coordenadas X, Y haremos que el cuadrado regrese a esa posicion en caso de no haber "colisionado" con el rectangulo contenedor; las cuales guardaremos en una variable llamada startingPt al momento de ser llamado el evento MOUSE_DOWN o que vaya al rectangulo contenedor en cuanto el cuadrado lo toque. El metodo hitTestObject de nuestros sprites puede determinar esto facilmente. Se tomo la decision de usar holder.hitTestObject(movingBlock) en lugar de movingBlock.hitTestObject(holder) -ambas regresan el mismo resultado-. Notaras que una vez que el objeto toca la linea de contenedor ("holder" sprite", removemos el listener del evento MOUSE_DOWN, manteniendolo efectivamente si se vuelve a mover. En la parte 3 se mostrara como agregar una funcion "reset".
Código ActionScript :
// Global variables to keep up with things
var movingBlock:Sprite;
var startingPt:Point = new Point();
var placed:int = 0;
// Part II -- Add drag and drop functionality
block1.addEventListener(MouseEvent.MOUSE_DOWN, startBlockMove);
block2.addEventListener(MouseEvent.MOUSE_DOWN, startBlockMove);
block3.addEventListener(MouseEvent.MOUSE_DOWN, startBlockMove);
function startBlockMove(evt:MouseEvent):void {
movingBlock = Sprite(evt.currentTarget);
startingPt.x = movingBlock.x;
startingPt.y = movingBlock.y;
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveBlock);
}
function moveBlock(e:MouseEvent):void {
movingBlock.x = stage.mouseX;
movingBlock.y = stage.mouseY;
}
stage.addEventListener(MouseEvent.MOUSE_UP, stopMotion);
function stopMotion(evt:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveBlock);
snapInPlace();
movingBlock = new Sprite();
startingPt = new Point();
}
function snapInPlace():void {
if (holder.hitTestObject(movingBlock)) {
movingBlock.x = holder.x;
movingBlock.y = holder.y + 100*placed;
placed++;
movingBlock.removeEventListener(MouseEvent.MOUSE_DOWN, startBlockMove);
}
else {
movingBlock.x = startingPt.x;
movingBlock.y = startingPt.y;
}
}
Algunas veces esta no es la interaccion que queremos, especialmente si es posible que nuestros movingBlock colisionen posiblemente mas de un objeto contenedor simultaneamente. En esos casos, deberias considerar el metodo similarhitTestPont, el cual tomara los argumentos en las coordinadas de X y Y de un punto relavito al "parent object". Por ejemplo, en el codigo de abajo, si cambias la linea que containing hitTestObject :
Código ActionScript :
if (holder.hitTestPoint(stage.mouseX, stage.mouseY)) {
El resultado sera que el mouse estara sobre el rectangulo contenedor para soltar el cuadrado y colocarlo dentro del contenedor. Esta interaccion es mucho mas intuitiva para los usuarios en algunas aplicaciones.
La parte final del codigo es una simple funcion de reset, que permite al usuario volver a usar la aplicacion sin tener que actualizar la pagina. Esto puede ser acompañado de un boton "resetear" usando el mismo codigo.
Código ActionScript :
// Part III -- Add a reset capability with a keyboard event
stage.addEventListener(KeyboardEvent.KEY_DOWN,reset);
function reset(evt:KeyboardEvent) {
if (evt.keyCode == Keyboard.UP) {
block1.x = 50;
block1.y = 50;
block2.x = 50;
block2.y = 200;
block3.x = 175;
block3.y = 100;
block1.addEventListener(MouseEvent.MOUSE_DOWN, startBlockMove);
block2.addEventListener(MouseEvent.MOUSE_DOWN, startBlockMove);
block3.addEventListener(MouseEvent.MOUSE_DOWN, startBlockMove);
placed = 0;
}
}
Bajar ejemplo: [url=http://www.flashandmath.com/basic/dragdroptour/DragDrop4.fla]
Fuente: [url=http://www.flashandmath.com/basic/dragdroptour/dd_tour5.html][/url]
