• Tutorials
  • Blog
  • About
  • Contact
  • Making Flex DisplayObjects Zoom and Rotate (Multitouch Screencast)

    2010 - 02.04

    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.

    RotatableScalable.mov

    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.

    4 Responses to “Making Flex DisplayObjects Zoom and Rotate (Multitouch Screencast)”

    1. Social comments and analytics for this post…

      This post was mentioned on Twitter by multitouchup: New screencast: Multitouch zooming and rotating of any Flex display object with Adobe Air 2. http://multitouchup.com/?p=357...

    2. Just wanted to say thanks for the link and it is great to see all these tutorials that you have for the Flash community that are focused around Multitouch! Looking forward to more!

    3. Don Kerr says:

      Outstanding. Like the matrix approach. Appears to respond better than using the rotate/zoom effects.

      Thanks for sharing!

      Don Kerr
      Houston Space City Adobe User Group

    4. Teerasej says:

      Thank you for your helpful class. I tested it in Flash Player 10.1 prerelease, work like a charm. :)

    Your Reply