Crea un rompecabezas de arrastrar y soltar en ActionScript 3.0

Arrastrar y soltar es la acción de hacer clic en un objeto virtual y arrastrarlo a una ubicación diferente o sobre otro objeto virtual. En general, se puede utilizar para invocar muchos tipos de acciones o crear varios tipos de asociaciones entre dos objetos.

En este tutorial crearemos un juego de combinación de arrastrar y soltar utilizando ActionScript 3.

Paso 1: Breve descripción general

Con ActionScript 3, crearemos MovieClips arrastrables que se soltarán en los destinos de MovieClip; comprobaremos si el destino es correcto mediante el método hitTestObject.

Paso 2: Inicio

Abra Flash y cree un nuevo archivo Flash (ActionScript 3).

Establezca el tamaño del escenario en 450x300 y agregue un fondo negro (# 1B1B1B).

Paso 3: Clips arrastrables

Necesitaremos algunos MovieClips para arrastrar, he usado algunos de los logotipos de Envato Marketplace. 

Conviértelos en MovieClips y establezca sus nombres de instancia:

Paso 4: Soltar el objetivo

Se utilizará un MovieClip como destino de colocación para cada clip que se pueda arrastrar, un simple rectángulo hará el trabajo.

Convierta el rectángulo a MovieClip y duplíquelo (Cmd + D) para que coincida con el número de objetos que se pueden arrastrar.

Los nombres de las instancias serán el nombre del clip que se puede arrastrar, más Target, dejándonos con denTarget, oceanTarget, etc.

Paso 5: Guías

Agreguemos algunas guías para ayudar al usuario a descubrir qué hacer.

Un título que te dirá como usuario qué hacer con los elementos de la pantalla.

Un icono para decirle al usuario cómo hacerlo.

Palabras clave para decirle al usuario dónde hacer coincidir los objetos.

Paso 6: Hora de ActionScript

Crea un nuevo documento ActionScript y guárdalo como "Main.as".

Paso 7: Clases requeridas

Esta vez necesitaremos solo unas pocas clases.

1

package 

2

{

3

	import flash.display.Sprite;

4

	import flash.events.MouseEvent;

Paso 8: Ampliación de la clase

Vamos a utilizar propiedades y métodos específicos de Sprite, por lo que ampliaremos el uso de la clase Sprite.

1

public class Main extends Sprite

2

{

Paso 9: Variables

Estas son las variables que usaremos, explicadas en los comentarios.

1

var xPos:int; //Stores the initial x position

2

var yPos:int; //Stores the initial y position

Paso 10: Función principal

Esta función se ejecuta cuando se carga la clase.

1

public function Main():void

2

{

3

	addListeners(den, ocean, jungle, river, forest); //A function to add the listeners to the clips in the parameters

4

}

Paso 11: Función de posición

Una función para obtener la posición de los MovieClips, esto nos ayudará a devolver el MC a su posición original cuando el objetivo de caída sea incorrecto o no se haya alcanzado el objetivo de caída.

1

private function getPosition(target:Object):void

2

{

3

	xPos = target.x;

4

	yPos = target.y;

5

}

Paso 12: Iniciar arrastre

Esta función permite arrastrar al clip con el agente de escucha.

1

private function dragObject(e:MouseEvent):void

2

{

3

	getPosition(e.target);

4

5

	e.target.startDrag(true);

6

}

Paso 13: Detener arrastre

La siguiente función detiene el arrastre cuando se suelta el botón del mouse, también verifica si el objeto está en el destino de colocación correcto.

1

private function stopDragObject(e:MouseEvent):void

2

{

3

	if (e.target.hitTestObject(getChildByName(e.target.name + "Target"))) //Checks the correct drop target

4

	{

5

		e.target.x = getChildByName(e.target.name + "Target").x; //If its correct, place the clip in the same position as the target

6

		e.target.y = getChildByName(e.target.name + "Target").y;

7

	}

8

	else

9

	{

10

		e.target.x = xPos; //If not, return the clip to its original position

11

		e.target.y = yPos;

12

	}

13

14

	e.target.stopDrag(); //Stop drag

15

}

Paso 14: Oyentes

Agrega los oyentes a los clips en los parámetros usando el argumento ... rest.

1

private function addListeners(... objects):void

2

{

3

	for (var i:int = 0; i < objects.length; i++)

4

	{

5

		objects[i].addEventListener(MouseEvent.MOUSE_DOWN, dragObject);

6

		objects[i].addEventListener(MouseEvent.MOUSE_UP, stopDragObject);

7

	}

8

}

Paso 15: Clase de documento

Regrese al archivo .Fla y en el Panel de propiedades agregue "Principal" en el campo Clase para convertirlo en la Clase de documento.

Conclusión

Ahora que sabes cómo hacer fácilmente un objetivo de arrastre, esto puede ser muy útil para juegos y aplicaciones. ¡Crea tu propia aplicación de arrastre y lleva este concepto más lejos!

¡Gracias por leer!