12/04/2011

Crear un rompecabezas de arrastrar y

Publicidad Aqu

Crear un rompecabezas de arrastrar y soltar en ActionScript 3.0

Carlos Yez de 11 de enero 2010 con 36 comentarios Arrastrar y soltar es la accin de hacer clic en un objeto virtual y arrastrndola a otro lugar o en otro objeto virtual. En general, se puede utilizar para invocar muchas clases de acciones, o crear varios tipos de asociaciones entre dos objetos. En este tutorial vamos a crear un juego de arrastrar y soltar a juego con ActionScript 3.

Paso 1: Breve Descripcin

Utilizacin de ActionScript 3, haremos MovieClips arrastrables que ser dado de baja en los objetivos de MovieClip, vamos a comprobar si el objetivo de su correcta utilizando el mtodo hitTestObject.

Paso 2: A partir
Open Flash y cree un nuevo archivo de Flash (ActionScript 3).

tutsplus.com//create-a-drag-and-d

1/9

12/04/2011

Crear un rompecabezas de arrastrar y

Ajuste el tamao del escenario a 450 300 y aadir un fondo negro (# 1B1B1B).

Paso 3: los clips que se pueden arrastrar

Vamos a necesitar algunos MovieClips para arrastrar, he usado algunos de los logotipos Envato mercado. Convertir a MovieClips y establecer sus nombres de instancia:

Paso 4: El objetivo Drop

tutsplus.com//create-a-drag-and-d 2/9

12/04/2011

Crear un rompecabezas de arrastrar y

Un clip de pelcula se utiliza como un destino de colocacin para cada clip arrastrable, un simple rectngulo har el trabajo.

Convertir el rectngulo de clip de pelcula y duplicarlo (Comando + D) para que coincida con el nmero de objetos que pueden arrastrarse. Los nombres de instancia ser el nombre del clip arrastrable, ms objetivo , lo que nos deja denTarget, oceanTarget, etc

Paso 5: Guas
Vamos a aadir algunas guas para ayudar al usuario a decidir qu hacer. Un ttulo que le dir al usuario lo que hacer con los elementos de la pantalla.

tutsplus.com//create-a-drag-and-d

3/9

12/04/2011

Crear un rompecabezas de arrastrar y

Un icono para indicar al usuario cmo hacerlo.

Palabras clave para indicarle al usuario que para que coincida con los objetos.

tutsplus.com//create-a-drag-and-d

4/9

12/04/2011

Crear un rompecabezas de arrastrar y

Paso 6: Tiempo de ActionScript

Cree un nuevo documento ActionScript y gurdelo como "Main.as".

Paso 7: Las clases requeridas

En esta ocasin tendremos que solo unas pocas clases. a simple vista copia al portapapeles de impresin ? 1. paquete 2. { 3. importacin flash.display.Sprite; 4. importacin flash.events.MouseEvent;

Paso 8: Extender la clase

Vamos a usar Sprite mtodos y propiedades especficas por lo que extender el uso de la clase Sprite. a simple vista copia al portapapeles de impresin ? 1. pblico de clase principal se extiende Sprite 2. {

Paso 9: Variables
Estas son las variables que vamos a utilizar, se explica en los comentarios. a simple vista copia al portapapeles de impresin ? 1. var xPos: int ; / / Tiendas x posicin inicial de la 2. var yPos: int ; / / hasta la posicin inicial y

Paso 10: Funcin Principal

Esta funcin se ejecuta cuando se carga la clase.

tutsplus.com//create-a-drag-and-d

5/9

12/04/2011

Crear un rompecabezas de arrastrar y

a simple vista copia al portapapeles de impresin ? 1. pblico en la funcin Main (): vaco 2. { 3. addListeners (den, el ocano, la selva, ro, bosque); / / Una funcin para aadir a los oyentes a los clips de los parmetros 4. }

Paso 11: Funcin de la Posicin

Una funcin para obtener la posicin de los MovieClips, esto nos ayudar a devolver el MC a su posicin original cuando la cada de su meta incorrecta o sin destino de colocacin fue golpeado. a simple vista copia al portapapeles de impresin ? 1. privado funcin getPosition (target: Object): vaco 2. { 3. xPos = target.x; 4. yPos = target.y; 5. }

Paso 12: Arrastre de inicio

Esta funcin permite el arrastre en el clip con el oyente. a simple vista copia al portapapeles de impresin ? 1. privado funcin dragObject (e: MouseEvent): vaco 2. { 3. getPosition (e.target); 4. 5. e.target.startDrag ( verdadero ); 6. }

Paso 13: Deje de Arrastre

La siguiente funcin se detiene el arrastre cuando el botn del ratn es liberado, sino que tambin comprueba si el objeto est en el destino de colocacin correcta. a simple vista copia al portapapeles de impresin ? 1. privado funcin stopDragObject (e: MouseEvent): vaco 2. { 3. si (e.target.hitTestObject (getChildByName (e.target.name + "Target" ))) / / Comprueba el destino de colocacin correcta 4. { 5. e.target.x = getChildByName (e.target.name + "Target" );. x / / Si de los casos, el lugar correcto en el clip en la misma posicin que el objetivo 6. e.target.y = getChildByName (e.target.name + "Target" ) y.; 7. }
tutsplus.com//create-a-drag-and-d 6/9

12/04/2011

Crear un rompecabezas de arrastrar y

8. 9. 10. 11. 12. 13. 14. 15. }

ms { e.target.x = xPos; / / Si no, devolver el clip a su posicin original e.target.y = yPos; } e.target.stopDrag (); / / Detener arrastre

Paso 14: Oyentes

Agrega a los oyentes a los clips de los parmetros con el resto ... argumento. a simple vista copia al portapapeles de impresin ? 1. privado funcin addListeners (... objetos): vaco 2. { 3. de ( var i: int = 0; i objects.length <; i + +) 4. { 5. objetos [i] addEventListener (MouseEvent.MOUSE_DOWN, dragObject).; 6. objetos [i] addEventListener (MouseEvent.MOUSE_UP, stopDragObject).; 7. } 8. }

Paso 15: Clase de documento

Ir de nuevo al archivo. Florida y en el Panel de Propiedades de agregar "Principal" en el campo de clase para hacer esta clase del documento.

Conclusin
Ahora usted sabe cmo hacer fcilmente un destino de arrastre, esto puede ser muy til para juegos y aplicaciones. Haga su propia aplicacin de arrastre y tomar este concepto an ms! Gracias por leer!
Like 15 people like this. Be the first of your friends.

tutsplus.com//create-a-drag-and-d

7/9

12/04/2011

Crear un rompecabezas de arrastrar y

Carlos Yez es Carlos_Yanez en Tutsmarketplace

Por Carlos Yanez

Carlos es un sitio Web / Logo Designer, desarrolladores de Flash con pasin por los grandes diseos y aplicaciones de fro.

tutsplus.com//create-a-drag-and-d

8/9

12/04/2011

Crear un rompecabezas de arrastrar y

tutsplus.com//create-a-drag-and-d

9/9