cyancdesign [Chris Yanc]

Interactive Designer and Developer

There are many APIs out there to work with. If you start searching around Google, there are many people dedicated to helping people like you and me tie in different information and resources into Flash. It can take quite a long time just understanding a full API and be able to use ALL of it's capabilities. But that idea is way down the road. If you are like me, it's nice to find something to help you get off the ground.

Today I came across Emanuele Feronato's website, Italian geek and PROgrammer. He has a tutorial to get you started using the GoogleMaps API, so here is your first task in this tutorial:

1. Read Emanuele Feronato's tutorial and get Google Maps running in Flash.

Got it yet? Not yet? Don't worry I took me a little while to get everything downloaded, hooked in and sorted out.

Got it now? Awesome! Set your API key and everything? Great. This tutorial I'm going to try something different. Last time, I built up to the final code step by step. This one, I'll show you the final version of the code, and we'll step through it. Let me know which type of tutorial you like better and in the future, I'll try to keep a consistent style.

BUT! before I give you the code, it's time to add another function to the TUIO API, TUIOObject.as specifically. Now, hopefully you setup a new folder to hold your googleMaps.fla and AS script you are importing, for my example, in the 'app' folder, there will be a 'GoogleAPI' folder containing 'googlemap.as', the package file in my examples will be written for that setup. And copied over the "flash" folder like we did in the last tutorial (if you aren't familiar with what I'm talking about, refer to this post). Just make sure you have the returnBlobs() function ready to go in flash/events/TUIO.as. With me so far, right?

Now that the files are situated, open flash/events/TUIOObject.as

One bit of information we are going to need is the old and current; X and Y coordinated of the blobs interacting with the map. But if you look in line 23 of this file, it's not a public piece of information. We could use returnBlobs()[0].x, because x is a public variable, but if I were to use returnBlobs()[0].oldX, i'd just get an error. We need a new little function to return us the value of oldX and oldY, and while we are at it to make it symetrical, and for practice, lets make one that does X and Y as well.

Around line 95, I add this code:

		public function getTouchOldPoint():Point
		{
			var oldPoint:Point;
			oldPoint = TUIO_OBJECT.parent.globalToLocal(new Point(oldX, oldY));
			return oldPoint;
		}
		public function getTouchNewPoint():Point
		{
			var newPoint:Point;
			newPoint = TUIO_OBJECT.parent.globalToLocal(new Point(x, y));
			return newPoint;
		}

What does this do? getTouchOldPoint(), return a Point value. Since we'll need to know X and Y, why not make it one variable name to have to work with instead of two?

Now we are ready to get started with googlemap.as, load it up and insert this code:

package app.GoogleAPI{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
 
	import flash.events.TUIO;// allows to connect to touchlib/tbeta
	import flash.events.TouchEvent;// allows to use TouchEvent Event Listeners
 
	public class googlemap extends Sprite {
		private var map:Map = new Map();
 
		public function googlemap() {
 
			TUIO.init(this,'127.0.0.1',3000,'',true);
 
			map.key="YOUR KEY";
			map.setSize(new Point(1024, 768));
			map.addEventListener(MapEvent.MAP_READY, onMapReady);
			this.addChild(map);
			function onMapReady(event:Event):void {
				map.setCenter(new LatLng(41.498155,-81.705322), 6, MapType.NORMAL_MAP_TYPE);
			}
 
			this.addEventListener(TouchEvent.MOUSE_MOVE, onTouchMove);
 
		}
		private function onTouchMove(evt:TouchEvent):void {
			var newTouchItem = TUIO.returnBlobs()[0];
			var shiftX = (newTouchItem.getTouchOldPoint().x - newTouchItem.getTouchNewPoint().x);
			var shiftY = (newTouchItem.getTouchOldPoint().y - newTouchItem.getTouchNewPoint().y);
			var movePt:Point = new Point(shiftX * 2, shiftY * 2);
			map.panBy(movePt);
		}
	}
}

So let's take a look at it.

The first part of it is all pretty normal stuff. Declare the needed classes, google maps, TUIO, Sprite, Event for google maps, geom.Point. declare class name and it's extension. make a new private var for the new Map(); We do not want any outside classes directly effecting this variable. Start your googlemap() function and start up TUIO.

Addition note: for map.setSize(new Point(1024, 768)); it was originally set to map.setSize(new Point(stage.stageWidth, stage.stageHeight)); unfortunetly, when you try to load this externally from an outside flash container, it cannot recognize the stage width and height, so I have it hard coded to my screen's resolution, feel free to change it to your own.

Then at line 28, it gets to the fun part. We begin with just wanting to move the map with a touch point.

this.addEventListener(TouchEvent.MOUSE_MOVE, onTouchMove);

This line listens for any TouchEvent movement on the stage, for this first iteration, we'll just use the very first blob to control the movement of the map. After studying the Google Maps API, I learned you can move the map with a function called panBy(Point). It pans the map to a new point, and we can gather that value from a Touch MOVE, by comparing where the blob was to where it is.

			var newTouchItem = TUIO.returnBlobs()[0];
			var shiftX = (newTouchItem.getTouchOldPoint().x - newTouchItem.getTouchNewPoint().x);
			var shiftY = (newTouchItem.getTouchOldPoint().y - newTouchItem.getTouchNewPoint().y);
			var movePt:Point = new Point(shiftX * 2, shiftY * 2);

First we need to know what to get, TUIO.returnBlobs(), returns an array of all the active blobs at that moment, then TUIO.returnBlobs()[0] give you the Touch Object of just the first blob to work with. Time to calculate, newTouchItem.getTouchOldPoint().x uses one of the new functions we put into TUIOObject.as, it'll get us the previous X coordinate of the very first blob in the available array of blob items. We take the old touch point's X and subtract it from the new touch point's X, this gived us our shift in the X coordinate after a TouchMOVE. Then it's just the matter of doing the same to the Y coordinate, and putting that into a new Point variable (movePt) for panBy to use.

Note: I multiplied both values by 2 to adjust the speed of the movement, you may want to test out different values until you are happy with the speed of the map's follow compared to the touch point.

			map.panBy(movePt);

Then panBy just takes the new value and move the map to that final location. Easy, right?

You want something more complicated? Alright, let's make it zoom!
Watch out for line 58 if you copy and paste, my code formatting plugin may change > to >

package app.GoogleAPI{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
 
	import flash.events.TUIO;// allows to connect to touchlib/tbeta
	import flash.events.TouchEvent;// allows to use TouchEvent Event Listeners
 
	public class googlemap extends Sprite {
		private var map:Map = new Map();
		private var origPt1:Point;
		private var origPt2:Point;
		private var origZoom:Number;
 
		public function googlemap() {
 
			TUIO.init(this,'127.0.0.1',3000,'',true);
 
			map.key="YOUR KEY";
			map.setSize(new Point(1024, 768));
			map.addEventListener(MapEvent.MAP_READY, onMapReady);
			this.addChild(map);
 
			function onMapReady(event:Event):void {
				map.setCenter(new LatLng(41.498155,-81.705322), 6, MapType.NORMAL_MAP_TYPE);
			}
 
			this.addEventListener(TouchEvent.MOUSE_DOWN, onTouchUpDown);
			this.addEventListener(TouchEvent.MOUSE_UP, onTouchUpDown);
			this.addEventListener(TouchEvent.MOUSE_MOVE, onTouchMove);
		}
		private function onTouchUpDown(evt:TouchEvent):void {
			if (TUIO.returnBlobs().length == 2) {
				var tuioobjOriginal1 = TUIO.returnBlobs()[0];
				var tuioobjOriginal2 = TUIO.returnBlobs()[1];
				origPt1 = new Point(tuioobjOriginal1.getTouchNewPoint().x, tuioobjOriginal1.getTouchNewPoint().y);
				origPt2 = new Point(tuioobjOriginal2.getTouchNewPoint().x, tuioobjOriginal2.getTouchNewPoint().y);
				origZoom = map.getZoom();
			}
		}
		private function onTouchMove(evt:TouchEvent):void {
			if (TUIO.returnBlobs().length == 2) {
				var tuioobj1 = TUIO.returnBlobs()[0];
				var tuioobj2 = TUIO.returnBlobs()[1];
 
				var curPt1:Point = new Point(tuioobj1.getTouchNewPoint().x, tuioobj1.getTouchNewPoint().y);
				var curPt2:Point = new Point(tuioobj2.getTouchNewPoint().x, tuioobj2.getTouchNewPoint().y);
 
				var len1:Number = Point.distance(origPt1, origPt2);
				var len2:Number = Point.distance(curPt1, curPt2);
 
				var newscale:Number = len2/len1;
 
				if(newscale >= 1) {
					map.setZoom(origZoom + (Math.floor(newscale)-1));
				} else {
					newscale = len1/len2;
					map.setZoom(origZoom - (Math.floor(newscale)-1));
				}
			} else {
				var newTouchItem = TUIO.returnBlobs()[0];
				var shiftX = (newTouchItem.getTouchOldPoint().x - newTouchItem.getTouchNewPoint().x);
				var shiftY = (newTouchItem.getTouchOldPoint().y - newTouchItem.getTouchNewPoint().y);
				var movePt:Point = new Point(shiftX * 2, shiftY * 2);
				map.panBy(movePt);
			}
		}
	}
}

Lot more to go though, so let's break it down, first thing to point out:

		private var origPt1:Point;
		private var origPt2:Point;
		private var origZoom:Number;
		private var newZoomLevel:Number;

There are some variables we need to set aside for multiple function to use. To zoom in and out in google maps, I followed and modified the code from Scalable.as found in the \AS3\int\app\core\action folder in the Touchlib SVN build. We'll need origPt1 and origPt2 to compare the size between 2 touch points applied to the map. origZoom is to keep track of what the starting level of the google map's zoom is at.

			this.addEventListener(TouchEvent.MOUSE_DOWN, onTouchUpDown);
			this.addEventListener(TouchEvent.MOUSE_UP, onTouchUpDown);
			this.addEventListener(TouchEvent.MOUSE_MOVE, onTouchMove);

This time around we'll need to collect and verify information a the Touch DOWN and Touch UP events. And the same code cam be applied to Touch DOWN and Touch UP, because it only need to set a few variables for comparison purposes for the TouchMOVE event.

		private function onTouchUpDown(evt:TouchEvent):void {
			if (TUIO.returnBlobs().length == 2) {
				var tuioobjOriginal1 = TUIO.returnBlobs()[0];
				var tuioobjOriginal2 = TUIO.returnBlobs()[1];
				origPt1 = new Point(tuioobjOriginal1.getTouchNewPoint().x, tuioobjOriginal1.getTouchNewPoint().y);
				origPt2 = new Point(tuioobjOriginal2.getTouchNewPoint().x, tuioobjOriginal2.getTouchNewPoint().y);
				origZoom = map.getZoom();
			}
		}

onTouchUpDown, when it learns that there are 2 blobs on the stage, we ultilize getTouchNewPoint() we created earlier to get the initial X and Y coordinated of the 2 points. As well as getting what zoom level google map is positioned at, at that moment. These create our starting point values for comparing the scale on our Touch MOVE event.

			if (TUIO.returnBlobs().length == 2) {
				var tuioobj1 = TUIO.returnBlobs()[0];
				var tuioobj2 = TUIO.returnBlobs()[1];
 
				var curPt1:Point = new Point(tuioobj1.getTouchNewPoint().x, tuioobj1.getTouchNewPoint().y);
				var curPt2:Point = new Point(tuioobj2.getTouchNewPoint().x, tuioobj2.getTouchNewPoint().y);
 
				var len1:Number = Point.distance(origPt1, origPt2);
				var len2:Number = Point.distance(curPt1, curPt2);

In the Touch MOVE event is where the bulk of the calculations exist, thanks to the creator of Scalable, I was able to get this working rather quickly. Once it know there are only two touch points active on the map, it begins gathering the needed information. Starting with the X and Y of both blobs. It builds a Point object to hold both parts of the information. Then len1 calculates the distance between the two original blob locations, then len2 calculated the distance between the same blobs after it has moved, but since origPt1 and 2 are held outside of the function, they can retain the information for continued comparison until another blob is added or removed.

				var newscale:Number = len2/len1;
 
				if(newscale >= 1) {
					map.setZoom(origZoom + (Math.floor(newscale)-1));
				} else {
					newscale = len1/len2;
					map.setZoom(origZoom - (Math.floor(newscale)-1));
				}

So how does it know which way to scale? New variable, newscale, divides the NEW distance from the OLD distance. But now we need to do a little comparison to help coordinate the scaling, we only want it to bump up after a certian amount of scaling, not all the time, so originally the calculation used was curScale * len2/len1 with curScale typically being 100 because Scalable.as used scaleX and scaleY to change the object's scale. But for this we need to get the information to a precreated function. The zoom function ranges from 1 to 19 I believe, so for this calculation. Just before that though, we look to see if we are only scaling up with if(newscale >= 1), when it is, we calculate origZoom + (Math.floor(newscale)-1), something worth watching would may be putting a trace under that line showing you the calculations with and without Math.floor(). Now, if we are scaling down, that means newscale will be a decimal value which we cannot Math.floor() so once we are through the intial if statement we can swap the calculation for newscale to find the reverse division between the two blob lengths. Once that is calculated, we just subtract that from the origZoom variable instead of adding it. That calculation's result is given to map.setZoom() to them zoom the map.

If there are not 2 active touchpoints on the stage, either more or less, the Touch MOVE event then just uses the very first touch point to move the map as in our first example.

This, I hope, has gotten you started with using GoogleMap's Flash API with multi-touch. Take a look at the documents for the API, there is a lot you can do with it. You just need to start taking those steps closer to your final goal. And I just have to add, writing out a tutorial of your code really make you start thinking more critically about how you work problems out and clean up your code. I highly recommend trying it out.

This code had been uploaded to my Google Code Page.

Tags: Actionscript 3.0, API, Flash, Google Maps, Multi-Touch, Touchlib, Tutorial

This entry was posted on Saturday, March 21st, 2009 at 8:10 pm and is filed under Multi-Touch, Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.