Loop en AS3. Utilización de For y Array.
Wednesday, 27. January 2010
En el artículo anterior vimos cómo utilizar el loop For para evitar repetir innecesariamente código y acciones en la programación de una aplicación con ActionScript3. Sin embargo, muchas veces podemos potenciar su utilización cuando lo utilizamos en conjunto con un Array, y de esta forma podemos automatizar mucho más la ejecución de nuestra aplicación. En primer lugar trataremos por encima el array y algunas propiedades esenciales, para ver cómo utilizar esta combinación. Después desarrollaremos tres ejemplos de cómo utilizar esta combinación en distintas utilidades.
Array y for
Cuando nos referimos a un Array (también conocido como matriz o arreglo), hablamos de una ‘variable’ que contiene muchos campos en su interior, cada una con un dato diferente. Utilizando un array indexado (que cada campo se identifica con un número desde 0 hasta el ultimo dato) podemos utilizar el loop for para recorrer su contenido (ejemplo 1) o para llenarlo (ejemplo 2), e incluso realizar acciones a cada elemento de una forma muy sencilla o hasta para crear objetos (ejemplo 3). Si a cada elemento nos referimos de la forma nombreArray[0], nombreArray[1], nombreArray[2]… etc., en un loop, utilizando ‘i’ como iterador, podemos referirnos a cada elemento como nombreArray[i]. Desarrollemos el primer ejemplo, muy sencillo para aclarar un poco:
Ejemplo No. 1: Recorrer un Array
Tenemos un array que contiene 5 nombres de personas diferentes. Y queremos que se muestren estos 5 nombres. Podemos utilizar un Loop For al cual le indicaremos que repita las acciones tantas veces como campos haya en el Array. Para para saber cuántos son, usamos la propiedad Array.length. En vez de realizar un ‘trace’ a cada uno, podemos hacerlo de la siguiente forma:
var personas:Array=new Array("Carlos","Pedro","Diego","Braulio","César");
for(var i = 0; i < personas.length; i++){
trace(i+". Nombre: "+personas[i]);
}
De esta forma tan sencilla, el loop ira recoriendo el Array 'personas' y cuando 'i' sea igual a 0, imprimirá el nombre que se encuentra en la posición 0, cuando sea 1, el nombre de la posición 1, y así continuará hata el final del array. teniendo como respuesta en el panel de salida:
0. Nombre: Carlos
1. Nombre: Pedro
2. Nombre: Diego
3. Nombre: Braulio
4. Nombre: César
La clave está en referirse a cada elemento del array como personas[i], ya que ‘i’ irá cambiando en cada repetición del código. Este mismo ejemplo puede ser usado para obtener las propiedades de objetos de un array, para modificarlas, o cualquier acción que se necesite repetir tantas veces como objetos haya dentro del mismo. Recordemos dos cosas: En primer lugar, que los array siempre empiezan a contar desde 0, y es un error muy común al empezar olvidarlo. En segundo lugar, que las posiciones de un array son casi infinitas, y podríamos estar hablando de un array que contenga 1000 datos, con lo que sería mucho más significativo lo que estamos haciendo.
Ejemplo No. 2: Llenar un Array
Así como podemos consultar el contenido de un array, de la misma forma podemos dar contenido al mismo. Imaginemos que queremos crear una lista de 1000 números aleatorios entre 0 y 50. Entonces definimos el array, y con un loop lo llenamos de contenido de la siguiente forma:
var numerosAleatorios:Array=new Array();
for(var i = 0;i < 1000; i++){
numerosAleatorios[i]=Math.round(Math.random()*50);
}
trace (numerosAleatorios);
En el panel de salida podremos ver cómo hemos creado una lista de 1000 números aleatorios con sólo 4 líneas de código, y esto en menos de 1 segundo de ejecución. Incluso podríamos crear 100000. de esta forma podemos llenar de contenido un array con una utilidad infinita. La clave está en que hacemos referencia a cada elemento del Array como numerosAleatorios[i], y así, a medida que 'i' cambia en cada repetición, lo almacenamos en un elemento distinto del Array.
Ejemplo No. 3: Crear objetos con un Array
Con un loop for podemos crear una cantidad importante de objetos. Pero cuando creamos objetos, muchas veces queremos seguirnos refiriendo a ellos para modificar sus propiedades y características. Para obtener esta utilidad, podemos hacerlo a través de un Array. Vamos a crear 15 campos de texto estático, a ponerles un texto que las identifique y a añadirlas al escenario de forma organizada en una cuantas líneas:
var cajasTexto:Array=new Array();
for(var i = 0;i < 15; i++){
cajasTexto[i]=new TextField();
cajasTexto[i].text="Caja de Texto "+(i+1);
cajasTexto[i].x=200;
cajasTexto[i].y=i*25;
addChild(cajasTexto[i]);
}
Si copias éste código, y lo pegas en el panel de acciones de Flash, y pruebas la película, puedes ver cómo en un instante se crean 15 cajas de texto organizadas en una columna, cada una con el texto que la identifica, en tan solo un instante. Por lo tanto, utilizando el Loop For y un Array, podemos crear, manipular, modificar y utilizar objetos de esta sencilla forma, sin tener mayor dificultad, pero sí obteniendo una gran utilidad.
FIN
Es todo por ahora. Espero que estos artículos sean de utilidad a aquellos que se inician en el aprendizaje de éste lenguaje de programación para el desarrollo de aplicaciones y animaciones tanto para Flash cómo para Flex y que de esta forma resulte más fácil aprenderlo y manejarlo. Es por esto que trato de ser bastante descriptivo y claro, y utilizo ejemplo sencillos. En algunas ocasiones me extiendo bastante, pero de esta forma estoy seguro de que los temas pueden ser más claros y útiles. No olviden que cualquier dificultad, problema, sugerencia, pregunta, inquietud y demás se pueden expresar en el mismo sistema de comentarios de éste blog.
Saludos.
Samuel Jiménez. EsK.
annirami Says:
Hola,me gusto mucho tu explicación del for con los Array. Mi pregunta es ésta: En el ejemplo 1, con el trace, en el panel de salida se ponen todos los nombres. Pero cuando pongo un texto dinámico en el escenario llamado: texto, y dentro del for pongo éste código:
texto.text= i+”.- Nombre: “+personas[i];
en el escenario solo se visualiza el ultimo nombre: Isabel
Te agradecería mucho que me explicaras porque no funciona igual como con el trace…
saludos :]
eskombro Says:
Hola. Gracias por tu comentario.
Lo que sucede es que cada vez que estás diciendo texto.text=”loquesea” lo que estás haceindo es reemplazar el texto en el campo de texto. No sé si soy claro, pero lo que haces al modificar el text.text es decirle a Flash “Hazme un favor. Ve al campo de texto que se llama ‘texto’ y borrame lo que está ahí, y ponme este texto que te voy a dar”. Por esta razón, en cada repetición del loop estás eliminando el texto anterior. La solución es mucho más esencilla de lo que te imaginas. En vez de poner:
texto.text= i+”.- Nombre: “+personas[i];pones
texto.text+= i+”.- Nombre: “+personas[i];Añadiendo el + lo que haces es decirle “Ve al campo de texto y añade este texto a lo que esté ahí”.
En realidad la forma correcta de hacerlo sería usando TextField.appendText(“el texto que quieres agregar”);
texto.appendText(i+”.- Nombre: “+personas[i]);Bueno, perdona la explicación tan folclórica, pero creo que es una buena forma de ser claro.
Saludos. Si no te funciona o tienes otra duda, solo escribes.
annirami Says:
Hola, gracias por tu pronta respuesta y por haberme sacado de esta duda, si te entendi bien…de los dos como dices la forma correta es con el appendText, ahora que lo he estado probando. Ahora voy a buscar la teoria del TextField.appendText para entender mucho mejor.
saludos y Gracias…
eskombro Says:
Mira el ultimo artículo:
TextField en AS3. Creación y utilización de campos de texto en ActionScript 3. Parte I
El TextField es lo que empezamos a trabajar ahora.
Saludos
annirami Says:
Hola que tal…como estas. Quería preguntar si para realizar un buscador, el array tiene que ver en el tema?(supongo que a parte de otros codigos). Es que estoy investigando como hacer un buscador…que sea algo simple, sin conexion a base de datos ni nada, algo sencillo primero, y no sé si estoy por el camino correcto…
Saludos y Gracias :]
eskombro Says:
Y ¿qué es lo que va a buscar el buscador? ¿y en donde lo va a buscar sino en bases de datos, donde buscará?
annirami Says:
Hola, buscando temas sobre el asunto, encontré un ejemplo, que busca sobre archivos xml, pones el texto a buscar, aprietas el boton, y te sale el listado en el datagrid…, no se si al buscar por base de datos sería un código dificil de entender, ya que creo también tendría que a parte de utilizar base de datos:mysql también php en vez de xml, por lo que leí de otro ejemplo más, que utiliza ambos.
Saludos y Gracias :]
eskombro Says:
Perfecto. Pues si quisieras buscar en una base de datos tendrías que usar directamente PHP, y al tener los resultados enviarselos a Flash, pues flash no se entiende con la base de datos. En el XML si puedes ir leyendo. Para buscar dentro de un elemento si puedes usar el For, pero preferiblemente el “For each”.
for each(var dato:String in miXML.datos){trace(dato);
}
annirami Says:
Gracias por tu respuesta, trataré de aplicarlo. Aunque hasta ahora no entienda muy bien al for each….
saludos [:
juan Says:
hola amigos
en este momento estoy buscando el código correcto para que cuando yo le de click a un botón me saque del array una fotografía y me ponga otra si que quede la anterior en stage.
muchas gracias
juan
Elkin Siabato Says:
Te doy las gracias a través de mi blog.
http://graciasinternet.blogspot.com/2011/01/recorrer-un-array-en-as3.html
ceaped Says:
Hola para todos
Queria dar un aporte para complementar la lista.
Sí desean que la lista quede en una lista vertical solo agergan “\n”
Así quedría el código:
var personas:Array=new Array(“Carlos”,”Pedro”,”Diego”,”Braulio”,”César”);
for (var i = 0; i < personas.length; i++) {
lista_txt.appendText(i+". Nombre: "+ personas[i] + "\n");
}
Nota: les recuerdo que deben crear una caja de texto dinámica con el nombre "lista_txt"
Saludos
YYY aca viene mi pregunta:
Como hago 10 botones con Array y for? que cada botón me naveguen a un fotograma distinto.
Me parece algo muy util pues con menus muy largos sería de gran utilidad
Saludos y gracias por su ayuda