Vamos a ver como podemos hacer unas ventanitas donde al darles clic se vuelven totalmente visibles y aunque estén hasta atrás pasan a primer plano además de poderlas arrastrar, nuestro resulta final será algo como esto:
Primero creamos nuestra ventana principal con el nombre de instancia window dentro de este creamos la parte que se tendrá que seleccionar para poder arrastrarla y a esta le ponemos de nombre de instancia drag
Ahora en el fotograma que contiene nuestro movieclip ponemos el siguiente código
-
var mueve = function (clip) {
-
clip.drag.onPress = function() {
-
startDrag(clip);
-
};
-
clip.drag.onRelease = function() {
-
clip.stopDrag();
-
};
-
};
-
var uno = new mueve(window);
Esto nos dará un resultado como esto:
Bueno, la primera parte del tutorial está lista, ya podemos arrastrar nuestra ventanita y todo, peeeeeero que pasa?? se dán cuenta que llega el momento en que se pierde? Lo que haremos ahora será limitar el área de hasta donde podemos arrastrar nuestro movieclip, para eso solo habrá que agregarle estos parámetros al startDrag();
-
var mueve = function (clip) {
-
clip.drag.onPress = function() {
-
//Parámetros para delimitar nuestro movieclip
-
startDrag(clip, false, 10, 10, 300, 100);
-
};
-
clip.drag.onRelease = function() {
-
clip.stopDrag();
-
};
-
};
-
var uno = new mueve(window);
Ahora si, ya tenemos bien todo esto y les quedará algo así
Planteemos una situación muy común ¿Que pasa si tengo más de una ventana?, Casi siempre sucede que se quedan atrás ¿no? entonces vamos a resolver esta parte con un swapDepths(); que nos sirve para controlar la "profundidad" de nuestro movieclip duplicamos nuestra ventana o creamos otra como gusten y les ponemos como nombre de instancia window2, window3, etc.. las que ustedes quieran y ponemos el siguiente código:
-
// Esta variable contralará el SwapDepths
-
var x = 0;
-
//Comienza nuestra función
-
var mueve = function (clip) {
-
//Comienza lo que hará nuestra ventana al presionar
-
clip.drag.onPress = function() {
-
//Esto hará que se pase hasta arriba
-
clip.swapDepths(x += 1);
-
//Comenzamos a arrastrar
-
startDrag(clip, false, 10, 10, 300, 100);
-
};
-
//Al soltar Regresas el Alpha a 50
-
clip.drag.onRelease = function() {
-
stopDrag();
-
};
-
};
-
var uno = new mueve(window);
-
var uno = new mueve(window2);
-
var uno = new mueve(window3);
Ahora si, ya tenemos nuestras ventanas y podemos utilizarlas sin ningún problema.
Ya si quieren adornarlas un poco más solo pónganle este código para que sean transparentes y al seleccionarlas se vuelvan totalmente visibles
-
// Esto contralará el SwapDepths
-
var x = 0;
-
//Comienza nuestra función
-
var mueve = function (clip) {
-
//De inicio nuestra ventana tendrá un alpha 50
-
clip._alpha = 50;
-
//Comienza lo que hará nuestra ventana al presionar
-
clip.drag.onPress = function() {
-
//Esto hará que se pase hasta arriba
-
clip.swapDepths(x += 1);
-
//Comenzamos a arrastrar
-
startDrag(clip, false, 10, 10, 300, 100);
-
//Pasamos el alpha de nuestra ventana a 100
-
clip._alpha = 100;
-
};
-
//Al soltar Regresas el Alpha a 50
-
clip.drag.onRelease = function() {
-
stopDrag();
-
clip._alpha = 50;
-
};
-
};
-
var uno = new mueve(window);
-
var uno = new mueve(window2);
-
var uno = new mueve(window3);
El ejemplo es el que se muestra al inicio de este post, así es que ya tienen una idea de como pueden hacer esas ventanitas que siempre son muy útiles de una manera desglosada y por pasos vamos viendo como controlarlas, desde aplicar un simple drag hasta poder definir cuál debe de estar hasta arriba la opacidad etc...
5 comentarios para Drag & swapDepths
Huuuu
Huuuu
Excelente Tutorial
Solo espero que no nos vayan a patear con eso de la Usabilidad XD
Buen tutorial
gracias:)
Excelente, tutorial, estoy haciendo un programita en flash que me permita mover ese tipo de ventanitas para poder acomodarlas y meterles texto, de manera que me permita unir las ventanitas con lineas hacia otras ventanas y así hacer una especie de diagramás con ellos y mandarlas a imprimir o guardarlas en pdf ó jpg, etc…
No se si me he explicado, para esto necesito ayuda ya que soy nuevo en flash, así que si alguien me pudiera echar la mano con algun tutorial, etc… o si tienen algo similar, les pediria de favor me compartan sus conocimientos… gracias de antemano.
Gracias por tu aporte!!
Hola a todos. Planteo una duda:
¿Y si en vez de limitar a un área cuadrada o rectangular, necesito limitar a un área triangular o a un área tipo trapecio?. Al poner las coordenadas siempre son áreas rectas por lo que no he podido conseguir esto.
¿Se puede limitar el movimiento al área de otro movieclip???