Mayo 2006


Desde mediados del año pasado se hablaba de que los sistemas de detección de movimiento en páginas web con flash a través de webcam, eran una realidad, pero personalmente, no había tenido tiempo hasta ahora de probarlos. Ahora que estoy más ocioso, me he puesto a investigar, y puedo decir que tampoco creo que se puedan hacer grandes historias, pero algún juego para pasar el rato ya podemos ver. En el ejemplo que pego, utilizo un vídeo grabado con mi webcam para enseñaros una posible aplicación.

[ webcam djembé ]

En breve postearé una versión con la que podréis echaros unos redobles al estilo bumtaka.com. (si tenéis webcam, claro)

Nota friki.
Para el experimento, he estado trasteando con algún algoritmo de motion detection. En concreto, he trasteado con la clase BitmapData, y los métodos getPixel y treshold. Adobe ha sacado un artículo-howto al respecto.

A raíz de un hilo en Subflash, un usuario comentaba su interés por el menú de una página de 24-7media.de, que tenía un efecto “pegadizo”. Cuando te acercabas a alguno de los elementos, parecía que se “pegaba” al ratón. Bien, como estoy haciendo algo de código parecido, me propuse sacarlo en un momentín.
Por aquí os lo dejo.

Y para la gente que me lee por rss y que no puede ver los flash que embebo, que sé que cada día sois más (gracias!), pego por aquí el enlace como de costumbre.

[jarrón de margaritas pegadizas]

Para aquellos interesados en el código: en Subflash trataremos el tema estos días.

Por último, si todavía no conocéis 24-7media.de, no os perdáis esta web creadora de escuela. Aun siendo ya un poco viejuna, me encanta esa atmósfera intrigante que te produce al visitarla.

Como bastantes de vosotros, flipé en colores con la web de LeoBurnett. El sistema de navegación suma dos factores a veces opuestos en esto del flash: además de un wow! por dentro te dices ¡que sencillo y útil!.

Pero el sistema tampoco es nuevo, en realidad ya estaba bastante visto. ¿entonces? ¿por qué ha tenido tanta repercusion? Supongo el hecho de que es una de las grandes agencias unido a una buena creatividad aplicada, y clientes acojonantes, la han hecho sitio del año en fwa

Al grano, que me enrollo más que las persianas. Me gustó tanto el sistema, que me propuse sacarlo. Y una vez sacado… ¡solo se me ha ocurrido hacer una galería! :( Por aquí dejo algunos dibujicos y foticas de mi niña, que de creatividad ando seco
Si se os ocurre alguna aplicación práctica para esto, ahí tenéis los comentarios.

[galería]

Estoy enfrascado en un trabajillo para pasar el rato, donde simulo la física de los pétalos de una margarita. Para el mismo, necesitaba generar todos los pétalos con actionscript para luego meterles las interacciones. Estaba trabajando en la parte gráfica, y para pruebas de color, hice este experimento que puede servir como salvapantallas. Creo que la parte gráfica de las margaritas me ha quedado mas o menos decente, a ver que tal cuando meta la física.

[margaritas]

Por aquí va una muy simple clase para hacer blurs (desenfocados) en actionscript 2.o que hice hace tiempo, pensaba integrarla con las tweening ecuations, o con algún paquete de tweenings, pero por desidia no la he vuelto a tocar.
Antes de que coja polvo, o peor aún quede obsoleta, la libero, por si alguien se anima a mejorarla o le sirve de un aprieto.

Cositas estupendas de la clase:
- La velocidad se pasa en segundos, independiente del framerate
- Actionscript 2.0 & MTASC ready.
- Control de todos los argumentos de blurFilter. (blurx, blury, quality)

TODO´s pal que se anime.
- integrar con ecuaciones de Penner ó
- integrar con algún paquete de tween.

Para sugerencias o bugs pliz, dadme un toque al correo.


[por aquí un ejemplo]

Actionscript:
  1. import flash.filters.BlurFilter;
  2. import mx.utils.Delegate;
  3. /**
  4. * @author Alejandro Sánchez Marcos
  5. * @usage
  6.         import com.electroduendes.tween.BlurTween;
  7.         var blurTween:BlurTween = new BlurTween(mc);
  8.         var initBlur:Object = {blurX:0, blurY:0, quality:3};
  9.         var finalBlur:Object = {blurX:50, blurY:5, quality:3};
  10.         a.onRelease = function() {
  11.                 blurTween.tween(initBlur, finalBlur, 1);
  12.         };
  13.         b.onRelease = function() {
  14.                 blurTween.tween(finalBlur, initBlur, 1);
  15.         };
  16. *
  17. */
  18. class com.electroduendes.tween.BlurTween {
  19.        
  20.         public var interval: Number = 40;
  21.         private var filter:BlurFilter;
  22.         private var blur_interval:Number;
  23.         private var mc:MovieClip;
  24.         private var quality : Number;
  25.         private var counter : Number;
  26.         private var iterations : Number;
  27.         private var diferenceX:Number;
  28.         private var diferenceY:Number;
  29.        
  30.         public function BlurTween(mc:MovieClip){
  31.                 this.mc = mc;
  32.                 filter = new BlurFilter();
  33.         }
  34.         public function tween(initBlur:Object, finalBlur:Object, seconds:Number) : Void {
  35.                 counter = 0;
  36.                 this.iterations = Math.ceil(seconds*1000/interval);
  37.                 // apply init blur     
  38.                 filter.blurX = initBlur.blurX;
  39.                 filter.blurY = initBlur.blurY;
  40.                 filter.quality = initBlur.quality;
  41.                 mc.filters = [filter]
  42.                 // calculate difference 
  43.                 diferenceX  = finalBlur.blurX - initBlur.blurX;
  44.                 diferenceY = finalBlur.blurY - initBlur.blurY;   
  45.                 this.quality = finalBlur.quality;
  46.                 // if we have something to blur or unblur...
  47.                 clearInterval(blur_interval);
  48.                 if (diferenceX!=0 && diferenceY!=0)
  49.                         blur_interval = setInterval(Delegate.create(this, applyTween), interval);
  50.  
  51.         }
  52.         private function applyTween() : Void {
  53.                 counter++;     
  54.                 filter.blurX += diferenceX/iterations;
  55.                 filter.blurY += diferenceY/iterations;
  56.                 filter.quality = quality;
  57.                 mc.filters = [filter];
  58.                 if (counter == iterations) clearInterval(blur_interval);
  59.         }
  60. }

Está en ingles por mi propósito hace un año de empezar a codificar en este idioma. Sé que a los hispanohablantes nos cuesta algo trabajar con nombres de variables y comentarios en inglés, pero por contra tengo que decir que después de tener que pelearme con un ejemplo de un código que sólo encontré en un blog francés escrito en francés, al menos, por mayoría democrática debo acostumbrarme al inglés para el código que publico.