Flash Blog by Jon Danao

коли под наем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.

Continue reading »

Using Custom Events and DTOs are a way to move data around the application. With Flex’s event-driven architecture, a component can trigger an event and have it carry some data. This data will be encapsulated in a Data Transfer Object which most of these programmers consider as “dumb object” simply because it only serves as a data holder and does nothing more… no functionalities, no extra processing.

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.
Continue reading »

The Flex’s Charting component has a property called labelRotation that tilts / rotates the chart labels for them not to overlap each other and make a mess of your pretty charts. This will not work automatically. You have to first embed the font outline into Flash and the rotation will finally be applied.

Here’s the sample code:

        

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

	LineChart
	{
		fontFamily: myFont;
	}
    

    

    	
    		
    	

    	
		
	

    	
    		
    	

    

By default, Flex does not implement the PageUp, PageDown, Home, End, ArrowUp and ArrowDown scrolling like most browsers do. These functions will try to make keystroke/keyboard scrolling happen.

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;
	}
}