коли под наемGoogleMaps API makes it really easy to place typical overlay objects onto the map like lines, markers, polygons and images (as ground overlays). In this article, we’ll plot Polylines, Markers and Polygons. GroundOverlay maybe included in the next topic as I still can’t figure out what image to use.

As I’ve said, plotting these types of objects are very easy to do. For Markers, you only need 1 point of longitude/latitude values. For Polylines, you need at least 2 points. For Polygons, you need at least 3. Since Polylines and Polygons need more than 1 point (lat,lng) they require values placed in arrays. After that, just invoke the addOverlay() method then you’re done!

Since the release of Google Maps API for Flash, I wanted to start incorporating this free service in my apps as I’ve seen a lot of good examples being built around. One thing to take note is this ActionScript API will only work in Flex and not in your usual Flash app.

Google API Key

Before you can even start coding, you need sign up for an API key so you can use their free service. Get the key here. You can get as many keys as you want using only 1 Google account. That being said, let’s get 2 keys instead - 1 for your site (http://www.mysite.com) and 1 for your local development server (http://localhost). This makes testing much faster rather than you constantly uploading files to your production server.

Google Maps API

Download the Google Maps API for Flash (Flex) here.

Next, unzip this archive file and you’ll see docs and lib folders. Inside the lib folder, there exists the map_flex_1_3.swc Flash component. Drag and drop this to the “libs” folder in your Flex project. Now you’re ready to code.

Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init(event)">

	<mx:Script>
		<![CDATA[
			import com.google.maps.*;

			private var map:Map;
			private var mapZoom:uint = 5;
			private var defaultLatLng:LatLng = new LatLng(12, 122);

			private function init(event:Event):void
			{
				map = new Map();
				map.key = "ABQIAAAAxlyBsnIB7ByoEzHxPqwrxBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRMsh6FE492FPeqacWKcMUwMDjw0w"; // localhost
				map.addEventListener(MapEvent.MAP_READY, mapReadyHandler);

				mapDisplay.addChild(map);
			}

			private function mapReadyHandler(event:MapEvent):void
			{
				map.setCenter(defaultLatLng, mapZoom, MapType.PHYSICAL_MAP_TYPE);
			}

			private function mapResizeHandler(event:Event):void
			{
 			    map.setSize(new Point(mapDisplay.width, mapDisplay.height));
 			}

		]]>
	</mx:Script>	

	<mx:UIComponent id="mapDisplay" width="100%" height="100%" resize="mapResizeHandler(event)" />

</mx:Application>

Demo App

http://danao.org/demo-apps/google-maps/ — just right-click then view source. We will try to plot some overlay markers on the map in the next article.

Enjoy!

I would like to make this explanation and the accompanying codes AS SIMPLE AS POSSIBLE. I won’t be concerned with the aesthetics of the sample application, I’d like you to see it in barebones. So don’t complain if the app is ugly. For this discussion, let’s try to make a basic contact/email form. It should have fields for the recipient, sender, subject and body. This will not send the actual email but for purposes of demonstration, we’ll just populate the gathered data into another component.

What we need:

• MainApp.mxml - this is always required. Place this at the root of your source folder.
• EmailForm.mxml - this a component and contains all the text fields and submit button. Place this under the “views” folder.
• EmailEvent.as - this is our custom event. Place this under the “events” folder.
• EmailDTO.as - this is our data transfer object which holds all data gathered from the email form. Place this under the “dto” folder.

EmaiDTO.as

This is the easiest to write… very straightforward. We know that in our email form we have the typical fields for sender, recipient, subject and body. These will be the basis for our DTO’s properties. Assign a public access modifier to all these properties. Make this class bindable.

//EmailDTO.as
package dto
{
	[Bindable]
	public class EmailDTO
	{
		public var sender:String;
		public var recipient:String;
		public var subject:String;
		public var body:String;

		public function EmailDTO(sender:String, recipient:String, subject:String, body:String)
		{
			this.sender = sender;
			this.recipient = recipient;
			this.subject = subject
			this.body = body;
		}
	}
}

EmailEvent.as

Another straightforward coding. When instantiating this event class, you need to supply the data which is the DTO itself and the type which you can define with anything you like. Invoke the clone() method to allow event bubbling.

//EmailEvent.as
package events
{
	import dto.EmailDTO;
	import flash.events.Event;

	public class EmailEvent extends Event
	{
		public var data:EmailDTO;

		public function EmailEvent(data:EmailDTO, type:String)
		{
			super(type);
			this.data = data;
		}

		override public function clone():Event
		{
			return new EmailEvent(data, type);
		}
	}
}

EmailForm.mxml

This is where you build your form with UI elements. At the top of the code, define a new event name in the Metadata for this component - in my case I wrote “onSendEmail”. I’m still used to the old style events - onPress, onClick, onLoad - anything with the “on” prefix.

In the event handler submitForm(), instantiate a new DTO with the data inside the form elements. Instantiate a new event supplying the DTO and the new event name (defined in the Metadata). Dispatch this event.

	
		[Event(name="onSendEmail", type="events.EmailEvent")]
	

	
		

	
		
	

	
		
	

	
		
	

	
		
	

	
		
	

MainApp.mxml
Lay your components down. To be able to use your EmailForm component in the views folder, define a namespace the application - xmlns:view=”views.*”. You can now use the onSendEmail event. This event will be the carrier of the form data.

	
		From: " + event.data.sender + "\\n";
				taEmailOutput.htmlText += "To: " + event.data.recipient + "\\n";
				taEmailOutput.htmlText += "Subject: " + event.data.subject + "\\n";
				taEmailOutput.htmlText += "Message: " + event.data.body + "\\n";
			}
		]]>
	

	
	
	

Note:
You might think that it’s a lot harder to create DTOs and Custom Events for such a simple application like this. But when you integrate your Flex app with a database, you can take advantage of class mapping or do reflection between the client and the server. The DTO can have properties same as the database’s column definition in a particular table.

For advanced reading, try Yakov Fain’s discussion in using a Single Event Class approach.

Demos & Downloads
http://danao.org/demo-apps/custom-events/MainApp.html

There are currently 2 buttons in the panel - one to setup the movie and the other to insert a distribution licence agreement, which I normally do not put in my code but I thought it’ll be useful for other developers. I should start including this in my codes.

Setup Movie

This function will create 3 layers on top of the default “Layer 1″:

• Logic (folder)
• Stops (normal)
• Scripts (normal)

Both Stops and Scripts layers will have Logic as their parentLayer property. But before assigning a parentLayer, you should first access which layers you want this to be associated with through the layers property - a property returning an “array of layer objects”. One very important thing that LiveDocs failed to mention is the layers property reads timeline layers from top to bottom - so the top-most layer is index zero. But when you add layers using addNewLayer() method it naturally adds a new layer on top of the current layer. Each new added layer will have an index zero.

Here is where I got really confused. I always thought that when you add an item to a stack in an array, by default it should call Array.push(). But not in this case.

Logic folder layer will be locked and all child layers will inherit this property.

The Setup Movie button also adds folders into the library for better organization of assets. It modifies the stage properties:

• width: 1000
• height: 600
• frameRate: 30

Insert Licence

Most codes I download over the internet have an attached distribution agreement and most of them are very long - occupying several lines. This will cause a problem when you set this long text - with carriage returns and special characters - as a string value to a variable. ActionScript will throw an error. Doug McCune has a neat trick to this problem - encapsulate the text in CDATA sections.

var longText:String = String(<![CDATA[
	The quick brown
	fox jumped over
	the lazy dog.
]]>);

The 2nd problem. This text still has carriage returns and special characters. Escaping each special character by brute force defeats the purpose of programming. Here’s my little function utilizing RegExp.

function formatJSFL(str:String):String
{
	var pattern:RegExp;
	var replace:String;
	var formattedString:String = str;

	// forward slashes
	pattern = /\//g;
	replace = '\/';
	formattedString = formattedString.replace(pattern, replace);

	// back slashes
	pattern = /\\/g;
	replace = '\\\\';
	formattedString = formattedString.replace(pattern, replace);

	// double quotes
	pattern = /\"/g;
	replace = '\"';
	formattedString = formattedString.replace(pattern, replace);

	// single quotes
	pattern = /\'/g;
	replace = '\\\'';
	formattedString = formattedString.replace(pattern, replace);

	// asterisks
	pattern = /\*/g;
	replace = '\\*';
	formattedString = formattedString.replace(pattern, replace);

	// colons
	pattern = /\:/g;
	replace = "\\\:";
	formattedString = formattedString.replace(pattern, replace);

	// carriage return
	pattern = /\r/g;
	replace = "";
	formattedString = formattedString.replace(pattern, replace);

	// new line feed
	pattern = /\n/g;
	replace = "\\n";
	formattedString = formattedString.replace(pattern, replace);

	return formattedString;
}

And here’s how this text should look like. I got this from one of Grant Skinner’s FLAs. I modified it a bit… (dude, I hope you don’t mind.)

/*******************************************************************
* Application Name:
* Author:
* Date:
* Version:
* Website:
* Email Address:
* Country:
* Notes:
*
*
*
* Copyright (c) [YYYY] [Author Name]
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
********************************************************************/

The next thing I want to happen is to be able to insert this licence agreement into an ActionScript file. I can’t figure out how to do this.

Installation

Copy and paste the Movie Utilities.swf into C:\Documents and Settings\{user}\Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\WindowSWF.

In your Flash IDE, select Window > Other Panels > Movie Utilities.

Get the source here.

I used to teach drag-n-drop funtionality using startDrag() and stopDrag() MovieClip methods. This is the easiest and fastest way but it tends to be choppy when the framerate is low. To solve this problem, you should employ MOUSE_MOVE event as shown in this tutorial by Flash and Math.

Their tutorial is great and I’ll use their concept in this article. But I don’t want the draggable object to snap to its center when dragging. I’ll put in a lockcenter option and a swapDepths() alternative.

Notes:

• We capture the broadcasted MOUSE_MOVE event from the stage and not from the draggable object. This ensures it will keep on dragging even if the mouse cursor moves outside the object. I guess Flash and Math already explained this.
• 1 is subtracted from numChildren because children are placed in an Array thus child index is length-1.
• updateAfterEvent() just makes things a lot smoother.

Here’s the code:

var object:Sprite;
var offsetX:Number;
var offsetY:Number;
var snapToCenter:Boolean = false;

for(var i:uint = 0; i < 20; i++)
{
	var newColor:uint = Math.random() * 0xFFFFFF;
	var newX:Number = Math.random() * stage.stageWidth;
	var newY:Number = Math.random() * stage.stageHeight;
	var newRadius:Number = Math.random() * 50 + 20;

	var sprite:Sprite = new Sprite();
	sprite.graphics.beginFill(newColor);
	sprite.graphics.drawCircle(0, 0, newRadius);
	sprite.graphics.endFill();
	sprite.x = newX;
	sprite.y = newY;
	sprite.buttonMode = true;
	sprite.addEventListener(MouseEvent.MOUSE_DOWN, drag);
	sprite.addEventListener(MouseEvent.MOUSE_UP, drop);

	addChild(sprite);
}

function drag(e:MouseEvent):void
{
	stage.addEventListener(MouseEvent.MOUSE_MOVE, move);
	object = e.target as Sprite;
	swap(e.target);
}

function drop(e:MouseEvent):void
{
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, move);
}

function swap(o:*):void
{
	var highestDepth:uint = numChildren - 1;
	setChildIndex(o, highestDepth);

	if(snapToCenter)
	{
		offsetX = 0;
		offsetY = 0;

		o.x = mouseX;
		o.y = mouseY;
	}
	else
	{
		offsetX = o.x - mouseX;
		offsetY = o.y - mouseY;
	}
}

function move(e:MouseEvent):void
{
	object.x = mouseX + offsetX;
	object.y = mouseY + offsetY;
	e.updateAfterEvent();
}

Download the source here.

Here’s my first take on using the SoundMixer and ByteArray classes to create a simple sound visualization app. After reading tutorials on this topic, I discovered that there are a few basic things you need to get started.

• Sound object to hold the sound
• ByteArray object to hold the spectrum data
• Renderer function to extract and draw the visualization
• Timer object to constantly refresh the spectrum data:

I used a MovieClip with a gradient fill as my base color for the equalizer and a Sprite with bars (drawn using the Drawing API) as the mask for the colors. The gradient fill can be drawn programmatically but I’m too lazy to do that now.

Download the source.

Here’s the sample code:

        

    
    	@font-face
	{
		fontFamily: myFont;
		src: local("Verdana");
	}

	LineChart
	{
		fontFamily: myFont;
	}
    

    

    	
    		
    	

    	
		
	

    	
    		
    	

    

First, invoke registerGlobalKeyHandler() upon applicationComplete. Got this from the Adobe Flex Cookbook by Kristopher Schultz.

A point for improvement - this scrolling script will only work after the user clicks on the flash app itself. I do not know how to set focus on the app after it has loaded. Maybe you can help?

Code:

public function registerGlobalKeyHandler() :void
{
	stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
}

public function handleKeyDown(event:KeyboardEvent) :void
{
	var newKeyCode:uint = event.keyCode;

	switch(newKeyCode)
	{
		case 33: // PAGE UP
			Application.application.verticalScrollPosition -= 200;
			break;
		case 34: // PAGE DOWN
			Application.application.verticalScrollPosition += 200;
			break;
		case 35: // END
			Application.application.verticalScrollPosition = Application.application.maxVerticalScrollPosition;
			break;
		case 36: // HOME
			Application.application.verticalScrollPosition = 0;
			break;
		case 38: // UP
			Application.application.verticalScrollPosition -= 50;
			break;
		case 40: // DOWN
			Application.application.verticalScrollPosition += 50;
			break;
	}
}

Here we compare HTML and MXML when using a button:

HTML:
<button name=”myButton” onclick=”processClick()” class=”myButtonStyle”>Click Me</button>

MXML:
<mx:Button id=”myButton” click=”processClick()” styleName=”myButtonStyle” label=”Click Me” />

Let’s read these two lines of codes. First - component declaration(button/mx:button), then instance name(name/id), event(onclick/click), event handler(processClick), style property(class/styleName), style name(myButtonStyle) and lastly, the label. Both of them can use either an inline or linked CSS styles. How cool is that?!