Drag & Drop en AS3. Arrastrar elementos con el mouse.
Saturday, 6. February 2010
Podemos añadir algo de interactividad a una aplicación creada en ActionScript 3, si le permitimos al usuario “arrastrar” algunos elementos que se encuentren en el escenario, y soltarlos en alguna otra parte del escenario. Justamente para esto nos sirven las acciones de tipo Drag & Drop. El código que necesitamos para programarlo es realmente muy sencillo.
El código base para iniciar el “Arrastre” es el siguiente:
startDrag();
Y para terminar el evento, utilizamos:
stopDrag();
Antes del startDrag() o el stopDrag() debemos indicar cuál es el elemento que queremos que sea arrastrado. Vamos a crear un ejemplo práctico en Flash muy sencillo para ver su utilidad.
Ejemplo:
En primer lugar, vamos a crear un elemento cualquiera en el escenario. Vamos a convertirlo en símbolo (click derecho->”Convertir en Símbolo…”) y le damos un nombre cualquiera al símbolo.
Ahora seleccionamos el objeto que hemos convertido en símbolo, vamos al panel de Propiedades (Normalmente es el panel que aparece en la parte baja de la pantalla, bajo el escenario) y allí encontraremos una casilla donde debemos poner el nombre de instancia. en este caso, vamos a ponerle como nombre “miObjeto”.
Ahora vamos a crear el código. Creamos una función para que, al presionar el botón del mouse sobre el objeto, este empiece a ser arrastrado. Y luego creamos una función inversa (que al soltar el mouse, el objeto sea liberado en ese lugar). El código podría ser tan sencillo como:
miObjeto.addEventListener(MouseEvent.MOUSE_DOWN, drag);
function drag(e:MouseEvent){
miObjeto.startDrag();
}
miObjeto.addEventListener(MouseEvent.MOUSE_UP, drop);
function drop(e:MouseEvent){
miObjeto.stopDrag();
}
Es importante recordar que es necesario escribir el nombre de instancia del objeto que queremos arrastrar, seguido de un punto, y luego la acción de arrastrar o soltar: nombreObjeto.startDrag(); o nombreObjeto.stopDrag();
Eso es todo lo que necesitamos para arrastrar un objeto en el escenario.
Para el ejemplo mostrado, hemos utilizado el siguiente código:
miObjeto.addEventListener(MouseEvent.MOUSE_DOWN, drag);
miObjeto.addEventListener(MouseEvent.MOUSE_UP, drop);
miObjeto2.addEventListener(MouseEvent.MOUSE_DOWN, drag);
miObjeto2.addEventListener(MouseEvent.MOUSE_UP, drop);
miObjeto3.addEventListener(MouseEvent.MOUSE_DOWN, drag);
miObjeto3.addEventListener(MouseEvent.MOUSE_UP, drop);function drag(e:MouseEvent){
e.currentTarget.startDrag();
}
function drop(e:MouseEvent){
e.currentTarget.stopDrag();
}
Cualquier comentario, duda o aporte se puede hacer a través del sistema de comentarios.
Saludos.
Samuel Jiménez. EsK.
Ronier Ramos Says:
Hola brother Me encanta action script y este codigo me sera muy util pues lo andaba buscando. Cualquier otra cosa que tengas please, publicala, sera muy util. Tanx
eskombro Says:
Muchas gracias. Seguro seguiré publicando algunos artículos constantemente. Después estructuraré todo el contenido. De momento voy redactando cada artículo. Gracias por el comentario.
Saludos.
¿¿¿¿¿¿¿¿¿??????????? Says:
No Funka
Pedro Says:
hola, como seria esto con el actionscript 2.0
tengo el flash profesional 8 y no tiene la vesion 3.0 del actionsctipt 3.0
por otro lado, que significa:
**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 6: No se pudo cargar la clase o interfaz ‘MouseEvent’.
miObjeto3.addEventListener(MouseEvent.MOUSE_UP, drop);function drag(e:MouseEvent){
**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 9: No se pudo cargar la clase o interfaz ‘MouseEvent’.
function drop(e:MouseEvent){
Total de errores de ActionScript: 2 Errores comunicados: 2
SALUDOS!
annirami Says:
Hola…quetal. Quería hacer una interrogante con respecto a éste tema. Porqué a veces cuando arrastras la imagen o swf(MOUSE_DOWN), y luegolo sueltas(MOUSE_UP), la imagen se sigue arrastrando o moviendo, sin que tu no lo tengas presionado o arrastrando…
Espero ser clara.
Saludos y Gracias adelantado :]
eskombro Says:
Porque haces el MOUSE_UP (sueltas el clic) por fuera del escenario… Entonces flash no reconoce que hiciste MOUSE_UP y continuas arrastrando ese ‘peso’, jeje…
Tendrías que poner un control también para que al salir el mouse del escenario deje de arrastrar… O bueno quizá sea dentro del escenario pero depende del lugar donde haces el MOUSE_UP… Así que el control podría ser simplemente comprobar no si se hace MOUSE_UP sino que sea cuando no haya clic… Es decir, una función que compruebe constantemente si s esta haciendo o no clic… Todo de pende del caso que tengas…
Saludos. Espero que sea lo que preguntabas.
annirami Says:
Hola
Gracias por la respuesta. agregué un evento más para que no sólo haga MOUSE_UP AL botón o clip, sino también al escenario, como dijiste, ahí el stopDrag es total:
stage.addEventListener(MouseEvent.MOUSE_UP,drop);
:]
saludos!
Santi Says:
Imaginate que quiero que cuando suelto el objeto aparezca una ventana… que pondría?
muchas gracias
ralts00 Says:
muy buen tuto, pero una pregunta, lo quiero utilizar como un ” switch” para el comienzo de una pelicula, ahora, ya le puse el codigo que nos diste, y ya se puede mover la palanca, “pero” como le hago para que solo se mueva en un rango dicho por mi? por que puedo mover la palnca en todo el escenario y eso no lo quiero, aparte no se como hacer que cuando llegue la palanca hasta arriba se active algo, como un avanze de escena.
IBOG Says:
Buen dia, tengo una confusion, estoyu trabajando con flash 8 y lo hago con este script:
on (press) {
//arrastramos el objeto
startDrag(this, false);
}
on(release){
stopDrag();
}
Ahora, el detalle es que quiero hacer que ese objeto entre en otro, por ejemplo una cesta, o un cubo…., el detalle es que he bajado incluso los tutoriales y logro encajarlo con lo que quiero no me sale. Me ayudan porfa????? Gracias es Urgente!!!!
willy Says:
Muy bueno el ejemplo AS3.
Tengo un par de preguntas si pudieses darme algun alcance o alguno de los lectores ya que recien inicio en el AS3:
1. Al crear los elementos queda uno sobre otro si es que se crean en una misma capa superponiendose uno sobre otro al momento de arrastrar sin poder modificarlo, luego de no saber que hacer y revisando el codigo vi que la mejor manera de evitar o controlar eso era poniendo cada elemento en una capa y asi solo moviendo la ubicacion de las capas lograr superponer los elementos segun como yo queria. Es correcto eso o hay alguna forma por codigo?
2.Si alguien pudises explicar o traducirlo al lenguaje hablado como se interpreta la letra e del codigo e.currentTarget.startDrag(); ya que al querer agregar mas elementos como el codigo del primer ejemplo me salio error por repeticion de funcion logrando luego hacer correr el codigo correctamente usando la segunda opcion mostrada.
Gracias por la atencion y espero puedas seguir publicando mas ejemplos.
Saludos desde Lima Peru.
eskombro Says:
1. Lo que hiciste es claro la forma que se debe utilizar si se quiere separar por capas para mantener unos objetos por encima de otros. Si quieres que el objeto que estás arrastrando suba al máximo, lo más sencillo es hacerlo poniendo dentro de la función, las siguientes 2 líneas:
removeChild(e.currentTarget);
addChild(e.currentTarget);
Es lo más sencillo si estás empezando.
2. la “e” está reemplazando la palabra “event”. Se pueden usar ambos en cualquier caso. Se refiere al evento que lee la función. por ejemplo, si la función es de MouseEvent.CLICK, se ejecutará cuando se haga clic, y esa “e” o “event” se refiere justamente al click.
Aqui usamos e.cuurentTarget para decir, en palabras “El objeto en el que se realizó el evento” o, lo que es lo mismo, “el objeto sobre el que se hizo click”.
Saludos
Pao Says:
Hola, estoy trabajando en as2, tengo este codigo
on (press) {
startDrag(this, false);
}
on(release){
stopDrag();
}
y tengo varios objetos en la misma capa, como hago para mover un solo objeto sin que los demas se peguen?
GUSUM Says:
Hola Eskombro, gracias por el artículo!
Tengo una pregunta: ¿Hay manera de modificar el aspecto del cursor cuando se arrastra el objeo(mano cerrada)? He estado buscando por varios sitios, y encuentro otros cursores pero no el de arrastrar…
Gracias.
eskombro Says:
Claro. Si es un objeto del tipo MovieClip simplemente escribe así:
miObjeto.buttonMode=true;
miObjeto.useHandCursor=true;
Así se activará el cursor de la mano típica de los botones sobre un movieClip. Para quitarlo igual, pero cambiando los true por false.
Si quieres un cursor diferente, tienes que crearlo como un movieclip aparte.
Saludos y gracias!
andres Says:
hola muy buen tutorial, queria consultare lo siguiente
como puedo hacer que arrastre hacia una zona y se quede fijo ahi?
Boris Says:
Hola Samuel !
Tengo un objeto que tiene rotate 0
Al arrastrarlo, dibuja la sombra como si no se hubiera rotado
Saludos y gracias
Jhon Says:
Hola.
Un favor requiero de un manual que me permita crear clips de pelicula y en un determinado objeto este lo rechace y sea enviado al lugar de origen.
Masomenos que una figura circular solo se almacene en otra figura circulas, pero que rechace esta funcion cuando se le arrastra en una figura distinta como un cuadrado o triangulo..
Gracias de antemano.
Russel Quiam Says:
Excelente tutorial amigo, Gracias me ayudaste!!!
Cristina Says:
Excelente tutorial.
Tengo 2 consultas:
1º) ¿cómo definir un target (zona correcta) donde debe “soltar” el objeto y que ejecute un mensaje de “Correcto”.
2º) ¿puede cambiar la forma del objeto al cogerlo?
Gracias.
juan Says:
man me ha servido de mucho, gracias!!!!
enrique palominio Says:
Hola, me parece muy interesante el ejemplo, pero ¿como seria si quiero que al arrastrar un objeto, le siga otro que lo tengo dentro de otra capa?, por favor si me podrian facilitar un ejemplo. gracias de antemano..
edu Says:
removeChild(e.currentTarget);
addChild(e.currentTarget);como seria este codigo en actionscript 2