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.

bezier curve

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:

Snap bezier video

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

13 Comentarios

  1. Pingback: Efecto Aladino ( Genie effect )

  2. Jose Ignacio Hita

    Un par de cosillas que estaría bien corregir:

    Al importar el componente sale un warning de falta de declaración de tipo, es una pijería, pero se arregla si en el catch pones “e:*” en lugar de “e”.

    Otra cosa más importante, en la función de configuración del componente (setup), el último parámetro lo tienes puesto por defecto a null, sin embargo si se deja como null falla en la línea 94 al intentar tomar su propiedad x. Esto confunde al programador que utilice tu componente, dado que es de esperar que si el valor por defecto para el parámetro es null, funcione con ese valor por defecto. Si es un parámetro obligatorio (como parece que es) deberías quitar el “=null”.

    Por lo demás muy chulo el efecto, he estado intentándolo utilizar, pero yo necesito utilizarlo con ventanas emergentes (TitleWindow) y parece que así no se puede usar el componente, dado que es obligatorio especificar un contenedor o un control donde ir renderizando el efecto, así que bueno, me lo guardaré para futuras necesidades.

    Mucha gracias por colaborar con la comunidad, un saludo 🙂

  3. Raul Diaz

    Jose Ignacio:

    En cuanto tenga un rato lo monto con un TileWindow y lo pongo en mi blog, no obstante lo que pretendo es introducirlo en el sistema de ventanas que publiqué hace un par de semanas.

  4. Raul Diaz

    Jose Antonio:

    La verdad es que habría que preguntárselo a un buen abogado especializado en estas cosas. Yo simplemente he elaborado el efecto que realmente es parecido pero no es igual al efecto patentado por Apple, asi que cada uno lo puede utilizar de la manera que estime oportuna… 😉

  5. Ilya Mordasov

    hi, i downloaded example, but i’ve got a problem: if “” it’s below, then it work, if above then it doesn’t work

  6. Gilbert Mizrahi

    Raul,

    Gracias por compartir.
    En ele ejemplo de la curva Bezier cambie un poco la funcion Draw para que los puntos P1 a P4 salgan del centro de las lineas. la funcion modificada queda:

    private function draw():void{
    g.clear();

    // Draw line P1 to P2
    g.lineStyle(1,0x00FF00);
    g.moveTo(p1.x + p1.width/2, p1.y+p1.height/2);//g.moveTo(p1.x,p1.y);
    g.lineTo(p2.x + p2.width/2, p2.y+p2.height/2); //;g.lineTo(p2.x,p2.y);

    // Draw line P4 to P3
    g.lineStyle(1,0x0000FF);
    g.moveTo(p4.x + p4.width/2, p4.y+p4.height/2);//g.moveTo(p4.x,p4.y);
    g.lineTo(p3.x + p3.width/2, p3.y+p3.height/2); //g.lineTo(p3.x,p3.y);

    // Declare the four control points of the cubic bezier curve
    var P1:Point = new Point(p1.x + p1.width/2,p1.y + p1.height/2); //new Point(p1.x,p1.y);
    var P2:Point = new Point(p2.x + p2.width/2,p2.y + p2.height/2);
    var P3:Point = new Point(p3.x + p3.width/2,p3.y + p3.height/2);
    var P4:Point = new Point(p4.x + p4.width/2,p4.y + p4.height/2);

    // Draw the cubic bezier curve
    g.lineStyle(2,0xFF0000);
    g.moveTo(p1.x + p1.width/2,p1.y+p1.height/2);
    drawCubicBezier( [P1,P2,P3,P4], Math.abs(P4.y-P1.y)+1 ,g);

    }

  7. Pingback: koko8829's me2DAY

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase