Bucles

Volver al ͍ndice

Es muy habitual realizar taréas repetitivas en nuestro código. Sin embargo, escribirlas línea a línea es tan ineficiente como tedioso, además de confuso y difícil de modificar sin cometer errores tipográfficos.
Para evitar este tedio y hacernos la vida mucho más fácil están los bucles.
Hay varios tipos de ellos, pero por simplicidad y porque son los más fáciles de entender y manejar, nos vamos a centrar en los bucles for.

El bucle for

Éste tipo de bucle ejecuta sus contenidos un número finito y definido de veces. Por ejemplo:

for (var i:int = 0; i < 3; i++) {
	trace("Hola!");
}

traza en la consola la cadena "Hola!" tres veces.

Hola!
Hola!
Hola!

Analicemos la sintáxis de este bulce en detalle antes de meternos en harina. La primera sentencia (línea 1), establece los parámetros que controlan la repetición del bucle y define una variable i como contador del bucle. Esta variable nos será muy util, como veremos, para realizar varias operaciones repetidas veces pero sobre diferentes objetos. En éste ejemplo sólo se utilizará para que el bucle pueda contar el número de veces que se ha repetido. Se define e inicializa a 0 en la primera sentencia entre paréntesis:

for ( var i:int = 0 ; ... ; ...) {

Y se incrementa en cada repetición del bucle tal y como se especifique en la tercera sentencia entre paréntesis:

for ( ... ; ... ; i++ ) {

Que, como a estas alturas ya sabréis, es lo mismo que escribir:

for ( ... ; ... ; i = i + 1 ) {

La sentencia entre paréntesis que aparece entre las dos anteriores es una condición que el bucle comprueba justo después de incrementar el contador y que, sólo si se cumple, permite que se ejecuten los comando en el interior de las llaves.

for ( ... ; i < 3 ; i = i + 1 ) {

Cuando esta condición deja de cumplirse el bucle no se repite más.

Así, en este ejemplo, i comienza teniendo el valor 0, que cumple la condición i < 3, por lo que la instrucción trace se ejecuta la primera vez. Aparecerá el primer "Hola!" en la consola
Acto seguido el bucle incrementa en 1 el valor de i (i++) y vuelve a comprobar si se cumple la condición i < 3. Como i = 1, 1 < 3 es verdadero y el código entre llaves se vuelve a ejecutar, dando lugar a un nuevo "Hola!".
De nuevo se vuelve a incremetar i en 1, de nuevo se vuelve a comprobar la condición, que de nuevo se cumple: 2 < 3, y aparece el tercer "Hola!" en la consola.
Una vez más se incrementa i. Ahora vale 3. Pero esta vez al comprobar la condición: 3 < 3, resulta ser falsa. El bucle se detiene y ya no nos saluda más.

Aunque esta forma de especificar cuantas veces se repite el bucle puede parecer un poco retorcida, fijáos en lo flexible que es. ¿Y si quisieramos contar desde 3 hasta 0, en lugar de desde 0 hasta 3?. No es que sea especialmente útil en este ejemplo, pero en otros casos podría llegar a serlo. Entonces modificaríamos ligeramente las expresiones entre paréntesis junto al for:

for (var i:int = 3; i &gt; 0; i--) {
	trace(&quot;Hola!&quot;);
}
// Notad que i-- es lo mismo que i = i - 1

No vais a notar ninguna diferencia en la consola, con respecto al anterior ejemplo, pero de hecho el bucle está contando al revés. Podéis comprobarlo si modificáis el código para que se muestre el valor i, además de "Hola!" en la consola.

Vamos a ver otro ejemplo de la flexibilidad del bucle for utilizando el ejemplo de las pelotas de la entrada sobre condicionales
Acordaos de que teníamos varias instancias de un símbolo tipo clip de película en la escena, nombradas pelota01, pelota02, …, pelota10:
condicionales 01a
Nos vamos a olvidar de los condicionales y vamos a utilizar en su lugar dos bucles, uno que coloca las pelotas pares y otro que recorre las impares, utilizando un incremento de 2 para el contador, en lugar de aumentarlo de uno en uno, cada vez que se repite el bucle

var instancias:Array = [pelota01, pelota02, pelota03, 
					 pelota04, pelota05, pelota06, 
					 pelota07, pelota08, pelota09, pelota10];

// Colocamos las pelotas con nombre acabado en número impar
// (Recordad que el primer elemento del bucle tiene indice 0)
for (var i:int = 0; i &lt; instancias.length ; i = i + 2) 
{
    instancias[i].x =  i*50 +30;
    instancias[i].y = 100;
}
// Y ahora las pelotas con nombre acabado en número impar
for (var j:int = 1; j &lt; instancias.length ; j = j + 2) 
{
    instancias[j].x =  j*50 +30;
    instancias[j].y = 100;
}

Si os fijais en las líneas marcadas notaréis dos cosas. Uno, los contadores se incrementan en dos unidades en cada vualta del bucle. Dos, en el primer bucle el contador es i y en el segundo es j. Esto se ha hecho así para evitar conflictos entre las variables. Recordad que una variable sólo se puede definir una vez en su ámbito (para nuestro ejemplo en su programa) y que si utilizáramos i en el segundo bucle provocaríamos un error. Se puede evitar el problema de otras formas, pero esta es la más sencilla:

Recordad:
Si definís dos o más bucles consecutivos en un mismo ámbito (programa o función) utilizad variables diferentes para sus contadores respectivos.

El resultado, en cualquier caso, sería este:
bucles_pelotasde2en2

Hay otra cosa más en la que fijarse: en estos dos bucles estamos utilizando los contadores para algo más que controlar la ejecución del bucle. Con ellos estamos seleccionando que elemento del array colocamos, y también los usamos para colocar cada uno de ellos en un lugar distinto de la pantalla, multiplicando por el número de píxeles que los queremos separar (i*50) y sumádoles un valor constante (30) para que empiecen acolocarse a partir de ese pixel.

Podéis ver más ejemplos de esto en la entrada Ejemplos arrays y bucles I

Sólo queda una última aclaración que hacer. Este tipo de bucle es útil cuando queremos realizar un monton de operaciones repetitivas de una sola vez. Su ejecución es tan rápida que no da tiempo a que se refresque la pantalla entre repetición y repetición, y definitivamente no es el tipo de bucle a utilizar si lo que queremos es realizar una animación. No importa el número de repeticiones; siempre se realizarán antes de que se pinte el siguiente fotograma

Para realizar animaciones se utiliza otro tipo muy distinto de bucle, tan distinto en forma filosofía y sintáxis que no se le suele incluir en la categoría de bucles. Ya hemos visto algun ejemplo de él en clase y veremos muchos más, porque se utiliza mucho. Es la suscripción al evento Event.ENTER_FRAME de una función, (en clase la hemos llamado casi siempre enCadaFotograma). Analizaremos en detalle esta técnica en otro apartado más adelante.

Ejercicios para practicar

  1. Escribir un bucle que muestre los números del 0 al 10 en la consola
  2. Escribir un bucle que muestre los números impares del 0 a 50 en la consola
  3. Escribir un bucle que muestre los números del 50 al 70 en la consola
  4. Escribir un bucle que coloque diez bolas en la escena en diagonal
  5. Crear un símbolo que contenga una pelota que en cada fotograma del 1 al 10 tenga dentro los números del 1 al 10.
    Añadir diez instancias del símbolo a la escena, pero cada uno mostrando un fotograma distinto
  6. Crear un símbolo que contenga 5 animaciones distintas en su línea de tiempo, de forma que cuando termine de reproducirse cada una de ellas, vuelva a empezar. Utilizar etiquetas para marcarlas. Si reproduzco alguna de las animaciones del símbolo con gotoAndPlay("animacion3") la animación 3 debe repetirse indefinidamente.
    Añadir 5 instancias de este símbolo a la escena, cada una reproduciendo indefinidamente cada una de las cinco animaciones definidas en la línea de tiempo de su símbolo.

Soluciones

Volver al ͍ndice

6 opiniones en “Bucles”

  1. Hola Oscar,
    Estoy practicando con esos ejercicios pero no me sale. Podrías poner las correcciones para poder entender mis errores por favor? gracias.

  2. Hola! Nos has dado el ejercicio 6 (práctica IIIB). Es igual al 100% que éste que está con soluciones? No he entendido bien el enunciado. Espero que me puedas aclarar. Gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *