I have a friend who once said that the image rotate and zoom application is the ‘hello world’ of multitouch. I thought that was a pretty astute observation. In part one (of two) in this video tutorial, we’ll take a look at how to make any Flex component Rotatable and Scalable. This class can be applied to images for the classic ‘hello world’ effect, but it can also be added to videos, data grids and containers making for a fun and engaging user experience.
Here is the class that drives most of the application:
RotatableScalable:
package com.mlegrand
{
import flash.display.DisplayObject;
import flash.events.TransformGestureEvent;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
public class RotatableScalable
{
protected var disO:DisplayObject
public function RotatableScalable(displayObject:DisplayObject)
{
disO = displayObject;
if(Multitouch.supportsGestureEvents)
{
Multitouch.inputMode = MultitouchInputMode.GESTURE;
addGestureEventListeners()
}
}
protected function addGestureEventListeners():void
{
disO.addEventListener(TransformGestureEvent.GESTURE_ROTATE, gestureRotateHandler);
disO.addEventListener(TransformGestureEvent.GESTURE_ZOOM, gestureZoomHandler);
}
protected function gestureRotateHandler(event:TransformGestureEvent) : void
{
event.stopImmediatePropagation();
var m:Matrix = disO.transform.matrix;
var p:Point = m.transformPoint(new Point(disO.width/2, disO.height/2));
m.translate(-p.x, -p.y);
m.rotate(event.rotation*(Math.PI/180));
m.translate(p.x, p.y);
disO.transform.matrix = m;
}
protected function gestureZoomHandler(event:TransformGestureEvent):void
{
event.stopImmediatePropagation();
var m:Matrix = disO.transform.matrix;
var p:Point = m.transformPoint(new Point(disO.width/2, disO.height/2));
m.translate(-p.x, -p.y);
m.scale(event.scaleX, event.scaleY);
m.translate(p.x, p.y);
disO.transform.matrix = m;
}
}
}
Other notes:
I noticed the matrix transform over at Justin Imhoff’s blog. I highly recommend that you add his blog to your feed reader. I also mentioned the Natural User Interface Group. Their forums are very active and may have helpful ideas for anyone interested in multitouch development.
