Random Lab

Jul 27, 2008

EnterFrame vs Timer (I)

Hace ya varios años, en una época en la que la web estaba poblada de páginas estáticas y todo el movimiento se reducía a los gif, un programa llamado FutureSplash consiguió sorprender a todos por su increíble capacidad para la animación.

Emulando el sistema de cinematografía, basado en proyectar fotogramas de forma rápida y sucesiva para lograr la sensación de movimiento, FutureSplash incorporaba una linea de tiempo en la que se podía dibujar frame a frame para reproducir luego la película.

Un año más tarde, ese revolucionario programa fue adquirido por Macromedia y nació Flash 1.0, para acabar evolucionando actualmente en Flash CS3, de la mano de Adobe. Y por sorprendente que parezca, nueve versiones después, la filosofía para generar animación se ha mantenido intacta.

Al margen de la animación tradicional en linea de tiempo, la otra forma de generar animación es mediante código, y en ActionScript sí que ha ido evolucionando el tema:

  • En Flash 5 se introdujo el archiconocido enterFrame.
  • En Flash MX nos obsequiaron con setInterval (lo recuerdo como una gran novedad).
  • Y ya en AS3, se ha apostado por la clase Timer como sucesora de setInterval.

Así pues, en Flash 5, para animar mediante código se utilizaba enterFrame, pero con la introducción de setInterval la comunidad empezó a dividirse entre partidarios y detractores de uno y otro sistema. Es fácil encontrar discusiones en blogs, foros y listas sobre este tema, y personalmente he perdido la cuenta de cuantas veces he debatido sobre ello.

En este artículo vamos a estudiar la clase Timer (setInterval está desaconsejada, pero la lógica se puede aplicar igualmente) y el evento enterFrame, con la esperanza de poder definir cuándo es mejor usar una u otra.

Continuar leyendo »

Jul 6, 2008

Habilitar botón derecho en AS3

Es sabido que en Flash Player no se puede utilizar el botón derecho del mouse de forma “propietaria”. Con dicho botón se activa el menú contextual, y aunque se puede modificar, como mínimo encontramos las opciones Configuración y Acerca de Adobe Flash Player 9…

Pues navegando por Google Code me he encontrado un proyecto llamado Custom-context-menu que nos permite utilizar a nuestro antojo el botón derecho. Para ello combina javascript y flash de una manera muy ingeniosa. Básicamente el hack consiste en:

  • Con javascript, capturar el click derecho en HTML antes que llegue al swf
  • Una vez capturado el evento, informar al swf mediante ExternalInterface
  • Crear una función en ActionScript que responda a la llamada de ExternalInterface

Se puede ver un ejemplo aquí.

Aunque puede ser un recurso muy útil, hay que tener en cuenta los siguientes inconvenientes:

  • Funciona en la mayoría de navegadores/so, pero no en todos
  • Antes de tener el evento en AS, recorre un ciclo de llamadas entre el swf y el html, con lo que el rendimiento es mucho peor que una llamada nativa
  • En el menú contextual se encuentran las opciones de configuración del Flash Player, y estaríamos quitándoselas al usuario

Aún así, en casos específicos en los que sería muy importante tener este botón habilitado, es una gran solución y no está de más conocerla.

Jun 16, 2008

Learning ActionScript 3.0

Hace pocos días terminé de leer Learning ActionScript 3.0: A begginer’s guide.


He de reconocer que de entrada no era un libro que me llamara mucho la atención, debido principalmente al subtitulo “una guía para principiantes”. Sin embargo, me picó la curiosidad este post escrito por Lee Brimelow: The Best ActionScript Book Ever Written, en el que deja el libro por las nubes. En términos similares se expresaba Josh Tynjala (desarrollador que merece todos mis respetos) en este otro post.

Así pues, decidí darle una oportunidad y me hice con una copia. Una vez leídas sus 350 páginas, puedo entender el porqué de unas críticas tan favorables.

A continuación, mi review sobre el libro.

Continuar leyendo »

Jun 4, 2008

¿Programas en AS? We need you!!

Si eres mi padre, mi madre, uno de mis dos amigos o has leído alguna vez la sección About de este blog, sabrás que trabajo en una agencia de publicidad llamada Herraiz&Soto, ubicada en Barcelona. Por historia, premios y clientes, puedo decir sin pudor que es una de las mejores agencias españolas.

Oye… ¿por qué te pones en plan vendedor?
Porque necesitamos programadores.

¿Y qué tipo de programadores?
Pues del tipo que leen este blog: amantes de Flash y ActionScript.

¿Para qué puesto?
Lo mejor es que no necesitamos cubrir un puesto específico, sino varios.

Vaa, ponme algún ejemplo.
Ok! Eres un genio de ActionScript, estupendo. Nos mandas currículum.

– Vaya… así que te encargas de arquitecturas web, tocas bases de datos, trabajas con remoting… ¿qué te parecería liderar un site desde cero para Camper?

– O tú, que dominas ajax, oop en php, xml… ¿te verías capaz de ejercer de director técnico en la cuenta de BMW?

– Vaya, lo tuyo es la programación creativa. Tus ideas te preceden. Pues en Ikea o Casio está el listón muy alto… pero prueba a sorprendernos.

Hombre, yo a este nivel no, pero estoy aprendiendo Tweener y puedo hacer algún banner…
Pues sintiéndolo mucho, esta vez no será. Buscamos a gente senior, que esté curtida en mil batallas, que sepa trabajar en equipo y liderar proyectos. Una liga para mayores.

Pues no tengo mucha experiencia en grandes proyectos, pero tengo mucho que decir…
Está bien, Yugop también tuvo 20 años, y nosotros no rechazamos los desafíos. Veamos ese potencial.

Yo es que ya tengo un buen puesto en una agencia. Cambiar por cambiar…
Normal: eres bueno, tienes buen puesto. Pero si esto te está despertando una mínima inquietud, ¿por qué no hablamos? Deja que te cuente lo que se avecina aquí. Quizá se disipen las dudas… Además, cambiar de agencia está de moda!

Pinta bastante interesante…
Genial. Tráete tus ganas, tu experiencia, tu forma de trabajar. Habrá otros que harán lo mismo que tú, y entre todos vamos a marcar el camino a seguir. Si eres de los que tienen mucho que aportar, te aseguro que no hay mejor momento para subirse al carro.

No digas más. ¿Qué hago ahora?
¿Pues por qué no empiezas por enviarme un mail a dani(arroba)herraizsoto(punto)com? Cuéntame algo de ti, pásame tu curriculum, enséñame muchos links… Seguro que esto es el comienzo de algo interesante.

May 24, 2008

El sistema de renderizado de Flash Player

Renderizar es el proceso de generar en pantalla una imagen a partir de unos datos. El responsable de representar por pantalla todo lo que sucede en una película Flash, tanto en el escenario como en el código, es el sistema de renderizado del runtime.

Debido a que ActionScript es un lenguaje 100% visual, tener un conocimiento profundo de este proceso nos ayudará a la hora de escribir y optimizar nuestro código, y evitará que cometamos errores normalmente difíciles de detectar.

En este artículo veremos cómo funciona.

Continuar leyendo »

Apr 13, 2008

TweenMax

Pocos días después de escribir este artículo donde explicaba lo genial que es TweenLite, Jack pone a nuestra disposición TweenMax, una nueva clase que se construye sobre TweenLite agregándole nuevas funcionalidades “populares, pero no esenciales” (aunque a mi juicio, algunas se acercan más a lo esencial que a lo popular).

Entre las nuevas características encontramos:

  • Tweens con Bezier (por fin!)
  • Bezier through, un nuevo sistema en el que se definen los puntos a trazar en vez de los puntos de control de la curva. Es una idea genial, ya que es infinitamente más intuitivo. Me preguntó porqué nadie lo habrá hecho antes…
  • Se pueden pausar y reanudar las animaciones
  • Se pueden crear secuencias de animaciones
  • Se puede saltar a cualquier punto del tween
  • Se puede animar a nivel hexadecimal

Si quieres ver de todo lo que es capaz, en el site encontrarás una tabla comparativa de las clases con todas sus funcionalidades.

Y a pesar de las características añadidas, el peso sigue siendo mínimo (8kb), y la velocidad y rendimiento tan increíbles como antes.

En el artículo anterior comentaba que TweenLite tenía alguna debilidad, pero TweenMax las cubre todas. Personalmente, ahora sí puedo decir que TweenLite, junto con TweenFilterLite y TweenMax, es el mejor paquete de animación que podemos encontrar para ActionScript.

Descargar TweenMax

TweenLite

La animación por código siempre ha sido un tema estrechamente relacionado con ActionScript. Extrañamente, Macromedia nunca cuidó demasiado este campo, así que algunos programadores empezaron a trabajar en iniciativas propias para cubrir sus necesidades.

Algunas de ellas se convirtieron poco menos que en míticas. ¿Quién no recuerda a Robert Penner por sus revolucionarias librerías de Easing, o a Moses Gunesch por su FuseKit?

Con la llegada de AS2 vimos algún avance pero muy pobre, y con AS3 yo pensé que ya no haría falta recurrir a soluciones de terceros, pero estaba equivocado. Aunque es cierto que con los paquetes fl.transitions, fl.motion, fl.transitions.easing y fl.motion.easing (en los que ha trabajado Penner, por cierto) se puede crear todo tipo de animaciones, a la hora de la verdad las clases son poco prácticas, ya que la sintaxis es engorrosa, no son suficientemente intuitivas y sobretodo son muy pesadas.

Por suerte, la comunidad AS se movió bastante rápido y en el 2007 ya había disponibles varios kits de animación para AS3. La mayoría de gente optó por Tweener, entre ellos yo, pero hace cosa de 4 meses probé TweenLite y quedé encantado. Desde entonces, cuando tengo que animar por código, TweenLite es mi primera opción.

Continuar leyendo »

Mar 31, 2008

Acción para la "La Caixa"

En “La Caixa” están trabajando para hacer que su portal sea accesible. De momento ya cuenta con el nivel AA de las especificaciones que dicta la WAI (Web Accessibility Initiative) en gran parte del site.

Nos pidieron que pensáramos en una acción cuyo objetivo fuera transmitir que “La Caixa” se esfuerza para que no haya barreras en internet.

Dicha acción recayó sobre mis dos compañeros de equipo y un servidor. Tras un poco de photoshop, un tanto de bloc de notas y algo de flash, sacamos esta propuesta:

Continuar leyendo »

Mar 13, 2008

Adobe AIR para clientes y abuelas

Hace menos de un mes que Adobe ha lanzado oficialmente AIR y todo el mundo se ha hecho eco de la noticia (incluso diarios como El País).

Con 2 años de desarrollo a las espaldas y 3 versiones Beta, cualquier persona que se mueva en el mundillo web sabe de que va el tema. Sin embargo, AIR no afectará sólo a los desarrolladores, sino que va a suponer también un gran impacto en los usuarios.

Si has estado de viaje en otro planeta, esperas que tu cliente entienda porqué necesita invertir en AIR, o quieres que tu abuela no se sienta desplazada en las comidas, este artículo es para ti.

Continuar leyendo »

Mar 5, 2008

Punteros

Hace poco tuve que programar un banner en el que 20 punteros se movían aleatoriamente.

Partiendo de esta base, he pulido un poco más el movimiento, los he dotado de interactividad y he añadido un centenar. El resultado es una nueva pieza para el Lab:

Continuar leyendo »