Efecto Aladino ( Genie effect )
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 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 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 Wikipedia.
Pincha en este enlace para ver un ejemplo de curva Bézier en Flex (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:
Pulsa sobre este enlace para lanzar la aplicación demo del efecto aladino ( aladino.zip)
Acerca de esta entrada
Usted está leyendo “Efecto Aladino ( Genie effect ),” una entrada de MadeInFlex
- Autor: Raul Diaz
Actualmente trabaja en Comisiones Obreras como analista-programador de la intranet de gestión interna a nivel nacional así como la extranet para los afiliados.
- URL del Autor:
- http://blog.diaztorres.com
- Publicada:
- 29.01.08 / 6pm
- Categorías:
- Tutoriales
- Entradas relacionadas:
- Sistema de ventanas
- Registro para las charlas del 23 de Marzo
- Registro para las charlas del día 18
- Apollo: Installation Error?
- Número de visitas:
- 3757




11 Comentarios
Ir al formulario de comentarios | rss (comentarios) [?] | trackback url [?]