Blog de programación creativa mantenido por llops. Experimentos y artículos entorno a la plataforma flash y as3.
En el post anterior hablaba de las plantas de IKEA. Pues bien, aquí está la primera: La Planta de Viento.
Como ya comenté, la original es una aplicación AIR, pero como de momento no puedo poner el .air para descargar he decidido adaptarla para navegador. Así se pierden algunas opciones y la gracia de tenerla en el escritorio, pero el resto es básicamente igual.
Continuar leyendo »
El año pasado en Herraiz&Soto lanzamos una comunidad para IKEA enfocada al mundo del hogar. Aquí los usuarios pueden subir las fotos de sus casas, conocer a nuevos vecinos, pedir consejos de decoración y, en general, hablar de hogar a hogar.
Uno de los detalles de esta comunidad es que cada vecino cuenta con un buzón, pero en vez de recibir facturas y folletos publicitarios se le envían regalos, como wallpapers o canciones.
Una de las ideas que tuvimos para los regalos fue hacer una serie de plantas para que la gente decorara su escritorio. La gracia es que estas plantas están hechas en AIR y son interactivas, con lo que el escritorio pasa a cobrar un poco más de vida. Para haceros un idea:
La primera planta la tuve programada hace más o menos un año, y la segunda un mes después, pero no ha sido hasta el día de hoy (por mil y una razones) que no hemos lanzado una de ellas.
Este fue un proyecto del que me siento muy orgulloso, básicamente porque me divertí de lo lindo programando y porque me parece que está muy bien acabado. Y a pesar de que me hubiera encantado hablar antes de él, el hecho de que no se hubiera enviado a los usuarios de elhogar.de no daba pie a hacerlo.
De momento no puedo poner los archivos .air para descargar, pero por si a alguien le interesa echarle un vistazo en un par de días colgaré la primera planta en el Lab y en cuanto pueda iré publicando el resto.
Una de las cosas más molestas de Flash CS4 es que la ayuda (F1) es online, se conecta con http://help.adobe.com y a partir de ahí buscar un simple método es una tarea lenta y tediosa. Afortunadamente, la ayuda también se encuentra en local y se puede poner por defecto.
Para ello debemos ir a Window > Extensions y abrir el panel Connections. Al clicar en las opciones (botón superior derecha) veremos que una es Offline options.
Marcamos después el check de Keep me offline y aceptamos. Ahora al pulsar F1 dispondremos de toda la referencia en modo local, y aunque sigue abriéndose a través de navegador, al menos nos ahorramos los tiempo de carga.
Nota: a tener en cuenta que al activar este modo perdemos todas las funcionalidades que necesitan conexión (por ejemplo, el panel de Kuler).
También hay otras dos opciones interesantes en forma de aplicaciones AIR:
En la primera, Doc?, te tienes que descargar y configurar las distintas referencias de lenguaje que necesites (AS3, Flash CS4, CS3, Flex…) y la aplicación te permite ver, buscar y guardar la documentación. Yo la tengo instalada y es bastante útil.
La de BigSpaceShip, de similar funcionamiento, tiene integrada la referencia del lenguaje de AS3, pero a mí no me convenció mucho…
De todas maneras, la ayuda tal y como estaba planteada en CS3 era perfecta… :(
En el anterior post, en el apartado El envío de la postal, comentaba que parte del desarrollo consistía en enviar una imagen y distintas variables de Flash al servidor, pero que en AS3 no había una forma sencilla de hacer un envío multipart y habíamos recurrido a la potente librería as3httpclientlib para conseguirlo.
A pesar de que dicha librería funciona perfectamente, lo hace todo mediante sockets, cosa que añade un grado (o varios, según el caso) de dificultad. Como para el proyecto de IKEA no íbamos sobrados de tiempo, no le di más vueltas y la utilicé, pero me quedó la espinita de si no había maneras más sencillas de hacerlo, y desde entonces he estado mirando todo lo relacionado con el tema de envíos desde Flash. Este artículo recoge y explica distintas soluciones que he ido encontrando.
Empezaremos con el caso más sencillo, que es enviar una imagen desde Flash al servidor.
Este ha sido el penúltimo trabajillo en el que he estado embarcado: la felicitación de Navidad para IKEA.
Para ser sinceros, este tipo de acciones tienen bastantes números de acabar en un bodrio por tres motivos:
Y nosotros, como buenos samaritanos, hemos cumplido escrupulosamente con todos los puntos, pero de una forma un poquito más original y divertida (a lo mejor también es un bodrio y me estoy engañando…)
Hoy hace justamente un año que empecé esta andadura en forma de blog. Atrás quedan mis dudas iniciales sobre si sería capaz de darle continuidad y si valdría la pena. La verdad es que ha sido toda una experiencia :)
De todas las grandes cosas que me ha aportado el blog la mejor ha sido (como ya me vaticinó un amigo) la posibilidad que he tenido de conocer a muchísima gente interesante, y la peor, el escaso tiempo del que dispongo algunas temporadas para escribir.
Y como no, dar las gracias de corazón a toda esa gente que siempre ha tenido un minuto para dejarme unas palabras: no os imagináis lo mucho que ayuda a tirar hacia adelante.
Un año después, seguimos.
¿Que pasaría si la gente pudiese relacionarse por lo que imaginan en vez de por lo que piensan?
Esta pregunta fue la semilla que ha dado lugar a www.bankofimagination.com, el último proyecto de Herraiz&Soto para Camper.
Al contrario que en el 2007, donde todo lo que hice en CS3 y AS3 fue en solitario, durante este año he trabajado en varios proyectos en equipo, tanto con compañeros de mi agencia como estudios o freelances. En general, me considero bastante flexible a la hora de trabajar con otros programadores y no intento imponer nada (y más en el mundillo Flash, donde hay mil maneras distintas de alcanzar un objetivo), pero aún así, he llegado a la conclusión de que hacen falta una serie de “buenas prácticas” para que el proceso no sea un sufrimiento para el resto.
Los puntos que voy a explicar me parecen igual de válidos si se trabaja solo, pero obviamente la repercusión es mucho menor porque no afecta a nadie más. Y con trabajar en equipo no me refiero sólo a dos o más personas simultáneamente, sino también aquellos desarrollos que un día empieza uno y luego ha de continuar otro.
Empecé a hacer mis primeros pinitos en Flash allá por el 2001, y hasta principios del 2004 el tema del framerate fue un factor completamente irrelevante para mí. Tanto que no fui consciente hasta mucho tiempo después, cuando recuperé las películas y vi que todas corrían a 12 fps (el valor por defecto del programa). Sólo una web cuyo esqueleto había iniciado un diseñador funcionaba a 20 fps.
En marzo de 2004 me sumé al proyecto Mahou en Herraiz&Soto, y la web corría a 15 fps. Nueve meses después lanzamos una nueva versión del site que lo hacía a 25 (supongo que los diseñadores y animadores meterían mucha presión).
Durante el 2005 y parte del 2006 todas las películas que trabajábamos en la agencia solían correr a 25 frames, pero luego un compañero empezó a utilizar como cifra mágica el 31, ya que había oído el rumor que las películas a 21 y 31 funcionaban mucho más optimizadas. Recuerdo que me parecía completamente absurdo, pero el resto de gente fue pasándose a los 31, menos yo, que me pasé a los 30 (pa chulo yo xDD)
21,31… el framerate mágico
Durante algunos años el Flash Player funcionó rematadamente mal en Mac debido a un bug del sistema operativo (los temporizadores eran imprecisos y los cálculos se resentían disminuyendo el framerate). Resultó que un framerate de +1 ayudaba a cuadrar las operaciones y el rendimiento del Player se asemejaba entonces al que tenía en Windows.
Lo gracioso fue que este error fue subsanado con el Flash Player 6, pero el rumor del “número mágico” continuó extendiéndose.
En el 2007 ya me había bajado del burro y utilizaba 31 frames en todos mis proyectos. Sólo con la salida del Player 9 y AS3, con su gran incremento de rendimiento, me decidí a cambiarlo. Así pues, para mi primera aventura en AS3 utilicé 60 fps. Era un site que combinaba mucha animación y programación, y la verdad es que me decepcionó un poco porque en el navegador, a pesar de verse más o menos fluido, caía muchísimos frames. Con tanto bombo que le habían dado a la AVM2 creí que rendiría mejor.
Después de esto volví a los 31 y hasta el día de hoy todo lo hago con este valor. Considero que una peli que funciona entre 25 y 30 frames es ideal, y ya en algún artículo he apuntado que al correr un swf en el navegador suele caer 2 o 3 frames, así que 31 menos la pérdida da un muy buen resultado.
Pero la gran sorpresa que no me llevé con el Player 9 me la he llevado con el 10: no sólo no pierde frames sino que llega a marcar alguno de más y todo. He probado todo tipo de experimentos, y algunos que consumen muchos recursos y en el navegador bajaban hasta 24/25, ahora se quedan tranquilamente oscilando entre 31/32.
Han sido muchas las veces que he abierto un proyecto en Flash y he pensado “¿Qué framerate utilizo?”, y por más años que pasen parece ser que esta pregunta seguirá ahí.
Y tú, ¿tienes alguna preferencia a la hora de elegir framerate?
Sin darme cuenta han pasado 7 meses desde que publiqué la última pieza del Lab, todo un mundo teniendo en cuenta que uno de los objetivos de este blog era precisamente dar salida a estos pequeños proyectos. Podría echarle la culpa a la falta de tiempo (que no es que sea mentira tampoco), pero hay otro factor que influye mucho, y es el de la búsqueda del “siempre más difícil”, con lo que varios experimentos se quedan a medias por no pasar el filtro.
Suerte que de vez en cuando hago algo como Gomets que me recuerda que el nivel de la idea siempre prevalece sobre el nivel técnico. Una pieza puede ser atractiva, plástica o entrañable sin necesidad de código muy complejo.
Gomets es un experiencia no interactiva donde pequeñas redondas de colores (de ahí el nombre) se mueven, fusionan, repelen… formando diferentes efectos visuales. Todo el código se centra básicamente en movimientos elípticos jugando con parámetros como el ángulo, la velocidad o el radio.
También cuenta con un panel de opciones para configurar los comportamientos. Si se le dedica 5 minutos a investigar cómo funcionan se pueden encontrar combinaciones muy gustosas.
Y he de darle las gracias a mi mejor betatester, por sus consejos, por la paleta de colores, por el naming… media aplicación vaya! ;)
Puedes ver la pieza aquí.
