En esta ocasión os presento el efecto Aladino o Genie effect adaptado a Flex, para aquellos que no lo conozcáis, este efecto es el que se produce (por defecto) al minimizar una ventana en el sistema operativo OS X de Apple, este efecto fue "inventado" por Bas Ording y patentado por Apple Computer, en este enlace podéis ver una [1] referencia de la patente.

Para los que tengáis la suerte de trabajar con un Macintosh podéis ver el efecto a cámara lenta si pulsáis la tecla SHIFT al hacer click en el botón de minimizado de una ventana. Cuando lo vemos a velocidad normal aparentemente parece que la ventana se distorsiona y se alarga hasta la parte inferior de la pantalla, pero nada más lejos de la realidad, primeramente la ventana se reduce en su parte inferior, manteniendo la parte superior intacta y después comienza a bajar.

Para la realización del efecto necesitamos un tipo de curva llamada curva cúbica Bézier, su denominación es en honor a [2] Pierre Bézier que alrededor de 1960 desarrolló un sistema para el trazado de dibujos técnicos en el diseño aeronáutico y de automóviles. Podemos ver una buena explicación de este tipo de curvas en la [3] Wikipedia.

[4]

[5] Pincha en este enlace para ver un ejemplo de curva Bézier en Flex ([6] bezier_test.zip)

Elementos necesarios:

• Un DisplayObject sobre el cual se va a generar el efecto.
• El destino del DisplayObject al minimizarlo, es decir, un punto y un ancho.
• La velocidad a la que deseamos realizar el efecto.
• Un contenedor o un control donde ir renderizando el efecto, por ejemplo un Canvas o un UIComponent.

Paso a paso lo que hacemos es:

• Diseccionamos el DisplayObject en MovieClips, uno por cada línea del BitmapData.
• En base a la velocidad y la distancia del origen al destino obtenemos dos curvas Bézier cada vez que el origen se aproxima una unidad (x pixels) al destino, éstos datos los calculamos una sola vez para que la velocidad de renderización sea la más óptima posible.
• Una vez hechos los cálculos sólo queda realizar un bucle incrementando la coordenada Y del origen, acoplar la coordenada X al punto correspondiente de la primera curva y darle el ancho que hay desde la primera curva hasta la segunda.

Pulsa sobre la imagen para ver un video demostrativo:

[7]

[8] Pulsa sobre este enlace para lanzar la aplicación demo del efecto aladino ([9] aladino.zip)