Swap Depths

Dentro del manejo de botones y clips hay propiedades que ya conocemos y que podemos implementar mejor, con otras acciones, en el ejemplo a continuacion vamos a mezclar algunas de ellas y a conocer otras. Comenzemos con la poco conocida Swap Depths, o profundidad de un objeto movie clip.
La idea es crear una serie de ventanas tipo windows con sus clásicos botones de maximizar, minimizar y por supuesto que su FOCUS este primero al tocarla. Si te preguntas que es eso de "focus" pues es la visualización que se hace de un objeto, el tenerlo primero frente a los demás objetos, como otro ejemplo un "focus" de un campo de texto es cuando este tiene el cursor tintineando listo para escribir, dentro de él.
Para este ejemplo es preciso haber revisado antes: Creación de Botones, Arrays (matrices), Duplicando Movie clips, y manejo de variables. No está de más chequear las propiedades de objetos del diccionario de AS. Agradezco de antemano a Kadazuro ya que gracias a él pude entender (por fin) el funcionamiento correcto de los bucles. ¡Gracias!
Primero necesitamos crear lo que sería el borde superior de la ventana encima los botones de maximizado y minimizado y uno que haga el cambio de profundidad y que permita arrastrar la ventana,éste botón debe ser invisible. Luego creamos lo que sería el cuerpo de la ventana donde se verá el texto entonces hacemos un cuadrado y dentro un cuadro de texto dinámico, luego todo esto lo convertimos en un movie clip. Luego cogemos el borde superior, los botones y el movie clip y los juntamos de tal manera que formen la ventana y los convertimos en un sólo movie clip.
Sacando la cuenta tenemos 2 movie clips y 3 botones (de minimizar y maximizar). Ahora ya tenemos la ventana molde. Vamos a lo importante que son las acciones.

Tomando en cuenta que cada clip debe tener un nombre de instancia ponemos:
-Al clip que sirve de cuerpo de la ventana y que muestra el texto:"ventana"
-Al clip que aloja al borde superior y al clip "ventana": "vprincipal"

Listo!, ahora con todo identificado las acciones:

• Boton minimizar: para este efecto sólo haremos invisible el clip "ventana", entonces sabiendo que el boton está en la misma linea temporal del clip "ventana" ponemos:

  on(release){
  ventana._visible=0; (o "false" si deseas)
  }

• Botón Maximizar: simplemente hace visible nuevamente el clip si se ha vuelto invisible:
  

  on(release){
  ventana._visible=1;(o "true")
  }

• Aquí viene lo más importante: las acciones en el frame 1 de la línea de tiempo principal:
  

  /*Aquí iniciamos una variable queservirá para hacer el cambio de profundidadcon los clip, como queremos que sean sólo 3 clip ponemos como top de profundidad "3", recordemos que la profundidad en este caso es
  inversamente proporcional al nivel, es decir si un clip de tres está al fondo de los demás es porque está en nivel 1 y el que está frente a nuestros ojos y que nadie tapa es el nivel 3*/
  top = 3;
  /*aquí creamos la matriz que contendrá los textos que se meterán en cada ventana*/
  var textos = new Array(4);
  textos[0] = null;
  textos[1] = "Esta es la primera ventana y el primer aviso que mando a la linda gente de X-Flash";
  textos[2] = "Aprender Action Script es sencillo si practicamos mucho y si leemos mucho, no consiste en copiar los ejemplos sino en comprender como funcionan";
  textos[3] = "Cuando uno más practica es más sencillo inventar cosas, e incluso la memoria aprende las acciones y todo se hace más sencillo";
  /*Aquí creamos unas variables que nos ayudarán a colocar cada copia de la ventana en una posición que querramos, en este caso la primera variable aloja el valor de la posicion vertical (_y) del clip original*/
  pos_y = _root.vprincipal._y;
  /*Esta segunda variable aloja el espaciado entre cada copia, hacemos el cálculo este porque queremos que no estén totalmente separadas una de otra sino superpuestas*/
  espaciado = (_root.vprincipal._height/2)-15;
  /*Aquí viene lo mejor: hacemos el bucle que duplica instantaneamente las ventanas*/
  for (i=1; i<4; i++) {
  _root.vprincipal.duplicateMovieClip("vprincipal"+i, i);
  /*Aquí movemos cada copia aprovechando la "i" que como va subiendo, por ello la posición nunca es igual a la anterior */
  _root["vprincipal"+i]._y = pos_y+(espaciado*i);
  /*Aquí aplicamos las matrices a cada copia*/
  _root["vprincipal"+i].ventana.mi_texto=textos[i]
  }
  /*El clip "molde" como no carga nada es vuelto invisible*/
  _root.vprincipal._visible=0

• Falta la acción "estrella" de esta lección: Swap Depths o "cambio de profundidad", si pensamos que un valor menor de profundidad equivale a lo más profundo y un valor mayor a lo menos profundo, entonces la acción del botón que hace que las ventanas seas arrastrables también permitirá que suban al nivel más superior:
  

  on (press) {
  this.startDrag();
  this.swapDepths(_root.top);
  }
  on (release) {
  this.stopDrag();
  }

  Como ya dijimos el botón toma la variable "top" de la línea de tiempo principal (_root.top) y la da como valor a la accion Swap Depths. Como el valor de "top" siempre es 3 (3 objetos en pantalla el nivel superior entonces es 3)cuando se ejecute la acción la ventana que tiene el boton apretado subirá de nivel automáticamente.

¿El resultado de todo este script? Aquí lo tienen:

¿No se ve mal, no? :) La idea es que con esto ya no tenemos que crear tantos objetos para nuestras películas sino que usando bien este tipo de acciones podemos ordenar mejor textos, objetos {se usa matemática :( } y sobre todo conseguir efectos útiles para el diseño y mejor visión de nuestras películas. El fla del ejemplo aquí.

Bases
Recomendaciones
Variables OOP Clases AS2 Shared Objects Load Vars Manejando Texto Etiquetas X e Y Scale Duplicando MClips Dibujando MClips MClips como botones Swap Depths Objeto Array Listeners Objeto Color Objeto Mouse Movimiento Cadenas Objeto Key AS y Javascript Attach MClips StartDrag
XML Flash y PHP (mail List) JSFL

¿Preguntas sobre este tutorial?

This work is licensed under a Creative Commons License.

Manuel Jesús Vejarano::: Derechos Reservados