Este tip esta hecho, para las ocasiones en que se necesita manipular varios MovieClip similares que tenemos en nuestra película, y lo queremos hacer de manera elegante, con poco código y en ActionScript 3. Este tip es muy útil en juegos donde se necesita manipular muchos o ilimitados, Sprites y/o MovieClips.
El siguiente es un ejemplo en el que este tip, puede ser muy útil y ahorrarnos bastante tiempo.
Estaba tratando de hacer invisibles solo por código 60 MovieClips mc.visible = false; . Podía hacerlo de dos maneras. Una era colocando código en cada MovieClip this.mc.visible = false; pero eso me hacia sucio ante los ojos de Freddie (Actualmente mi profesor de ActionScript 3.0).
La segunda opción era crear una clase, y en la clase colocar this.mc.visible = false; y luego vincular uno por uno cada MovieClip a esa clase. Cosa bastante dispendiosa y ineficiente. Dado que no quería hacerlo de ninguna de las dos maneras, solo me quedaba hacer un For. Pero en AC3 nada es tan facil como parece.
Para hacer y entender el tip hay que crear 5 formas de cualquier tipo. Cuadraditos, triangulitos bolitas, etc, pero que sean cinco. Luego a cada una de esas formas las convertimos en MovieClips con F8.
Hecho esto ya podríamos asignarle la propiedad que queremos, (en este caso será si es visible o no) a nuestros MovieClip, Lo haríamos de la siguiente manera.
Código :
for (var i:int = 0; i <= 4; i++) { this.getChildAt(i).visible = false; }
Si lo probamos veremos que desaparecen nuestros 5 MovieClips. Voy a explicar
Código :
this.getChildAt(i).visible = false;
this es nuestra película. Para explicar getChildAt(i) hay que explicar la nueva manera en la que ActionScript 3.0. muestra cualquier cosa en el escenario, ya sean vectores imágenes videos etc.
En ActionScript 3.0 dos de los objetos o clases principales son DisplayObject, DisplayObjectContainer. Cuando lei la guía de flash de Adobe, entender lo que les voy a explicar fue un infierno, viniendo de AS2. Pero luego de haberme familiarizado mas con flash y flex gracias a los dos cursos de Freddie (muy buenos por cierto. mentira), entendí bien que era eso, y ya no dolió tanto. Es mas, ahora me gusta muchísimo la forma en la que ActionScript 3, maneja los elementos gráficos, porque facilita muchísimo las cosas, y mejora muchas fallas que tenia AS2 que hacía que programar un juego de disparos y infinitos blancos fuera un tormento. Ahora con ActionScript 3 es mucho mas fácil.
Voy a tratar de explicar esto de manera sencilla y sensata y no como adobe que por tratar de explicar muy detalladamente algo, hacen jodidos de entender términos que son sencillos.
DisplayObject, es la clase principal de la que heredan todas las demás clases o objetos que se pueden visualizar en el escenario. Osea DisplayObject es el padre de
- Bitmap = imagen - Shape = vector - MorphShape = Trasformación de vector - StaticText = texto estático - Video = pues eso - SimpleButton = botón simple - TextField = campo de texto
Todos estos son los objetos que se pueden mostrar en Flash. Pero hay un problema, ninguno de estos, pueden mostrarse si no están dentro de algo como una carpeta, caja o contenedor. Este algo se llama DisplayObjectContainer. Aunque el nombre sea complicado es algo muy sencillo de entender.
DisplayObjectContainer es como una carpeta, caja o contenedor a la que uno le mete cosas. Podría ser un Texto, una imagen un video un vector etc.
Y solo hay 4 tipos de carpeta, caja o contenedor. Estos son:
- Loader = Cargador - Sprite = MovieClip sin línea de tiempo - MovieClip = Clip de película - Stage = Escenario
Estos cuatro objetos heredan de la clase DisplayObjectContainer. El más importante es Stage que es nuestro escenario y que sirve de carpeta, caja o contenedor a todo lo demás.
El otro que también es importante es Loader, que nos sirve para cargar objetos externos como una imagen o un video. Una imagen o un video no se pueden colocar (por codigo) directamente en el escenario. Tiene que estar dentro de un Loader.
Los otros dos Sprite y MovieClip son bien conocidos.
Todos estos cuatro objetos heredan las propiedades, métodos y eventos de la clase DisplayObjectContainer. Y en este caso, para nuestro ejemplo lo mas importante son los métodos. DisplayObjectContainer tiene varios métodos que nos sirven para manejar las demás cosas que hay dentro de el. por ejemplo: addChild() nos sirve para agregar algo a la carpeta, caja o contenedor. Se
Código :
entiende mejor con un ejemplo. // Creamos un Sprite que nos va a servir de contenedor var contenedor:Sprite = new Sprite(); // Colocamos nuestro contenedor dentro de la película. // pero como no tiene nada adentro, no vemos nada. this.addChild(contenedor); // Creamos dos campos de texto var texto1:TextFiel = new TextFiel(); var texto2:TextFiel = new TextFiel(); // Colocamos contenido en los dos campos de texto texto1.text = "Hola Mundo"; texto2.text = "Chao Mundo"; // Colocamos nuestros textos dentro del contenedor. // y como el contenedor esta dentro del escenario ya podemos ver nuestros textos contenedor.addChild(texto1); contenedor.addChild(texto2);
De esta manera tenemos dos textos dentro de nuestro contenedor Sprite. Nuestro Sprite luce asi.
Código :
contenedor I I____texto1 índice 0 I I____texto2 índice 1
getChildAt() es otro método, al igual que addChild(); que tienen los objetos contenedores (Loader, Sprite, MovieClip, Stage). getChildAt() nos permite acceder a cualquier cosa que tengamos dentro de nuestro contenedor. Si al código anterior le añadimos
Código :
trace(contenedor.getChildAt(0).name);
nos devuelve el nombre del objeto que esta en el indice 0, En nuestro caso seria texto1. Si colocamos
Código :
contenedor.getChildAt(1).y = 50;
texto2 se mueve 50 pixeles hacia abajo. Si colocamos
Código :
contenedor.getChildAt(0).visible = false;
Nuestro texto texto1 desaparece. También hay otro método importante que es getChildByName(); Este método nos sirve para encontrar lo que hay dentro de un contenedor por medio del nombre. Si yo digo
for (var i:int = 0; i <= 4; i++) { this.getChildAt(i).visible = false; }
Como decía, este código nos desaparece nuestros 5 MovieClips. Pero hay un gran problema con esto. Es muy probable que tengamos muchos mas de 5 MovieClips en nuestra películas y este código, modificaría nada mas los primeros 5 objetos que se colocaron en escena. ¿Entonces como hacemos para solo modificar nuestras 5 formas sin tocar ni modificar los otros MovieClips que no queramos?
Para eso hacemos lo siguiente. Colocamos de nombre de instancia a cada forma, un nombre en secuencia. eje. forma_1, forma_2, forma_3, forma_4, forma_5. En un juego de disparos puede ser disparo_1, disparo_2 etc. Colocarles los nombres de instancia en secuencia es vital para poder asignar las propiedades que queremos.
Hecho esto colocaremos el siguiente código:
Código :
for (var i:int = 1; i <= 5; i++){ var referencia = this.getChildByName("forma_"+i); referencia.visible = false; }
Asi, ya desaparecimos nuestras 5 MovieClips que se llamaban forma_*. y con esto ya seria suficiente. Pero el codigo anterior tiene unas limitaciones. Los nombre de los movieClips no quedar ordenados alfabéticamente. Me explico. Como lo hicimos podría quedar asi
Aca vemos que los numeros de indice, no corresponden con el orden alfabético. Esto se debe a que el numero del indice, se determina en el momento de escribir el nombre de la instancia. En la mayoría de los casos eso no es un problema, pero si tenemos 60 MovieClips y necesitamos acceder al MovieClip con el nombre forma_45 y pensamos que esta en el indice 44, no tenemos la certeza que sea asi. Tambien podriamos encontrar un MovieClip por medio del nombre, pero segun adobe, es mas rapido acceder por medio del inidice, puesto que no tiene que hacer una búsqueda. En mi caso, yo necesitaba que todos los MovieClips estuvieran estrictamente ordenados. Entonces para eso hacemos lo siguiente.
Código :
var contenedor:Sprite = new Sprite(); this.addChild(contenedor); for (var i:int = 1; i <= 5; i++) { var referencia = this.getChildByName("forma_"+i); contenedor.addChild(referencia); } for (var e:int = 0; e <= contenedor.numChildren-1; e++) { contenedor.getChildAt(e).visible = false; }
En nuestro primer for, agregamos todos los elementos que tenia el escenario con el nombre forma_+ 1 + 2 + 3 + 4 + 5. Luego los agregamos al sprite que nos sirve de contenedor llamado contenedor. de esta manera ordenamos alfabéticamente los MovieClips, ademas asi, tenemos todo mas ordenado.
En el segundo for, cogemos todos los objetos que le metimos a nuestro contenedor y le décimos que no sean visibles.
Ya con esto podemos manipular todos los MovieClips que queramos de una manera elegante y con poco código.
¿no quedaria mejor si ponemos invisibles los elementos cuyo nombre empiece con "forma_" + un numero consecutivo directamente? y evitarnos meter dentro de otro elemento nuestros clips...
Código :
for (var i:int = 1; i <= 5; i++){ var referencia = this.getChildByName("forma_"+i); referencia.visible = false; }
gabynufe tienes razón, quedaría con menos código. Lo hice de esta manera, por que necesitaba que los nombres de los MovieClips, estuvieran ordenados alfabéticamente. Osea, que el nombre corresponda con el indice.
Cuando se tienen muchos MovieClip es muy posible que el orden del inicie sea forma_0, forma_5, forma_2, forma_1 etc. A veces eso no importa, pero aveces si, como en mi caso, que era de indispensable que estuviera ordenado alfabéticamente. Ademas tiene la ventaja que podríamos modificar todas nuestras formas solo modificando el contenedor, y esto no afectaría los demás MovieClips que no estén en el contenedor. Por:AXM
Whoaaa !! Tienen alguna recomendacion de referencia de AS3, vengo de AS2 y me ha costado Dios de Ayuda entender esto Por:fearlex_blog
Descarga te el PDF de adobe que esta en español y explica en detalle esto. Buscas el capitulo 12 "Programación de la Visualización" . Para que no te confundas has varias pruebas con los ejemplos que pone en el capitulo.
Solo te recomiendo que te olvides de como lo hace AS2 porque es totalmente diferente de AS3. una vez le cojas la caña, veras que es mas intuitivo. Por:AXM
Por favor, ¿alguien me puede ayudar con esto? Hice un menu circular con AS2, en cual tengo 6 movieClips que giran. Sobre cade uno hay un texto (home, contact etc). He dibujado un solo circulo, luego e colocado la istancias en el escenario atraves del codigo. El caso es que no se como referirme a cada uno para hacer que al presionarlos vayan a diferentes paginas del sitio web que lo tengo que realizar. Si alguien me ayuda, que lo haga en AS2, por fi', es urgente. Muchas gracias, aSim Por:aSim_blog
