Unidad 22. Ejercicio paso a paso: Crear una clase en ActionScript

Objetivo

Vamos a crear la siguiente animación Flash:

Ejercicio

  1. Abre el archivo bolas.fla que encontrarás en la carpeta ejercicios\bolas\.
  2. Vamos a exportar el símbolo de la bola para AS. En la biblioteca, haz clic derecho sobre el símbolo bola y elige Propiedades.
  3. Marca la opción Exportar para ActionScript, y en el nombre de la Clase asígnale ClaseBola.
  4. Vamos a añadir bolas con el botón btn_agregar_bolas. Las mostramos utilizando un contenedor. Escribe el siguiente código en el primer fotograma, en el panel Acciones:
    var miContenedor:Sprite=new Sprite;//Aquí mostraremos las bolas
    
    addChild(miContenedor); // Lo agregamos a  la escena
    
    
    
    btn_agregar_bola.addEventListener('click', agregarBola);
    
    function agregarBola(event):void {//Función que añade bolas
    
    	var bola:ClaseBola=new ClaseBola(); //Creamos un nuevo objeto ClaseBola
    
    	miContenedor.addChild(bola); //Y lo agregamos al contenedor
    
    }
    Puedes probar el código. Comprobarás que se agregan bolas, pero siempre en la esquina superior izquierda.
  5. Vamos a añadir funcionalidad a la clase de las bolas. En el menú Archivo, pulsa en Nuevo y elige Archivo de ActionScript. Pulsa Aceptar.
  6. En el archivo, escribe el siguiente código:
    package {
    
    	//Aquí importaremos lo que nos haga falta
    
      import flash.display.MovieClip;
    
    	public class ClaseBola extends flash.display.MovieClip {
    
    
    
    		//Aquí irá el código perteneciente a la clase
    
    	}
    
    }
    Observa que hemos dado a la clase el mismo nombre (ClaseBola) que indicamos al exportar el símbolo a AS. Además hemos indicado que la nueva clase extenderá (extends) a la clase MovieClip. Esto quiere decir que nuestra clase tendrá todos los métodos y propiedades de los MovieClip, además de los que nosotros creemos. Como emplearemos la clase MovieClip, debemos de importarla.
  7. Guarda el archivo como ClaseBola.as, en la misma carpeta que el archivo .fla. Es muy importante guardarlo con el nombre de la clase.
  8. Vamos a implementar el código de la clase. Escribe el siguiente código:
    package {
    
    	import flash.display.MovieClip;
    
    	import flash.geom.Rectangle;//Como usaremos un Rectangle, hay
    
    	                            //que importarlo
    
    	public class ClaseBola extends flash.display.MovieClip {
    
    		//PROPIEDADES
    
    		var angulo:Number;//Ángulo inicial, será aleatorio
    
    		private var direccionX:Number=1;//Cambiendo el signo, podremos
    
    		private var direccionY:Number=1;//invertir la dirección
    
    		private var limites:Rectangle;//El área en el que rebotan las pelotas
    
    		var velocidadMaxima:Number=45;//Máx. velocidad a la que podemos acelerar
    
    		public static var velocidadBase:Number=10;// Velocidad inicial
    
    		//MÉTODOS
    
    		public function ClaseBola(miFondo:MovieClip) {
    
    			//Método constructor. Se ejecutará con el new
    
    			limites=miFondo.getBounds(stage);//Tomamos las dimensiones del fondo
    
    			angulo=num_aleatorio(0,180);//Calcualsmo un ángulo aleatorio
    
    			angulo=Math.PI/180*angulo;//Y lo pasamos a radianes
    
    			this.y=limites.top+limites.height/2;//Calculamos la posciión inicial
    
    			this.x=limites.left+limites.width/2;//centrada en el fondo
    
    			//Y utilizamos el evento 'enterFrame' para mover la pelota
    
    			this.addEventListener('enterFrame', moverPelota);
    
    		}
    
    
    
    		public function moverPelota(event) {
    
    			//Impedimos que se pueda superar la velocidad máxima
    
    			if (velocidadBase>velocidadMaxima) {
    
    				velocidadBase=velocidadMaxima;
    
    			}
    
    
    
    			var futuraPosicion:Number;
    
    			//Calculamos la posición Y futura. Y si se sale por arriba o aabajo, 
    
    			//lo invetimos
    
    			futuraPosicion=this.y+Math.sin(angulo)*direccionY*velocidadBase;
    
    			if (futuraPosicion<limites.top+20||futuraPosicion>limites.bottom-20) {
    
    				direccionY*=-1;
    
    			}
    
    			//Calculamos la posición Y futura. Y si se sale por arriba o aabajo, 
    
    			//lo invetimos
    
    			futuraPosicion=this.x+Math.cos(angulo)*direccionX*velocidadBase;
    
    			if (futuraPosicion<limites.left+20||futuraPosicion>limites.right-20) {
    
    				direccionX*=-1;
    
    			}
    
    
    
    			//Movemos la pelota
    
    			this.y+=Math.sin(angulo)*velocidadBase*direccionY;
    
    			this.x+=Math.cos(angulo)*velocidadBase*direccionX;
    
    		}
    
    		function num_aleatorio(min:Number ,max:Number):Number {
    
    			return (Math.floor(Math.random()*(max-min+1))+min);
    
    		}
    
    	}
    
    }
    Hemos empleado tres métodos: el llamado método constructor, que para que sea tal debe de tener el mismo nombre que la clase, se encarga de inciar las propiedades: calcula de forma aleatoria el ángulo, y se encarga de asignar el movimiento en el evento enterFrame.
    El segundo método, moverPelota, básicamente se encarga de calcular si al mover la pelota, esta saldrá de los límites horizontales o verticales, y de ser así, invierte la dirección en ese eje.
    El último método ya lo conocemos. num_aleatorio se encarga de calcular un número aleatorio dentro de un rango.
  9. Guarda el archivo antes de intentar probarlo.
  10. Tenemos que realizar un cambio. Volvemos a la película, al código del fotograma 1. Cambia el código que crea las bolas (var bola:ClaseBola=new ClaseBola();) por var bola:ClaseBola=new ClaseBola(fondo); ya que en la definición de la calse hemos especificado que al crear el objeto le pasaremos como argumento el MovieClip que ahce de fondo, para que tome sus dimensiones. fondo es el nombre de la instancia del símbolo.
  11. Pruébalos pulsando Ctrl + Intro. Observa como puedes añadir bolas, y rebotan por las paredes.
  12. Ahora vamos a eliminar las bolas. Crea el siguiente método en la clase ClaseBola:
    		public function borrar() {
    
    			//Antes de borrar, quitamos sus eventos
    
    			this.removeEventListener('enterFrame', moverPelota);
    
    			//reproducimos la animación 
    
    			this.gotoAndPlay(2);
    
    			//al finalizar la animación, lanzará el evento 'borrame'
    
    		}
    Lo que hace este método es quitar el evento enterFrame, ya que es muy recomendable quitar sus eventos antes de eliminar un elemento. Después, va al segundo fotograma de la bola, lo que inicia una animación que la hace desaparecer. Cuando llegue al último fotograma, lanzará el evento 'borrame', porque así está programado en el símbolo bola.
  13. Ahora, sólo tenemos que llamar a este método al pulsar el botón btn_quitar_bola. Lo haremos sobre la última bola añadida al contenedor. En la película, en la capa Acciones escribe el código:
    btn_quitar_bola.addEventListener('click', quitarBola);
    
    function quitarBola(event):void {
    
    	if (miContenedor.numChildren) { //Si hay bolas quitamos una
    
    	    //Convertimos el último elemento en un objeto ClasBola y llamamos a su
    
    		//método borrar()
    
    		ClaseBola(miContenedor.getChildAt(miContenedor.numChildren-1)).borrar();
    
    	}
    
    }
    Observa que empleamos ClaseBola(objeto) para convertir un objeto genérico a nuestra clase y que pueda utilizar sus métodos.
  14. Tenemos que estar a la escucha del evento borrame, y borrar el elemento que los produzca. Escribe el siguiente código:
    addEventListener('borrame', borrarBola); //Cuando se produzca 'borrame'
    
    function borrarBola(e:Event):void { //Eliminamos el objeto que lo produzca
    
    	miContenedor.removeChild(ClaseBola(e.target));
    
    }
  15. Ahora, añadiremos el código de los botones que nos permiten acelerar y decelerar las bolas:
    btn_aumentar_velocidad.addEventListener('click', aumentarVelocidad);
    
    function aumentarVelocidad(event):void {
    
    	ClaseBola.velocidadBase*=1.1; //Aumentamos la velocidad un 10%
    
    }
    
    
    
    btn_reducir_velocidad.addEventListener('click', reducirVelocidad);
    
    function reducirVelocidad(event):void {
    
    	ClaseBola.velocidadBase*=0.9; // Reducimos la velocidad un 10%
    
    }
    Al crear la clase, hemos declarado la propiedad velocidadBase como public static var velocidadBase:Number=10;. Declararla como public indica que podemos acceder a ella. En cambio, declararla como private limita su uso a sólo dentro de la clase, no podemos acceder a ella poniendo objeto.propiedad. Normalmente las propiedades son independientes para cada objeto, salvo si, como en este caso, la declaramos como static. Esto hace que si la cambiamos, cambie para todos los objetos creados de la clase, y que podamos utilizarla directamente con en el nombre de la clase, sin tener que crear un objeto específico.
  16. Guarda los archivos y pruébalo.

   Inicio