martes, junio 19, 2012

AIR Android iOS App con Blue Marble y FlashDevelop

Antes de proceder con este artículo, le recomiendo que lea mi artículo anterior "Desarrollando Apps para iOS y Android con FlashDevelop" que le será de utilidad si quiere iniciar a desarrollar aplicaciones para dispositivos móviles con FlashDevelop.

Sobre este artículo Mi objetivo es ayudarles a crear su primera aplicación AIR Android/iOS completamente funcional gracias a un par de herramientas que he desarrollado y que considero que pueden ser de utilidad para muchos por su sencillez.

Herramientas
  • En esta ocasión usaremos el ya hablado en el artículo anterior FlashDevelop con Flex y AIR.
  • ArbolNegro: Usaremos mi proyecto OpenSource que he movido recientemente a Github; es una serie de paquetes de clases que he desarrollado desde hace varios años, que eliminan ciertas tareas repetitivas al momento de crear programas y aplicaciones con actionscript, como lo son cargar un XML (complicado para principiantes en as3), un tipo muy singular de LiquidLayout, carga de clases externas almacenadas en otros swfs entre otras, que si se presenta la oportunidad las demostraré, pero no es el punto principal de este artículo.
  • BlueMarble: Blue Marble inició como un apéndice de Arbol Negro, pero sus funciones cambiaron drásticamente durante el desarrollo y actualmente lo he separado como proyecto de Arbol Negro y funciona como un Framework, pero sigue siendo dependiente de él. La función principal de Blue Marble es crear un GUI sin preocuparse por ello, semejante a Flex en el hecho de que juntas unos cuantos componentes y ya tienes tu aplicación, pero con las diferencias que es mucho más liviano (mi principal queja de Flex es su peso), está completamente basado en código, no en un markup tipo HTML como Flex, por lo que posiblemente sea todo muy abstracto para quien solo haya hecho de este tipo de aplicaciones, pero lo hice de esta forma para evitar que en el desarrollo se mezcle el código con el markup, una mala práctica (o no dependiendo del desarrollador) a raíz de arreglar cosas de última hora. Será Blue Marble de lo que hablaré principalmente.
Inicializando

Descargamos ArbolNegro y BlueMarble y lo ponemos en nuestro directorio de elección; por costumbre tengo separadas todas las class del proyecto en sí, pero también es recomendable tener la copia con el proyecto por los posibles cambios a futuro de los paquetes que incluyamos. Procedemos a abrir FlashDevelop, y creamos un nuevo proyecto "AIR Mobile AS3 APP"; una vez cargado procedemos a agregar las referencias a nuestras class de ArbolNegro y BlueMarble y cualquiera que usted ya tenga con anterioridad. Para ello nos dirigimos al menú, Tools > Global ClassPaths (Ctrl - F9)



Seleccionan as3 en el combobox, presionan Add Classpath y van al directorio donde se encuentra ArbolNegro y BlueMarble; si están por separado hay que agregar ambos directorios. Ambos paquetes empiezan con la carpeta "net/", la carpeta que debe ser incluida debe ser la que contenga a esa misma carpeta net/ para poder hacer la llamada a las classes desde la raíz, por ejemplo import net.absulit.bluemarble.controls.Button. Una vez agregadas las classes podemos proceder a crear lo básico de la aplicación.

Creando la aplicación

 Antes de iniciar, hay unas cuantas cosas que quiero que tengan presentes, una de ellas es que el Framework funciona en su estado actual; puede que se encuentren un bug, pero hasta el momento no me ha impedido publicar 2 aplicaciones en Play Store; otra es que estoy consciente que se puede mejorar, hay  un par de cosas que quiero cambiar y se las mencionaré en el camino; en el momento que las desarrollé me pareció el enfoque más sencillo, y me gusta no complicarme,y por el momento se van a quedar así hasta que planifique una re estructuración; pero nada de lo anterior les va a evitar desarrollar un app super facil y rápido. 

Profundizando un poco más sobre BlueMarble y su estructura, este tiene una interfaz mínima, transparencias y lineas monocromáticas; también su estructura funcional se basa en tomar ideas de proyectos ya existentes, como lo es Flex y su concepto de ventanas que me parece muy atinado, al igual que su navegación; y por otro lado el concepto de States de Flixl (que también usa Starling) en el que un "mundo" es una class aparte, y para entrar en ese nuevo mundo, llamamos a la Class de forma dinámica sin almacenar todo en memoria. Así cada ventana de BlueMarble es un "Mundo Nuevo" donde programamos aparte del resto del sistema y con una comunicación sencilla entre ventanas enviando un objeto de parámetro que veremos más adelante. 

Para empezar ya a codear, nos vamos a la carpeta /src y abrimos el archivo Main.as que es la raíz de nuestro programa; aquí vamos a establecer las variables de BlueMarble y las llamadas de clases, pero antes, vamos a comentar una línea que luego nos puede ser algo incómoda al momento de hacer debug, y es en el método deactivate(), que es un listener que se dispara al ponerse Idle el aparato, pero también al darle click fuera de la ventana de AIR, por lo que se nos puede cerrar sin querer al estar revisando el output de FlashDevelop:

  private function deactivate(e:Event):void { // auto-close         //NativeApplication.nativeApplication.exit(); 
}

Sugiero cambiar la siguiente linea de código de point a gesture, ya que si en algún momento queremos proceder a usarlos es muy probable que se nos olvide y caigamos en frustración porque los eventos no se dispararán; no es obligado y tampoco afecta el uso de BlueMarble (hasta donde mis pruebas actuales indican), pero es una recomendación.

 // touch or gesture? Multitouch.inputMode = MultitouchInputMode.GESTURE;

Procedemos a continuación a crear una variable para nuestro administrador de ventanas llamando a la class WindowManager de Blue Marble

WindowManager

 private var _windowManager:WindowManager;

al digitar los dos puntos (":") se llamará al generador de código automático y nos incluirá WindowManager en cuanto presionemos enter al aparecer un menú contextual; en caso que no se importe solo por presionar mal alguna tecla, procedemos a colocar el cursor sobre el nombre de la class e inmediatamente presionamos Ctl-Shift-1; esta secuencia importará WindowManager automáticamente y con cualquier otra class en nuestro código; una entre varias ventajas que tiene FlashDevelop con respecto al manejo de código actionscript que está ausente en otros lenguajes que dan soporte de colores como PHP, Javascript; aunque PHP tiene autocompletar para classes nativas, pero no así importadas por nosotros; esto obviamente por que su enfoque principal es HaXe/as3. WindowManager es la class que administrará nuestras ventanas y la navegación entre ellas, cargándolas y descargándolas de memoria, conforme las llamamos; es una class gráfica dependiente de la variable Stage, por lo que recomiendo este siguiente código para asegurarse de que Stage ya se ha cargado correctamente, ya que podrían presentarse problemas si esto no se realiza, ya que la necesita para tomar medidas de pantalla y colocar los elementos antes de que se presenten en pantalla:

 // entry point init(); if (stage != null){ 
addedToStage(); 
}else{ 
addEventListener(Event.ADDED_TO_STAGE, addedToStage); 
}

Este código se coloca en el constructor Main(); tiene una función init() para inicializar variables, esto porque el constructor en Actionscript al compilarse no se comprime, lo que aumenta el tamaño final del archivo, así que hay que mantener al mínimo el uso de variables e inicializadores en el constructor, por eso es mejor tener una referencia a una función sin comprimir, que todas las variables; luego preguntamos si el stage existe; si ya se cargó para ese momento, entonces procedemos a llamar a la función donde iniciará el programa, en caso contrario ponemos un listener y este esperará a que el contenido se cargue para iniciar. Este método también es muy útil al crear swf para web, ya que el archivo al ser descargado no estará funcional hasta que esté completo, y si stage se llama antes pues habrán problemas. En nuestra funcion addedToStage agregamos al parametro default de Event un null para poder hacer la llamada en solitario de la función en el constructor, y también para evitar ponerle el null a mano en el constructor

 private function addedToStage(e:Event = null):void

 También movemos las siguientes lineas de código que estaban en el constructor aquí:

stage.scaleMode = StageScaleMode.NO_SCALE; 
stage.align = StageAlign.TOP_LEFT; 
stage.addEventListener(Event.DEACTIVATE, deactivate);

Y ahora sí dentro de esta función podemos iniciar nuestro programa después de estas últimas líneas. Window Manager en sí misma la vamos a necesitar en otras partes, así que la convertí en un Singleton; que es una class que solo puedes instanciar una vez, y solo por el método ofrecido por la clase; esto también para mantener la integridad de la aplicación y no tener más de un WindowManager corriendo; pero si podremos tener más de una referencia y usar sus propiedades como una variable global.

 _windowManager = WindowManager.instance; addChild(_windowManager);

La raya baja en la propiedad ("_") es una costumbre de desarrolladores de actionscript; tiene dos utilidades, una es hacer notoria que la variable es privada en contexto de variables locales en un método, pero es puro concepto visual, hay muchos que no les gusta y no lo usan; pero la segunda utilidad tal vez los haga cambiar de parecer, y es que el autocompletar de FlashDevelop al presionar "_" y una letra, nos mostrará únicamente esas variables o propiedades privadas, y se tiene un acceso rápido a ellas. Pueden no usarlas, pero se los recomiendo, es casi que un standard entre desarrolladores de actionscript. WindowManager es un Sprite, lo que quiere decir que se verá en pantalla; pero no será visible hasta indicarselo directamente por actionscript, y para eso está addChild, que agrega variables de tipo DisplayObject al DisplayList que es el ambiente visual, lo que vemos en pantalla. Inmediatamente después de creada, la agregamos al DisplayList, para luego proceder a agregar nuestras pantallas o ventanas; esta es una de las cosas que quisiera mejorar, ya que por costumbre a veces, hago addChild después de tener a todos los objetos visuales y variables listas, pero WindowManager necesita de acceso a stage, y solo puede tenerlo al hacerse el addChild, ya que como tuve que elegir crear el Singleton, no puedo enviar stage de parámetro; si se hace addChild de WindowManager luego de agregar las ventanas, es muy probable que todo se desordene en pantalla, le recomiendo lo intente para ver las consecuencias de ello, pero luego de agregar unas ventanas para que sea visible el daño.

Window

Una ventana es una class que hereda de Window, así de simple, esto nos permitirá enviársela a WindowManager para que la coloque en nuestra pantalla. Para crear una nueva class, damos click derecho sobre nuestra carpeta src/ y seleccionamos Add > New Class y llenamos los datos de la siguiente ventana:




A simples rasgos una class heredada de Window luce así:    

 package { 
import net.absulit.bluemarble.controls.Window;
public class MainWindow extends Window { 
public function MainWindow(width:int=400, height:int=400, data:Object=null) { super(width, height, data);

}


Sin poner nada en esta ventana, podemos enviársela a WindowManager y tener la aplicación vacía, pero lista:

   _windowManager.push(MainWindow, "Home", [true|false], [iconpath:String]); _windowManager.sort();

 Para esto agregamos las dos lineas anteriores; el método push, inserta la referencia de la class dentro de WindowManager para futuro uso, incluso si llamamos directamente a la class luego, es necesaria para otros procesos; el segundo parámetro existe para otro componente visual: El TabBar; ese string pondrá un texto en el TabBar para ser visualizado inmediatamente y para navegación; el true o false sirve para esconder el boton del TabBar; el iconpath es un parámetro que exíste pero no está completamente funcional; provee un ícono para ser usado con o sin el texto, pero me pareció más apropiado en este primer release de BlueMarble dejar funcional al menos uno y luego retomar el desarrollo, aunque el campo está abierto desde ya. Luego llamamos a la función sort() que acomodará finalmente los elementos en pantalla y principalmente el TabBar, que tiene que hacer un conteo de las ventanas existentes y visibles; así como de las medidas de la pantalla actuales. Técnicamente con esto la aplicación está completa, pero falta incluir algo, un archivo del que el mismo ArbolNegro depende, y es flash.swc (incluido en la descarga del ejemplo). Si considera que está listo, puede probar la aplicación, presionando Ctrl-Enter y probarlo StandAlone en el computador:  



Me gusta cambiar las dimensiones en Run.bat y usar las dimensiones en proporción al iPhone, ya que a la vez sirve para visualizarlo en la computadora y acostumbrarnos al mínimo tamaño disponible:

  set SCREEN_SIZE=320x480:320x480

 Como pueden apreciar en la imagen anterior, la interfaz es mímina; TabBar con "Home" de label, y arriba, aunque vacío, está el ActionBar, que podrá contener por ahora, un botón de navegación a la izquierda, aunque usted puede darle el uso que requiera, y un botón de acción a la derecha, pensado para menús secundarios; en medio puede ir un título, que se ajustará y mostrará de acuerdo a su tamaño. Estos elementos son accesibles gracias a propiedades dentro de cada Window, aunque pienso cambiarlo a algo más sencillo y asignarlo al WindowManager en un futuro, o ambos, pero prefiero el WindowManager para un acceso más abierto que actualmente no tengo al poner el acceso dentro de Window. Veamos un ejemplo sobre como modificar estas propiedades; para esto nos vamos a nuestra recién creada ventana MainWindow.as, recordando mantener el proceso de preguntar si existe stage antes de usarlo, proseguimos con el código:

  private function init():void { 
_actionBar.title = "Blue Marble Demo 1"; 
_actionBar.navigation = new Button(); 
_actionBar.navigation.label = "Exit"; _actionBar.navigation.addEventListener(MouseEvent.CLICK, onClickActionBarNavigation);
_actionBar.action = new Button(); 
_actionBar.action.label = "Test"; 
}

 private function onClickActionBarNavigation(e:MouseEvent):void { NativeApplication.nativeApplication.exit(); 
}

ActionBar actualmente es una propiedad heredada de Window (pero estará en WindowManager) y de ahí podemos acceder a los botones navigation y action; crearles una nueva instancia (mi principal queja de esto es rehacerlas, cuando deberian estar constantes a mi gusto, aunque eliminarlas entre ventanas ahorra memoria, creo que es algo incomodo rehacerlas) y agregarles un listener y su método como por ejemplo el CLICK para hacer EXIT con el método nativo de AIR. Pueden probarlo y de hecho el exit funcionará. Para probarlo bien en Android y iOS pueden revisar el post anterior y comprobar que todo funcione bien. Conclusión Dentro de un Window, pueden meter LO QUE SEA que ustedes ya hayan hecho en actionscript con anterioridad, esa era mi meta, simplificar la forma de hacer aplicaciones y devolverle el poder al programador sin obstáculos de componentes pesados y poder hacer lo que sabemos hacer, que es crear nuestra propia interfaz dentro de la aplicación. Hay muchas cosas más por ver; hay un par de componentes que no he detallado aquí, pero que son fáciles de usar y pueden ver el código, que son Button, Text e InteractiveList, aunque el último necesita una explicación propia, pero eso será para otro artículo. Si quieren ver una aplicación completamente terminada en BlueMarble pueden ver Webcams Costa Rica la cual originalmente fue desarrollada en Flex con un peso de 6MB ahora con BlueMarble tiene un peso de 712KB.


Dentro del proyecto en Github pueden encontrar el proyecto terminado: BlueMarbleDemo1


Espero que esto sea de utilidad para quien aún no se haya animado a crear una aplicación y subirla al Play Store, y que empiecen a convertir esas ideas en algo real. Saludos y espero sus comentarios y dudas.   

martes, mayo 29, 2012

Desarrollando Apps para iOS y Android con FlashDevelop

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 enhttp://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 Nativasaquí.
  • 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.

Este artículo fue publicado originalmente en losdevs.com

sábado, enero 02, 2010

Creando Tendencias en Flash con Twitter




El año pasado en uno de esos ratos libres -de un mes-, me decidí a crear una pequeña herramienta sencilla para poder ver que acontecía en Twitter y en Costa Rica sin tener que actualizar la página; como programador avanzado de Flash y AS3, me decidí a experimentar un poco con el API de Twitter, que cualquiera puede aprender a usar.

Ya que mi servidor está configurado para PHP lo más sencillo era tomar una de las librerias ya existentes para PHP y probar su funcionamiento.

Realmente es muy sencillo utilizar estas API, se la recomiendo a todo el mundo que esté interesado en crear aplicaciones en twitter, ya que no llevan mucho esfuerzo aplicarlas, es por esto que no dedicaré tiempo explicarlas.

Parte de las cosas que si me llevaron tiempo es la forma en que se filtran los datos, ya que sí requiere un poco de investigación y dedicación por parte de uno como programador para obtener el resultado deseado. Primero buscando la cantidad de twits que se mantienen vigentes por twitter; que entre actualización y actualización son cerca de unos 100, pero debido al posterior filtro de país, este quedó inferior a 80.

Luego lo más sencillo para hacer es filtrar las palabras comunes igual que hace la pagina central de Twitter, pero tratando de evitar las palabras en inglés; ya que no quise sacar el rato para averiguar como usar las expresiones regulares, creé listas de palabras a omitir, no solo comunes, si no expresiones poco usadas o mal escritas, como también palabras en otros idiomas y palabras que por si solas no significan mucho; así por ejemplo tengo una lista de conjunciones, vocales solas, y expresiones como estas: "xq, q, c, s, g, i", letras que se usan para acortar en un celular.

El diseño es realmente muy básico, quería dos columnas de palabras, una con comunes y otra con otro tipo que al iniciar no sabía que podía hacer pero tenía una idea vaga; tenía el concepto de cielo por twitter y usé una ligera animación de nubes en 3d solo para adornar un poco, y finalmente en el centro imágenes con los avatares de cada usuario que ha sido tomado en cuenta en la mediación de datos; me dijeron en su momento que debía indicar para que eran las imágenes, pero como muchas cosas en la vida, una vez que lo lees, no necesitas volver a leerlo, y también consideré que hay cosas que se pueden aprender usándolas o viendo como funcionan.

El resultado final es este al que llamé simplemente Tendencias, lo puse en español ya que siempre he considerado que hemos desvalorizado nuestra lengua frente a otras debido a nuestras carreras y estilos de vida tecnológicos. La página tiene breves explicaciones de su funcionamiento en un minúsculo menú, y la columna de la derecha se convirtió en Frases Comunes que internamente por su funcionamiento actual, serían las palabras comunes usadas en retweets.

Sin desvalorizar la página, sé que tiene errores, muchos de ellos son en la forma en que debería ser usado, y un par confirmados que si son errores de código; pero todo esto es debido a que como muchos, no tenemos tiempo para mantener nuestros experimentos, y muchas veces con su simple existencia estamos satisfechos de haber cumplido nuestro pequeño sueño. Por otra parte creo que es muy útil, ya que no son muchos sitios los que pueden aplicar lo más cercano al tiempo real en una página aplicando las APIs de twitter, además sin necesitar que la gente se suscriba al servicio lo que me parece magnífico.

Espero este año 2010, hacer muchos proyectos como este y dejar menos abandonado el blog.

Los mejores deseos para mis efímeros lectores.

miércoles, abril 01, 2009

Manejando XML en AS3 de Forma Facil

A petición de un lector en Colombia, llamado Nestor, voy a enseñarles como hacer un lector de RSS, lo voy a dividir en 2 partes, empezando con esta, que es leer XML con AS3.


En esta parte veremos de forma rápida que es XML, como cargarlo y la forma de navegar en él con el standard E4X.


Un XML para los que no saben, es un archivo de texto plano, como uno generado por notepad, con una estructura similar a los nodos de HTML, la diferencia se basa, en que XML se utilizará para enviar datos, y que su estructura puede ser la que nosotros necesitemos, por ejemplo:


Si tenemos una tabla con nombres y apellidos se vería así:


Tabla Personas

Nombre Apellido


Juan Perez

Daniel Rodriguez


La idea de XML es llevar estos datos a través de una estructura predefinida de texto, y que muchos lenguajes de programación puedan leerlo sin crear un nuevo protocolo, así, nosotros sabemos que los campos que debemos crear, son, nombre y apellido, y su contenido, juan perez, y daniel rodrigez en la tabla llamada personas.


para definir un campo en XML se abre etiquetas como en HTML, y se pone el nombre que uno necesite, así, si mi tabla se llama personas, hago lo siguiente


<tabla nombre="personas">

..

</tabla>


definimos una estructura simétrica un nodo tabla se cierra con /tabla, y su contenido iría donde estan los dos puntos seguidos.


Ahora, seria mas sencillo si pudiéramos manejar a cada nombre y apellido como uno solo (persona) así que creamos un nodo para manejar a ambos:


<tabla nombre="personas">

<persona nombre="" apellido="">

</tabla>




Observen que el nodo persona tiene al final "/>" ya que no tiene más nodos dentro de si, asi que es innecesario tener el complemento si no hay contenido, simplemente lo cerramos (/) en el mismo nodo.


Ahora, nosotros tenemos 2 personas, que hacemos? bueno, hacemos una copia del mismo nodo "persona" vacío, y llenamos los datos:


<tabla nombre="personas">

<persona nombre="Juan" apellido="Perez">

<persona nombre="Daniel" apellido="Rodriguez">

</tabla>






Ahora tenemos una tabla de nombre personas, con dos personas dentro, cada uno con sus atributos de nombre y apellido, si quisiéramos otra tabla, dentro de nuestro archivo xml, puede llevar la misma estructura, pero para diferenciarla, podemos poner de nombre en la tabla "recursos humanos" por ejemplo, para diferenciarlos.


Muy bien, ya que sabemos que es un XML, podemos leerlo desde el flash, copiemos entonces nuestro XML recién creado en un archivo .txt, pueden abrir el notepad, o cualquier editor de texto disponible (yo uso <a href="www.flashdevelop.org">flash develop</a>) y lo guardamos con el nombre "personas.txt" o "personas.xml", tomen en cuenta que la extensión no influye en el contenido del archivo al ser leído por flash, solo es una identificación para el sistema operativo sobre como y con que programa debería interpretarlo, si le ponen .xml, pueden abrirlo nuevamente con notepad o cualquier editor de texto.


Listo el archivo, lo guardamos en un directorio conocido, y creamos un .fla en el mismo directorio donde guardamos el .xml; luego, creamos una layer de actions, y pegamos el siguiente código:


var url:String = "personas.xml";

var urlRequest:URLRequest = new URLRequest(url);

var urlLoader = new URLLoader(urlRequest);


var xml:XML;


urlLoader.addEventListener(<div id=":8e" class="ii gt"><wbr>Event.COMPLETE, onCompleteEvent )


function onCompleteEvent(e:Event){

xml = new XML(e.target.data)

trace(xml)

}


Para los que vienen de AS2, esto es complicado, por que cuando uno inicia, piensa que se tiene que reaprender un monton de funciones para hacer lo que antes hacias en un par de lineas, bueno esto no es cierto, generalmente, aunque el codigo parezca largo, se repite en otras operaciones, y despues con el uso, se encuentra la utilidad del manejo separado de eventos.


<span style="font-weight: bold;">Explicando el codigo</span>: Bueno en la primera linea nada dificil, definimos la ruta de donde se encuentra nuestro XML, como está junto al fla, es solo "personas.xml", si estuviera en la unidad C, seria asi: "c:/personas.xml", o dentro de otras carpetas si asi se necesita; luego tenemos este URLRequest, que es el objeto que armamos para solicitar datos por medio de la siguiente objeto, URLLoader, tambien hay otro objeto por el que podemos solicitar datos con URLRequest, y es el Loader, como por ejemplo, para cargar imagenes dinamicamente, en lugar de XML. Luego el URLLoader nos hará la llamada a "personas.xml", y nos dará informacion que necesitamos, como un objeto de tipo XML de flash con la extructura del archivo XML, tamaño, y algo muy importante, avisarnos cuando se cargó el archivo, ya que no podemos empezar a usarlo hasta que esté completamente cargado, entonces, cuando llamamos al metodo addEventListener de URLLoader, le pedimos que nos avise del evento COMPLETE, y que llame a una funcion que tendrá el codigo para trabajar el XML como si ya se hubiera cargado, la funcion, onCompleteEvent, se programa de esta forma, se debe pensar que para el momento en que se llame, debe estar cargado ya. Como paramentro de nuestra function onCompleteEvent, tenemos de nuevo un EVENT, para los que no comprenden los eventos, se preguntarán, de donde sale este e:Event, realmente la estructura de la function del evento no la definimos nosotros, está definida por flash, como paramentro de addEventListener se necesita que se envíe una function con ese parametro, para que? para que usted pueda usarlo, es un parametro generico; por ejemplo, usted no solamente puede tener un XML para cargar, sino varios, al mismo tiempo, o uno despues del otro, pero resulta que necesita que en COMPLETE se les haga el mismo procedimiento, asi que en lugar de definir 2 onCompleteEvent, ud solo define uno, pero ud no puede saber cuando le llega, ni cual le llega, asi que se le envia este parametro "e" con toda la informacion, dentro viene, el XML que se llamó por medio del URLLoader, pero hay que sacarlo, asi llamamos a e.target que representaria al URLLoader que disparó o produjo el evento COMPLETE, y si nos fijamos en la ayuda de Adobe, para URLLoader, el atributo "data", contiene informacion cargada sin formato, por lo que tenemos que darle forma con un objeto que nos ayude a manipularlo, como nosotros sabemos que es XML, usamos el objeto XML de flash, y lo guardamos, hacemos un trace(xml) y vemos la salida en la consola, si es el contenido de nuestro personas.xml que habiamos creado antes.


Usando XML: Bueno ya que tenemos el objeto, podemos sacar nuestra informacion, para el standard de E4X, resulta que podemos llamar a los nodos con notacion de "puntos", de la misma forma en que llamamos a una propiedad de un objeto en flash, por ejemplo, si un MovieClip llamado my_mc tiene una propiedad x, la llamamos asi: my_mc.x, y sabemos su coordenada x en el plano cartesiano de flash; igual podemos con el objeto XML de flash.


Si vemos nuestro XML tiene dos formas de obtener datos, una podemos sacar a la persona, y la otra sacar el nombre o apellido directamente, para esto el standard nos dice, que un nodo se saca simplemente llamandolo por el nombre:


trace(xml.persona)


Si hacemos esto, nos imprime en el panel de salida, los nodos XML de todas las personas, en teoria, eso es lo que buscamos, pero como "persona" no es un nodo UNICO, nos dará todos. Pero esto tampoco nos sirve, aunque no se note uno esperaria que xml.persona fuera un array y lo pudieramos por indices, por ejemp xml.persona[0] para obtener a la primera persona, pero no funciona, pueden intentarlo.


En cambio, existe una notacion especial para obtener un XMLList, que si podemos manejar como lista:


trace(xml..persona)


Si bien imprime lo mismo, este si podemos usarlo como un Array de flash, y asi podemos imprimir cada atributo (nombre, apellido) de cada nodo.


Ahora, para sacar los atributos de cada nodo, existe otra notacion especial, muy simple, sin llamadas a funciones incomodas como en as2, para llamar a un atributo usamos esto:


xml..persona[0].@apellido


Pero que sucede si tenemos un XML en que cada día cambia el tamaño del numero de personas? Podemos hacer esto:

<code>

function onCompleteEvent(e:Event){

xml = new XML(e.target.data)

var numPersonas = xml..persona.length();

for(var k=0;k<;numPersonas;k++){

trace(xml..persona[k].@apellido)

}

}

</code>


y asi automatizar cada nodo, y sacar la info que realmente necesitamos.


<tabla>

<persona>

<nombre>juan</nombre>

<apellido>perez</apellido>

</persona>

</tabla>


Este XML podemos llamarlo con una notación diferente, ya que no tiene atributos, sino solo nodos:


xml..persona[0].nombre


igual con el apellido.


Para un feed necesitaríamos cargar el XML de la misma forma, pero la diferencia esta en el parseo ( lectura desde el código y manipulación ).


Por lo que eso lo trataremos en la siguiente oportuniad.


Espero haya sido de utilidad


miércoles, diciembre 17, 2008

Imagenes: Fotografias Costarricenses

En busca de las mejores imágenes costarricenses en la actualidad, aquí hay una pequeña recopilación de lo que se puede encontrar con un poco de paciencia.

No voy a poner mucho comentario, creo que las fotos se explican por si solas.



Terror Psicológico

Terror Psicológico por Luis Mata



Soy fanático de los atardeceres

Atardecer dominical
Atardecer dominical por Jose Campos






Imagen de mi buen Amigo Audy Sanabria con quien colaboro en otros proyectos.

canoa
Canoa por AudyoVisual




Hospital San Juan de Dios
Hospital San Juan de Dios por priscilla.mora



La otra semana buscaré más imágenes impresionantes.

martes, diciembre 16, 2008

Web Review: Falso o No? Vaarennos vai ei

Conviértete en una estrella de cine y haga su propia película. Seleccione uno de estos clásicos.

Buscando una pagina web interesante para pasar el rato, me encontré con esta pagina Finlandesa; para el que sepa finlandés excelente, para el que no, pues no es tan difícil de navegar, y es bastante intuitiva a pesar que no conozcas el idioma

Väärennos vai ei significa Falso o No, y va de la mano con el hecho que podés cargar tu foto o la de alguien que conozcas en una película antigua, para verla en la trama.

Me parece que es algo entretenido y para vacilar un rato, ademas de tomar ideas para usar en diferentes paginas web donde se podría cargar elemento dinámico para tener una experiencia interactiva.

Al cargarse la imagen para el rostro del personaje principal, te mostrarán un video de la película escogida, y el personaje con tu rostro. Luego si te parece el resultado, podés enviárselo a alguien o copiar el link y tenerlo para ti y los demás, o un código embed para colocarlo en tu sitio web

Lo útil de esto es que en poco tiempo podés hacer que muchas personas te visiten con la excusa de, verte a ti en el video, o ponerse a ellos mismos.

Visitar Väärennos vai ei

lunes, diciembre 15, 2008

Animaciones: Адажио Adagio, Jojo In The Stars y Fungi Film

Dediqué estos días a ver unos cortos que me parecen sorprendentes, no solo por su significado, sino por su estilo particular.

Ahora que comparo las tres... creo que ninguna tiene final feliz...

Adagio (Rusia)
Director Gari Bardin
Un excelente trabajo hecho con unas hojas de papel y un extraño sentimiento religioso.







Jojo in the Stars (United Kingdom)
Director Marc Craste
Muy triste la historia, un buen trabajo de animación que merece ver los detalles más de una vez.





Fungi Film (Costa Rica)
Director Zavorio
Aqui veo el avance de la animación independiente costarricense.

miércoles, noviembre 26, 2008

Flash as3 - Tutorial II - Propiedades y Programacion Basica

Avanzando más en el código, nos dispondremos a ver las características principales de los objetos de Flash, los cuales debemos tener en mente al momento de programar, e incluso de hacer una animación por código.

Básicamente, cuando estamos en Flash, tenemos la capacidad de modificar las propiedades de cada objeto, por medio del código; esto será visible en tiempo de ejecución, y no durante el tiempo de diseño; estas propiedades pueden ser tan simples como la coordenada X y Y, o el color del objeto, o en algo más complicado, utilizando el MatrixTransformer para obtener otros resultados.

Considero que la forma más rápida de aprender el código, es utilizando los objetos Flash que han existido por un largo tiempo, y luego se puede ir a las classes superiores, o luego heredar de estas. Los objetos son Button en as2 y SimpleButton en as3, y MovieClip.

Antes de empezar con un ejemplo, tengo que hacer referencia sobre donde se coloca el código de action script, y esto se hace en un solo layer, que se deja en blanco solo para que esté el código, no debe existir ningún objeto de ningún tipo en esta layer.


Layer Actions y Panel de Código Fig 1

Para ingresar el código en esta layer, seleccione con el mouse el primer fotograma o keyframe, indicado en la Fig 1 en color negro y bajo el numero 1 de la linea de tiempo o timeline, y luego presione la tecla F9. El panel aparece como una ventana de tab adherible al escenario, y con una leyenda que dice Actions-Fotograma dependiendo del idioma.

Si necesita ingresar una nueva layer, presione el primer botón indicado en la Fig 2, y aparecerá una nueva capa sobre la capa existente, por costumbre, la layer actions, va sobre todas las layers, para fácil ubicación, asi que la layer se puede seleccionar y arrastrar con el mouse sobre la nueva layer.


Insertar Nueva Layer Fig 2


Para nuestro ejemplo haremos dos objetos, un Button o SimpleButton, y un MovieClip, agregaremos funcionalidad al Button, para que modifique al MovieClip. El Button será a base de un shape cuadrado azul y convertido con F8, y el MovieClip será a base de un shape cuadrado rojo y convertido con la tecla F8; el Button se llamará my_btn, y el MovieClip my_mc; estos sufijos son necesarios para cada instancia (_mc, _btn) para forzar al Flash a desplegar las propiedades inherentes a cada Class, si bien se pueden intercambiar, la idea es tener el que corresponde para obtener las propiedades correctas.

El nombre de cada objeto se coloca en el panel de propiedades (Fig 3), primero se selecciona el objeto y luego se presiona Ctrl-F3 si el panel no está visible, y el nombre que usaremos en el código se coloca en la caja de texto que dice en color gris claro.


Insertando nombre de instancia Fig 3

Colocados los nombres desplegamos el panel de código de actionscript, seleccionado el primer frame del layer actions y presionando F9, luego digitamos el siguiente código, de acuerdo a la versión que manejemos, as2, o as3:

Ambos códigos hacen lo mismo, pero desde puntos de vista a futuro, el código as3 es mas útil para un programador, pero el código as2, es más útil para un diseñador, ya que es más cercano a nuestro lenguaje.


Aquí, al boton le decimos que cuando el Event de Mouse Click se realice sobre él, se ejecute la function onClick.

Luego la function onClick tiene un parametro e de tipo MouseEvent, éste carga con un monton de propiedades necesarias que hacen referencia al objeto que realizó y sobre el que se realiza la accion, por ejemplo, currentTarget, es el boton al que hicimos click.

En la definición del Function llamamos directamente a my_mc, y variamos una de sus propiedades (rotation), la incrementamos cada vez en 25;
  • as3


my_btn.addEventListener(MouseEvent.CLICK,onClik)

function onClik(e:MouseEvent){
var boton:SimpleButton = e.currentTarget as SimpleButton
trace(boton.name)
my_mc.rotation += 25;
}


Aqui es casi lo mismo, antes, en as2, para definirse al objeto que llama a la Function, usamos this, y el evento está dentro del mismo botón, así que asignamos una Function sin nombre y dentro ponemos lo que necesitamos que deba suceder.
  • as2


my_btn.onPress = function(){
trace(this)
my_mc._rotation += 25;
}


Presione Control Enter y vea el resultado al presionar el botón.

Descargar Archivos del tutorial






lunes, noviembre 24, 2008

Flash as3 - Tutorial I - Bases

Si estás leyendo esto seguro ya has visto alguna animación en flash y quieres hacer algo por que te ha emocionado desde hace tiempo, así que no perdamos tiempo, empecemos.

En flash se trabaja en dos conceptos separados que se pueden unir dependiendo de tanto tiempo tengas para hacer una o la otra, estas son:

  • animación: Esto es lo que nos atrae por primera vez a flash, una buena animación con increíbles efectos. Diseñadores y cualquier persona en general toman la decisión de aprender flash por estas razones.
  • programación: esta es la menor de las razones, pero es la razón por las cuales los que se decidieron por la primera claudican rápidamente, ya que la van a necesitar, pero es la razón por las cuales muchas personas pueden ver el potencial más allá de una simple animación.
Así que si para este punto ud no sabe programación, mejor le interesará hacer cosas con Photoshop o Corel Draw.

Cosas Basicas de flash

En flash el escenario es su universo, cada layer representa un plano en donde usted puede colocar objetos como dibujos en una hoja de papel, cada layer ocupa una posición desde abajo hacia arriba, y cada layer puede ser cambiada de posición, la logica de esto va desde, una animación en la que un árbol va frente a una montaña, y en programación con el hecho ejemplo base de que no puedes hacerle click a un botón si el cursor está abajo.


Cada objeto que dibujemos o pongamos en el escenario puede tener su propio universo manipulable de la misma forma o parecida que el escenario raíz, dependiendo de que tipo de objeto le digamos que sea, asi tenemos

  • Shapes: dibujos hechos a mano alzada con el flash, figuras, formas, rectángulos, que se ven afectados unos a otros si cada shape se toca entre si.
Flash shapes fig 1
Flash shapes fig 1
  • Groups: presionando CTL-G tomamos uno o mas objetos y podemos agruparlos para manipularlos en modo de diseño como uno solo{atención que solo dije modo de diseño}. Al seleccionar un grupo se crea un marco de color alrededor que simboliza la unión de estos; su contenido puede ser accesado haciendo doble click.
Flash graphics group Fig 2
Flash graphics group Fig 2


  • Graphics: es un objeto especial con la propiedad de contener una animación sin interactuar este objeto con el código, seleccionamos un objeto y presionamos F8, y seleccionamos Graphic y damos aceptar, ahora puedes elegir cambiarle el color a este objeto en tiempo de diseño, si la animación se puede reproducir una vez, indefinidamente, o si solo es un fotograma estático.Cambiando color a un Graphic Fig 3
Cambiando color a un Graphic Fig 3
  • Button: un tipo con mas propiedades, se puede llamar a cada uno específicamente desde el código, se pueden establecer estados de comportamiento, como que pasará cuando se pone el mouse encima, o que pasará cuando se quita el mouse, o se presiona este, esto en animación, otros comportamientos se pueden establecer por medio de código. Selecciona un shape, presiona F8 selecciona Button y ya tienes un botón.
Dentro de un Button Fig 4


  • MovieClip: El objeto mas usado en flash, puede tener todas la propiedades que has leído en los objetos anteriores, incluso su propio universo como el escenario( stage) donde puedes poner otros objetos como los anteriores. Se puede accesar por codigo al igual que un button. Selecciona un shape, presiona F8 selecciona MovieClip y ya tienes uno.

Creando un MovieClip a partir de un Shape Fig 5


Buttons y MovieClips se pueden llamar desde el código, y manipular todas sus propiedades según la ocasión.

Propiedades de un Button Fig 5Propiedades de un Button Fig 6

Cada que creas un Symbol de estos se agrega a la Biblioteca (F11), puedes hacer copias de estos en el escenario arrastrandolos a este, pero cada que haces esto puede ser una ventaja o desventaja segun la ocasion, cada symbol por debajo es el mismo, asi que si lo modificas por debajo se reflejará en todos, asi que se debe pensar con anterioridad.

Cambiando al Button internamente
Cambiando al Button internamente
todos los demás se modifican. Fig 7

Esta ha sido la primera parte del tutorial, cualquier duda será bien recibida, y podrá también servir para crear la siguiente parte del tutorial.
Cada vez iremos progresando en animación, código básico y avanzado.

Espero haya sido de utilidad.

martes, octubre 07, 2008

Cantamos el Bosque Electrico

Me encantan las animaciones de Grickle, simplemente hermosas y terroríficas, y esta tiene algo más, ese extraño componente musical... la risa! y el terror predecible... pero a quién le importa? jaja disfruten!

martes, septiembre 23, 2008

Adobe CS4 Liberado!




Hoy a las 10 am hora de Costa Rica, me asombré al ver la transmisión en vivo por Internet provista por Adobe mostrando las nuevas capacidades que tienen sus productos.
Muchos ya conocidos por todos, pero ahora por fin para poder usarlos, estas nuevas cualidades harán que las tareas repetitivas sean mas simples para los que trabajamos en medios.

Si bien no hablaban mucho de Flash en sí, hablaban de las demás herramientas con las capacidades enfocadas a lo que se necesita para Flash, e intercalado mostraron esas nuevas características.

Photoshop ahora tiene la capacidad de cargar imágenes de 2GB sin atascarse en memoria! al hacer zoom se hace un preview y carga la zona requerida actual, osea que no se verá más que lo necesario.

Además al cargar imágenes panorámicas el mismo programa crea una vista en 3D para recorrer la imagen.

También se pueden cargar modelos en 3D y pintarlos y rotar los mismos objetos dentro de la herramienta, ademas de poder pintarlo con imágenes comunes(texturas).

Incluso ahora se puede escalar una imagen previendo si se quiere que una zona se deba escalar, para que no se vea "estirada" o "apretada" al momento de ajustar.

En Illustrator ahora se puede crear una especie de archivo de proyecto, donde puedes tener abiertos al mismo tiempo varios .ai y verlos al mismo tiempo, con la capacidad de copiar objetos de un diseño a otro sin pasar entre ventanas.

También la brocha Blob, que genera un area de pintura que al terminar crea un stroke alrededor.

Indesign ahora tiene la capacidad de exportar directamente al flash.

Flash tiene la capacidad de poder visualizar el path de los motion tweens, y poder modificarlos, ademas de ahora tener bones para hacer inverse kinematics, haciendo joints entre objetos y completamente articulados y con gravedad, asi si creás una cadena, cada parte reaccionará por el efecto de la que tiene a la par.

Flash tambien tiene ahora un manejo especifico de propiedades para la animación como lo hace After Effects, y como muchos ya conocen, ahora junto con Astro(flash player 10) la capacidad de modifcar los ejes tridimencionales.

After Effects ahora tiene la capacidad de idenficar las palabras que se mencionan en una edición de video, como por ejemplo para contarlas; ademas de poder reemplazar una pantalla verde casi automáticamente, lo que antes tomaba mucho más tiempo

No son todos los efectos que existes de estas aplicaciones, pero si los que me parecieron muy relevantes

sábado, septiembre 06, 2008

Jerry Seinfield y Bill Gates en un comercial para Vista

Sinceramente es algo confuso como usuario programador nacido en Windows ver este comercial, por que parece no tener sentido... si esta gracioso, vacilón como solo Seinfield sabe hacerlo, pero parece que dura mucho para llegar el punto.

La cosa es que todavía falta un rato para que salga Windows 7, entonces tiene sentido que Microsoft apunte a ganarse al publico como lo hizo Apple para ganárselo de igual forma con sus comerciales Mac vs PC; y por lo menos tendremos un rato de diversion viendo estos intentos de ganarnos.

domingo, agosto 24, 2008

Firefox y Adobe Flash consumiendo a Internet Explorer

Recientemente leí que hartos de esperar a que IE (Internet Explorer) agregara complementos de verdad a su browser, Mozilla y Adobe han unido fuerzas para que, en el proximo release de Flash Player, se instalen nuevas capacidad a IE que deberian a esta altura ser ya estandar.

En el articulo Firefox Caníbal se da la impresion que este browser consumirá poco a poco a IE desde adentro, para convertirlo en un browser con funcionalidades FireFox(FF), pero que lograrian metiendose en la programacion de Microsoft? a mi gusto nada, como desarrolladores claro que nos simplificaria la vida, pero igual, si no actualizas tu IE igual tendrás que desarrollar de forma de compatibilidad hacia atrás, entonces quedamos en las mismas.

Entonces de que sirve este ataque por los costados?
Bueno, a mi parecer, si un usuario arraigado a IE ve las imcreibles capacidades de FF en su propio navegador, decidirá tarde o temprano por usarlo, entonces ya no necesitarias IE, haciendo que Microsoft decida porfin actualizar su browser, pero la verdad para qué? si ya me sirve perfectamente mi FF... entonces no tiene sentido tal ataque, a menos que quieras desaparecer de la tierra a IE, lo que no me parece tan mal.

Firefox caníbal: Mozilla desarrolla pugins para IE, cansado de esperar a Microsoft

lunes, agosto 18, 2008

RSS ATOM Reader en Adobe Flash AS3

Este fin de semana tuve un cierto éxito al crear un lector de feeds basados en XML y mejor aun en AS3. Lo interesante es que comencé creando solo una forma para leer mis propios blogs desde mi pagina principal (absulit.net), para que aquel que quisiera asomarse de forma rápida en el ultimo post, tambien viera la galeria.

Rápidamente me di cuenta que por los tipos de formato diferente que representan Atom y RSS se me iba a dificultar leer un post, asi que opté por una lectura recursiva de todos los nodos:

Si hay nodo:
si es el tag que necesito:
si es de tipo 3(el texto final): escribirlo
si no: tomar nodo hijo y volver al inicio

Ahora, ha sucedido un inconveniente que desconozco razon, y es que al usar IE no logra conexion, y no carga el XML, por lo que lo considero aun en fase de desarrolo, pero que aplicado este conocimiento en ASPX puede dar buenos resultados para crear tickers de noticias, o solo cargar los encabezados o partes especificas de un feed.

Sin embargo pueden ver su funcionamiento beta dentro de mi pagina principal

lunes, junio 30, 2008

El Marketing Viral en las Paginas Web

El estar involucrado en el negocio de las paginas web me ha abierto la mente a un mundo de posibilidades sobre la forma en que se nos puede, o podemos vender un producto.

En la actualidad, y de ahí hacia atrás, las personas hemos sido invadidas por el ataque de los medios, en que se nos presenta un producto sobre los demás, haciéndonos ver que, este producto, es superior a otros de su misma clase; esto seria fantástico si no interrumpiera nuestro programa favorito en la televisión, o nuestra música en la radio.

De esta forma, el usuario ha aprendido a bloquear estas influencias como por ejemplo cambiando de canal, o simplemente huyendo a Internet, donde la fabrica de comerciales queda bloqueada... a menos que nosotros decidamos verlos...

Entonces se produce el siguiente fenómeno, un usuario verá publicidad solo si quiere. ¿Cómo es esto posible? Sencillo, un usuario solo lo hará en el momento que necesite información con respecto a un producto, pero no se quedará ahí, esperará que a cambio le den lo que quiere, una razon para quedarse viendo publicidad, osea entretenimiento.

Páginas que realizan esto muy bien son como la muy cambiante y conocida página de Nike, donde el increíble manejo de medios utilizando Adobe Flash y herramientas afines, le brindan al usuario una experiencia de entretenimiento inigualable... y es un éxito si al pasar los días... recuerdas la marca...

Es una estrategia simple, rodeas tu marca de cosas impresionantes, y el usuario relacionará la marca con ella, y la marca por lógica, se vuelve asombrosa.

  • Marketing Viral
El marketing viral, mas que un paso genial, es un plan que puede durar hasta un año, el mejor ejemplo de esto, son las paginas relacionadas a la película The Dark Knight, que mantienen vivo el gusto de los fan con la película sin que se den cuenta, rodeándolos de juegos del Joker, pistas a otros sitios web para descubrir el siguiente juego, claro que todo para que vayas a ver la película, aunque personas como yo, igual la veremos y de paso disfrutamos de este marketing... acaso habrán logrado su cometido conmigo?

  • Impresionando
Esto solo se puede lograr con una visión a futuro, y relacionándose con el usuario, intercambiando, innovando, siendo el mejor. Una pagina impresionante te hará decir wow la primera vez que entres, pero será olvidada si no esta cambiando constantemente, o teniendo información útil que respalde esa falta de innovación.

La única solución es ser tan creativo como sea imaginable, rodeándose de personas crean que todo es posible, diseñando interfaces impresionantes, y utilizando las herramientas desde un punto de vista fuera de la programación, y más amarrado al diseño, sin preocuparse si se puede o no hacer, sino mas bien, por lo increíble como lucirá.