INTRODUCCIÓN

Si recordamos el anterior post dónde empezamos a hablar sobre el uso de Flex para desarrollar Paneles y teniendo en cuenta que a mi querido amigo Jorge no le acabó de convencer .

Bueno para ser sinceros hay que contar la historia completa, no le acabó de convencer al principio, luego al ver de que se trataba ya le gustó:

A continuación veremos como hacer mucho más, veremos como utilizar las bondades de Flex para crear fácilmente ricas interfaces y como comunicarlo con JSFL para ejecutar las tareas que nos interesen.

En esta ocasión espero que os guste a todos

DESARROLLO

PARTE FLEX

En el post anterior vimos como utilizar el método MMExecute para poder ejecutar código JSFL desde nuestras películas swf, pero para los que somos un poco especiales a la hora de programar y que nos gusta tener las cosas organizadas, separadas, modularizadas para poder escalarlas fácilmente y reutilizarlas … uyy ya me fuí por las ramas … bueno, el tema es que no es la mejor solución mezclar la lógica JSFL con el interfaz, porque hacer cambios y probar puedes ser mortal y generar muchos errores así como una enorme pérdida de tiempo.

Bueno, lo anterior sirve de introducción para presentarles el método runScript del objeto fl, este método nos permite desde código JSFL ejecutar un script externo al código. Este método recibe como parámetro obligatorio la ruta del script JSFL que deseamos ejectuar, como parámetros opcionales el nombre del método y los parámetros que enviamos al método.

fl.runScript("file:///C|/testScript.jsfl", "testFunct", 10, 1);

Además vamos a utilizar la propiedad configURI del objeto fl, esta propiedad nos devuelve el path del usuario del directorio Configuration expresado en formato file:/// , en el cual encontramos los directorios Commands y WindowSWF por ejemplo. Y esto lo queremos para hacer algo parecido a esto:

fl.runScript( fl.configURI + "Commands/Test.jsfl" );

Bueno, esto nos servirá al final para poder ejecutar desde nuestras aplicaciones Flex código JSFL que tengamos centralizado en la carpeta Commands por ejemplo, algo parecido a lo siguiente:

MMExecute('fl.runScript(fl.configURI + "Commands/Test.jsfl", "testFunct", 10, 1)');

Vale, hasta ahora vamos bien. Todo lo que hemos visto lo vamos a utilizar para crear una panel que particularmente me resulta muy útil. Crearemos el Panel Gallery.

PARTE JSFL

Ahora si vamos que se va a poner bueno el tema. Jejeje, es necesario un poco de relax porque sino resulta difícil leer y escribir también, porque aquí somos dos, tu querido lector y yo.

Lo que pasa es que está semana ha empezado bien, pero de pronto el lunes por la noche nos dimos cuenta que ya no quedaban más episodios de la 4ª temporada de Dexter por ver, así que nos pusimos a buscar algo más y encontramos la 5ª temporada de Héroes, así que estas noches me han tenido un poco entre la serie y escribir, preparar y desarrollar este tutorial. Bueno ya que nos relajamos y hablamos un poco, creo que podemos continuar.

Ya por último y para terminar con este pequeño lapso de relax, quiero recomendar una serie súper interesante que vi hace poco, me refiero a Defying gravity, este es otro de los tesoros que he descubierto gracias a Twitter.

Panel Gallery, este panel sirve para tener un pequeño visor de imágenes del directorio que configuremos en nuestro equipo dentro de Flash, desde ahí podemos ver, seleccionar e importar las imágenes que deseemos al documento que estemos editando.

Para desarrollar este panel necesitaremos obtener la ruta de la carpeta que deseamos visualizar, esto lo podemos hacer con el método browseForFolderURL del objeto fl, este método recibe como parámetro una cadena en la que especificamos el mensaje que mostrará al usuario y nos devolverá la ruta que especifique el usuario en formato file:///. Por ejemplo:

var folderURI = fl.browseForFolderURL("Select a folder.");

Una vez que tenemos la ruta lo siguiente es listar las imágenes que tenemos en ese directorio, esto lo hacemos con el método listFolder del objeto FLfile, este método recibe como parámetro obligatorio la ruta de la cual queremos listar directorio o imágenes (en nuestro caso es la ruta que obtuvimos en el paso anterior) y como parámetro opcional indicamos el tipo de lista que deseamos, los valores admitidos son: “files” o “directories“. En nuestro caso utilizaremos “files“, pero no sólo eso, el primer parámetro también nos permite añadir una máscara para que la búsqueda filtre por un tipo de fichero, está máscara funciona igual que en un terminal, por ejemplo la máscara que utilizaremos nosotros será: “*.jpg“. El ejemplo quedaría de la siguiente forma:

var fileMask = "*.jpg";
var list = FLfile.listFolder(folderURI + "/" + fileMask, "files");

Ahora si ya estamos muy cerca. Bueno, una vez que obtenemos la lista de imágenes vamos a almacenarlas en un componente Tree para mostrarlas al usuario y para facilitar el uso utilizaremos el evento change para cargar la imagen seleccionada y mostrarla en un componente Image, por último utilizaremos el evento click del componente Image para importar la imagen seleccionada al documento fla. Esto último lo hacemos con el método importFile del objeto Document, este método recibe como parámetro obligatorio la ruta del fichero que deseamos importar en formato file:///, y como parámetro opcional un valor booleano que indica si deseamos importar el fichero a la biblioteca o no, el valor por defecto es false y lo que hace es importarla a la biblioteca y además instanciarla en el escenario. Por ejemplo:

fl.getDocumentDOM.importFile(URI);

Y con esto lo hemos resuelto. YATA!!!

NOTAS

Para acompañar este tutorial y como premio por haberte leído todo he creado como es habitual un fichero de ejemplo, pero con unas perlitas extras de funcionalidad.

He dividido el panel en 4 partes:

• Document, encontraremos herramientas para modificar on the fly el color de fondo del documento y las dimensiones.
• Gallery, el resultado del tutorial que hemos explicado.
• Library, una herramienta para renombrar varios items de la biblioteca al mismo tiempo, pudiendo añadir prefijo, sufijo o modificar completamente el nombre.
• Utils, un botón para recargar las herramientas, muy útil cuando se desarrollan Tools (herramientas) con JSFL.

Disculpad el desorden del post, es lo que tiene escribir a ratos en el tren y por la noche mientras se ven series. En un principio tenía una idea de como quería escribir un post, pero eso fue hace tanto tiempo que al final tenía otra idea diferente, así que las cosas han salido como la pueden ver aquí. Espero que os sea de utilidad.

DESCARGAS

Bueno, las descargas son en este caso son:

• Extensión auto instalable mediante Adobe Extensión Manager. Panel nomeva MXP.
• Paquete ZIP con Panel swf y ficheros JSFL necesarios para instalar manualmente el Panel.
• Proyecto Flex con todo el código necesario para compilar y ver las tripas del Panel.

EJEMPLO

Ejemplo Panel nomeva – Flex + JSFL 2ª parte from Luis Adrián Rosas Wiedfeldt on Vimeo.

ALGO MÁS

Si, lo único que falta son vuestros comentarios, opiniones para tener un feedback y saber que os gusta y que os disgusta, jejeje.

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 – MMExecute, creación de Panel con Flex
• Tutorial JSFL – Guardar copia FLA 1/2 (comando)
• Tutorial JSFL – Introducción a herramientas (tools)
• Tutorial JSFL – Localización de contenidos (comando)

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)

Bueno, después de esa breve introducción quiero compartir este descubrimiento que hice hace poco y que por falta de tiempo no había podido compartir, hoy, en nuestros días, en estos momentos de transiciónen que el papel tiende a desaparecer y los eBooks o las eMagazines proliferan cada vez más aparece para nuestro deleite la revista Flash & Flex Developer’s Magazine que como es posible adquirirla en papel o en formato electrónico.

Si se dan prisa todavía se puede descargar desde aquí y se puede ver la versión online también.

Tal como dicen los amigos de Riactive sobre este último número de la revista:

En este ultimo numero vienen articulos interesantes tratando temas de como usar los googles maps con Flash o como desarrollar juegos para el Wii en flash!!!

Saludos!!!

Más información:

• Flash & Flex Developer’s Magazine
• Flash & Flex Developer’s Magazine en Riactive
• Flash & Flex Developer’s Magazine en Coconnut

Además añado algunas actualizaciones, pues los ponentes han publicado los sildes de sus charlas y algunos ejemplos:

• Alberto Alcaraz – Optimización en Flex
• Carlos Rovira – Arquitecturas Avanzadas Flex/JEE  RIAlity
• Joan Garnet – Papervision 3D for dummies
  

Las fotos que hice del evento las pueden encontrar aquí.

Un cosa curiosa, un dato importante, un gran acontecimiento, o simplemente las cosas que tiene la vida, pues resulta que me encontré con Kali Romiglia, si el mismo, simplemente tenía que decirlo, jejeje, mi buen amigo Andrés Karp nos hizo una foto, aunque Kali se ha tapado la cara, jejeje, pero es él, hace tiempo también conicidimos en el Flash For México y también tengo otra foto con él.

Pero bueno, esto tuvo su parte graciosa en realidad Kali se cubría la cara por la risa que sucitó ver esto y escuchar al ponente sobre temas de control de errores en el código, es cierto, no hay errores, pero que me dicen de los warnings, jejeje, de verdad que esto es para echarse unas cuantas risas.

Saludos!!!

Entradas relacionadas:

• MIF OnSite III
• MIF OnSite III – Update
• Papervision 3D for dummies – Slides y ejemplos
• Mad in Spain 2008 – Vivencias y reflexión
• Subflash 2008, vivencias, recuerdos, aventuras y mucho más

Para los afortunados que pudimos asistir al evento MIF OnSite III y para los que no puedieron asistir, hoy es nuestro día de suerte, ya que Joan ha publicado y colgado las slides y los ejemplos de su charla en el evento. La charla, junto con las slides y los ejemplos son muy buenos, van desde lo básico las escenas, renders, cámaras, viewports, luces, materiales, primitivas y demás elementos básicos del 3D hasta las animaciones, todo esto desde un punto de vista de programador y acompañado de ejemplos súper sencillos.

Más información y descarga de los recursos:

Papervision 3D for dummies en Made in Flex

Papervision 3D for dummies en Joan Garnet

Vía Serge Gesperes me encuentro con una lista de aplicaciones y ejemplos en los que podemos ver el potencial de Flash Player 10:

• Away 3D demo Aquí vemos un bagón sobre una vía, impresionante motor 3D
• Backflip Aquí vemos una interfaz 3D muy atractiva con movimientos sobre videos
• Hobnox Audiotool ¿Será esto el principio del fin de las aplicaciones de escritorio?
• PixelBender example Esta es una de las novedades más interesantes y la vemos en acción.
• NoteFlight Hace tiempo se inició un proyecto similar, pero la tecnología todavía no lo permitia, ahora sencillamente podemos leer partituras y creas sonido de una manera increible.
• PhotoBooth No sé que hace porque no tengo webcam, jejeje
• Picnick Otro ejemplo de lo que podemos hacer con Pixel Bender
• Boulevart Labs Ejemplos del potencial de Flash Player 10
• Nascom Labs Más ejemplos del potencial de Flash Player 10

No se los pueden perder, sin lugar a dudas estamos viviendo un gran momento en cuanto al 3D, la interactividad, el video y los contenidos ricos en internet.

Saludos!!!

Entradas relacionadas:

• Circuito de carreras con coche en Flash con AS2 & AS3
• Circuito de carreras en Flash con ActionScript
• Concurso 25 líneas de ActionScript
• Tutorial JSFL – Panel Auto Save Flash
• PHP Reader File SWF

A menos de una semana de la celebración del MIF OnSite III me entero vía Joan Garnet que hay un cambio en las charlas y es que por causas de fuerza mayor no contaremos con la presencia de Alberto Albericio en su lugar estará Joan Garnet dándonos una charla sobre Papervision3D, así que ya tenemos otro motivo más para no perdernos este grandioso evento.

Saludos y ahí nos vemos.

Más información:

Papervision3D for dummies: nueva charla para MIF onsite III

MIF OnSite III

Basically, other than returning all the main information from an swf file, such as the bg color, framerate, player version, compression, protection used, movie size.. it allows to modify some of those parameters.
For example it can change the framerate, background, protection.

Es un desarrollo del máquina de Alessandro Crugnola, viene acompañado con un ejemplo donde se explica como utilizarla, pero a mi personalmente no me funcionó tal cual, así que tuve que instalar un par de clases en el class path de php, para ser exactos me hacian falta las clases PEAR y File, una vez instaladas todo fué de maravilla.

Más información:

• PHP SWF Reader
• PEAR
• File

Entradas relacionadas:

• Tutorial PHP – Leer ficheros de la parte privada
• Flash Player 10 – Aplicaciones y ejemplos
• Circuito de carreras en Flash con ActionScript
• Concurso 25 líneas de ActionScript
• Tutorial JSFL – Panel Auto Save Flash

Bueno, en realidad es una beta, pero ya es más que suficiente y es un gran paso para conseguir ser multi plataforma de verdad. De momento las distribuciones soportadas oficialmente son Fedora 8, Ubuntu 7.10 y OpenSuSE 10.3. Yo tendré que pegarme un poco con él a ver si quiere rular en mi bonito Ubuntu 8.04.

Para descargarlo como ya es habitual con nuestros amigos de adobe, tenemos que ir a los Labs y ahí lo encontraremos.

Para sacarle partido pongo un par de post donde hay un listado de aplicaciones útiles.

Aplicaciones creadas con Adobe Air

Más aplicaciones Air y dónde descubrirlas

Tenía pendiente escribir sobre el evento de MIF OnSite III, pero he visto que Joan ya lo ha hecho, así que los redirijo hacia su post.

Sólo cojo esta parte prestada a modo de resumen:

¿Cuándo? 17 de Octubre de 10:00 a.m a 6:30 p.m.
¿Dónde? Universidad Pontificia de Comillas en la sede de Alberto Aguilera, nº23
¿Cuánto? Gratuito
Formulario de registro en la misma web del evento

Vía Joan Garnet.