Categories
Flash JSFL Paneles Tutoriales

Tutorial JSFL – Introducción a Paneles

Tablero

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:

  • Windows® VistaTM:

unidad de arranque\Users\nombre de usuario\Local Settings\Application Data\Adobe\Flash CS4\idioma\Configuration\WindowSWF

  • Windows XP:

unidad de arranque\Documents and Settings\nombre de usuario\Local Settings\Application Data\Adobe\Flash CS4\idioma\Configuration\WindowSWF

  • Mac OS® X:

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:

Panel Tablero

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.

  1. Caja 1, que será un cuadrado de las dimensiones y el color indicados por parámetro.
  2. Caja 2, que es lo mismo que la caja 1 pero con el otro color.
  3. 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:

Categories
Flash JSFL Tutoriales

Tutorial JSFL – Comandos con interfaz gráfica II

Este tutorial continua la serie de tutoriales de JSFL que empecé a escribir en este post, no es el tercero sino la segunda parte del segundo tutorial de Comandos con interfaz gráfica.

En esta ocasión vamos a crear un comando que nos ayude a crear un XML con el listado de ficheros jpg que se encuentran en un directorio que indicaremos mediante un cuadro de diálogo Buscar carpeta.

En este tutorial veremos lo siguiente:

  • Interfaz gráfica basada en una película swf.
  • Uso de Función MMExecute.
  • Uso de cuadro de diálogo Buscar carpeta.
  • Introducción al objeto FLfile.

Interfaz gráfica basada en una película swf

Lo primero que debemos hacer es indicar en el fichero JSFL el uso de un xmlPanel mediante el siguiente código:

fl.getDocumentDOM().xmlPanel(fl.configURI + "panel.xml");

Lo siguiente que debemos hacer es indicar en el fichero xml de configuración de interfaz gráfica del comando el uso de una película Flash, mediante el siguiente código:

Listo, con esto ya tenemos un comando que utiliza un fichero xml para configurar su interfaz gráfica y esta interfaz muestra una película swf.

Uso de Función MMExecute

La función MMExecute sirve para ejecutar scripts JSFL desde una película swf, esto lo vamos a necesitar en este tutorial para ejecutar las siguientes acciones:

  • Aceptar
    MMExecute(‘fl.xmlui.accept();');
  • Cancelar
    MMExecute(‘fl.xmlui.cancel();');
  • Asignar valor
    MMExecute(‘fl.xmlui.set("variable", "valor");');
  • Abrir cuadro de diálogo Buscar carpeta
    MMExecute(‘fl.browseForFolderURL("Mensaje");‘);

Este código lo podemos ejecutar en eventos de botones como onClick, onRelease, etcétera desde nuestra interfaz de usuario.

La función MMExecute devuelve una cadena cuando la ejecución del script JSFL devuelve algo. NOTA importante, el resultado de MMExecute siempre será una cadena.

Uso de cuadro de diálogo Buscar Carpeta

Para abrir un cuadro de diálogo Buscar carpeta debemos ejecutar el siguiente código:

var ruta:String = fl.browseForFolderURL("Mensaje");

Este nos devolverá la ruta hasta la carpeta expresada como archivo:///URI que es el formato que utiliza JSFL para trabajar con el sistema de ficheros. Por ejemplo, en Windows para la carpeta D:\Fotos sería file:///D|/Fotos.

Introducción al objeto FLfile

El objeto FLfile nos proporciona una API de comunicación con el sistema de ficheros del sistema operativo poder crear, modificar o eliminar entre otras cosas ficheros o directorios. Este objeto lo vamos a utilizar en este tutorial para ejecutar las siguientes acciones:

  • Listar el contenido de un directorio
    FLfile.listFolder("path", "files");
  • Crear un fichero
    FLfile.write("fileURI", "contenido fichero");

El método FLfile.listFolder nos permite aplicar un filtro de búsqueda de tal forma que el resultado sólo incluya ficheros de cierto tipo, para nuestro ejemplo aplicamos el filtro de búsqueda para fichero de tipo jpg, esto lo conseguimos con el siguiente código:

FLfile.listFolder(path + "/*.jpg", "files");

Este método devuelve un array con los resultados de la búsqueda.

El método FLfile.write nos permite crear un fichero, este método devuelve un valor de tipo booleano que indica el éxito de la operación al crear el fichero. Para nuestro ejemplo utilizamos este método para crear el fichero XML con el listado de los ficheros jpg del directorio indicado mediante el cuadro de diálogo Buscar carpeta.

Listo, ahora si ya hemos hablado sobre los puntos importantes que trata este comando, sobre todo de las nuevas funciones y los nuevos métodos que utilizamos. A continuación pongo el código de de los distintas partes que componen este comando.

Fichero JSFL de nombre Crea XML de imágenes.jsfl

//Declaración de variables
var oDoc;
var oCfg;
var sDirPath;
var sNameFile;

//Llamadas al método de configuración
this.config();

/**
 * @method	config
 * Método encargado de la configuración del comando
 * @return	Void
 */
function config()
{
	//Limpiamos el panel de salida
	fl.outputPanel.clear();

	//Obtenemos las referencias al documento
	this.oDoc = fl.getDocumentDOM();
	if(this.oDoc)
	{
		//Obtenemos una referencia al objeto de configuración de la interfaz gráfica
		this.oCfg = this.oDoc.xmlPanel(fl.configURI + "Commands/XML/Crea XML de imágenes.xml");

		//Asignamos el valor de la variable del path para listar las imágenes y el nombre del fichero xml
		this.sDirPath = this.oCfg.sDirPath;
		this.sNameFile = this.oCfg.sNameFile;
	}
	else
	{
		alert("Debes tener un documento abierto.");
	}
}

//Comprobación de la respuesta del usuario sobre la ventana de introducción de datos
if ((this.oCfg) && (this.oCfg.dismiss == "accept"))
{
	this.init();
}
else
{
	//El usuario ha cancelado la operación
}

/**
 * @method	init
 * Método encargado de la inicialización del comando
 * @return	Void
 */
function init()
{
	if(this.sDirPath != "")
	{
		//Obtenemos la ruta del fichero XML y el contenido del fichero XML.
		var sXmlPath = this.getUrlXmlFile();
		var sXmlContent = this.getContentXml();

		//Creamos el fichero e informamos al usuario el resultado de la operación.
		var bSuccess = FLfile.write(sXmlPath, sXmlContent);
		if(bSuccess)
		{
			alert("Se ha creado correctamente el fichero:\n " + sXmlPath);
		}
		else
		{
			alert("No se ha podido crear el fichero:\n " + sXmlPath);
		}
	}
	else
	{
		alert("Debes seleccionar un directorio.");
	}
}

/**
 * @method	getUrlXmlFile
 * Método encargado de obtener la ruta del fichero XML que se generará, lo hace a partir del path del documento y realiza las conversiones pertinentes.
 * @return	String	Cadena con la ruta del fichero XML que se generará.
 */
function getUrlXmlFile()
{
	var ret = "";

	//A partir del path del documento abierto componemos la ruta del fichero XML que será hermano del documento abierto.
	var aTmp = this.oDoc.path.split("\\");
	aTmp.pop();
	var sUnidad = aTmp.shift();
	var aTmp2 = sUnidad.split(":");
	sUnidad = aTmp2.shift();
	ret = "file:///" + sUnidad + "|" + aTmp.join("/") + "/" + this.sNameFile;

	return ret;
}

/**
 * @method	getContentXml
 * Método encargado de obtener el contenido del XML, lo hace a través de listar el directorio configurado, filtrando por tipo de fichero jpg.
 * @return	String	Cadena con el contenido del fichero XML que se generará.
 */
function getContentXml()
{
	var ret = '';

	var aListFiles = FLfile.listFolder(this.sDirPath + "/*.jpg", "files");

	ret += '\n';
	ret += '\n';
	var nTotal = aListFiles.length;
	for (var i = 0; i < nTotal; i++)
	{
		ret += '\t\n';
	}

	ret += '\n';

	return ret;
}

Fichero XML para la interfaz gráfica de nombre Crea XML de imágenes.xml


	
	
	

Código de la película SWF de la interfaz gráfica de nombre Crea XML de imágenes.swf

import mx.utils.Delegate;

//Asignamos el Foco al botón Aceptar
Selection.setFocus(this.aceptarBTN);
//Asignamos el Tema de color Azul
_global.style.setStyle("themeColor", "haloBlue");

this.browsePathBTN.onRelease = Delegate.create(this, onClickBrowserPath);
this.aceptarBTN.addEventListener("click", this);
this.cancelarBTN.addEventListener("click", this);

/**
 * @method	onClickBrowserPath
 * Método encargado de abrir el cuadro de diálogo de selección de directorio.
 * @return	Void
 */
function onClickBrowserPath():Void
{
	var jsflCode:String = "fl.browseForFolderURL('Selecciona el directorio que deseas listar.');";
	var sDirPath:String = MMExecute(jsflCode);
	pathImagenesTI.text = (sDirPath == "null") ? pathImagenesTI.text : sDirPath;

	jsflCode = "fl.xmlui.set('sDirPath', '" + sDirPath + "');";
	MMExecute(jsflCode);
}

/**
 * @method	click
 * Método encargado de ejecutar las acciones para aceptar el comando y asignar el valor a la variable sDirPath.
 * @param	_oEvent		Object		Objeto de configuración asociada al evento click del botón.
 * @return	Void
 */
function click(_oEvent:Object):Void
{
	switch(_oEvent.target._name)
	{
		case "aceptarBTN":
			onClickAceptar(_oEvent);
			break;

		case "cancelarBTN":
			onClickCancelar(_oEvent);
			break;
	}
}

/**
 * @method	onClickAceptar
 * Método encargado de ejecutar las acciones para aceptar el comando y asignar el valor a la variable sDirPath.
 * @param	_oEvent		Object		Objeto de configuración asociada al evento click del botón.
 * @return	Void
 */
function onClickAceptar(_oEvent:Object):Void
{
	var jsflCode:String = "fl.xmlui.set('sDirPath', '" + _oEvent.target._parent.pathImagenesTI.text + "');";
	MMExecute(jsflCode);

	jsflCode = "fl.xmlui.set('sNameFile', '" + _oEvent.target._parent.nombreFicheroTI.text + "');";
	MMExecute(jsflCode);

	jsflCode = "fl.xmlui.accept();";
	MMExecute(jsflCode);
}

/**
 * @method	onClickCancelar
 * Método encargado de ejecutar las acciones para cerrar la ventana del comando.
 * @param	_oEvent		Object		Objeto de configuración asociada al evento click del botón.
 * @return	Void
 */
function onClickCancelar(_oEvent:Object):Void
{
	var jsflCode:String = "fl.xmlui.cancel();";
	MMExecute(jsflCode);
}

Los ficheros de este tutorial los pueden descargar de aquí.
Para cualquier duda, sugerencia o comentario aquí estaré atento a vuestros comentarios.

Saludos!!!

Entradas relacionadas:

Categories
Flash JSFL Tutoriales

Tutorial JSFL – Comandos con interfaz gráfica

Ahora veremos la segunda parte de los tutoriales de introducción a JSFL. En esta ocasión vamos a introducirnos en el tema de los comandos asistidos con interfaz gráfica.

Los comandos como vimos en la primera parte del tutorial son ficheros de texto plano con extensión JSFL que alojamos en nuestro equipo y que podemos ejecutarlos desde la opción comandos en la botonera principal del IDE de Flash. Pues bien, en el primer ejemplo requeríamos de la intervención del usuario para indicarnos que nombre se le iba a dar a los elementos seleccionados en la biblioteca, esto lo solucionamos con la función prompt de JavaScript, pero si queremos dotar de mayor inteligencia al comando se nos queda corto con el prompt o podría ser muy complejo su uso, ahí es donde entran en juego las interfaces.

Añadir una interfaz a un comando

Para esta tarea debemos utilizar XML2UI que al fin y al cambo es un fichero XML que sigue el estándar XUL, para más información mirar este post, porque el tema da para escribir mas de un post.

En nuestro caso vamos a añadir más funcionalidad a nuestro comando, permitiendo añadir un prefijo y/o un sufijo al nombre de los elementos seleccionados. Para esto crearemos el siguiente XML que nos ayudará a crear la interfaz gráfica de usuario.



	

Para obtener la siguiente interfaz gráfica:

Con esto podremos obtener en una sola ventana hasta 3 valores que nos servirán para renombrar los items seleccionados en la biblioteca.

En la definición de nuestro XML hemos declarado 3 cajas de texto, para poder acceder al valor de estas cajas de texto nos hace falta diferenciarlas de alguna forma, para esto les asignamos un identificador en el campo id tal como lo hariamos en JavaScript o en Flex en los ficheros MXML.



Ahora debemos modificar un poco el fichero JSFL, pues tenemos que indicarle que utilice el fichero XML que hemos creado como interfaz gráfica, para esta tarea debemos añadir el siguiente código:

var oCfg = fl.getDocumentDOM().xmlPanel(fl.configURI + "Commands/XML/Renombra Items v2.xml");

Como vemos asignamos el resultado del método xmlPanel a una variable, esto es porque a través de esta variable tendremos acceso a los valores que haya introducido el usuario en la interfaz gráfica, por ejemplo para nuestro caso:

oCfg.sPrefijo;
oCfg.sNuevoNombre;
oCfg.sSufijo;

Lo siguiente que tenemos que hacer es una comprobación para verificar que el usuario ha introducido por lo menos un valor en la ventana y así proceder a realizar el cambio de nombres, la comprobación la realizamos de la siguiente manera:

if( oCfg.sPrefijo != "" || oCfg.sNuevoNombre != "" || oCfg.sSufijo != "" )
{
	//Bien, podemos seguir adelante
}
else
{
	alert("Es necesario rellenar por lo menos uno de los tres campos para renombrar los elementos.");
}

Perdonad, se me ha olvidado una parte súper importante, la respuesta de usuario, pues existe la posibilidad de cerrar la ventana y no querer renombrar los elementos, esto lo podemos verificar de la siguiente forma:

if (oCfg.dismiss == "accept")
{
	//Bien, podemos seguir adelante
}
else
{
	//El usuario ha cancelado la operación
}

Ahora si, una vez que hemos verificado que el usuario acepta la operación y que además ha introducido por lo menos uno de los tres valores, ya nos encontramos en condiciones de realizar el renombre de los items, así que realizamos la siguiente modificación dentro del bucle de los elementos seleccionados:

oItem = aItems[i];
sNombreActual = oItem.name.split("/").pop();
sNombre = (this.sNuevoNombre != "") ? this.sNuevoNombre + "_" + (i + 1) : sNombreActual ;
this.oLib.selectItem(oItem.name);
this.oLib.renameItem(this.sPrefijo + sNombre + this.sSufijo);

Con esto dejamos listo nuestro comando Renombra Items v2, aquí dejo los archivos de este tutorial, se deben copiar en la ruta de los comandos del sistema.

Saludos y espero que sea de utilidad.

Más información:

X-Flash: JSFL

Categories
Flash JSFL

Flash CS4 – Extendiendo con JSFL

Y desde que trabajo con JSFL, jejeje, esto es algo nuevo que he implementado en mi procedimiento habitual para esta nueva versión de Flash, es leer las novedades sobre JSFL, a simple vista todo sigue como antes, salvo que igual que sucedió entre Flash 8 y Flash CS3, lo único nuevo es dar soporte para las nuevas funcionalidades del IDE en cuanto a nuevos trazos, grupos, bitmap, 3D, ….

Lo siento, he cambiado de parecer, estoy leyendo un poco más que a simple vista la documentación y he encontrado algo que me ha dejado alucinando y es que me viene de perlas para una tarea que tengo pendiente en un proyecto que estoy trabajando, es una de las novedades que implementan súper buena:

SoundItem object

  • soundItem.exportToFile()
  • soundItem.fileLastModifiedDate
  • soundItem.originalCompressionType
  • soundItem.sourceFileExists
  • soundItem.sourceFileIsCurrent
  • soundItem.sourceFilePath

Y es que aunque suene increible, esto antes no se podía hacer. Guauuu, es genial, ahora me internaré un poco más a leer la documentación, así que les dejo el enlace al pdf y probablemente después escriba más cosas interesantes sobre este tema.

Saludos!!!

Categories
AIR Flash JSFL

Flash CS4 – Ayuda

Lo primero que suelo hacer cada vez que sale una nueva versión de Flash es leerme la ayuda (este procedimiento lo comparto con Marcos), sobre todo el apartado de novedades, luego profundizo en temas de ActionScript y luego sigo con Componentes. En esta ocasión no puede ser menos así que lo primero que he hecho al instalarme la versión de prueba de Flash CS4 ha sido buscar la ayuda, pero no la encontré, o por lo menos no como en las versiones anteriores pues ahora la han llevado completamente a internet, esto lo empezaron a hacer desde la versión anterior y ahora parece que es el sitios idoneo para centralizar la documentación y la ayuda.

Como siempre tenemos el soporte de nuestro buen amigo el formato PDF, así que les dejo el enlace para descargarse la ayuda de Flash CS4.

Un recurso ampliamente recomendable.

Saludos!!!

Categories
Flash JSFL Tutoriales

Tutorial JSFL, Introducción a comandos

Este es el primero de una serie de tres tutoriales que pienso escribir sobre JSFL, donde mi intención es mostrar de la manera más sencilla posible el uso de esta herramienta en sus distintas aplicaciones.

Para este primer tutorial haremos un comando muy sencillo que únicamente utilizará un fichero de tipo JSFL, su tarea es muy sencilla, renombrará items de la biblioteca. Pero antes quizá deberiamos saber que son y donde se almacenan estos ficheros JSFL.

Pues bien, los ficheros JSFL son ficheros de texto plano con la extensión jsfl que contienen código JSFL y que podemos editar con el block de notas o nuestro editor de código preferido, en mi caso utilizo Flash Develop.

Los ficheros JSFL se almacenan principalmente en la ruta de instalación de Flash y también en nuestro perfil, en mi caso estoy trabajando bajo un Windows XP y la ruta donde tengo mis comandos es la siguiente:

C:\Documents and Settings\Usuario\Configuración local\Datos de programa\Adobe\Flash CS3\es\Configuration\Commands

Bueno, ahora si nos podemos poner a escribir nuestras primeras líneas de código JSFL.

//Declaración de variables
var oDoc;
var oLib;

Hasta ahora todo es muy fácil, ¿no? ni si quiera perece que estemos programando en JSFL, jejeje, pues de eso se trata, vamos con la siguiente parte, la configuración y comprobación principal del documento.

//Obtenemos las referencias al documento y a la biblioteca
this.oDoc = fl.getDocumentDOM();
if(this.oDoc)
{
    this.oLib = this.oDoc.library;
}
else
{
    alert("Debes tener un documento abierto.");
}

Aquí empezamos a ver cosas nuevas, por ejemplo fl.getDocumentDOM(), esta expresión nos permite obtener una referencia al documento actual en Flash, en el caso que no se tenga abierto ningún documento no devolvería nada y en la comprobación que hacemos llegariamos a un amigo más conocido, el alert que nos indica que debemos tener un documento abierto. Continuemos, en el caso que si exista el documento obtendriamos la referencia a la biblioteca a través de la propiedad library del documento.

Veamos la siguiente parte:

//Obtenemos los elementos seleccionados y el total
var aItems = this.oLib.getSelectedItems();
var nTotalItems = aItems.length;
if(nTotalItems > 0)
{
    //...
}
else
{
    alert("Debes seleccionar algún item de la biblioteca.");
}

Aquí volvemos a ver algo nuevo, la expresión this.oLib.getSelectedItems() es una llamada a un método del objeto library que nos devuelve un array con los items seleccionados en la biblioteca y aquí también hacemos una comprobación para continuar con la correcta ejecución del comando o mostrando una ventana de alerta informando al usuario que debe seleccionar algún item en la biblioteca.

En este momento ya nos encontramos en condiciones de preguntarle al usuario cual será el nuevo nombre que desea dar a los items, para esto no necesitamos realmente JSFL pues lo hacemos con JavaScript:

//Obtenemos el nuevo nombre
var sNuevoNombre = prompt("Nuevo nombre");

Y ahora si, ya con todo listo podemos proceder a la parte importante del comando, renombrar los items seleccionados:

var oItem;
for(var i = 0; i < nTotalItems; i++)
{
    oItem = aItems[i];
    this.oLib.selectItem(oItem.name);
    this.oLib.renameItem(sNuevoNombre + "_" + (i + 1));
}

Lo que hacemos es crear una varible para almacenar la referencia al item actual, luego creamos un bucle para recorrer los elementos seleccionados, obtenemos la referencia al item actual, utilizamos el método selectItem del objeto library para seleccionar un nuevo item, esto es porque para que funcione el método renameItem del objeto library es necesario haber seleccionado antes el item que se dese renombrar.

Y listo, con esto tenemos nuestro primer comando funcionando y todo desde un fichero JSFL. Podéis descargar el fichero de ejemplo de aquí.

Para cualquier duda, sugerencia o comentario estaré encantado en recibirlas y responderlas.

Más información:

Mi presentación para los talleres Subflash 2008.

Lista de recursos sobre JSFL.

Categories
Eventos Flash Javascript JSFL

Subflash 2008, vivencias, recuerdos, aventuras y mucho más

Ya estoy de vuelta y con ganas de más, ha sido un fin de semana asombroso, mágico, con toques de aventura, mucha diversión, un gran entretenimiento, pasión por el desarrollo WEB… uhmmm, bueno … está bien por FLASH y su entorno, jejeje.

Desde el inicio que salimos de Madrid Jorge, Carmen y yo, ahí empezó la aventura, pues sólo nos conociamos Carmen y yo, pero desde hace tres años cuando coincidimos en el Subflash de Barcelona, entonces el encuentro, las presentaciones y todo eso que salió muy bien, pues de inmediato nos caimos bien y tuvimos mucho tema de conversación para todo el viaje. Gracias Jorge y Carmen por hacer tan ameno el viaje.

Al llegar al evento tuvimos una excelente recepción por parte de Marcos. Las instalaciones increibles en comparación con otros años, eran de primerísimo nivel. En la cena fué lo más de lo más, pues encontrarnos nuevamente con tanta gente conocida y agradable, ver a viejos amigos y a nuevos amigos, jejeje, siempre tenemos la oportunidad de conocer gente nueva, eso es algo que me encanta de este evento, la gente. Pues eso, que la llegada seguía incrementando la emoción, la alegría y esa sensación que hacía que mi corazón latiera cada vez con más fuerza. Después de la cena vino la ronda típica de presentación para terminar de romper el hielo (si es que todavía quedaba algo) y así ayudar a la integración del grupo, pero claro cómo esto no era suficiente tuvimos que acompañar esta presentación con una salida a un bar cercano donde ahora si que cada quien puedo ser él mismo. Noche con muchas historias, chistes, billar, cervezas y todo lo que tienen las noches de bar, jejeje :P. Esta noche tuve la oportunidad de conocer a Alex un tío súper majo y viajero cómo pocos, pues ahora está viviendo en Dublín (flasheando, jejeje :P) y con ganas de mudarse a Australia.

Bueno la verdad es que lo siguiente fué por falta de tiempo, jejeje, realmente aunque hubiera tenido más tiempo lo habría hecho igual, jejeje, es que salí pronto del bar para terminar de preparar mi presentación y estuve mucho rato terminando detallitos que al final me dejaron satisfecho.

Pues eso, que a la mañana siguiente después del desayuno ya estaba listo y con ganas de contar consitas sobre el maravilloso mundo de la automatización de procesos mediante nuestro buen amigo JSFL, y todo fué sobre ruedas, seguí la presentación al pié de la letra con las explicaciones pertinentes y los ejemplos cuando llegó su momento, de tal forma que todo salió súper bien. La ronda de preguntas fué bastante corta pues la verdad es que la gente no conocía mucho de JSFL, pero durante el resto del fin de semana se acercaban a preguntarme y eso me hizo ver que si había conseguido sembrar la semilla dentro de ellos, BIEN!!!!

Luego de mi presentación contamos con la invaluable presencia de Jorge Quintas que nos dió una charla súper completa de SEO, con buenos ejemplos, mucha teoría y la parte que más disfrutamos todos, jejeje, fué la ronda de preguntas, pues ahí nadié lo dejó escapar, nos lo comimos a preguntas, todos se expresaron y lo mejor de todo es que obtuvieron muy buenas respuestas.

Después de la charla de Jorge nos fuimos a comer y seguimos con más y más conversaciones divertidas del tipo, jejeje,

estos de adobe que habrán pensado cuando decidieron sacar ActionScript 3, no hay quien entienda eso

jejeje, o el mítico

me he leido el libro de Moock tío, y la verdad es que hay partes que es imposible entender, ese tío está en otro mundo

en fin que la comida seguía incrementando el nivel de frikismo en el ambiente, pero sólo era una preparación para lo que nos tocaba a continuación.

La siguiente charla nos la dió el grandísimo Joan Garnet, y el tema era ayudarnos a dar el paso de ActionScript 2 hacia ActionScript 3 y la verdad que con su charla tan limpia y explicativa acompañada de los necesarios ejemplos ayudó a la gente a ver que realmente la migración no es tan difícil, la ronda de preguntas también fué corta pues mucha gente sigue todavía con ActionScript 2, uhmm, bueno y seguro que habrá algunos con ActionScript 1, jejeje, pero bueno. Una charla a la altura del ponente, ENORME.

La tarde libre permitió que la gente hiciera lo que quisiera, algunos prefirieron la playa, otros el descanso, otros el centro comercial, otros la piscina y algunos más, jejeje :P, como yo decidimos jugar un buen partido de fútbol. Eso si que no me lo esperaba, fué súper divertido y extraño, estar jugando con Raúl, Marcos, Jorge Canteli, Alberto, Elad, Marc, Guillermo, Lesmes, Sergio, Armando, Jorge Quintas, y seguro que me falta alguno, pues eso, el hecho de dar vida y comprobar que personajes virtuales que conoces por blog’s o por listas de correo o por foros, que también son personas de carne y hueso y encima les mola el fútbol, ahhhhh, eso es algo que no se cómo expresarlo con palabras. Gracias a todos por ese súper partido que jugamos.

Luego del partido siguió la piscina, con guerra de pies, jejeje, esto gracias a mi amigo Oscar que hace poco me la enseñó, pues eso que me jugué una guerra de pies con Marc y luego con el resto de subflasheros futbolistas jugamos a dar saltos locos, de los cuales no me puedo olvidar del cohete de Armando, grandioso salto.

Después de la piscina tocó un rato de descanso pues la noche prometía mucho para continuar la fiesta en el bar. Cenamos tranquilos continuando con charlas frikis y acompañadas de algunas dudas sobre cómo utilizar JSFL.

Como no podía ser de otra forma nos movimos al bar y continuamos con más y más historias, chistes, videos frikis por parte de Marc y hasta un mini torneo de futbolín, que si mis cálculos o recuerdos no fallan ganaron Marcos y su pareja (lo siento por el cansancio la verdad no recuerdo quién acompañaba esa noche a Marcos). De los chistes puedo y tengo la obligación de hacer mención del gran, grandísimo Fede y cómo no, también de Marc que como siempre se lució con su gran repertorio de chistes. Esa noche fué larga, muy larga, para algunos más que para otros, jejeje, yo fuí de los que me volví pronto :D.

A la mañana siguiente me levante tarde y desde luego no habría llegado a la charla de Armando, pero tuvimos la suerte de que la aplazaron 30 minutos más, lo que nos dió tiempo justo de desayunar y seguir avanzando en la aventura de conocer gente, pues esa mañana casi se me salen los ojos y me estalla la cabeza, jejeje, estuve sin saberlo jugando al fútbol y en la piscina, desayunando y compartiendo un fin de semana súper friki y flashero con uno de los grandes de hoy en día, me refiero a Zguillez que no es otro que Guillermo, pero bueno, aquí la historia es parecida a la del fútbol, ponerle cara a un personaje virtual, jejeje. Esa mañana también compartí mesa con Carmen y con Fede.

Luego nos fuimos a la charla de Armando, personalmente tenía muchas ganas de verla, escucharla, entenderla y si es posible aplicarla, pues soy un novato en este mundo de los blogs y todo lo que un maestro pueda enseñar, los alumnos tenemos que aplicarnos para hacerlo cada día mejor. Pero hablemos de la charla, estuvo súper entretenida, pues Armando es un personaje en toda regla, transparente, gracioso, interesante, extrovertido y sobre todo un máquina en el tema de los blogs, el diseño, el desarrollo web y el marketing de andar por casa jejeje. A él también lo ajusticiamos con una buena ronda de preguntas que supo y quizo responder con total honestidad, es un tío admirable.

Después tuvimos un descanso pues ya llegaba la hora de la última charla, esta por parte de nuestros amigos de nitsnets studios, Elad y Emiliano. Su charla inició con un poco de problemas técnicos pero con la inestimable ayuda de Raúl todo quedó bajo control, pues no había internet y era necesario para la charla, entonces Raúl prestó su móvil para utilizarlo y listo. Pues bien volvamos al tema de la charla, nos hablaron sobre las redes sociales y cómo sacarles partido mediante sus API’s y así hacer marketing socialero, jejeje, me acabo de invertar esa expresión :P. También nos mostraron algunos proyectos que han desarrollado en su studio, la verdad es que gopress es un proyecto con grandes prestaciones y un modelo de negocio muy interesante.

Para terminar el evento en esta ocasión Marcos y el equipo de organización tenían preparado un sorteo y mientras preparaban las cosas tuvimos un rato de risas de la mano de Marc pues nos mostró varios videos graciosos. Una vez que todo estaba preparado dió inicio el sorteo y fué un sorteo por decirlo de alguna manera porque a todos nos tocaron preimos, se lo montaron muy bien, pues desarrollaron una interfaz en flash para hacer el reparto de premios entre los participanes y cuando se terminó la primera ronda Marcos abrió el proyecto en FDT y modificó los valores para seguir con el sorteo en la segunda ronda, lo friki tiene que estar siempre presente. Los premios venían de la mano de adobe, FX Interactive, CDMON, q-interactiva y no recuerdo quien más. Camisas, gorras, gorros, sudaderas, libros, juegos, planes web y mucho más. Esto me sorprendió mucho pues no me esperaba tanto, este año la verdad es que Marcos y el equipo de organización han realizado un gran esfuerzo para conseguir todo esto, así que muchas gracias a todos.

Como dice el buen Alex Lora

Todo lo que empieza tiene que acabar

Y había llegado ese momento, las despedidas pues muchos teníamos un largo camino de vuelta a casa, y entre unas cosas y otras se nos había pasado un maravilloso fin de semana, así que los abrazos, los apretones de manos, los besos, las lágrimas, las promesas, las ideas, los proyectos, los datos de contacto, tantas y tantas cosas que acompañan a las despedidas, y si, había llegado el momento de decir adios y partir. Por fortuna no había terminado todo aún, por lo menos para algunos, pues volviamos juntos y los que partimos en un principio y al llegar nos separamos, ahora nos volviamos a reunir para volver, bien!!! eso es, nos reunimos Jorge, Carmen y yo para volver. Tuvimos un regreso fabuloso, acompañado sobre todo de música, de grandes éxitos, más charlas interesantes sobre temas web y algunos que no tenían que ver con la web, en fin, un buen cierre. Gracias nuevamente Jorge y Carmen por el viaje.

Y con todo esto creo que he podido contar más o menos mis vivencias en este magnífico evento, subflash 2008. Me he dejado cosas en el tintero, pero si no lo hago así no lo haga de ninguna manera y prefiero que este post vea la luz a medio hacer a que nunca la vea, por eso listo a las maravillosas personas que me hicieron sentir especial por sus sonrisas, apoyo y buenas charlas:

Como dijo hace tiempo Gustavo Cerati, en su último concierto

GRACIAS TOTALES

Si has llegado hasta esta parte del post, te lo agradezco y quiere decir que o bien fuiste al evento o te habría gustado ir, sino entonces al igual que los otros dos casos tengo que agradecerte el tiempo que has dedicado para leerlo y pedirte que me comentes cómo has llegado hasta aquí y no eres alguno de los dos casos que pienso que podrían llegar hasta aquí. GRACIAS y ¡QUE VIVA EL ROCK AND ROLL!

Categories
AIR Flash Flex Javascript JSFL

Flash Develop 3.0.0 Beta 8

Por fin ha terminado la espera ya está con nosotros la nueva release de Flash Develop además acompaña a esta nueva release una remodelación del site.

Desde que conozco este editor soy otro y he empezado a compartirlo con todo el que se deje, durante un tiempo utilicé Sepy, luego Eclipse con ASDT, hasta hubo una ocasión en la que intenté editar mi código con SciTE, pero la verdad es que personalmente no encuentro ni punto de comparación con este maravilloso amigo, Flash Develop.

Actualmente lo utilizo para todo, desde ActionScript, MXML, JSFL, JavaScript, HTML, PHP, TXT y todo lo que se deje, 😛

Anímate a probarlo, si no te gusta siempre puedes volver a tu antigüo editor

Categories
JSFL Tutoriales

Recursos JSFL

En menos de una semana estaré con mis amigos de subflash en los talleres de verano disfrutando de un fin de semana en Alicante, con playita y unas sesiones muy jugosas, una de ellas la impartiré yo y justamente estoy rematando lo últimos detalles de mi presentación, estoy con la parte de recursos y enlaces, así que he vaciado todos mis rss, notas,  TODO list y todo aquello que he ido guardando durante esta incursión que llevo en el mundo de JSFL para poder compartirlo con todo aquel bienaventurado que esté presente durante mi ponencia.

Pero como no quería dejarlo sólo ahí he decidido escribir este post para que así alguién más se beneficie. Así que allá vamos.

Libros

Tutoriales

Presentaciones

Paneles

Recursos

Extensiones

Espero que les sea de utilidad. Salu2…

Categories
Eventos Flash JSFL

JSFL para automatizar procesos (hacer tu día a día más fácil)

Hoy por la tarde he recibido una llamada sorpresa que me ha dado mucha alegría y me ha llenado de ilusión, la llamada fue de Marcos para confirmar mi participación en los talleres subflash 2008 en una sesión sobre JSFL.

El título de la sesión y lo que veremos:

JSFL para automatizar procesos (hacer tu día a día más fácil)

  • Introducción a JSFL
  • ¿Porqué hacerlo tú? Si lo puede hacer Flash automáticamente
  • Un vistazo a una factoría de FLA
  • Ventajas e inconvenientes del lenguaje
  • Conclusiones y casos de éxito
  • Enlaces y recursos

Desde aquí quiero agradecer al equipo organizador del evento la oportunidad que me bridan de compartir el escenario y ese fin de semana con la comunidad flashera.