Flash AS Blog, uno mas...

Papervision + Blender + Collada + Youtube

2009-08-18T13:53:00.003+02:00

Bueno, he mejorado el proceso anterior conectandolo a youtube para mostrar un video a tiempo real mediante el API de youtube.

Papervision + Blender + Collada

2009-08-17T23:00:00.004+02:00

He estado trabajando unos dias con el papervision y la importacion de objetos Collada que he realizado previamente con Blender. Opte por Blender porque es software libre, tiene un buen sistema de bakeado de texturas y la exportacion a Collada es muy compatible con papervision. Este es el resultado:

Racimo de Globos

2009-06-30T13:53:00.005+02:00

Para un reciente proyecto del que aun no puedo hablar (estos secretos profesionales jejejeje) tuve que crear un generador de globos (aunque quizas esto de pistas jejeje). Bueno, aqui, clasico AS2, un poco de matematicas y movimiento browiniano y listo. Globos meciendose al viento. Los globos se generan aleatoriamente, tanto posicion como color (con un colorTransform sobre una base PNG de globo gris)

Widget LG Arena

2009-04-24T12:02:00.015+02:00

Hoy voy a contaros las aventuras y desventuras de la creacion de un widget AIR para la presentacion del nuevo telefono LG Arena.

Si quereis verlo completo y descargar el widget, podeis hacerlo desde aqui.

El reto

Un buen dia, mi director creativo me llega y me dice, necesitamos un widget para la presentacion del LG arena, que sea un cubo en 3D, y donde en cada cara, conectaremos un un servicio 2.0, Youtube, Flickr, Musica, RSS Feed, etc... debe funcionar en web y tambien descargarse como AIR para instalarse en escritorio. Ah, y una semana para hacerlo que se presenta el telefono y debe estar online.

Ni habia usado AIR, ni habia usado los API 2.0 de Youtube, Flickr, etc... todo un mundo de I+D e implementacion para 1 semana de trabajo, ademas de coordinarlo todo con Papervision para que este en 3D.

Los problemas

Aunque al final el resultado ha sido muy bueno, yo al menos me siento bastante satisfecho y orgulloso de el, el camino no ha sido facil, entre los problemas del Sandbox de Flash, los bugs de AIR y los maravilloso cuelgues sistematicos de Flash CS4 (Sr. Adobe, se ha lucido con esta version), se ha conseguido.

Pasa a contaros algunos de los problemas que he encontrado, para que pueda servir de ayuda a otros.

Problema: El Sandbox y los bitmap.
Si, existe... pensabais que el sandbox solo afecta a las cargas crossdomain y demas?? Pues yo he descubierto que un bitmap cargado desde una url externa, no es manipulable, la sandbox no lo permite. Os pongo un ejemplo de como afecta este problema. Creais un Sprite y dentro de el, cargais una foto, por ejemplo, directamente desde Flickr. Carga y todo perfecto. Ahora, decidimos usar ese Sprite como MovieMaterial o BitmapMaterial en papervision.. chassss FALLA!!! por que?? porque no puede ser manipulado lo cargado como bitmap por culpa de la sandbox. La retorcida explicacion de esto por parte de las eminentes mentes de Adobe es la siguiente. Imaginemos un caso de un documento o foto que se encuentra dentro de una red privada en una empresa, no es accesible desde el exterior. Asi que unos un piratas, crean una animacion divertida, que busca en redes internas por dicho documento. La animacion se viraliza y un dia llega a manos de un empleado de la compañia que tiene el documento, la aplicacion lo encuentra, lo carga, lo convierte en bitmap y lo manda como byteArray a un servidor y el documento ha sido robado/copiado. Para evitar esto, la sandbox no permite la re-conversion y manipulacion de elementos cargados de direcciones externas (de fuera de tu dominio).

La solucion:
Usar LoaderContext.checkPolicyFile = true en cada carga y si el servicio al que llamas (lease en mi caso, Flickr or Youtube) tiene un crossdomain.xml que te lo permita, entonces, puedes manipular los bitmaps y contenidos cargados.

Problema: Campos dinamicos de texto y el buttonMode
Bueno, este problema ya he encontrado alguna documentacion de otros blogeros, pero añado mi contribucion. Si creamos un boton dinamicamente, con un campo de texto y aplicamos el buttonMode = true, tenemos una elevada probabilidad (segun le coge al Flash y si el viento sopla hacia el noreste a 3,2 grados) de que donde se encuentra el texto, no aparezca la manita, aunque el texto tenga la propiedad de selectable = false, sigue sin aparecer la manita, aunque funciona como boton, pero no sabes que es un boton.

La solucion:
Añadir al boton las siguientes propiedades:
myclip.buttonMode = true;
myclip.mouseChildren= false;

y en ocasiones tambien:
myclip.myTextField.mouseEnabled = false;

Y aun asi, aumentais las probabilidades de que funcione, pero no siempre.

Problema: El garbage collector y los Tween
Una de las cosas maravillosas del AS3 es el garbage collector, borra de la memoria todo aquello que no esta en uso, asi que nos libera la aplicacion de cosas inutiles que afectan al rendimiento. Pero tambien nos causa problemas. Si dentro de una funcion declaro una variable donde almaceno un Tween, que dura x tiempo y antes de que se complete el Tween, el player corre un ciclo del garbage collector, el Tween se queda parado, nunca dispara el evento de que ha terminado y por tanto, vuestra aplicacion, no sigue.

La solucion: En este caso, hay dos, la primera es declarar la variable en la clase y no en la funcion y luego protegerla, pero te ves forzado ha tener tantas (o un array) como Tweens simultaneos tengas. La otra, para mi mucho mejor, es utilizar el API de caurina.transitions que son estaticas, temporales y el garbage no las destruye.

Problema: El garbage collector de AIR y el codigo "sucio"
Si, es muy bonito trabajar todo en clases, empaquetadas y demas, pero a veces y sobre todo con prisas, yo hago codigo sucio, es decir, introduzco codigo de pequeños eventos o pequeñas funciones directamente en la linea de tiempo de un movieclip. No es lo idea, pero para esas pequeñas cosas, acelaras la produccion y sobre todo si cuentas con poco tiempo. En este caso que nos ocupa. En cada cara del widget, por ejemplo en la de youtube, justo abajo hay un boton para buscar video, cuando se pulsa, aparece un campo de entrada y boton buscar. La forma en que lo hice es un movieclip, donde el primer fotograma tiene el boton y el segundo el campo de texto con su boton de buscar. En la linea de tiempo, tienen el codigo que controla los botones para avanzar de fotograma en el primer caso y una llamada a una funcion de la clase principal en el segundo.

En principio, esto en Flash no me ha causado nunca ningun problema. Pues en AIR si, cuando se pulsa por primera vez el boton, avanza al siguiente fotograma y se prepara para la busqueda y entonces, el garbaje elimina el codigo del primer fotograma, asi, por las buenas y tras realizar una busqueda, y regresar al primer fotograma, nunca vuelve a funcionar.

La solucion:
Aunque parezca increible la solucion, vamos a rizar el rizo. Resulta, que primer fotograma, contenia un boton animado, que parpadeaba para captar la atencion del usuario. La solucion es quitarle la animacion al boton y dejarlo estatico "de los de toda la vida", y el garbage no elimina el codigo. No tiene logica, pero funciona.

Obviamente, la otra solucion es programar una clase que gestiones dicho clip. O gestionarlo directamente desde la clase principal. Pero entonces, no seria un problema con el codigo sucio jejejeje

Navegacion con WebCam

2009-03-25T12:09:00.006+01:00

Bueno, llevaba tiempo sin actualizar nada, el motivo es que he estado un tiempo desarrollando para la agencia un sistema de navegacion basado en la deteccion de movimiento con una web cam. El resultado es bastante bueno (en mi modesta opinion como creador jejeje) y aunque aun ando puliendo algunos detalles y los creativos andan preparando mejoras graficas, se puede ver en http://www.elratonhamuerto.com

Como muestra os dejo un video interactuando con el sistema:

Navidad 3D

2008-12-18T14:06:00.004+01:00

Bueno, continuando con los desarrollos en Papervision, he creado este regalo navideño para un joint entre la empresa para la que trabajo y Cruz Roja. Realizado con AS3 y Papervision 2.0, utiliza el QuadrantRender e iluminacion real para obtener mas calidad.

Experimento Menu Papervision

2008-11-12T13:39:00.006+01:00

Esta es una prueba conceptual de un menu realizado con Papervision, se mueve "liquidamente" y se ilumina (iluminacion 3D) en funcion al cursor.

Particulas 3D en AS3 - 3/3

2008-11-12T13:21:00.004+01:00

Bueno, despues de mucho tiempo en silencion, le he dado una vuelta de tuerca mas al tema de las particulas en AS3 y he ampliado al motor para meterle la tercera dimension, dando mas posibilidades al mismo, aun me quedan algunos detalles pendientes por añadir, como vectores gravitacionales, magneticos, repulsores, colisiones entre particulas y objetos, pero todo se andara.

En este ejemplo podeis ver un vortice o galaxia.

Particulas 3D en AS3 - 2/3

2008-11-12T13:19:00.005+01:00

Particulas 3D en AS3 - 1/3

2008-11-12T10:28:00.006+01:00

Menu Liquido y Dinamico para Defensa

2008-07-01T15:10:00.005+02:00

Este menu liquido lo desarrolle para el nuevo site de soldados.com, el menu es totalmente configurable mediante XML, dandole libertad a los creativos de modificar muchos de sus aspectos. Esta programado mediante una clase y recursos externos con lo cual su peso se reduce bastante.

Banner Movistar

2008-07-01T12:20:00.003+02:00

Aprovechando el motor de particulas, este simple banner genera sobres de mensajes que se intercambian un interlocutor y otro. No es que sea una maravilla tecnica, pero resulto muy sencillo de crear con el motor de particulas.

Banner LG

2008-06-09T13:56:00.004+02:00

Este banner imita unas gotas que caen y van dejando estela, siguiendo un movimiento erratico y natural, utilizando la clase bitmap hice que las gotas se fueran dibujando sobre el bitmap de fondo, usando un blendmode que dejara la estela, el resto es solo un poco de trigonometria y algo de displacementmap.

Banner DYC 8

2008-06-09T13:44:00.004+02:00

Este banner para la campaña de presentacion del nuevo DYC 8 años lo realice con una version reducida del motor de particulas para generar una explosion que permitiera "liberar al ocho" de la jaula, dicha explosion se dispara automaticamente o tirando de la cadena (pulsa y arrastra bruscamente la cadena para producir el efecto). La cadena no es codigo mio (solo tenia 2 horas para producir esta banner y tuve que buscar un codigo de cinematica inversa apañao para crearla, pero prometo crear mi propio libreria de cinematica inversa).

Particulas y AS3 3/3

2008-06-04T17:00:00.003+02:00

No lo podia resistir, y acabe portando el motor de particulas y de efectos a AS3 para mejorar el rendimiento, los resultados mejoraron muchisimo.

Pincel Magico (Mueve el raton sobre el flash)

Particulas y AS3 2/3

2008-06-04T16:58:00.003+02:00

No lo podia resistir, y acabe portando el motor de particulas y de efectos a AS3 para mejorar el rendimiento, los resultados mejoraron muchisimo.

Fuegos Artificiales

Particulas y AS3 1/3

2008-06-04T16:39:00.004+02:00

No lo podia resistir, y acabe portando el motor de particulas y de efectos a AS3 para mejorar el rendimiento, los resultados mejoraron muchisimo.

Fuegos Artificiales

Particulas y Efectos 3/3

2008-06-04T16:35:00.003+02:00

Queriendo dar una vuelta de tuerca a todo el tema de particulas, queria que tuvieran mas densidad sin sacrificar mucho rendimiento, empece a trabajar con la clase a Bitmap y a "prohibirle" a flash que se encargara del dibujado del movieclips, transfiriendo este control a una rutina propia de redibujado sobre un bitmap e impidiendo el limpiado del mismo, consiguiendo que dejara rastro, luego solo tuve que aplicar un efecto de blur sobre el mismo para que el rastro se difumine. Tras varias pruebas optimizando el rendimiento, estos son los resultados.

Efecto Nebuloso o que se yo... (Mueve el raton sobre el flash)

Particulas y Efectos 2/3

2008-06-04T16:28:00.004+02:00

Particulas y Efectos 1/3

2008-06-04T16:13:00.006+02:00

Particulas Basicas AS2 4/4

2008-06-04T13:45:00.004+02:00

Hace tiempo me cree un pequeño motor de particulas para AS2, que fue creciendo dia a dia implementandole mas y mas funciones (y consumiendo mas recursos sniff). Pero lo suficiente flexible para poder hacer una multitud de efectos.

Cascada Simple

Particulas Basicas AS2 3/4

2008-06-04T13:40:00.005+02:00

Particulas Basicas AS2 2/4

2008-06-04T13:34:00.006+02:00

Particulas Basicas AS2 1/4

2008-06-04T13:17:00.011+02:00

Efecto Fuego

2008-06-04T12:20:00.009+02:00

Como primera entrada voy a poner este efecto sencillo en AS2 aplicado sobre un bitmap y usando displacementMap y PerlinNoise para general el fuego.

Descargar .fla