Multitouch con Adobe AIR 2, Flash Lite 4 y Flash Player 10.1

Con las novedades del Flash Player 10.1, Flash Lite 4 y AIR 2.0 existe una que a los usuarios de iphone o macbook les debe ser muy familiar, el multitouch. En este tip enseñaremos como utilizar la clase TransformGestureEvent que nos permite zoom y rotar elementos. Para eso necesitamos Flash Builder con el SDK de AIR 2.0 que ya pueden descargar del sitio Adobe Labs. Cuando Flash CS5 sea liberado, también podrán usarlo para sus aplicaciones.

Una vez configurado el SDK de AIR 2.0, creamos un proyecto FLEX del tipo Desktop (Adobe AIR) y lo primero que haremos es cargar una imagen que usaremos de ejemplo:

Código :

var l:Loader = new Loader();
l.load(new URLRequest("logo.png"));
l.x = l.y = -100;
$__img1 = new Image();
$__img1.addChild(l);
this.addElement($__img1);
$__img1.x = $__img1.y = 200;

Con eso agregamos un elemento a nuestro stage de la aplicación, y ahora pasamos a agregar un evento para que detecte la rotación, usaremos el evento TransformGestureEvent del tipo GESTURE_ROTATE

Código :

this.addEventListener(TransformGestureEvent.GESTURE_ROTATE, _rotation, false, 0, true);

Este evento se dispará cuando se detecte los dos dedos sobre el stage y hagas el movimiento de rotación

Código :

private function _rotation(e:TransformGestureEvent):void{
$__img1.rotation += e.rotation;
}

Ahora, si queremos usar el zoom o escalar los elementos abriendo o cerrando los dedos sobre el stage usamos GESTURE_ZOOM del evento TransformGestureEvent.

Código :

this.addEventListener(TransformGestureEvent.GESTURE_ZOOM, _zoom, false, 0, true);

Y creamos su función:

Código :

private function _zoom(e:TransformGestureEvent):void
{
   if (e.scaleX > 1)
   {
      $__img1.scaleX += e.scaleX / 100;
      $__img1.scaleY += e.scaleY / 100;
   }
   else
   {
      $__img1.scaleX -= e.scaleX / 100;
      $__img1.scaleY -= e.scaleY / 100;
   }
}

Aquí es necesario un IF porque siempre está detectando que el zoom actual es 1 cada vez que interactuas, entonces si juntas los dedos al momento de querer hacer ZoomIN, irá de 1.0, 0.9, 0.8 así sucesivamente.

La aplicación final quedaría así:

Código :

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  creationComplete="init()"
                  width="320"
                  height="400">

   <fx:Script>
      <![CDATA[
         import mx.controls.Image;
         private var $__img1:Image;

         //
         private function init():void
         {
            var l:Loader=new Loader();
            l.load(new URLRequest("logo.png"));
            l.x=l.y=-100;
            $__img1=new Image();
            $__img1.addChild(l);
            this.addElement($__img1);
            $__img1.x=$__img1.y=200;
            //
            $__img1.addEventListener(MouseEvent.MOUSE_DOWN, activeMove, false, 0, true);
            $__img1.addEventListener(MouseEvent.MOUSE_UP, activeMove, false, 0, true);
            this.addEventListener(TransformGestureEvent.GESTURE_ROTATE, _rotation, false, 0, true);
            this.addEventListener(TransformGestureEvent.GESTURE_ZOOM, _zoom, false, 0, true);
         }

         private function _rotation(e:TransformGestureEvent):void
         {
            $__img1.rotation+=e.rotation;
         }

         private function _zoom(e:TransformGestureEvent):void
         {
            if (e.scaleX > 1)
            {
               $__img1.scaleX+=e.scaleX / 100;
               $__img1.scaleY+=e.scaleY / 100;
            }
            else
            {
               $__img1.scaleX-=e.scaleX / 100;
               $__img1.scaleY-=e.scaleY / 100;
            }
         }

         private function activeMove(e:MouseEvent):void
         {
            if (e.type == MouseEvent.MOUSE_DOWN)
               $__img1.startDrag();
            else if (e.type == MouseEvent.MOUSE_UP)
               $__img1.stopDrag();
            else
               throw new Error("upsss!!!");
         }
      ]]>
   </fx:Script>
</s:WindowedApplication>

Puedes descargar el ejemplo aquí, necesitas tener el runtime de AIR 2

 

Tweet