Como desarrolladores tenemos una responsabilidad para aprender herramientas que muchas veces no pensamos usar, ya que los requerimientos así lo piden. Al menos en Costa Rica existe un tabú con respecto al uso de herramientas relacionadas con Flash, debido al mal rendimiento en memoria del plugin en los browsers; pero las empresas grandes que trabajan con clientes en el extranjero no piensan igual y ahí tienen una ventaja. La mejor forma de perderle el miedo y dejar de criticar una herramienta es empezar a usarla, y hoy voy a hacer una introducción a un grupo de herramientas, que no solamente expandirán sus habilidades como programador, si no que les permitirá desarrollar aplicaciones en iOS y Android.

No voy a enseñarles a programar, espero que quien vea esto ya tenga sus años montado en la carrera o trabajando, pero creo que es claro que hay cosas sobre la sintaxis de AS3 en que necesitarán ayuda, e intentaré aclararlas durante el camino, y obviamente también en los comentarios.

Nota: Como requerimientos mínimos vamos a usar un computador con Windows; generalmente los desarrolladores no podemos escapar de esta plataforma para desarrollar (.Net es buen ejemplo) y en este caso no podremos evitarlo, ya que Flash Develop está desarrollado en .NET; y un dispositivo Android con version 2.2 (FroYo) o superior(con capacidad gráfica 3D) y/o dispotivo iOS en su versión 5 como recomendación.

Siempre he tenido un gusto primordial por el uso de herramientas gratuitas, y esta no es la excepción; usaremos Flash Develop  que pueden descargar directamente de este link, pero si ya ha pasado mucho tiempo de este post revisen la página principal, ya que se está actualizando constantemente. Otra parte gratis que usaremos es Flex SDK, que para quienes no lo conocen permite crear aplicaciones con componentes al mejor estilo de VB .NET, que para mi gusto resultan muy pesadas, pero lo importante es que tiene un compilador de SWF. Flex SDK viene junto con la instalación de Flash Develop, así que tienen que marcar el check que aparece en la instalación para permitir la descarga que toma un tiempo; junto con el Flex SDK, se descarga AIR SDK, que es lo que nos permitirá crear la aplicación Android o iOS, empaquetando en SWF junto con assets en un .apk o .ipa dependiendo del sistema y nuestras necesidades.

Aparte de esto necesitamos el Android SDK, que si ya han estado experimentado desarrollo con Android en Java y otras herramientas seguro ya tendrán instalado.

Una vez instalado FlashDevelop, lo ejecutamos y procedemos a abrir un nuevo proyecto (Project/New Project) y seleccionamos AIR Mobile AS3 App

Como pueden ver hay una amplia capacidad de FlashDevelop para crear aplicaciones, incluso legacy como as2, y para los interesados está HaXe, que con un mismo lenguaje compila para diferentes tipos, como C++ y AS3. Si ponen atención podrán ver que existe un tipo de proyecto llamado NME, que aunque uds no lo crean, permite compilar en muchas más plataformas que AIR; si tienen curiosidad, pueden investigarlo en http://www.haxenme.org/

 

 

Una vez creado el proyecto, deberán revisar obligatoriamente los siguientes archivos dependiendo de la plataforma que vayan a desarrollar: AIR_Android_readme.txt y AIR_iOS_readme.txt con instrucciones para configurar y ejecutar una serie de .bat que viene listos para ejecutar los comandos de compilación por nostros. Muy importante en Android y iOS, para poder compilar necesitamos un archivo .cert o de certificado, para eso nos dirigimos al archivo /bat/CreateCertificate.bat; si no quieren complicarse mucho la vida sobre qué hace, simplemente lo ejecutan (doble click sobre el .bat o en el navegador de archivos de FlashDevelop, click derecho al archivo, se despliega el menú contextual > Execute) y este les generará ese certificado en el directorio /cert dentro del proyecto. La consola nos previene de compilar hasta pasado un minuto de la ejecución del .bat; si mal no recuerdo, el compilar durante ese periodo da un error, pero no es nada grave.

El archivo SetupSDK.bat debe ser editado para que los paths de los SDKs correspondan a los que ya tenemos en el sistema, si ud ya instaló Flex y no quiso utilizar el que viene junto con FlashDevelop (aunque lo recomiendo) podrá editar estas rutas default

:: Path to Flex SDK
set FLEX_SDK=C:\Program Files (x86)\FlashDevelop\Tools\flexsdk

:: Path to Android SDK
set ANDROID_SDK=C:\Program Files (x86)\FlashDevelop\Tools\android

En cualquier momento que intente compilar el proyecto, si le sale algún error, la consola le advertirá de las posibles faltas de configuración que no haya realizado. La explicación está bien detallada en los readme TXT de cada plataforma.

Antes de compilar para ver si todo funciona, si está en Android deberá instalar el AIR Runtime para Android, que interpreta el APK creado en AIR; para esto ejecutamos el bat/InstallAirRuntime.bat mientras tenemos conectado nuestro dispositivo Android; en iOS el AIR va empacado junto con el IPA, por lo que no necesita de una preinstalación; también puede descargar el AIR Runtime en Play de Google. En los settings de las aplicaciones también existe la opción de compilar el APK junto con el AIR Runtime, pero la desventaja es que la aplicación pesará demasiado, hablamos de 8Megas por APK si decide compilarlo de esa manera, pero se estaría brincando que el usuario al descargar la aplicación se le incluya un cuadro de dialogo indicándole que debe descargar el AIR del Market; esta decisión debe tomarse desde el punto de vista de mercadeo, ya que es posible que un usuario no instale su app si no tiene AIR. Actualmente no poseo datos sobre el porcentaje de usuarios que tienen instalado AIR.

Para iOS necesitará un archivo de extensión .mobileprovision, este es necesario para poder publicar en el AppStore de Apple; pero gracias a los magos de la internet, poseo uno para pruebas, y también para instalar en dispositivos Jailbreak, si desea publicarlo legalmente el archivo no le va a servir, necesita tener su licencia de desarrollador en Apple y generar sus propios .cert y .mobileprovision

mobileprovision para iOS

En los settings de iOS en los bat de FlashDevelop (bat/SetupApplication.bat) encontrará donde colocar el path al .mobileprovision y también al .cert, que puede ser exactamente el mismo que está usando con Android.

 

 

El codigo del .bat debe ser de la siguiente manera para iOS. “fd” fue creada automáticamente al usar CreateCertificate.bat, esta clave es recomendable cambiarla al momento de ser distribuida.

:: iOS packaging

set IOS_DIST_CERT_FILE=cert\ProyectoAIRiOSANDROID.p12
set IOS_DEV_CERT_FILE=cert\ProyectoAIRiOSANDROID.p12
set IOS_DEV_CERT_PASS=fd
set IOS_PROVISION=cert\mobileprovision.mobileprovision
set IOS_ICONS=icons/ios

 

Básicamente eso es todo lo que se necesita, puede presionar F8, Control-Enter, o el boton de compilar, justo debajo de Syntax en el menú; y para probar que todo está bien, puede poner algo de texto en src/Main.as; despues de // entry point digite lo siguiente

var text:TextField = new TextField();
text.text = "HelloWorld";
text.x = (stage.stageWidth - text.textWidth) / 2;
text.y = (stage.stageHeight - text.textHeight) / 2;
addChild(text);

Esto colocará una caja de texto en el DisplayList de Flash con la frase “Hello World” centrada en pantalla .

 

 

Tome en cuenta que al compilar, este se ejecutará en una ventana aparte, pero si quiere probarlo en su dispositivo, conectelo, y cambie en Run.bat el target

:target
::goto desktop
goto android-debug
::goto android-test
::goto ios-debug
::goto ios-test

Retira los :: de  ’goto android-debug’ y se los pone frente a ‘goto desktop’ y ya puede probarlo en el dispositivo; le saldrá una ventanita pidiendole la IP de su máquina para hacer debug (a lo que me referiré en otro post), se la pone o le da cancelar, y podrá ver su primera aplicación en Android.

El resultado de su labor se encontrará en el directorio /dist; encontratá sus APK e IPA bien identificados con el  nombre del proyecto, y también con el tipo de compilación que hizo (TEST o DEBUG)

Incluyo a continuación un zip con el proyecto recién descrito completamente armado, así prácticamente solo tiene que instalar Android SDK y FlashDevelop y abrir el archivo del proyecto para visualizarlo. Dentro incluyo el IPA y APK; para instalar el APK sin hacer deploy desde el proyecto, tienen que activar en los settings de Android > Aplicaciones > Fuentes Desconocidas, para poder subirlo al dispositivo de forma manual, darle click e instalarlo. Para iOS no olviden que necesitan o tenerlo jailbreak para las pruebas, o tener su cuenta de desarrollador otorgada por Apple.

Proyecto_AIR_iOS_ANDROID

 

¿Qué ventajas tengo de trabajar con AIR?

  • Para los que hemos trabajado con Flash y as3, sabemos la ventaja de un diseño hecho en Illustrator e importarlo directamente a Flash IDE; si su aplicación es sencilla y requiere verse bien, podrá usar vectores, pero a costa de sobrecargar la memoria.
  • Si ya sabe as3, no tiene que profundizar Java ni Obj-C, lo que le permite distribuir en 2 plataformas casi que inmediatamente; aunque siempre es recomendable conocer la arquitectura original con que se trabaja; por ejemplo, actualmente se desarrollan extensiones específicamente para cada plataforma, aprovechando sus características particulares, estas extensiones se desarrollan de forma nativa y se exportan a as3, lo que permite hacer un puente entre el APK y Android, o el IPA y iOS y por ejemplo enviar mensajes a la bandeja de Notificaciones, mostrar una alerta, tener un icono en el taskbar (Android) obtener información de la red, vibrar (iOS). Pueden ver una lista detallada de estas Extensiones Nativas aquí.
  • La mejor ventaja de todas es que puede crear una aplicación en una semana, no es broma, como experiencia personal, las 2 aplicaciones que tengo en el Market de Android, desde su inicio hasta fin de desarrollo para subirse finalmente a la tienda, fue una semana. Me llevó más tiempo ya que no conocía (y aún no conozco muy bien) los componentes de Flex, así que hice lo mejor que pude con lo que aprendí buscando por internet. Creo que con Flex se puede desarrollar muy rápido, pero se debe considerar el coste del peso; aunque siempre he preferido trabajar con raw code as3, que de paso hace más liviana la aplicación.
  • Hay frameworks especializadas para juegos, como Flixl, y el nuevo Starling que el mismo Adobe sacó, utilizando una nueva capacidad de Flash, que es la aceleración por hardware (Stage3D) que da un incremento INCREIBLE en la velocidad de las aplicaciones, incluso cuando se agregan cientos de sprites como por ejemplo para un juego.
  • El set de Gestures que trae Air for Android es muy sencillo de usar, se asigna un listener y puede escuchar el parámetro en la función llamada para obtener cambios de X y Y, presión, dimensión, etc.

¿Cuáles son las desventajas de trabajar con AIR?

  • El principal problema como antes mencioné, es la forma de empaquetarlo, el archivo puede pesar poco sin incluir el AIR Runtime incorporado, pero si lo incluimos tendremos mínimo 8Megas de peso.
  • El manejo de memoria puede llegar a ser un problema, esto referente a as3 en general,  si usted no está acostumbrado a programar con objetos pequeños, dígase Array e Int, puede olvidar liberar la memoria al crear sus propias Classes y el Garbage Collector nunca podrá eliminar su objeto. Específicamente hay que tener un control sobre las referencias de las instancias, y los listeners que se han puesto, ya que una vez que se dejan de usar, hay que eliminar estas; el Garbage Collector de la máquina virtual de Flash funciona un poco diferente a otros sistemas, este depende del DisplayList (cada que hacemos un addChild agregamos algo al DisplayList) y la única forma de que el GC pueda borrar la instancia es cortar todos los hilos que hacen referencia a ella.
  • Si usa los componentes de Flex su aplicación pesará y pesará más; actualmente Adobe trabaja en mejorar estos componentes, pero en estos momentos no son muy rentables para mobile si está cuidando el peso de su aplicación.
  • La falta de comunicación directa con el sistema operativo, que es “solucionado” en parte con las Extensiones Nativas.
  • En iOS no se puede cargar un SWF externo con código para usarlo luego, ya que el compilado de iOS se vuelve incompatible con un swf plano, y no puede leerlo. Puede cargar swfs con animaciones únicamente.

 

 Una mirada hacia atrás

Apuesto que muchos en este punto están pensando “¿Para qué desarrollamos en iOS con Flash, si Apple no permite esto?”. Bueno, resulta que hay un poco de confusión con respecto al tema; actualmente Apple sí permite subir aplicaciones compiladas con Flash al AppStore, pero la gente no sabe que fue lo que pasó. En 2010 si no me equivoco, Adobe anunció que se podían compilar swfs a iPhone, y que de hecho ya tenían varias aplicaciones subidas; esto enfureció a Apple que de un tiempo para acá son enemigos por conveniencia (cosas fuera de este post) y prohibió de forma generalizada usar transcompiladores para generar aplicaciones para iOS, esto afectó no solo a Adobe, si no a grupos muy honestos como Appcelerator Titanium, se alzaron ciertas protestas y comentarios sobre Competencia Desleal por parte de Apple, lo que llevó a finales del 2010, casi terminando el año, y evitar estar en el ojo del gobierno, revocar esta restricción, noticia que pasó casi desapercibida, excepto para los desarrolladores más fanáticos (yo incluido), supongo que fue por ser la época navideña, y nadie estaba poniendo atención. Desde entonces Adobe retomó el desarrollo del transcompilador. Más o menos así es la historia, si hay algún detalle fuera o sobrante, me disculparán.

Espero que esta introducción sea de utilidad para quienes tengan curiosidad en desarrollar aplicaciones con actionscript, luego mostraré más cosas, como manejo de memoria, y hasta crear sus propios componentes para evitar el uso de Flex y bajar el peso de su aplicación y hasta mostrar de mis propios experimentos.

Saludos y espero sus comentarios.