Esta entrada pertenece a ActionScript 3 - Guía para Principiantes.
Diseño gráfico de nuestro pong
Antes de explicar el concepto de herencia, vamos a colocar, por fin, nuestro pong en la ventana Flash. Lo primero que necesitamos es una representación gráfica para él. Con la ventana Flash activa: menú Insertar -> Nuevo símbolo... En el diálogo que nos aparece, elegimos como nombre para el símbolo Pong. Y en el tipo, Clip de película. Puedes elegir el diseño que quieras. Aquí, el que he seguido yo:
1) Dibujamos un rectángulo con la Herramienta Rectángulo (R)
2) Con la herramienta de Tansformación Libre (Q), con Ctrl+Shitf pulsados, clickamos sobre la esquina inferior derecha del rectángulo y arrastramos hacia arriba, hasta conseguir la forma adecuada.
3) Con todo lo que acabamos de dibujar seleccionado, en la ventana Color (Shift + F9) uilizamos los siguientes valores:
Un último detalle importante que has de tener en cuenta, es que el gráfico ha de estar lo más centrado posible en el clip de película. Si te fijas, una pequeña cruz es la que marca este centro. Si tu pong no estuviera centrado, trasládalo de modo que su centro (que se marca cuándo tienes seleccionada la Heramienta de Transformación Libre (Q)), quede alineado con el del clip.
Enlazando la clase Pong con su representación gráfica
Nuestro objetivo es que la clase Pong que tenemos definida en el archivo Pong.as esté asociada a la representación gráfica que le hemos creado. Para ello debemos seguir dos pasos:
1) Especificar, en ActionScript, que la clase Pong tiene una representación gráfica en forma de clip de película (MovieClip). Y hacemos esto mediante la herencia de MovieClip en la clase Pong.
package mi.pong
{
import flash.display.MovieClip;
/**
* ...
* @author ASL
*/
public class Pong extends MovieClip
{
private var vy:int;
public function Pong()
{
trace("¡Objeto de la clase Pong creado!");
}
public function mover():void
{
// Vacío. Aún no sabemos cómo vamos a mover nuestro Pong
}
}
}
- public class Pong extends MovieClip: Aquí estamos especificando que la clase Pong hereda de la clase MovieClip de Flash. Es decir, que Pong, además de tener sus atributos y sus métodos propios, además también hereda todas las características MovieClip, entre ellos, la representación gráfica. MovieClip es la clase que Flash utiliza para las representaciones gráficas con línea temporla.
2) Indicar que el símbolo Pong que hemos creado en Flash está relacionado con la clase Pong del archivo Pong.as. Para ello, en la ventana Biblioteca, click derecho sobre el símbolo Pong -> Propiedades, y en caso de no estar extendido, pulsamos Avanzado. Ahí, selecionamos Exportar para ActionScript. En clase, la clase con la que queremos vincular el símbolo (y su ubicación en su respectivo paquete) "mi.pong.Pong", y en clase base, si no estuviera ya, "flash.display.MovieClip".
Tras estos dos pasos, cada vez que creemos un objeto de la clase Pong, este objeto tendrá asociado el símbolo Pong que creamos al inicio del capítulo.
Añadiendo el pong a la escena
Ahora cobra sentido aquel "extends MovieClip" que añadimos a la clase Main. El documento Flash es, en esencia, un clip de película, un MovieClip.Y, al igual que con el Pong, a este MovieClip podemos asociarle una clase ActionScript, en este caso, Main.
Por ser Main la clase que representa al MovieClip principal de nuestro archivo Flash, es él quién controla todo lo que sucede en la parte gráfica de la aplicación. Por eso debe ser en él en el que añadamos nuestro pong.
package
{
import flash.display.MovieClip;
import mi.pong.Pong;
/**
* ...
* @author ASL
*/
public class Main extends MovieClip
{
public function Main()
{
var miPong:Pong = new Pong();
addChild(miPong);
miPong.x = stage.stageWidth / 2;
miPong.y = stage.stageHeight / 2;
}
}
}
- addChild(miPong): añadimos a nuestra película miPong.
- miPong.x = stage.stageWidth / 2: "x" es un atributo heredado desde MovieClip. Indica la posición, en el eje de las x, del objeto dentro de la película. stage.stageWidth indica el ancho de la película. Lo dividimos entre 2 para centrar. Análogo para miPong.y.
Si ahora pruebas la película, verás a nuestro Pong, en el centro.
¿Cuál es la idea básica tras la herencia?
La herencia nos permite crear clases generales de las que poder heredar en clases más concretas. Por ejemplo, podríamos tener una clase padre Transporte, con atributos generales como "velocidad" o "precio" y unas clases heredades, más concretas, como Avión, Tren, Automóvil...
Para especificar que una clase hereda de otra utilizamos la palabra clave extends:
public class miClase extends ClasePadre
{
// Definición de clase
}
En capítulos posteriores revisaremos esta definición y todas sus aplicaciones. De momento, nos vale con saber que para poder asociar clases ActionScript con símbolos Flash necesitamos que éstas hereden de MovieClip.
Anterior | Índice | Siguiente |