Facebook Twitter Youtube Flicker Google + Pinterest Artedinamico
Inicio | Staff | Servicios | Publicidad | Cursos presenciales | Nos recomiendan | Registrese | Contáctenos |


 
 

Strict Standards: mktime(): You should be using the time() function instead in /home/portalad/public_html/portal/wlib/wsecurityimage.inc.php on line 10
Tip y trucos

DRAG AND DROP EN FLASH

Vamos a empezar nombrandolos a todos. Selecciona el campo de texto dinamico abre el panel opciones de texto y ponle el nombre resultado. Selecciona el clip de pelicula en el que pone salir abre el panel de instancia y llamalo salir; ahora el clip de pelicula que tienes (el cuadrado gris en el que no pone nada) llamalo destino y en el ultimo clip (el de mas abajo a la izquierda con un uno) y llamalo item. Si abres este clip veras que tiene un campo de texto dinamico que se llama nombre.

 

 

 

 

 

 

 



Ahora que tenemos nombrados todos los clips vamos a vincular 2 instancias de la biblioteca para poder hacer copias de ellas y situarlas en el escenario dinamicamente.

Abre la biblioteca, selecciona el clip quese llama "a" pincha encima de el con el boton derecho y selecciona vinculacion.

Se abre el cuadro de dialogo propiedades de vinculacion.

Pincha en exportar este simbolo y ponle "a" como nombre.

 

 

 

 

 



Haz lo mismo con el clip que se llama "puntero" y ponle como nombre "puntero".

Pincha en el primer fotograma de la capa acciones y pon lo siguiente.

var resultado=""
_root.salir._visible=false
espacio=_root.item._width+10
for(var i=1; i<5; i++){
_root.item.duplicateMovieClip("item"+i, i)
eval("_root.item"+i).nombre=i
eval("_root.item"+i)._x=_root.item._x+(espacio*i)
}

Primero escondemos la instancia salir para que de momento sea invisible.

En la segunda linea indicamos que el campo de texto resultado se quede en blanco.
var resultado=""

Ahora indicamos el valor de la variable espacio que es la distancia que habra entre un item y otro.
espacio=_root.item._width+10

En las siguietes lineas creamos un bucle a partir de la variable "i" iniciandola a 1 y duplicamos 4 veces la instancia item situada en el escenario. Os acordais que item tenia dentro de si un campo de texto dinamico que se llama nombre no? pues le igualamos a i para que nombre a cada uno de los cuatro menus, asi el primero se llamara 1, el segundo 2, 3 y 4 sucesivamente y en la ultima linea dentro del bucle le indicamos la distancia que tiene que haber entre cada uno de estos clips.

Bien ya tenemos creados y nombrados nuesros clips que haran de menus ahora vamos a esconder el clip de pelicula inicial "item".
_root.item._visible=false

Ahora vamos a centrarnos en el clip de pelicula item introduciendo algunas acciones dentro de el.

Nuestro objetivo con todas estas acciones dentro del clip de pelicula es:

Comprobar si el usuario tiene el puntero del raton encima de uno de nuestros clips de pelicula (da igual cual sea de todos ellos por que al duplicar el clip "item" todas sus copias tendran estas acciones dentro de si), si el usuario pincha el clip de pelicula por una parte si la arrastra sacamos una copia de nuestra instancia "a" desde la biblioteca que representara a la instancia que hemos pinchado y por otra parte sacamos al escenario la instancia "puntero" tambien desde la biblioteca que se situa encima de "destino" para indicarnos el lugar hasta el que debemos de arrastrar nuestro clip representante "a".

Si cuando soltemos el boton derecho del raton nuestra instancia "a" esta encima de "destino", "a" se situa sobre este y habremos seleccionado el contenido de este boton, que se reflejara en el campo de texto "resultado".

De no se asi borraremos la instancia representante "a" del escenario y en cualquiera de los dos casos una vez que soltamos el boton derecho del raton tambien borramos "puntero".

Como es un rato complicado, lo mejor es que lo veamos mas tranquilamente de acuerdo.

Vamos a empezar con el evento load que inicializa una serie de variables dentro del clip cuando este esta totalmente cargado.

onClipEvent (load) {
borrar=true
primeraVez=true
}

Cada vez que pinchemos con el boton derecho del raton analizaremos si este esta encima de alguno de nuestros clips de pelicula y si es asi y la variable "primeraVez" es verdadera inicializamos "encima" con true y cambiamos "primeraVez" a false.

onClipEvent (mouseDown) {
if(this.hitTest(_root._xmouse,_root._ymouse) && primeraVez==true){
encima=true
primeraVez=false
}
if(encima){
dragin=false
click=true
encima=false
_root.attachMovie("puntero","puntero",9)
_root.puntero._x=_root.destino._x
_root.puntero._y=_root.destino._y
}
}

Si "encima=true" es decir si el puntero del raton esta encima del clip de pelicula inicializamos "dragin=false" y "click=true" es decir el drag (arrastre) aun no es verdadero pero emos echo "click" encima de una instancia.

Cambiamos "encima" a false y creamos el clip de pelicula "puntero", situandolo desde la biblioteca hasta el escenario, justo encima de "destino". Ten en cuenta que ya tenemos 4 instancias en el escenario generadas dinamicamente (item1,... y item4) el nivel que le ponemos "puntero" es un nivel diferente por que no puedes poner dos clips de pelicula generados dinamicamente en el mismo nivel ya que uno suplantaria al otro.

Ahora tenemos que detectar el evento de soltar el boton del raton.

onClipEvent (mouseUp) {
if(_root.a.hitTest(_root.destino)){
borrar=false
dragin=false
_root.a._x=_root.destino._x
_root.a._y=_root.destino._y
_root.instanciaBloqueada()
}
if(borrar){
primeraVez=true
_root.a.removeMovieClip()
}
_root.puntero.removeMovieClip ();
}

Basicamente en este codigo es en el que comprobamos si al soltar el boton derecho del raton la instancia "a" esta encima de "destino" si es asi la colocamos justamente encima de destino y ejecutamos la funcion instanciaBloqueada() que explicaremos mas adelante de no ser asi borramos a "a" del escenario y ponemos nuevamente "primeraVez=true" para que pueda inicializarse nuevamente el codigo. En cualquiera de los dos casos borramos a "puntero" del escenario.

Pasaremos al controlador de eventos enterFrame que ejecuta un codigo cilicamente tantas veces como fotogramas hay por segundo para terminar por fin con las acciones dentro del clip de pelicula.

 

onClipEvent (enterFrame) {
if(click==true){
_root.attachMovie("a","a",10)
_root.a._x=this._x
_root.a._y=this._y
_root.a.nombre = this.nombre
_root.a._alpha=50
dragin=true
click=false
}

if(dragin){
_root.a._x=_root._xmouse
_root.a._y=_root._ymouse
}
}

Si la instancia ha sido "clicada" llevamos una copia al escenario del clip de pelicula "a" al escenario le ponemos el mismo nombre del clip al que hemos clicado y comenzamos su arrastre.

Vale con esto ya tenemos completados todos los eventos de clip para que nos genere una instancia "interprete" dinamicamente que se llame como su clip "padre" al que hemos pinchado y que compruebe si al soltarla esta encima de "destino" o no. En el caso de estarlo esta se queda bloqueada encima de este clip haz la prueba. Pero ¿que pasa si una vez que hemos bloqueado una instancia por ejemplo la nº 1 pulsamos otra diferente?

Se nos fastidio el invento no? Para eso creamos 2 nuevas funciones, instanciaBloqueada() que evita que puedas arrastrar nuevamente a otro clip y restaurar() que se activa cuando pulsamos el boton salir (dentro del clip "salir")

Abre otra vez el primer frame de la capa acciones y debajo del codigo que escribimos anteriormente pon lo siguiente.

 

function instanciaBloqueada(){
_root.salir._visible=true
_root.resultado=_root.a.nombre
for(var i=1; i<5; i++){
eval("_root.item"+i).primeraVez=false
eval("_root.item"+i).borrar=false
}
}
function restaurar(){
_root.a.removeMovieClip()
_root.salir._visible=false
_root.resultado=""
for(var i=1; i<5; i++){
eval("_root.item"+i).primeraVez=true
eval("_root.item"+i).borrar=true
}
}

Ahora abre la instancia "salir" pincha sobre ella (veras que es un boton) y ponle:

Con esto hemos terminado este tutorial.

Estilo & Diseño
Fuente: http://esidi.net/Tips/flash/dragANDdrop/dragANDDrop.htm
Regresar a Tips y trucos
Publicado en: 2004-09-06 / Categoría: Flash / Estadísticas: [ 4742 Lecturas ] / Total comentarios: 0
 
Comparte este tips / truco
Otros tips / trucos de: Flash
CURSO DE FOTOGRAFÍA: 39. CONSEJOS PRÁCTICOS PARA M
BOTONES DINÁMICOS EN FLASH
CONSEJOS PARA TOMAR BUENAS FOTOGRAFÍAS EN UN CONCIERTO
TIPS DE FLASH PARA HACER UNA GALERÍA DE FOTOS
TIPS VARIADOS PARA FLASH
 
cOMENTArios:

 

colabora y participa en nuestra comunidad

Si tienes un tips / truco que desea compartir y que crees que es de ayuda para nuestra comunidad por favor haz click en el botón y envíanos un correo con la información e imagenes para publicar.

 
 
AutenticaciÓN
Usuario: "E-mail"
Clave

Olvidó su clave?

Desea registrarse?
 
 
 
 
 
Inicio | Staff | Servicios | Publicidad | Cursos presenciales | Nos recomiendan | Registrese | Contáctenos |


© Copyright Artedinamico.com 2001 - 2013. Todos los Derechos Reservados
Teléfono: (57)+(4) + 444 1001  - Medellín - Colombia - Suramérica
Hosting, diseño y desarrollo de este portal: artedinamico.net
Para contratar los servicios de Artedinamico en: Diseño web, desarrollo web, tiendas virtuales, e-commerce,
posicionamiento web, animación y multimedia, gestores de contenidos, hosting y dominios, cms, diseño gráfico click aquí

Algunas de las imágenes utilizas en este portal son de shutterstock.com y siempre que se usan se reseña su autoría, por lo tanto se prohíbe la distribución y utilización.

Políticas de protección de datos personales | Aviso de privacidad