Antes o después de leer este tutorial sería interesante leer el este otro post sobre la introducción a la creación de Paneles.

INTRODUCCIÓN

La idea es crear un panel que nos ayude a modificar el fondo del documento FLA, pero más rápidamente, si, sé que cambiar el fondo del documento es muy fácil, pero soy un poco maniático y la verdad tener que abrir una ventana, seleccionar un color y luego dar click en aceptar son muchos pasos, me gustaría algo mucho más rápido, algo como hacer rollOver sobre un componente ColorPicker y listo.

DESARROLLO

Para ejecutar código JSFL en una película swf generada con Flex utilizaremos el método MMExecute que encontramos en el paquete adobe.utils por ejemplo:

import adobe.utils.MMExecute;
MMExecute("jsfl code");

El método MMExecute recibe un parámetro de tipo String en el cual indicaremos el código JSFL que deseamos ejecutar. Además devuelve un valor también de tipo String que es la representación en cadena del resultado de la ejecución del código.

Parte JSFL

Vale, ahora que sabemos como ejecutar código JSFL necesitamos saber que código ejecutar. Lo que queremos modificar es una propiedad del documento FLA, así es que antes que otra cosa debemos obtener una referencia al documento, esto lo hacemos con el siguiente código:

var oDoc = fl.getDocumentDOM();

Y para acceder y modificar el color de fondo utilizamos la propiedad backgroundColor que es de lectura y escritura:

oDoc.backgroundColor

Listo, por lo menos la parte de JSFL, ahora tenemos que integrar este código en una aplicación Flex.

Parte FLEX

Utilizaremos un componente ColorPicker este componente entre otras cosas emite los eventos:

• change
• close
• itemRollOver
• itemRollOut
• open

Los que en nuestro caso nos interesan son los eventos change e itemRollOver así que como en cualquier otra aplicación utilizamos el siguiente código:

<mx:ColorPicker id="cpBackgroundColor" x="89" y="10" change="onChange(event);" itemRollOver="onItemRollOver(event);" />

Ahora simplemente en los métodos onChange y onItemRollOver es donde tendremos que utilizar el método MMExecute de la siguiente manera:

import mx.events.ColorPickerEvent;
import adobe.utils.MMExecute;

private function onChange(_oEvent:ColorPickerEvent):void
{
    if (this.isDocumentExists())
        MMExecute("fl.getDocumentDOM().backgroundColor = Number(" + _oEvent.color + ");");
}

private function onItemRollOver(_oEvent:ColorPickerEvent):void
{
    if (this.isDocumentExists())
        MMExecute("fl.getDocumentDOM().backgroundColor = Number(" + _oEvent.color + ");");
}

private function isDocumentExists():Boolean
{
    var ret:Boolean = false;
    if (MMExecute("fl.getDocumentDOM();") != "null")
        ret = true;

    return ret;
}

INSTALACIÓN

Listo, el resultado no lo podremos ver en ejecución a menos que llevemos el swf resultante a la carpeta de Paneles de Flash, es decir al directorio WindowSWF dentro del directorio Configuration de la instalación.

Según el sistema operativo:

Windows® VistaTM:

• unidad de arranque\Users\nombre de usuario\Local Settings\Application Data\Adobe\Flash

CS4\idioma\Configuration\

Windows XP:

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

Mac OS® X:

• Macintosh HD/Usuarios/nombre de usuario/Librería/Application Support/Adobe/Flash

CS4/idioma/Configuration/

EJECUCIÓN

Para ejecutar el Panel debemos acceder al menú Ventana -> Otros paneles -> Change Background Color a continuación un ejemplo de como ejecutar y su funcionamiento:

Ver ejemplo

DESCARGAS

Como es habitual a continuación podéis descargar los fuentes y el instalador del Panel:

• Fichero MXML de Flex por si te interesa ver el código.
• Fichero SWF del Panel para instalar manualmente el Panel.
• Instalador MXP del Panel para instalar automáticamente la extensión.

Saludos, cualquier duda o comentario será bienvenido.

Entradas relacionadas

• Recursos JSFL
• Tutorial JSFL – Introducción a comandos
• Tutorial JSFL – Comandos con interfaz gráfica
• Tutorial JSFL – Comandos con interfaz gráfica II
• Tutorial JSFL – Introducción a Paneles
• Tutorial JSFL – Panel Auto Save
• Tutorial JSFL – Guardar copia FLA 1/2 (comando)
• Tutorial JSFL – Introducción a herramientas (tools)
• Tutorial JSFL – Localización de contenidos (comando)

Este es un post que tenía pendiente desde hace tiempo, en esta ocasión voy a hablar sobre las herramientas (tools) de Flash y de como personalizarlas o como es nuestro caso crear una nueva herramienta con JSFL.

INTRODUCCIÓN

Recuerdo en los tiempos de Flash 4 que fué cuando empecé con Flash que por comodidad y sobre todo por desconocimiento de la aplicación, quería hacer tablas en Flash y por mucho que busqué no encontré una herramienta que me sirviera para esto, así que al final aprendí a utilizar las herramientas de dibujo y a través de cuadros y líneas con las herramientas rectángulo y trazo conseguí hacer las tablas que quería, luego con el tiempo descubrí el panel alineación y distribución y con eso perfeccioné la tarea y me fué más fácil hacer estas tablas.

Bueno, pues la idea es que vamos a crear una herramienta para crear tablas de una manera fácil como si de rectángulos se tratara.

DESARROLLO

JSFL nos permite extender la funcionalidad de la aplicación, como hemos hablado ya en otras ocasiones, lo podemos hacer con comandos y paneles, pero también existe otro modo de extender y automatizar procesos, me refiero a la creación de herramientas.

Las herramientas al igual que los comandos y paneles se programan con JSFL y se almacenan en las siguiente rutas respectivamente por sistema operativo:

• Windows Vista

unidad de arranque\Users\nombre de usuario\Local Settings\Application Data\Adobe\Flash

CS4\idioma\Configuration\Tools

• Windows XP

unidad de arranque\Documents and Settings\usuario\Local Settings\Application Data\Adobe\Flash

CS4\idioma\Configuration\Tools

• Mac OS X

Macintosh HD/Usuarios/nombre de usuario/Librería/Application Support/Adobe/Flash

CS4/idioma/Configuration/Tools

A diferencia de los comandos y los paneles en las herramientas tenemos acceso a funciones y métodos de nivel superior que nos ayudan a desarrollar y controlar el estado de nuestra herramienta, las funciones disponibles son las siguiente:

• activate()
• configureTool()
• deactivate()
• keyDown()
• keyUp()
• mouseDoubleClick()
• mouseDown()
• mouseMove()
• mouseUp()
• notifySettingsChanged()
• setCursor()

Las que utilizaremos para la creación de la herramienta tablas serán, activate que se dispara cuando la herramienta es seleccionada por el usuario, deactivate que se dispara cuando el usuario cambia a otra herramienta, notifySettingsChanged que se dispara cuando el usuario modifica las propiedades de nuestra herramienta, mouseDown, mouseMove y mouseUp que se disparan cuando el usuario hace lo que el nombre de la función dice . Esto con respecto a los eventos para controlar nuestra herramienta.

Pero ¿cómo accedemos a la herramienta?

Pues fácil, como todo en JSFL son objetos necesitamos obtener la referencia a la herramienta activa que será nuestra herramienta, esto lo hacemos con la propiedad activeTool del objeto tools, en el ejemplo siguiente se muestra como obtener una referencia a la herramienta.

theTool = fl.tools.activeTool;

Guay, ¿Y para qué quiero tener una referencia al objeto herramienta?

Pues para asignar a nuestra herramienta nombre, tooltip, icono, opciones, especificar el tipo para el inspector de propiedades por ejemplo y muchas más cosas. Como se muestra a continuación.

// Set the standard tool information
theTool = fl.tools.activeTool;
theTool.setToolName("Tablas");
theTool.setIcon("Tablas.png");
theTool.setMenuString("Herramienta Tablas");
theTool.setToolTip("Herramienta Tablas");
theTool.setOptionsFile("Tablas.xml");

// This tool uses the Shape property inspector
theTool.setPI( "shape" );

Vale, vale, ya me entero, pero ¿Cómo dibujo?

Ah, muy cierto, pues para pintar / dibujar debemos hacer una nota importante y es que tenemos dos momento de dibujo:

• El momento de la previsualización
• El momento del dibujo final

Para el momento de la pre-visualización utilizaremos el objeto drawingLayer y sus métodos moveTo y lineTo que son idénticos a los que utilizamos en la API de dibujo de ActionScript y los método beginFrame y endFrame para indicar el incio y el fin del dibujo de la pre-visualización. Por ejemplo, con el siguiente código dibujaríamos un cuadro de 20×20 en 0, 0:

fl.drawingLayer.beginFrame();
fl.drawingLayer.moveTo(0, 0);
fl.drawingLayer.lineTo(20, 0);
fl.drawingLayer.lineTo(20, 20);
fl.drawingLayer.lineTo(0, 20);
fl.drawingLayer.lineTo(0, 0);
fl.drawingLayer.endFrame();

Y para el momento del dibujo final utilizaremos también el objeto drawingLayer para crear un objeto path con el método newPath, luego utilizaremos los métodos addPoint y makeShape para crear nuestro dibujo. Por ejemplo:

var myPath = fl.drawingLayer.newPath();
myPath.addPoint(0, 20);
myPath.addPoint(20, 20);
myPath.addPoint(20, 0);
myPath.addPoint(0, 0);
myPath.makeShape(false, true);

Perfecto, y ahora ¿cómo modifico las propiedades de mi herramienta?

Vale, para esto debemos recordar que en un principio utilizamos el método setOptionsFile del objeto tool donde indicamos un fichero xml, este fichero xml contiene la definición de las propiedades que utilizaremos en la herramienta. Por ejemplo para la herramienta tabla, utilizo dos propiedades nColumns y nRows. Un ejemplo del fichero xml de configuración es el siguiente:

property name="Columnas: " variable="nColumns" min="1" max="100" defaultValue="3" type="Number"
property name="Filas: " variable="nRows" min="1" max="100" defaultValue="3" type="Number"

Cuando el usuario modifique estos valores en el panel de propiedades se nos notificará en el evento (la función) notifySettingsChanged. Un ejemplo de como utilizar los valores modificados es el siguiente:

function notifySettingsChanged()
{
	var theTool = fl.tools.activeTool;

	this.nColumns = theTool.nColumns;
	this.nRows = theTool.nRows;
}

Y listo, con esto ya tenemos controladas todas las fases del diseño de una herramienta.

EJEMPLOS

A continuación un par de ejemplos de lo que podemos conseguir de una manera sencilla con esta herramienta.

DESCARGAS

Tenemos dos tipos de descargas, para instalar simplemente la herramienta Tablas y para descargar el JSFL:

• Extensión Herramienta Tablas (instalador mxp).
• Paquete zip con la Herramienta Tablas (ficheros jsfl, xml y png).

INSTALACIÓN

Una vez que se haya instalado la extensión debemos asignarla a un grupo de herramienta desde el panel Personalizar panel de herramientas y listo ya se puede utilizar.

Dudas, sugerencias o comentarios, aquí estaré.

Saludos.

Entradas relacionadas

• Recursos JSFL
• Tutorial JSFL – Introducción a comandos
• Tutorial JSFL – Comandos con interfaz gráfica
• Tutorial JSFL – Comandos con interfaz gráfica II
• Tutorial JSFL – Introducción a Paneles
• Tutorial JSFL – Panel Auto Save
• Tutorial JSFL – Guardar copia FLA 1/2 (comando)

Esta es la primera entrega de un grupo de dos tutoriales sobre una misma tarea, guardar una copia del documento Fla con el que se esta trabajando pero sin perder el documento actual en el IDE de Flash.

Introducción

Me explico mejor, existe la opción de Guardar como, pero esta opción lo que hace es abrir el cuadro de diálogo donde nos permite especificar la ruta y nombre del documento Fla, al hacer clic el guardar el documento que se queda en edición en el IDE de Flash es el nuevo. Pero, ¿que pasa si quiero trabajar sobre el mismo fichero?, porque lo que realmente quería hacer era una copia del documento, pues que tenemos que cerrar el documento nuevo y abrir el original.

Bueno para esto sirve el comando que vamos a hacer en este tutorial. En el siguiente tutorial vamos a hacer lo mismo pero lo haremos con un panel para ver las ventajas de un sistema sobre el otro.

NOTA
Puede ser interesante leer antes o después este otro post de Introducción a Comandos para saber qué son, dónde van y cómo funcionan.

Tutorial

Para hacer la tarea de guardar una copia debemos primeramente guardar el documento en edición, esto lo hacemos mediante el método save del objeto Document,

fl.getDocumentDOM().save(true);

Una vez guardado el documento procedemos a realizar una copia, para esto hacemos uso del método copy del objeto FLfile, éste método recibe dos parámetros:

• Origen: La ruta del fichero que deseamos copia.
• Destino: La ruta del fichero resultante.

NOTA:

Es importante destacar que las rutas deben estar expresadas en  file:///

Ya que las rutas las debemos especificar mediante  file:/// haremos uso de una de las novedades de Flash CS4, me refiero a la propiedad pathURI del objeto Document ya que esta propiedad nos devuelve precisamente la ruta del documento Fla en edición expresda en file:///.

NOTA:

En caso de que el documento no haya sido guardado todavía el valor de la propiedad pathURI será udefined con lo que podemos controlar esa situación.

El código que utilizaremos para hacer la copia sería el siguiente:

FLfile.copy(fl.getDocumentDOM().pathURI, NUEVO_NOMBRE);

El caso de que la copia se realice con éxito el método copy nos devolverá true, en caso contrario devolverá false, con lo cual también podemos controlar esa situación para informar al usuario.

A continuación en código completo del commando:

var oDoc;

this.config();

function config()
{
	fl.showIdleMessage(false);
	fl.outputPanel.clear();

	if(fl.getDocumentDOM())
	{
		this.oDoc = fl.getDocumentDOM();

		this.init();
	}
	else
	{
		alert("Debes tener un documento abierto.");
	}
}

function init()
{
	if(this.oDoc.pathURI)
	{
		this.oDoc.save(true);
		var bResult = FLfile.copy(this.oDoc.pathURI, this.oDoc.pathURI.split(".fla")[0] + "_back.fla");
		if(bResult)
		{
			alert("La copia se ha guardado correctamente.");
		}
		else
		{
			alert("Error al guardar la copia.");
		}
	}
	else
	{
		alert("El documento no ha sido guradado.\nPara crear una copia debes guardar antes el documento.");
	}
}

Descargas

• Extensión para instalar el comando (fichero mxp).
• Fichero JSFL.

Dudas, sugerencias o comentarios, aquí estaré.

Saludos.

Entradas relacionadas

• Recursos JSFL
• Tutorial JSFL – Introducción a comandos
• Tutorial JSFL – Comandos con interfaz gráfica
• Tutorial JSFL – Comandos con interfaz gráfica II
• Tutorial JSFL – Introducción a Paneles
• Tutorial JSFL – Panel Auto Save