Usando clases (class) y objetos en ActionScript 3

20 de abril de 2011

Libro electrónico gratis:<br>Homero La Odisea
Libro electrónico gratis:
Homero
La Odisea
Libro electrónico gratis:<br>Jenofonte La expedicion de los diez mil
Libro electrónico gratis:
Jenofonte
La expedicion de los diez mil
Libro electrónico gratis:<br>Miguel de Unamuno  El espejo de la muerte y otros relatos novelescos
Libro electrónico gratis:
Miguel de Unamuno
El espejo de la muerte y otros relatos novelescos

Una analogía facilita entender las clases (class) y los objetos en ActionScript 3:

El uso de las clases es uno de los pilares para la programación orientada a objetos en ActionScript 3.

Créanlo o no, a largo plazo el uso de clases (class) y objetos facilitará y disminuirá el trabajo para diseñadores y programadores en ActionScript 3.

El uso de clases y objetos permitirá reutilizar con mayor facilidad el código de ActionScript 3.

Hay que tener en cuenta que si bien en algunos proyectos el uso de clases y objetos es la mejor solución, en otros no será necesario utilizarlo. En algunos proyectos bastará utilizar un humilde motion tween para hacer el trabajo.

Para trabajar con clases se necesita:

El archivo .fla es el archivo fuente que permitirá generar y publicar archivos .swf. (El archivo .swf es la animación flash en sí, es el archivo que se publica en la página de internet para su distribución)

El archivo .as almacenará el código de ActionScript 3 que permitirá crear la clase.

Para crear una clase se debe utilizar esta estructura:

package 
// palabra obligatoria para crear clases
{
// se abren corchetes

	public class mi_primera_clase 
	// define el nombre de la clase
	{
	// se abren corchetes para escribir el codigo de la clase
	
		
	// en esta seccion se escribe el codigo de la clase	
	// se escribe lo que va a hacer 
	
	}
	// se cierran corchetes para escribir el codigo de la clase
    
}
// se cierran corchetes del package

En el siguiente ejemplo se utilizan dos archivos:

El archivo "mi_primera_clase.as" almacena el código ActionScript 3 que permitirá crear la clase.

"mi_primera_clase.fla" es el archivo fuente que permitirá generar y publicar el archivo .swf.

Este es el contenido del archivo "mi_primera_clase.as". Este código crea una clase que dibuja un círculo en el escenario:

package 
{

import flash.display.MovieClip;
// importa las propiedades, eventos y métodos necesarios para usar símbolos del tipo MovieClip

import flash.display.Graphics;
// importa las propiedades, eventos y métodos necesarios para dibujar 

	public class mi_primera_clase extends MovieClip
	// define el nombre de la clase
	// IMPORTANTE: el nombre de la clase debe coincidir con el nombre del archivo
	// En este caso el nombre del archivo es: mi_primera_clase.as  y
	// por lo tanto el nombre de la case DEBE SER: mi_primera_clase
	// esta clase extenderá / ampliará las funcionalidades innatas de un MovieClip
	{
		
		function mi_primera_clase()
		// crea una función para dibujar un circulo
		{
			
			var circulo:MovieClip = new MovieClip();
			// creamos un nuevo movieclip
			
			circulo.graphics.beginFill(0xff0000);
			// define el color de relleno
			
			circulo.graphics.lineStyle(1, 0xff0000);
			// define el ancho y el color del contorno
			
			circulo.graphics.drawCircle(250, 150, 100);
			// dibuja el circulo
			
			circulo.graphics.endFill();
			// rellena de color la figura creada
			
			
			addChild(circulo);
			// añade el circulo creado al escenario

		}
		

	
	}
    
}

¡Es así como se crea una clase!

IMPORTANTE: el nombre de la clase DEBE SER IGUAL AL NOMBRE DEL ARCHIVO .AS. En este caso el nombre del archivo es "mi_primera_clase.as" y por lo tanto el nombre de la case DEBE SER "mi_primera_clase"

Ahora, ¿cómo utilizar esta clase?

Para usar la clase se necesita un archivo .fla. En este ejemplo el archivo fla se llamara: "mi_primera_clase.fla"

El nombre del archivo .fla NO NECESARIAMENTE debe coincidir con el nombre de nuestro archivo .as. En este caso los nombres coinciden para fines ilustrativos.

En este ejemplo el archivo "mi_primera_clase.fla" y el archivo "mi_primera_clase.as" DEBEN DE ESTAR EN EL MISMO DIRECTORIO, EN LA MISMA CARPETA.

archivos .fla  y  .as en el mismo directorio

Para utilizar / importar la clase en el archivo "mi_primera_clase.fla" debemos modificar la CLASE DEL DOCUMENTO (DOCUMENT CLASS).

Para ello se debe abrir la ventana de propiedades de la película. Para abrir la ventana de propiedades hacemos click en el escenario y luego en VENTANA (WINDOW) y luego en PROPIEDADES (PROPERTIES).

abriendo la ventana de propiedades

La ventana de propiedades es utilizada por múltiples elementos en flash: por la línea de tiempo, el escenario, los símbolos, etc. Es importante hacer click en el escenario y luego abrir la ventana de propiedades para poder modificar la CLASE DEL DOCUMENTO (DOCUMENT CLASS).

En Flash CS5 la interfaz se modificó (para mal a mi parecer) y la opción de la CLASE DEL DOCUMENTO (DOCUMENT CLASS) está escondida / agrupada en la opción PUBLICAR (PUBLISH).

En ocasiones hay que Hacer click en PUBLICAR (PUBLISH) para desplegar la opción para modificar la CLASE DEL DOCUMENTO (DOCUMENT CLASS).

Opcion Publish / Publicar

En el campo CLASE DEL DOCUMENTO (DOCUMENT CLASS) se debe escribir el nombre del archivo .AS que almacena nuestra clase, en este caso: "mi_primera_clase" (SIN LA EXTENSION .AS)

Definiendo CLASE DEL DOCUMENTO (DOCUMENT CLASS)

Nuevamente insisto porque es muy importante: El nombre del archivo .AS DEBE SER IGUAL AL NOMBRE DE LA CLASE. En este caso el nombre del archivo es "mi_primera_clase.as" y por lo tanto el nombre de la case DEBE SER "mi_primera_clase".

¡Listo!

El siguiente paso es publicar / generar el archivo .swf y por arte de magia aparecerá un círculo rojo dibujado. Se ha creado un círculo rojo usando una clase.

Ahora explicaré línea por línea el código del archivo "mi_primera_clase.as":

package

Es la palabra predefinida para crear clases

import flash.display.MovieClip;

Importa las propiedades, eventos y métodos necesarios para usar símbolos del tipo MovieClip.

No se trata de re-inventar la rueda. Muchas veces se pueden utilizar las propiedades, eventos y métodos pre-definidos en flash. Para eso se importan otras clases ya existentes.

import flash.display.Graphics;

Importa las propiedades, eventos y métodos necesarios para dibujar.

No se trata de re-inventar la rueda. Muchas veces se pueden utilizar las propiedades, eventos y métodos pre-definidos en flash. Para eso se importan otras clases.

public class mi_primera_clase extends MovieClip

Define el nombre de la clase.

IMPORTANTE: el nombre de la clase DEBE SER IGUAL AL NOMBRE DEL ARCHIVO .AS. En este caso el nombre del archivo es "mi_primera_clase.as" y por lo tanto el nombre de la case DEBE SER "mi_primera_clase"

Esta clase extenderá / ampliará las funcionalidades innatas de un MovieClip, También se puede crear una clase que extiende o amplíe cualquiera de los elementos / objetos disponibles en flash... o cualquiera de los objetos que sean creados.

function mi_primera_clase()

Se crea una función para, en este caso, dibujar un círculo.

MUY IMPORTANTE: si el nombre de la clase COINCIDE con el nombre de la función, LA FUNCIÓN SE EJECUTA AUTOMATICAMENTE.

En este caso el nombre de la clase "mi_primera_clase" coincide con el nombre de la función "mi_primera_clase" y por lo tanto la función se ejecuta automáticamente.

También es posible ejecutar la función a petición.

var circulo:MovieClip = new MovieClip();

Se crea un nuevo movieclip con el nombre círculo.

El círculo creado será un símbolo del tipo movieclip. Con ello heredará automáticamente todas las propiedades, métodos y eventos de un movieclip.

circulo.graphics.beginFill(0xff0000);

En nuestro recién creado movieclip comenzaremos a dibujar.

Para ello utilizamos las funciones de la clase graphics.

La función beginFill() nos permite definir un color de relleno.

En este caso utilizamos el parámetro 0xff000 para indicar que nuestro círculo será rojo (se usa la notación 0x-ROJO-VERDE-AZUL con valores hexadecimales)

circulo.graphics.drawCircle(250, 150, 100);

Continuamos utilizando las funciones de la clase graphics.

Con drawCircle() se dibuja el círculo.

Los parámetros que utiliza drawCircle() son: (posición del punto medio del círculo en el plano de x, posición del punto medio del círculo en el plano de y, radio del círculo)

drawCircle(250, 150, 100) dibuja un círculo con estas características:

circulo.graphics.endFill();

Continuamos utilizando las funciones de la clase graphics.

endFill()

rellena de color la figura creada. endFill es complementario a beginFill()

addChild(circulo);

Añade al escenario el círculo creado.

 

Bueno... ¿Para qué tanta complicación para dibujar un círculo? ¿No es más fácil dibujar un círculo con las herramientas de dibujo de flash?

Usar clases facilitará y disminuirá el trabajo para diseñadores y programadores en ActionScript 3.

El uso de clases y objetos permitirá reutilizar con mayor facilidad el código de ActionScript 3.

En el siguiente ejemplo se creará:

Lo interesante es que la clase para dibujar círculos se podrá utilizar en otro proyecto para cumplir la misma función...

Lo interesante es que la clase para mover esos círculos se podrá utilizar en otro proyecto para cumplir la misma función...

Lo interesante es que la clase para difuminar esos círculos se podrá utilizar en otro proyecto para cumplir la misma función...

El siguiente ejemplo utiliza los archivos:

avanzada.fla

es el archivo fuente que permitirá generar y publicar archivos .swf.

avanzada.as

La CLASE DEL DOCUMENTO (DOCUMENT CLASS). En este caso se limita a importar las clases.

circulo.as

El archivo que almacena el código ActionScript 3 que crea una clase para dibujar círculos con diferentes propiedades: ancho, posición, color

difuminar.as

El archivo que almacena el código ActionScript 3 que crea una clase para aplicar un efecto de difuminación a los círculos

mover.as

El archivo que almacena el código ActionScript 3 que crea una clase para mover esos círculos

Todos los archivos podrían almacenarse en el mismo directorio / carpeta. Para fines de organización se recomienda crear carpetas / directorios donde almacenar clases similares o las clases usadas en un proyecto.

En este ejemplo se creó la carpeta / directorio "avanzada" para almacenar los archivos:

Organizando clases en directorios ActionScript 3 AS3

Dentro de la carpeta / directorio "avanzada" se creó la carpeta / directorio "pek" para almacenar las clases a utilizar.

El nombre de la carpeta / directorio "pek" es arbitrario, puede elegirse cualquier nombre.

En la carpeta / directorio "pek" se han almacenado los archivos:

Organizando clases en directorios ActionScript 3 AS3

El contenido del archivo "avanzada.as" es:

package {

import flash.display.MovieClip;
// importa las propiedades, eventos y metodos necesarios para usar simbolos del tipo MovieClip

import pek.mover;
// importa el archivo "mover.as" (y por ende la clase "mover") contenido en la carpeta / directorio "pek"

import pek.circulo;
// importa el archivo "circulo.as" (y por ende la clase "circulo") contenido en la carpeta / directorio "pek"

import pek.difuminar;
// importa el archivo "difuminar.as" (y por ende la clase "difuminar") contenido en la carpeta / directorio "pek"

	public class avanzada extends MovieClip
	// define el nombre de la clase
	{


	
	}
    
}

El contenido del archivo "circulo.as" es:

package pek{
//IMPORTANTE: después de package SE DEBE ESCRIBIR el nombre del directorio / carpeta donde se almacena este archivo
// en este caso el archivo se almacena en la carpeta / directorio "pek"

import flash.display.MovieClip;
// importa las propiedades, eventos y metodos necesarios para usar simbolos del tipo MovieClip

import flash.display.Graphics;
// importa las propiedades, eventos y metodos necesarios para dibujar 


	public class circulo extends MovieClip
	// define el nombre de la clase
	// esta clase extenderá / ampliará las funcionalidades innatas de un MovieClip
	{

	
	var velocidad:int;
	// crea una variable para almacenar la velocidad en la que se movera el circulo
	
		public function circulo(color, xpos, ypos, ancho, velocidad)
		// crea una funcion para dibujar un circulo
		// cada circulo podra tener un color, posición en x, posicion en y, ancho, nombre y velocidad diferente
		// el parametro color almacenará el color del círculo
		// el parametro xpos almacenará la posición del círculo en el plano de x 
		// el parametro ypos almacenará la posición del círculo en el plano de y 		
		// el parametro ancho almacenará el ancho(radio) del circulodel círculo
		// el parametro velocidad almacenará la velocidad con la que se moverá el círculo. 
		{


			var circulo:MovieClip = new MovieClip();
			// crea un nuevo movieclip
			// dentro de ese movieclip se dibujara un circulo
			
			circulo.graphics.beginFill(color);
			// define el color de relleno
			
			circulo.graphics.drawCircle(xpos, ypos, ancho);
			// dibuja el circulo
			
			circulo.graphics.endFill();
			// rellena de color la figura creada
			
			
			this.addChild(circulo);
			// añade el círculo creado al escenario
			
			
			this.velocidad = velocidad;
			// define la velocidad del círculo

		}
	}
}

El contenido del archivo "mover.as" es:

package pek{
//IMPORTANTE: después de package SE DEBE ESCRIBIR el nombre del directorio / carpeta donde se almacena este archivo
// en este caso el archivo se almacena en la carpeta / directorio "pek"

import flash.display.MovieClip;
// importa las propiedades, eventos y métodos necesarios para usar símbolos del tipo MovieClip 

import flash.events.*;
// importa las propiedades, eventos y métodos necesarios para trabajar con eventos como enterframe   y los mouse events


	public class mover extends MovieClip
	// define el nombre de la clase
	// esta clase extenderá / ampliará las funcionalidades innatas de un MovieClip
	{
	
		public function mover(destino)
		// crea una función para comenzar a mover el círculo
		// el parámetro destino almacena el nombre del círculo que queremos mover
		{
					
			destino.addEventListener(Event.ENTER_FRAME,mueve);
			// agrega al círculo elegido un EventListener
			// en este caso se agrega el evento ENTER_FRAME
			// cada que ocurra un ENTER_FRAME a nuestro circulo se le aplicara la función mueve
			// (más abajo se define lo que hará la función mueve)
			
		}
		
		
		
		public function mueve(ev:Event):void
		// la función mueve se encarga de mover al círculo
		{
		
			
			if(ev.target.x > 500)
			// si el círculo se  sale del escenario
			{
				ev.target.x = 0;
				// lo regreso a la posición 0 en el plano de "x"
				
				ev.target.y=Math.ceil(Math.random()*300);
				// defino una nueva posición al azar entre 0 y 300 para el círculo en el plano de "y"
			
			}
			else
			// si el círculo está dentro del escenario
			{
								
				ev.target.x += ev.target.velocidad;
				// lo desplazo en el plano de "x" acorde a su velocidad
			}
			

		} 
		
	
	}
    
}

El contenido del archivo "difuminar.as" es:

package pek{
//IMPORTANTE: después de package SE DEBE ESCRIBIR el nombre del directorio / carpeta donde se almacena este archivo
// en este caso el archivo se almacena en la carpeta / directorio "pek"


import flash.display.MovieClip;
// importa las propiedades, eventos y métodos necesarios para usar símbolos del tipo MovieClip 


import flash.filters.BitmapFilter;
// importa las propiedades, eventos y métodos necesarios para trabajar con filtros 
// (en este ejemplo usaremos el filtro: difuminar / blur)


import flash.filters.BitmapFilterQuality;
// importa las propiedades, eventos y métodos necesarios para definir la calidad de los filtros

import flash.filters.BlurFilter;
// importa las propiedades, eventos y métodos necesarios para aplicar el filtro difuminar (blur)

/* 
Para evitar importar clase por clase, en este ejemplo pudimos importar todas las clases disponibles con import flash.filters.*
con "*" (asterisco) se importan todas las clases de una clase 
*/


	public class difuminar extends MovieClip
	// define el nombre de la clase
	// esta clase extenderá / ampliará las funcionalidades innatas de un MovieClip
	{
		
		public function difuminar(destino) 
		// crea una función para difuminar un círculo
		// el parámetro destino almacena el nombre del círculo que queremos difuminar
		{
		
			var blur:BlurFilter = new BlurFilter();
			// se crea un nuevo efecto difuminar(blur)
			
			blur.blurX = 25;
			// se define el monto del efecto difuminar(blur) en el plano de x
			
			blur.blurY = 25;
			// se define el monto del efecto difuminar(blur) en el plano de y
			
			blur.quality = BitmapFilterQuality.LOW;
			// se define la calidad del efecto difuminar(blur)
			
			
			destino.filters = [blur];
			// se aplica el efecto difuminar(blur)
		

		}
	
	}
    
}

En el archivo "avanzada.fla" haremos uso de nuestras clases.

Para utilizar / importar la clase en el archivo "avanzada.fla" debemos modificar la CLASE DEL DOCUMENTO (DOCUMENT CLASS).

Para ello se debe abrir la ventana de propiedades de la película. Para abrir la ventana de propiedades hacemos click en el escenario y luego en VENTANA (WINDOW) y luego en PROPIEDADES (PROPERTIES).

abriendo la ventana de propiedades

En el campo CLASE DEL DOCUMENTO (DOCUMENT CLASS) se debe escribir el nombre del archivo .AS que almacena nuestra clase, en este caso: "avanzada" (SIN LA EXTENSION .AS)

Definiendo CLASE DEL DOCUMENTO (DOCUMENT CLASS)

En Flash CS5 la interfaz se modificó (para mal a mi parecer) y la opción de la CLASE DEL DOCUMENTO (DOCUMENT CLASS) está escondida / agrupada en la opción PUBLICAR (PUBLISH).

En ocasiones hay que Hacer click en PUBLICAR (PUBLISH) para desplegar la opción para modificar la CLASE DEL DOCUMENTO (DOCUMENT CLASS).

Opcion Publish / Publicar

En el archivo "avanzada.fla" para crear un círculo basta escribir el código:

var c3:circulo = new circulo("0x0000fff", 250, 150, 50, 25);
// "c3" es un nombre arbitrario que nos permitirá identificar al círculo creado
// crea un nuevo círculo haciendo uso de la clase circulo
// los parámetros usados son
// 1) color
// 2) posición del círculo en el plano de x 
// 3) posición del círculo en el plano de y 
// 4)  ancho(radio) del del círculo
// 5) velocidad con la que se moverá el círculo.


addChild(c3);
// agregamos nuestro círculo al escenario

En el archivo "avanzada.fla" para aplicar el efecto blur(difuminar) un círculo basta escribir el código:

new difuminar(c3);
// el efecto se le aplica al círculo c3

En el archivo "avanzada.fla" para comenzar a mover un círculo basta escribir el código:

new mover(c3);
// el efecto se le aplica al círculo c3

Para ejemplificar en el fotograma (frame) 1 del archivo "avanzada.fla" utilizo este código para crear 3 círculos diferentes:

var c1:circulo = new circulo("0x00ff00", 10, 10, 10, 5);
// se crea un nuevo circulo

addChild(c1);
// se agrega al escenario el nuevo circulo

var c2:circulo = new circulo("0xff0000", 10, 100, 10, 25);
addChild(c2);

var c3:circulo = new circulo("0x0000fff", 250, 150, 50, 25);
addChild(c3);
    

En el fotograma (frame) 5 utilizo este código para aplicar el efecto blur(difuminar) a un círculo en particular:

new difuminar(c2);
// el efecto se le aplica al circulo c3

En el fotograma (frame) 10 utilizo este código para aplicar comenzar a mover un círculo en particular:

new mover(c1);
// el efecto se le aplica al circulo c1

El resultado es el siguiente:

Están disponibles los archivos .fla de este ejercicio para un análisis más detallado.

Sitios de interés:

Creando animaciones con canvas, javascript y HTML5

Swiffy, una herramienta para crear animaciones canvas a partir de animaciones Flash

Mostrando contenido alternativo a flash

¿HTML5 como alternativa a Adobe Flash?

Usando clases (class) y objetos en ActionScript 3

Usando símbolos del tipo bitmap con ActionScript 3

Usando símbolos con ActionScript 3

Cargando un archivo .swf dentro de otro con ActionScript 3


Comenta y opina este texto     Lee mi libro de visitas
© 1997-2024 Alain García
albegago@hotmail.com
Twitter: Youtube @feesgo
YouTube Youtube
El vínculo a este documento es:

Compartir en facebook Compartir en twitter Compartir en whatsapp Rss

Puedes apoyar a este sitio invitándome a comer...

Este sitio utiliza cookies propias y de terceros para mejorar sus servicios. Si continua navegando, entendemos que acepta su uso. Política de Privacidad