Advertisement
  1. Code
  2. Games

Crea un rompecabezas de arrastrar y soltar en ActionScript 3.0

Scroll to top
Read Time: 3 min

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.

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.

Paso 9: Variables

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

Paso 10: Función principal

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

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.

Paso 12: Iniciar arrastre

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

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.

Paso 14: Oyentes

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

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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.