Perspectiva AS1 a AS2

Esta es la respuesta a este post de flashla 

La orientación a objetos es sólo para que el código sea más ordenado, legible y se acerque más a la manera en la que el ser humano concibe la realidad, asi que para transformar tu código vamos a seguir algunos pasos básicos que sólo requieren orden, claridad y un mínimo de conocimiento

Arreglar el código para que esté ordenado y legible:

Normalizamos variables usando nombres claros, usar nombres de variables consecutivos no es nada bueno, la variable debe de describir perfectamente y con pocos caracteres lo que hace, si es muy dificil es mejor poner comentarios antes de la declaración.

Revisar la algoritmia es mejor, una división siempre es más clara que una multilplicación por un decimal. Se pueden encontrar valores comunes e introducirlos en variables para que el código sea más específico y manejable.

Así queda el código:

[ftf]
//Quito todos los _roots
//Declaro todas las variables y agrego las que nos faltan
var centrex:Number = ciudad._width/2;
var centrey:Number = ciudad._height/2;
/*
* Cambio el nombre de las variables para que sea más claro
* valor_a : ydist (Distancia Y)
* valor_b : yvect (Vector Y)
* valor_c : xdist (Distancia X)
* valor_d : xvect (Vector X)
*/
var xdist:Number = 0;
var ydist:Number = 0;
var xvect:Number = 0;
var yvect:Number = 0;
//Agrego una variable para manejar la relación de la perspectiva horizontal ( x )
var persp:Number = -10;
//Aplico el evento (enterFrame) al mc ‘ciudad’
ciudad.onEnterFrame = function()
{
//Cambiamos (* -0.1) por (/ persp)
ydist = (_ymouse – centrey) / persp;
yvect = yvect + ydist;
yvect = yvect * 0.9;
//Cambiamos (* -0.1) por (/ persp)
xdist = (_xmouse – centrex) / persp;
xvect = xvect + xdist;
xvect = xvect * 0.9;
ciudad.block1._y = (yvect – ciudad.block1._y) * 0.03;
ciudad.block2._y = (yvect – ciudad.block2._y) * 0.02;
ciudad.block3._y = (yvect – ciudad.block3._y) * 0.01;
ciudad.block1._x = (xvect – ciudad.block1._x) * 0.45;
ciudad.block2._x = (xvect – ciudad.block2._x) * 0.30;
ciudad.block3._x = (xvect – ciudad.block3._x) * 0.15;
};

[/ftf]

Atribuir variables y funciones a quien le correspondan:

Uno de los principios de la orientación a objetos es el Encapsulamiento, lo que significa que cada objeto está aislado de los demás lo que hace que se encarge el mismo de sus miembros.

Para llevar a cabo esto con lo que tenemos se corta el código y se pega en el primer fotograma de el mc ciudad (Esto es temporal) y hacemos algunos cambios. el código dentro de  ciudad queda de la siguiente manera:

[ftf]

//Quito la referencia a ciudad y dejo sólo los valores _width y _height
var centrex:Number = _width/2;
var centrey:Number = _height/2;
var xdist:Number = 0;
var ydist:Number = 0;
var xvect:Number = 0;
var yvect:Number = 0;
var persp:Number = -10;
//Cambio la referencia a ciudad por un this ya que stamos en el mismo objeto
this.onEnterFrame = function()
{
ydist = (_ymouse – centrey) / persp;
//Cambio
yvect = yvect + ydist;
yvect = yvect * 0.9;
xdist = (_xmouse – centrex) / persp;
xvect = xvect + xdist;
xvect = xvect * 0.9;
//Quito las referencias a ‘ciudad’ y llamo directamente los mc
//ya que estamos dentro del objeto
block1._y = (yvect – block1._y) * 0.03;
block2._y = (yvect – block2._y) * 0.02;
block3._y = (yvect – block3._y) * 0.01;
block1._x = (xvect – block1._x) * 0.45;
block2._x = (xvect – block2._x) * 0.30;
block3._x = (xvect – block3._x) * 0.15;
};

[/ftf]

Partiendo de aquí ya podemos orientarnos a objetos. Tenemos un objeto ciudad que tiene ciertas características, variables como xdist y funciones o métodos como onEnterFrame. Está claro que es un MovieClip lo cual es una clase de flash.

Crear una Clase:

Creamos un archivo llamado City.as, en este caso lo vamos a poner junto a nuestro fla y queda de la siguiente manera :

[ftf]

class City extends MovieClip
{

}

[/ftf]

La palabra reservada class nos indica que el archivo es una clase, seguido del nombre que va a llevar esa clase en este caso es City el cual debe de ser el mismo que el nombre del archivo y que por convención se escribe con Mayúscula inicial. La palabra reservada extends nos indica que esta clase es una subclase o clase hija de MovieClip obedeciendo a otra característica más de la Orientación a Objetos que es el Herencia; algo así como class Perro extends Mamífero.

El siguiente paso es algo sencillo, vamos a cortar el código que tenemos dentro de nuestro mc ciudad y lo pegamos dentro del cuerpo de nuestra clase, esto no va a funcionar ya que todavía hay que hacer unos cambios

[ftf]

class City extends MovieClip
{

var centrex : Number = _width / 2;
var centrey : Number = _height / 2;
var xdist : Number = 0;
var ydist : Number = 0;
var xvect : Number = 0;
var yvect : Number = 0;
var persp : Number = – 10;
this.onEnterFrame = function ()
{
ydist = (_ymouse – centrey) / persp;
yvect = yvect + ydist;
yvect = yvect * 0.9;
xdist = (_xmouse – centrex) / persp;
xvect = xvect + xdist;
xvect = xvect * 0.9;
block1._y = (yvect – block1._y) * 0.03;
block2._y = (yvect – block2._y) * 0.02;
block3._y = (yvect – block3._y) * 0.01;
block1._x = (xvect – block1._x) * 0.45;
block2._x = (xvect – block2._x) * 0.30;
block3._x = (xvect – block3._x) * 0.15;
};

}

[/ftf]

En teoría ya tenemos nuestra clase, tiene variables y una función, sólo hay que cambiar ciertas cosas para que funcione porque si no el compilador nos va a marcar algunos errores. Primero que nada a todas las variables que estamos declarando al principio con la palabra reservada var vamos a antedederles la palabra reservada private al hacer esto nos estamos asegurando de que ninguna variable pueda ser accedida por otro objeto que no sea la instancia de la clase. El fragmento de código queda así:

[ftf]

private var centrex : Number = _width / 2;
private var centrey : Number = _height / 2;
private var xdist : Number = 0;
private var ydist : Number = 0;
private var xvect : Number = 0;
private var yvect : Number = 0;
private var persp : Number = – 10;
//Declaramos nuestros mcs, todas los miembros deben de estarlo.
private var block1:MovieClip;
private var block2:MovieClip;
private var block3:MovieClip;

[/ftf]

y ahora sólo nos falta declarar correctamente nuestra función; las funciones o métodos son, al igual que las variables, miembros de una clase, por lo tanto pueden ser publicas o privadas también. En este caso nuestra función va a ser privada. Al ser esta una función que existe previamente en la clase MovieClip (todos los mc la tienen)  se dice que estamos sobreescribiendo el método onEnterFrame de MovieClip es algo similar a cuando hacemos onEnterFrame = unMetodo estamos sobreescribiendo la función que se ejecuta cada que pasamos por un frame dentro del mc. El fragmento de código de de la función quedaría de la siguiente manera :

[ftf]

private function onEnterFrame ()
{
ydist = (_ymouse – centrey) / persp;
yvect = yvect + ydist;
yvect = yvect * 0.9;
xdist = (_xmouse – centrex) / persp;
xvect = xvect + xdist;
xvect = xvect * 0.9;
//Quito las referencias a ‘ciudad’ y llamo directamente los mc
//ya que estamos dentro del objeto
block1._y = (yvect – block1._y) * 0.03;
block2._y = (yvect – block2._y) * 0.02;
block3._y = (yvect – block3._y) * 0.01;
block1._x = (xvect – block1._x) * 0.45;
block2._x = (xvect – block2._x) * 0.30;
block3._x = (xvect – block3._x) * 0.15;
};

[/ftf]

Constructor

Para tener nuestra clase terminada sólo nos falta un pequeño detalle. Las variables centrex y centrey al ejecutarse onEnterFrame son null debido a que se están inicializando tomado el ancho y el largo del mc pero el acho y el largo no existen ya que los mc se dibujan después de que ha cargado el código de la clase (pequeño detalle) así que lo que vamos a hacer es inicializar esas variables dentro de un método de la clase al cual se le llama Constructor el cual se ejecuta en cuanto de crea la instancia de la clase y se llama exactamente igual que la clase (con todo y la mayúscula inicial); el código del constructor queda así :

[ftf]

private function City()
{
centrex = _width / 2;
centrey = _height / 2;
}

[/ftf]

Een esta ocasión lo ponemos como privado ya que no se van a crear objetos dinámicamente ( se explicará luego).

El código en el archivo City.as queda de la siguiente manera :

[ftf]

class City extends MovieClip
{
private var centrex : Number;
private var centrey : Number;
private var xdist : Number = 0;
private var ydist : Number = 0;
private var xvect : Number = 0;
private var yvect : Number = 0;
private var persp : Number = – 10;
private var block1 : MovieClip;
private var block2 : MovieClip;
private var block3 : MovieClip;
private function City()
{
centrex = _width / 2;
centrey = _height / 2;
}
private function onEnterFrame ()
{
ydist = (_ymouse – centrey) / persp;
yvect = yvect + ydist;
yvect = yvect * 0.9;
xdist = (_xmouse – centrex) / persp;
xvect = xvect + xdist;
xvect = xvect * 0.9;
block1._y = (yvect – block1._y) * 0.03;
block2._y = (yvect – block2._y) * 0.02;
block3._y = (yvect – block3._y) * 0.01;
block1._x = (xvect – block1._x) * 0.45;
block2._x = (xvect – block2._x) * 0.30;
block3._x = (xvect – block3._x) * 0.15;
trace(centrex)
};

[/ftf]

Linkage

Lo único que nos falta es relacionar esa clase con nuestro mc y esto es muy sencillo. Vamos a la librería de flash y hacemos click derecho/Linkage…, aparecerá una ventana como esta:

Ventana de Linkage

Como podemos verindicamos en la caja de texto Class: el nombre de nuestra clase, flash al compilar buscara el archivo automáticamente. Presionamos OK y publicamos nuestra película. Si todo se hizo bien el resultado debe de ser el mismo.

Optimización

Por último me dí a la tarea de optimizar un poco el código y quedo así :

[ftf]

class City extends MovieClip
{
private var centrex : Number;
private var centrey : Number;
private var xdist : Number = 0;
private var ydist : Number = 0;
private var xvect : Number = 0;
private var yvect : Number = 0;
private var perspy : Number = – 10;
private var perspx : Number = 0.9;
private var block1 : MovieClip;
private var block2 : MovieClip;
private var block3 : MovieClip;
private function City()
{
centrex = _width / 2;
centrey = _height / 2;
}
private function onEnterFrame ()
{
ydist = (_ymouse – centrey) / perspy;
xdist = (_xmouse – centrex) / perspy;
yvect += ydist;
xvect += xdist;
yvect *= perspx;
xvect *= perspx;
move(xvect, yvect);
};
private function move(xv:Number, yv:Number)
{
block1._y = (yv – block1._y) * 0.03;
block2._y = (yv – block2._y) * 0.02;
block3._y = (yv – block3._y) * 0.01;
block1._x = (xv – block1._x) * 0.45;
block2._x = (xv – block2._x) * 0.30;
block3._x = (xv – block3._x) * 0.15;
}
}

[/ftf]

Como comentario final me gustaría mencionar que la Orientación a Objetos no es un tema complicado para lo que se necesite algún tipo de genio matemático-lógico-booleano, de hecho es bastante sencillo y hay mucha información al respecto; de hecho es más sencillo que la programación procedural partiendo de la premisa que es el esquema de pensamiento que usa el ser humano para concebir y describir su universo.

 

 

One thought on “Perspectiva AS1 a AS2”

Comments are closed.