Cómo portear una aplicación hecha en Flash Professional para plataformas móviles
3 de julio de 2012
Una de las preguntas comunes entre los desarrolladores de Flash Professional es “¿es posible desarrollar para un dispositivo móvil (iOS, Android, BlackBerry PlayBook) utilizando Flash Professional?”. La respuesta corta es “sí”, la respuesta mediana es: “sí, pero hace falta configurar manualmente algunas cosas”. De hecho, con esta misma metodología se puede desarrollar para todas las plataformas móviles. Y la respuesta larga viene a continuación.
Recordemos que Adobe sacó inicialmente la plataforma AIR como una forma de poder desarrollar aplicaciones nativas para escritorio (PC, Mac y Linux). Un paquete de AIR no es más que un con un archivo .swf, un archivo manifiesto y el resto de recursos que necesite la aplicación. El .swf se compila contra una serie de librerías diferentes a las de Flash Player, librerías que tienen más funcionalidad que Flash Player (ej. acceso a archivos de la computadora), pues se asume que es una aplicación normal de escritorio.
Posteriormente Adobe pudo desarrollar AIR para los sistemas operativos Android, iOS y QNX de BlackBerry. La ventaja en este caso es que en los tres casos la aplicación se exporta como una aplicación nativa de cada sistema operativo. Sin embargo, Flash Professional no tiene todavía herramientas para exportar a plataformas móviles. El equipo de Flash Builder, el IDE integrado para hacer aplicaciones con la librería Flex, sí ha logrado automatizar este proceso.
Así que sí, se puede desarrollar usando Flash Professional, pero en principio tendrías que hacer el proceso de empaquetado y subida al dispositivo móvil a través de la línea de comandos. Sin embargo, es posible configurar Flash Builder, de manera que desarrollas con Flash Professional, y luego utilizas Flash Builder para hacer el empaquetado y depuración de tu aplicación a la tableta.
De hecho, yo encuentro el depurador de Flash Builder muy muy superior al de Flash Professional. Resumiendo los pasos, tendrías que hacer lo siguiente:
- Actualizar las librerías de tu Flash Professional actual para que utilice la versión 3.1 de AIR (o la versión 3.2 cuando los dispositivos móviles usen esta versión).
- Crear un proyecto móvil de ActionScript en Flash Builder orientado a las plataformas que necesites.
- Opcionalmente, crear un proyecto Flash Professional en Flash Builder donde vas a guardar tu archivo .fla y sus recursos. Esto es ideal para poder compilar desde el propio Flash Builder.
- Configurar el proyecto dentro de Flash Professional para que utilice la versión de AIR 3.1 y además compile hacia el directorio bin-debug del proyecto móvil de Flash Builder.
- Copiar los recursos extra que necesite tu aplicación al directorio bin-debug.
- Lo último que tienes que hacer es ejecutar tu proyecto desde Flash Builder. Él tomará el .SWF que tienes ya en el directorio bin-debug y lo empaquetará y subirá al PlayBook.
Ahora vamos a detallar cada paso.
Actualización de librerías en Flash Professional
Flash Professional CS5.5 actualmente trae por defecto las librerías correspondientes a AIR 2.6, por lo que debes copiar los archivos correspondientes a AIR 3.1 en el directorio que Flash Professional busca.
Este paso se debe realizar una sola vez después de que hayas instalado Flash Professional.
Así que sigue estos pasos en Windows: (esto es prácticamente traducido del enlace [2])
- Descarga el SDK de la versión 3.1 de AIR - http://helpx.adobe.com/air/kb/archived-air-sdk-version.html.
- Extrae los contenidos del archivo descargado.
- Ve al directorio de instalación de Adobe Flash CS5.5, el que está en “Program Files” o “Archivos de Programa”, o “Program Files (x86)” si estás con un Windows de 64-bit.
- Allí renombra el directorio AIR2.6 a AIR2.6_OLD.
- Crea un nuevo directorio y llámalo AIR2.6
- Copia el contenido del directorio del paso 2 al nuevo directorio AIR2.6.
- Navega hasta el directorio AIR2.6/frameworks/libs/air/ que acabas de transferir, y copia el archivo airglobal.swc.
- Pega el archivo SWC en Adobe Flash CS5.5/Common/Configuration/ActionScript 3.0/AIR2.6/ y sobreescribir el archivo airglobal.swc existente.\
- Ve hasta Adobe Flash CS5.5/Common/Configuration/Players/ y edita los siguientes archivos con un editor de texto (de pronto necesites privilegios de administrador):
- AdobeAIR2_6.xml
- AiriPhone.xml
- Android.xmlCambia el atributo version de la etiqueta player de 11 a 14 en cada archivo. Guarda tus cambios.
Si usas MAC OS X, el directorio de la aplicación es Applications/Adobe Flash CS5.5, y debes descargar la versión 3.1 de AIR para Mac.
Crear un proyecto móvil en Flash Builder
Para crear un proyecto móvil, una vez que tengas instalado Flash Builder sigue los siguientes pasos:
- En Flash Builder, en la perspectiva de Flash, haz click en File -> New -> Actionscript Mobile Project.
- Escoge un nombre para el proyecto.
- En la siguiente pantalla haces click sobre Finalizar. Toma nota del nombre de la aplicación, porque en la siguiente parte vas a tener que configurar la aplicación en Flash Professional para que compile con ese nombre.
En la siguiente parte crearemos el proyecto en Flash Professional y lo configuraremos para que compile el archivo para un directorio dentro del proyecto que acabamos de crear.
Crear un proyecto Flash Professional en Flash Builder
Este paso es opcional, pero trae muchas comodidades poder compilar los archivos .fla directamente desde la interfaz de Flash Builder. Sigue los siguientes pasos:
- En Flash Builder, en la perspectiva de Flash, haz click en File -> New -> Actionscript Mobile Project.
- En la siguiente pantalla escoge el archivo .fla sobre el que vas a crear el proyecto.
- Haz click sobre Finalizar y tendrás ya un nuevo proyecto de Flash Professional en Flash Builder.
Ahora abrirermos Flash Professional para terminar de configurar lo que nos hace falta para exportar el proyecto.
Configura Flash Professional para que exporte a bin-debug
Debes ahora cambiar la versión de AIR en Flash Professional para que exporte a “AIR 2.6” (si hiciste el cambio ahora exportará a AIR 3.1) y modificar el directorio a donde va a exportar la aplicación al directorio bin-debug que está dentro del proyecto en Flash Builder.
- En Flash Builder, deselecciona cualquier elemento para poder acceder a las propiedades del documento.
- Dentro de la ventana de propiedades del documento, selecciona AIR 2.6, y quita la selección de HTML Wrapper. No necesitamos el wrapper de HTML junto con el SWF.
- Haz click en el icono de carpeta para seleccionar el directorio a donde vas a compilar la aplicación, selecciona el directorio bin-debug del proyecto Flash Builder que creamos al inicio de este artículo. Este proyecto espera empaquetar un .swf con el mismo nombre que la aplicación que le hayas puesto. Es decir, si el proyecto en Flash Builder se llama “pErencejo12”, entonces el .swf que compilará Flash Professional se debería llamar “pErencejo12”.
Flujo de trabajo entre ambos programas
Una vez hecho todo esto, ahora debes publicar la aplicación para que compile al nuevo directorio. Podemos hacer esto desde Flash Builder seleccionando el proyecto de Flash Professional. En la barra de herramientas tenemos acceso a 3 botones para publicar, correr y correr el debug de la aplicación.
La ventaja de tener los scripts separados de Flash Professional, es que Flash Builder tiene un editor de código mucho más poderoso que el que trae el primero. Completación verdadera de código: al contrario de FP que completa de un listado inmutable, FB analiza las clases a las que enlazas y completa el código en base a ello. Cuando guardes en FB, FP compilará automáticamente los cambios. Ten en cuenta que lo hará a través de la función de Publish de FP.
Cuando quieras ejecutarlo en tu dispositivo móvil, ve al proyecto de ActionScript móvil en Flash Builder, y córrelo.
Después de seguir los pasos descritos anteriormente, haz click en Run.
Consideraciones de desarrollo
Como el programa que realmente compilará la aplicación es Flash Professional, Flash Builder únicamente se encargará de empaquetarlo. Por lo tanto, si quieres obtener una versión debug de la aplicación, debes activar la opción correspondiente en Flash Professional.
Es probable también que si tu aplicación estaba escrita originalmente para Flash Player falle en ciertos puntos. Las librerías de AIR y de Flash Player son ligeramente distintas, sobretodo si utilizas ContextMenu, que en AIR es NativeMenu. Ten en cuenta que aunque tienen sus similitudes, la plataforma objetivo puede tener una manera de interactuar muy distinta a una aplicación para el navegador, o incluso distinta a la interfaz mouse-teclado a la que estamos acostumbrados en las PCs. Como siempre, evita cualquier suposición cuando hagas una migración tan importante como ir de Flash Player a una aplicación nativa. Y practica con alguna aplicación que ya tengas hecha, para poder reproducir estos pasos con mayor
Referencias:
