Spanish (Español) translation by Johana Grisales Pérez (you can also view the original English article)
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.
package
{
import flash.display.Sprite;
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.
public class Main extends Sprite
{ Paso 9: Variables
Estas son las variables que usaremos, explicadas en los comentarios.
var xPos:int; //Stores the initial x position var yPos:int; //Stores the initial y position
Paso 10: Función principal
Esta función se ejecuta cuando se carga la clase.
public function Main():void
{
addListeners(den, ocean, jungle, river, forest); //A function to add the listeners to the clips in the parameters
} 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.
private function getPosition(target:Object):void
{
xPos = target.x;
yPos = target.y;
} Paso 12: Iniciar arrastre
Esta función permite arrastrar al clip con el agente de escucha.
private function dragObject(e:MouseEvent):void
{
getPosition(e.target);
e.target.startDrag(true);
} 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.
private function stopDragObject(e:MouseEvent):void
{
if (e.target.hitTestObject(getChildByName(e.target.name + "Target"))) //Checks the correct drop target
{
e.target.x = getChildByName(e.target.name + "Target").x; //If its correct, place the clip in the same position as the target
e.target.y = getChildByName(e.target.name + "Target").y;
}
else
{
e.target.x = xPos; //If not, return the clip to its original position
e.target.y = yPos;
}
e.target.stopDrag(); //Stop drag
} Paso 14: Oyentes
Agrega los oyentes a los clips en los parámetros usando el argumento ... rest.
private function addListeners(... objects):void
{
for (var i:int = 0; i < objects.length; i++)
{
objects[i].addEventListener(MouseEvent.MOUSE_DOWN, dragObject);
objects[i].addEventListener(MouseEvent.MOUSE_UP, stopDragObject);
}
} 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!
