Esta es la tercera entrega de los tutoriales sobre JSFL que en su momento me propuse escribir, con ésta cerraré el paquete de introducción, pero no todo termina aquí, pues han cambiado mucho las cosas desde que empecé a escribir, he aprendido nuevas cosas, me he tenido que enfrentar a nuevos retos y tengo nuevas ideas sobre que escribir y como aplicar estos conocimientos a situaciones reales para ayudarnos en nuestro día a día. Bueno, sin más preámbulos vamos a lo que nos compete.
En esta ocasión veremos los Paneles, los paneles son películas SWF que almacenamos en las siguientes rutas respectivamente en función del sistema operativo:
unidad de arranque\Users\nombre de usuario\Local Settings\Application Data\Adobe\Flash CS4\idioma\Configuration\WindowSWF
unidad de arranque\Documents and Settings\nombre de usuario\Local Settings\Application Data\Adobe\Flash CS4\idioma\Configuration\WindowSWF
Macintosh HD/Usuarios/nombre de usuario/Librería/Application Support/Adobe/Flash CS4/idioma/Configuration/WindowSWF
El acceso a estos paneles lo hacemos a través del menú Ventana -> Otros paneles, aquí encontraremos todos los Paneles que creemos dentro del directorio WindowSWF.
¿Para que sirven los paneles? y ¿Qué podemos hacer con un panel?
Bueno, básicamente podemos hacer todo lo que hacen los comandos, pero con la ventaja de tenerlo siempre abierto.
¿Y eso que quiere decir?
Pues que por ejemplo para ejecutar un comando tenemos que hacerlo a través del menú Comandos, con lo cual perdemos el área de trabajo, esto si utilizamos un comando basado en interfaz gráfica, pero si lo hacemos con un comando sencillo no tenemos forma de configurar parámetros con lo que perdemos más valor. Sin embargo con un Panel tenemos siempre visible el área de trabajo, tenemos acceso a toda la configuración que deseemos implementar en el panel y además podemos crear previews del resultado puesto que el panel es una película swf en la que podemos hacer tanto como deseemos.
A ver, a ver, ¿dices que los Paneles son películas SWF?
Así es, esta es la parte más poderosa de los Paneles, que son películas SWF, con lo cual las podemos crear con lo que más cómodos nos sintamos, por ejemplo con Flex, con Flash, con mtasc, todos estos los he probado y funcionan perfectamente, seguro que también se puede con HAXE aunque no lo he probado.
¿Y donde está el truco?
Bueno, realmente no es truco, pero bueno la magia que nos permite hacer esto es una función muy sencilla que lleva mucho tiempo ahí y que es más potente de lo que ha simple vista parece, la función que nos permite utilizar a nuestros queridos SWF’s como interfaz de los Paneles es la función MMExecute, a ésta función le tenemos que pasar como parámetro código JSFL y listo.
NOTA del escritor, osea yo, jejejeje
Una buena práctica es el encapsulamiento y además conseguir que nuestro Panel tenga poco acoplamiento. Esto es más sencillo de lo que suena, simplemente quiere decir que separemos el código AS y el código JSFL.
PARTE ActionScript, lógica de la vista del Panel
Bueno y ahora si por fin después de esta introducción ya podemos hablar sobre la forma en la que vamos a poner en práctica lo aprendido (pero que dice este tío, si lo único que hemos visto es la función MMExecute y una ruta rara) . Vamos a crear un Panel que nos ayude a crear tableros de ajedrez, si esos bellos tableros que se componen de 64 casillas, 8 filas y 8 columnas, alternando dos tipos de casillas.
Recuerdo que hace tiempo tomé un taller sobre ActionScript avanzado en el Flash For México 2004 que impartió Fernando Flores, ahí antes de empezar a picar código nos dijo una cosa que siempre recordaré y que sigo aplicando a diario en mis proyectos, la lista de la compra, o sea lo que queremos, lo que necesitamos de nuestra aplicación. En este caso que es lo que queremos que tenga este Panel, bueno, pues mi lista de la compra para este Panel es la siguiente:
- Definir el tamaño de las casillas.
- Definir el color de las casillas.
- Tener un preview antes de crearlo.
Esta lista de la compra nos ayuda a saber que necesitaremos 2 instancias del Componente ColorPicker, una instancia del Componente NumericStepper y para ejecutar acciones el buen amigo Button. Con ellos tendremos la lógica de AS que nos ayudará a conseguir los valores necesarios para crear nuestro tablero.
Una vez que conseguimos los valores necesario hacemos la llamada al fichero JSFL encargado de crear el tablero, la llamada a este fichero es realmente la clave de éste Panel. El código es el siguiente:
MMExecute('fl.runScript( fl.configURI + "WindowSWF/JavaScript/Tablero.jsfl", "createBoard", ' + this.comColor1.selectedColor + ', ' + this.comColor2.selectedColor + ', ' + this.comNumericStepperSize.value + ' );');
La explicación de ese trozo de código es la siguiente:
MMExecute, esta función recibe como parámetro el código JSFL que deseamos ejecutar.
fl.runScript, esté método de sirve para ejecutar scripts con código JSFL. Recibe un parámetro obligatorio y dos opcionales, que en nuestro caso utilizamos.
- El primero es la ruta del fichero JSFL que se desea ejecutar.
- El segundo es el nombre de la función que se desea ejecutar dentro del fichero JSFL.
- El tercero son los parámetros que enviamos a la función.
fl.configURI, esta propiedad nos devuelve la ruta de la carpeta configuration de Flash del equipo.
Hasta ahora lo único que hemos hecha ha sido simplemente llamar a un fichero JSFL alojado en la carpeta configuration/WindowSWF/JavaScript/Tablero.jsfl, hemos indicado que deseamos ejecutar la función createBoard dentro de este fichero y le hemos pasado los parámetros necesarios (Color1, Color2 y Tamaño).
Y ya está, nuestro Panel es así de simple, podemos hacer todo lo que nos venga en gana para hacerlo más bonito, con animaciones, diseños y demás, pero lo mínimo necesario para funcionar es lo que hemos hecho hasta ahora. Bueno, ahora si empieza la parte interesante que es la que desde el principio quiero explicar, lo que es realmente código JSFL y es el encargado de crear el tablero de Ajedrez. ¿Preparados? … Pues vamos allá.
Pero antes una imagen que como queda nuestra interfaz:
PARTE JSFL, lógica de … algo que no es la vista del Panel
Llegamos a este punto con una parte muy importante ya definida y es la función a la que se llama desde ActionScript con la función MMExecute, si, así es, me refiero a la función createBoard, pero no sólo sabemos que tenemos que crear esa función, también sabemos que recibe tres parámetros, con lo cual ya nos hacemos a la idea de algunas tareas que tendremos que hacer. Pero bueno, vamos a pensarlo un poco más para ver que elementos necesitaremos, teniendo en cuenta que el tablero sea fácil de usar y modificar.
Bueno, pues partiendo de estas premisas y pensando lo más fácil posible, planteo la creación de tres MovieClip’s.
- Caja 1, que será un cuadrado de las dimensiones y el color indicados por parámetro.
- Caja 2, que es lo mismo que la caja 1 pero con el otro color.
- Tablero, éste tendrá 32 instancias de cada Caja para formar el tablero.
Bueno, ahora si con las cosas claras es más fácil programar, entonces vamos por partes, hemos dicho que necesitamos crear MovieClip’s, esto es muy sencillo, para hacerlo necesitamos utilizar el método addNewItem del Objeto library, éste método recibe dos parámetros, el tipo de Item y el nombre del mismo. A continuación un ejemplo:
fl.getDocumentDOM().library.addNewItem("movie clip", "nombre del MovieClip");
Luego necesitamos editar el MovieClip creado en el paso anterior, esto lo hacemos con el método editItem del Objeto library, éste método recibe como parámetro el nombre del Item que deseamos editar. A continuación un ejemplo:
fl.getDocumentDOM().library.editItem("nombre del MovieClip");
Ahora dentro del MovieClip antes de dibujar el cuadro debemos definir el color, esto lo hacemos con el método setCustomFill del Objeto Document, éste método recibe un objeto como parámetro, donde indicamos el color y el estilo de relleno. A continuación un ejemplo:
fl.getDocumentDOM().setCustomFill( {color:_nColor, style:"solid"} );
Una vez que hemos definido el color del cuadro ya podemos dibujarlo, esto lo hacemos con el método addNewRectangle del Objeto Document, éste método recibe dos parámetros, un objeto con la posición y las dimensiones del rectángulo que crearemos y el factor de redondeo de las esquinas del mismo. A continuación un ejemplo:
fl.getDocumentDOM().addNewRectangle( { left:0, top:0, right:Tamaño, bottom:Tamaño }, 0);
Listo, con estos pasos hemos conseguido crear un MovieClip, editarlo, definir un color de relleno y dibujar un cuadro, ahora simplemente tenemos que salir del modo edición de éste MovieClip, esto lo hacemos con el método exitEditMode del Objeto Document. A continuación un ejemplo:
fl.getDocumentDOM().exitEditMode();
Repetimos estos pasos y conseguiremos crear el segundo cuadro.
NOTA
Una buena práctica es encapsular estos pasos en una función para reutilizarla en más ocasiones.
Bueno, con esto ya tenemos dos MovieClip’s en la biblioteca, del tamaño y color deseados, ahora nos queda montar el tablero. Para esto necesitaremos crear otro MovieClip e instanciar 64 Items de la biblioteca, 32 de un color y 32 de otro. Esto lo conseguiremos con el siguiente código,:
fl.getDocumentDOM().library.addNewItem("movie clip", "tablero");
fl.getDocumentDOM().library.editItem("tablero");
var n = 0;
for (var i = 1; i <= 8; i++)
{
for (var j = 1; j <= 8; j++)
{
var sItemName = (n % 2 == 0) ? "casilla1" : "casilla2";
fl.getDocumentDOM().library.addItemToDocument({x:(j - 1) * _nSize, y:(i - 1) * _nSize}, sItemName);
n++;
}
n++;
}
fl.getDocumentDOM().exitEditMode();
De ese código la parte nueva que vemos de JSFL es el método addItemToDocument, del Objeto library, éste método nos permite instanciar elementos de la biblioteca en el escenario, recibe dos parámetros, el primero es un objeto con las coordenadas X e Y en las que deseamos instanciar el Item y el segundo es una cadena con el nombre del Item que deseamos instanciar.
Y listo, eso ha sido todo, quizá contado trozo a trozo no tenga mucho sentido, pero mi intención era explicar cada uno de los método utilizados. A continuación pongo el código JSFL completo://Declaración de variables
var oDoc;
var oLib;
var sBoxName1 = "box_1";
var sBoxName2 = "box_2";
var sBoardName = "board";
/**
* @method createBoard
* Método encargado de crear un tablero.
* @param _nColor1 Number Número que indica el color primario del tablero
* @param _nColor2 Number Número que indica el color secundario del tablero
* @param _nSize Number Número que indica el tamaño de las casillas
* @return Void
*/
function createBoard(_nColor1, _nColor2, _nSize)
{
if (this.config())
{
//Lamada al método createBox para crear MovieClp's
this.createBox(this.sBoxName1, _nSize, _nColor1);
this.createBox(this.sBoxName2, _nSize, _nColor2);
//Hacemos una comprobación, si existen el item en la biblioteca lo eliminamos.
if (this.oLib.itemExists(this.sBoardName)) this.oLib.deleteItem(this.sBoardName);
//Creamos y editamos el MovieClip tablero
this.oLib.addNewItem("movie clip", this.sBoardName);
this.oLib.editItem(this.sBoardName);
var n = 0;
for (var i = 1; i <= 8; i++)
{
for (var j = 1; j <= 8; j++)
{
var sItemName = (n % 2 == 0) ? this.sBoxName1 : this.sBoxName2;
//Añadimos al MovieClip una instancia de la casilla en su posición correspondiente
this.oLib.addItemToDocument({x:(j - 1) * _nSize, y:(i - 1) * _nSize}, sItemName);
n++;
}
n++;
}
//Salimos del modo de edición y volvemos al escenario
this.oDoc.exitEditMode();
}
}
/**
* @method createBox
* Método encargado de crear un Item de tipo MovieClip en la biblioteca, editarlo y dentro crear un cuadro de tamaño y color indicados por parámetro.
* @param _sName String Cadena que indica el nombre del Item que se creará en la biblioteca.
* @param _nSize Number Número que indica el tamaño del cuadro que se creará.
* @param _nColor Number Número que indica el color del cuadro que se creará.
* @return Void
*/
function createBox(_sName, _nSize, _nColor)
{
//Hacemos una comprobación, si existen el item en la biblioteca lo eliminamos.
if (this.oLib.itemExists(_sName)) this.oLib.deleteItem(_sName);
//Añadimos y editamos el MovieClip
this.oLib.addNewItem("movie clip", _sName);
this.oLib.editItem(_sName);
//Definimos el color y estilo del trazo
this.oDoc.setCustomStroke( {color:"#000000", thickness:1} );
//Definimos el color y estilo de relleno del cuadro
this.oDoc.setCustomFill( {color:_nColor, style:"solid"} );
//Dibujamos el cuadro
this.oDoc.addNewRectangle( { left:0, top:0, right:_nSize, bottom:_nSize }, 0);
//Salimos del modo de edición y volvemos al escenario
this.oDoc.exitEditMode();
}
/**
* @method config
* Método encargado de la configuración del JSFL
* @return Void
*/
function config()
{
fl.showIdleMessage(false);
fl.outputPanel.clear();
var ret = false;
if(fl.getDocumentDOM())
{
//Obtenemos y configuramos las referencias al Documento y a la Biblioteca
this.oDoc = fl.getDocumentDOM();
this.oLib = this.oDoc.library;
ret = true;
}
else
{
alert("Debes tener un documento abierto.");
}
return ret;
}
Aquí se pueden descargar los ficheros de este tutorial. Cualquier, duda, sugerencia o comentario, aquí estaré.
Entradas relacionadas:
