La lista de visualización I

Hasta este momento hemos estando añadiendo instancias de símbolos (que son instancias de MovieClip) a la escena, sin preocuparnos demasiado de como se organizan dentro de ella.

Lo hemos hecho desde la interfaz de Flash, arrastrando símbolos desde la biblioteca, pero también desde el código, usando la función addChild()

De hecho, desde la interfaz de Flash, hemos hecho un uso bastante más avanzado de lo que se denomina la Lista de Visualización, porque hemos anidado unos clips de película dentro de otros; acordaos de la anidación de animaciones que hicimos para crear una pelota botando de un lado a otro de la pantalla.

En la segunda parte de este capítulo, vamos a ver como se hace eso desde el código. Pero para entender bien como funcionan las capas y las jerarquías de objetos en la lista de visualización de Flash, vamos a empezar por lo básico.

Continuar leyendo “La lista de visualización I”

Ejercicios eventos y funciones

Se proponen tres ejercicios para practicar la detección y manejo de eventos de ratón en botones creados con MovieClip. Los dos primeros son obligatorios, el tercero es para nota (no lo intentéis sin haber conseguido el segundo.).

Tendremos que utilizar funciones todo lo que podamos y también repasamos la creación de simbolos con estados y animaciones marcados con etiquetas.
Continuar leyendo “Ejercicios eventos y funciones”

Trabajar con texto con Flash y actionscript

Hasta ahora no hemos visto en detalle como funcionan los campos de texto en Flash, y como leer y escribir en ellos cuando son dinámicos. Pero para empezar a jugar con las herramientas que hemos estado aprendiendo nos van a hacer falta, así que aquí os dejo un par de videos para abrir el apetito.

En el primero de estos dos videos os cuento como se crean textos en la interfaz de flash.
En el segundo, como cambiar el contenido de un texto dinámico y como leer lo que el usuario ha introducido en un campo de introducción de texto

Continuar leyendo “Trabajar con texto con Flash y actionscript”

Ejemplos y ejercicios de bucles resueltos

Volver al Índice

He aquí las soluciones a los ejercicios planteados en el capítulo de bucles.

Importante: Leer código y entenderlo ayuda a aprender programación, pero no hay nada que ayude más que hacer los ejercicios por ti mismo/a, aunque cueste más trabajo.

  1. Escribir un bucle que muestre los números del 0 al 10 en la consola:
    	for (var contador:int = 0; contador < 11; contador++ ) {
    		trace(contador);
    	}
  2. Escribir un bucle que muestre los números impares del 0 a 50 en la consola
    Solución corta:

    	for (var i:int = 1; i < 50; i= i + 2 ) {
    		trace(i);
    	}

    Solución larga con condicional if:

    	
    	for (var i:int = 0; i < 50; i++ ) {
    		if (i/2 != Math.floor(i/2)) {
    			trace(i);
    		}
    	}

    La primera solución, obviamente, es más eficiente porque el bucle da la mitad de vueltas que en el segundo.

  3. Escribir un bucle que muestre los números del 50 al 70 en la consola
    	for (var i:int = 50; i < 71; i++ ) {
    		trace(i);
    	}
    	
  4. Escribir un bucle que coloque diez bolas en la escena en diagonal:

    Habiendo creado un símbolo que exportamos para as3 como la clase Pelota:

    	var pelotas:Array = [];
    	for (var i:int = 0; i < 10; i++ ) {
    		pelotas[i] = new Pelota();
    		pelotas[i].x = 20 + 30*i;
    		pelotas[i].y = 20 + 20*i;
    		addChild(pelotas[i]);
    	}
    	

    pelotasDiagonal
    Incluyo otra solución más eficiente, que puede que os líe un poco, pero que es la óptima en este caso, dado que en el ejercicio no se pide que se puedan modificar las propiedades de las pelotas una vez añadidas a la escena. En este caso no haría falta la creación de un array, que lo único que nos permite es poder acceder después de ejecutado el bucle a cada una de las instancias y cambiar, por ejemplo, sus coordenadas, su tamaño, etc. Como en este caso no es necesario, nos podemos ahorrar la memoria del Array; lo único que necesitamos es una variable (pelotaActual, por ejemplo) para poder referirnos a cada instancia dentro del bucle y colocarla en sus coordenadas y añadirla a la escena.

    Si os liais con esto, ignoradlo de momento:

    	var pelotaActual:MovieClip;
    	for (var i:int = 0; i < 10; i++ ) {
    		pelotaActual = new Pelota();
    		pelotaActual.x = 20 + 30*i;
    		pelotaActual.y = 20 + 20*i;
    		addChild(pelotaActual);
    	}
    	
  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:
    Necesitamos crear un símbolo con dos capas en su línea de tiempo parecido al siguiente:
    pelotasFotograma
    Después utilizaremos la técnica de seimpre para crear instancias desde el código (De nuevo, hemos exportado el símbolo para as3 como la clase Pelota:

    	var pelotas:Array = [];
    	for (var i:int = 0; i < 10; i++ ) {
    		pelotas[i] = new Pelota();
    		addChild(pelotas[i]);
    		pelotas[i].x = 20 + 30*i;
    		pelotas[i].y = 200;
    		pelotas[i].gotoAndStop(i+1);
    	}
    	

    Para pensar: Fijaos en que, en la línea siete, estamos usando la expresión i+1 para mandar cada pelota a su fotograma. ¿Por qué?

  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.

    [gigya src=”https://dl.dropboxusercontent.com/u/3646945/newbeForever/esne/buclesAnimacioness.swf” width=”550″ height=”200″]

    Os dejo el .fla para que lo miréis
    buclesAnimaciones.fla

  7. A continuación incluyo una solución para la práctica que propuse en clase:
    Mostrar 10 pelotas en pantalla, botando de un lado a otro (bajo el efecto de la gravedad) y rebotando en el suelo, las paredes y el techo.
    En el enunciado daba una serie de pistas para que lo pudiérais hacer más fácilmente, incluyo aquí las más relevantes:

    • Las pelotas deben tener asociadas, cada una, una velocidad distinta y una aceleración distinta (tanto en el eje x como en el eje y)
    • En este ejercicio, la aceleración en el eje y tendrá para todas las pelotas el mismo valor (porque pretendemos simular la gravedad).
    • Esta asociación de las velocidades y aceleraciones con las pelotas se consigue metiendo las instancias de la pelota, las velocidades y las aceleraciones de cada una de ellas en Arrays “sincronizados”.
      Bucles_ejercicios_practica

    Este es el efecto que se buscaba:
    [gigya src=”https://dl.dropboxusercontent.com/u/3646945/newbeForever/esne/pelotasGravedad.swf” width=”600″ height=”400″]
    Y el código, suponiendo que tengais un símbolo exportado para actionscript con el nombre de clase Pelota, es:

    		
    	// Declaramos constantes por comodidad
    	const NUM_PELOTAS:int = 10;
    	const ANCHO_PANTALLA:int = stage.stageWidth;
    	const ALTO_PANTALLA:int = stage.stageHeight;
    
    	//Declaramos los arrays necesarios
    	var pelotas:Array = [];
    	var velocidadX:Array = [];
    	var velocidadY:Array = [];
    	var aceleracionX:Array = [];
    	var aceleracionY:Array = [];
    
    	// Bucle para crear las 10 pelotas, colocarlas en la escena darle valores iniciales 
    	// a las velocidades y aceleraciones de cada una.
    	for (var i:int = 0 ; i < NUM_PELOTAS ; i++)   
    	{ 
    		// Creamos una instancia de Pelota y la añadimos al elemento i de la lista
    		pelotas[i] = new Pelota();
    		pelotas[i].x = Math.random()*ANCHO_PANTALLA;   
    		pelotas[i].y = Math.random()*ALTO_PANTALLA;   
    
    		// añadimos la pelota a la lista de visualizacion de la escena
    		addChild (pelotas[i]);
    		
    		// le asignamos sus velocidades y aceleraciones
    		velocidadX[i] = Math.random()*10 -5;
    		velocidadY[i] = Math.random()*10;
    		aceleracionX[i] = 0;
    		aceleracionY[i] = .5;
    		
    		// Como estamos utilizando el mismo contador para rellenar los elementos del todos
    		// los arrays, estos quedan sincronizados.
    		
    	}
    
    	// Función que se ssucribira al evento Event.ENTER_FRAME y se ejecutatá cada fotograma 
    	// para actualizar la la velocidad y la posición de las pelotas.
    	function enCadaFotograma(evento:Event):void {
    		
    		for (var j:int = 0 ; j < NUM_PELOTAS ; j++)  
    		{ 
    			//actualizamos la velocidad de cada pelota sumándole su aceleración 
    			velocidadX[j] = velocidadX[j] + aceleracionX [j]; 
    			velocidadY[j] = velocidadY[j] + aceleracionY [j]; 
    			//Actualizamos la posición de las pelotas
    			pelotas[j].x = pelotas[j].x + velocidadX[j]; 
    			pelotas[j].y = pelotas[j].y + velocidadY[j]; 
    			
    			//Comprobamos si choca con el suelo
    			if( pelotas[j].y >= ALTO_PANTALLA - pelotas[j].height/2 ) { 
    				velocidadY[j] = - velocidadY[j]; 
    				pelotas[j].y = ALTO_PANTALLA - pelotas[j].height/2; 
    			}
    			
    			//Comprobamos si choca con el techo
    			if( pelotas[j].y <=	 0 + pelotas[j].height/2) { 
    				velocidadY[j] = - velocidadY[j]; 
    				pelotas[j].y = 0 + pelotas[j].height/2; 
    			}
    			
    			//Comprobamos si choca con la pared derecha
    			if( pelotas[j].x >= ANCHO_PANTALLA - pelotas[j].width/2){ 
    				velocidadX[j] = - velocidadX[j]; 
    				pelotas[j].x = ANCHO_PANTALLA - pelotas[j].width/2; 
    			}
    			
    			//Comprobamos si choca con la pared derecha izquierda
    			if( pelotas[j].x <= 0 + pelotas[j].width/2){ 
    				velocidadX[j] = - velocidadX[j] ; 
    				pelotas[j].x =0 + pelotas[j].width/2; 
    			}
    		}
    	}
    	// Suscribimos la función enCadaFotograma() al evento Event.ENTER_FRAME 
    	// que dispara la escena (stage) en cada fotograma
    	stage.addEventListener(Event.ENTER_FRAME, enCadaFotograma);
    	

    Descargar el .fla

  8. Este es uno de los ejemplos explicados en clase.
    Crea 30 instancias de un símbolo de la biblioteca que ha sido asociado con una clase de actionscript (a través del menú propiedades al que se llega haciendo click con el botón derecho sobre el símbolo en la biblioteca) y las coloca en la escena en posiciones aleatorias.
    Para que funcione, teneis que haber creado previamente un símbolo en la biblioteca que contenga una animación a vuestro gusto. Además deberéis exportarlo para actionscript (Aquí se supone que lo habéis hecho con el nombre de clase: AnimCirculo). Esto se hace haciendo click con el botón de recho del ratón sobre el símbolo de la biblioteca y eligiendo propiedades.

    	// Declaramos e inicializamos el array que va a contener las instancias de 
    	// nuestra animación 
    	var enjambre:Array = []; 
    	// Declaramos otro array para almacenar las posiciones de destino 
    	// de cada instancia
    	var destinos:Array = [];
    	// Éste es el número de elementos que queremos que tenga nuestro array. Lo 
    	// usaremos para limitar el numero de veces que se repite el bucle que 
    	// rellena el array. 
    	
    	const NUM_ABEJAS:int = 30;
    	const ANCHO_PANTALLA:int = stage.stageWidth;
    	const ALTO_PANTALLA:int = stage.stageHeight;
    	
    	// Este es el bucle que rellena el array 
    	for (var i:int = 0 ; i < NUM_ABEJAS ; i++ ) 
    	{
    	   // rellenamos el elemento i del array con una nueva instancia AnimCirculo 
    	   enjambre[i] = new AnimCirculo(); 
    	   // Fijamos aleatoriamente las coordenadas de la nueva instancia 
    	   enjambre[i].x = Math.random() * ANCHO_PANTALLA;
    	   enjambre[i].y = Math.random() * ALTO_PANTALLA;
    	   // Y la añadimos a la lista de visualización de la escena. 
    	   addChild(enjambre[i]); 
    	   // Todas las instucciones anteriores se repiten tantas veces como hemos 
    	   // fijado en la constante NUM_ABEJAS. En cada repetición consecutiva  
    	   // el valor de i se aumentará en 1, luego enjambre[i] apuntará a un 
    	   // elemento distinto del array enjambre.
    	   // Ahora también rellenamos el array de posiciones de destino 
    	   // en cada paso del bucle
    	   destinos[i] = new Point( Math.random() * ANCHO_PANTALLA, 
    								Math.random() * ALTO_PANTALLA  );							
    	}
    	// Definimos una función que se ejecutará (ver más abajo) en cada frame 
    	// y que modifica la posición de cada instancia reduciendo la distancia 
    	// a su destino en una veinteava parte de la misma.
    	// (utilizamos para ello la ecuación de frenado) 
    	function enCadaFrame(evento:Event):void 
    	{
    		for (var j:int = 0 ; j < NUM_ABEJAS ; j++ ) 
    		{
    		    // Utilizamos la ecuación de frenado para calcular la nueva posición 
    		    // en cada fotograma, para cada instancia
    			enjambre[j].x = enjambre[j].x + (destinos[j].x - enjambre[j].x)/20;
    			enjambre[j].y = enjambre[j].y + (destinos[j].y - enjambre[j].y)/20;
    		}
    	}
    
    	// Por último suscribimos la función enCadaFrame() al evento que dispara la
    	// escena (stage) en cada fotograma
    	stage.addEventListener(Event.ENTER_FRAME, enCadaFrame);
    
    	

    y el resultado debería ser éste:
    [gigya src=”https://dl.dropboxusercontent.com/u/3646945/newbeForever/esne/enjambre01.swf” width=”550″ height=”400″]

Volver al Índice

Eventos de ratón y teclado

Los eventos son los que hacen cualquier programa interactivo funcionar. Sin ellos no hay interacción con el usuario, pero tampoco con el sistema operativo, o la red. El programación, sin ellos hay muy poco que hacer.

De hecho, os habréis fijado que aunque aún no hemos dedicado ningún capítulo a ellos, hemos estado usando eentos en casi todos nuestros ejemplos, bien para detectar el paso del tiempo (detectando cada vez que se pinta un fotograma), bien para detectar un click del ratón. Nigun programa se puede llamar interactivo sin ellos.

ActionScript posee un sistema de eventos similar al de javascript y otros lenguajes, y aunque hay algunos otros sistemas diferentes, si entendemos este, seremos capaces de entender todos los demás sin problema.

Así pues, presten atención, porque en este capítulo vamos a tratar con uno de los temas más importantes del curso.
Continuar leyendo “Eventos de ratón y teclado”