A note about setup: for data storage, retrieval, and manipulation, we use AMFPHP; for our local dev environment, MAMP and VirtualHostX, managed with a version control system. That said, here are are some tips for working with the Google Maps Flash SDK:

• Creating Custom Markers
• Tracking Markers Outside the Viewport
• Panning Markers Back Into the Viewport
• Centering on a Group of Markers
• Getting Elevation Data
• Plotting Long Routes
• Saving an Image of the Map
• Custom AMFPHP Services

Creating Custom Markers

To easily create custom markers, extend the Marker class and pass a custom icon display into MarkerOptions from the constructor. This keeps everything contained in one object, and makes references to the custom icon a snap.

// extends Marker;
public var icon : CustomIcon;
public function CustomMarker ( latLng : LatLng )
{
  icon = new CustomIcon();
  icon.latLng = latLng;

  super( latLng, new MarkerOptions( { icon : icon } ) );
}

Tracking Markers Outside the Viewport

Tracking markers when they go offstage can be a pain, fortunately there are some useful libraries written to help with that kind of thing. I’ve also included our custom implementation (GhostTracker.as) as a part of the source code for this post.

Panning Markers Back Into the Viewport

When a marker is offstage and is selected by the user, the map can be centered or panned to move the marker detail into view. Centering the map with setCenter can be a jarring user experience, since opening any marker will pan the map view; an alternate approach is to use the panBy function to accomplish the same thing with only the minimal necessary movement:

var pt : Point = map.fromLatLngToViewport( latLng );
var np : Point = new Point();
var edgePadding : Number = 10;
var center : Number = _detail.width * 0.5 + edgePadding * 2;
var displayHeight : Number = _detail.height + edgePadding;
var mapRect : Rectangle = new Rectangle( 0, 0, map.width, map.height );

// if x is less than left boundary ( data sort window right edge );
if ( pt.x - center < mapRect.x ) np.x = ( pt.x - center ) - mapRect.x; // if x is greater than right edge; if ( pt.x + center > mapRect.right - edgePadding ) np.x = ( pt.x + center ) - ( mapRect.right - edgePadding );

// if y is greater than map height - padding;
if ( pt.y > mapRect.bottom - edgePadding ) np.y = pt.y - ( mapRect.bottom - edgePadding );

// if y - height is less than top edge;
if ( pt.y - displayHeight < edgePadding * 2 ) np.y = ( pt.y - displayHeight ) - edgePadding * 2;

// position map so that full display area is visible;
map.panBy( np );

Centering on a Group of Markers

When working with an array of markers that need to be displayed together within the viewport, a LatLngBounds object can be extended to include all LatLng points. From there, it’s just a matter of setting the center of the map to the center of the bounds area.

var bounds : LatLngBounds = new LatLngBounds();
var marker : Marker;
var latLng : LatLng;
var maxZoom : Number = 13;
var t : int = markers.length;
for ( var i : int = 0; i < t; i++ )
{
  marker = markers[ i ] as Marker;

  latLng = marker.getLatLng();

  if ( latLng.lat() != 0 && latLng.lng() != 0 ) bounds.extend( latLng );
}

if ( !bounds.isEmpty() ) map.setCenter( bounds.getCenter(), Math.min( maxZoom, map.getBoundsZoomLevel( bounds ) ) );

Getting Elevation Data

Elevation data for routes and markers can be retrieved and stored efficiently via PHP, or at runtime in AS3, using a couple of different sources.

// PHP with vars $lat & $lng (returns value in meters);
$primary = "http://ws.geonames.org/srtm3?lat=$lat&lng=$lng";
$secondary = "http://gisdata.usgs.gov/xmlwebservices2/elevation_service.asmx/getElevation?X_Value=$lng&Y_Value=$lat&Elevation_Units=METERS&Source_Layer=-1&Elevation_Only=TRUE";

Plotting Long Routes

When plotting routes on custom maps in Ride Oregon, we often had to exceed the 25 point max in the loadFromWaypoints function of the Directions class. The solution was simply to queue multiple requests, with the last point from the previous request as the first point in the new one.

// assumes class variable _waypoints is an array containing stored points to get directions for;
var max : Number = 25;
var tot : Number = _waypoints.length;
var req : Number = Math.ceil( _waypoints.length / max )
var per : Number = Math.min( max, tot );
var first : Marker;

// split directions into multiple requests;
for ( var j : int = 0; j < req; j++ )
{
  // store latLng points;
  var waypoints : Array = [];

  // store first recorded point as first point in new query;
  if ( first ) waypoints.push( first.getLatLng() );

  per = Math.min( max, tot );

  // create series of directions with max or fewer waypoints;
  for ( var k : int = 0; k < per; k++ )
  {
    var w : Marker = _waypoints[ k + j * max ];

    waypoints.push( w.getLatLng() );
  }

  // reduce total;
  tot -= max;

  // store first point;
  first = w;

  // break if invalid request;
  if ( waypoints.length <= 1 ) break;

  // set up new directions instance;
  var directions : Directions = new Directions( new DirectionsOptions( { avoidHighways : true } ) );
  directions.addEventListener( DirectionsEvent.DIRECTIONS_SUCCESS, onDirectionsSuccess );
  directions.addEventListener( DirectionsEvent.DIRECTIONS_FAILURE, onDirectionsFailure );

  // get new set of directions;
  directions.loadFromWaypoints( waypoints );
}

Listen for a response DirectionsEvent to be dispatched:

function onDirectionsSuccess ( e : DirectionsEvent ) : void
{
  // push e.directions to array of direction requests;
  // add to e.directions.distance to total route distance;
  // add e.directions.createPolyline to map;
}

function onDirectionsFailure ( e : DirectionsEvent ) : void
{
  // failed;
}

Saving an Image of the Map

In order to create no-flash versions of all the maps, we combined the display layer of the map, with Google’s Static Map API. Initially, we went this route because there was no other option (Google had banned access to their images via BitmapData.draw, and it would throw a SecurityError), but they’ve since removed the restriction and added a getPrintableBitmap function to the API. Still, if you load content into your icons from another domain, or just don’t want to deal with crossdomain policy files, layering the Static API is a decent solution.

// resolves Error #2121: Security sandbox violation: BitmapData.draw
function saveMapImage () : void
{
  var rect : Rectangle = new Rectangle( 0, 0, Math.min( map.width, 640 ), Math.min( map.height, 640 ) );
  var bmd : BitmapData = new BitmapData( rect.width, rect.height, true, 0x00000000 );
  var mapDisplay : Sprite = Sprite( Sprite( Sprite( map.getDisplayObject() ).getChildAt( 1 ) ).getChildAt( 2 ) );

  // draw custom overlay;
  bmd.draw( mapDisplay, null, null, null, rect, true );

  // encode ByteArray and send to server...
}

Custom AMFPHP Services

We’ve put together an abstract set of AMFService and AMFServiceEvent classes to work with AMFPHP. This way you can write a service in PHP, and call its methods directly on an instance of the AMFService class in ActionScript. There are plenty of features that could be added to this implementation (service method and parameter checking, for instance), but for most cases its a clean and flexible approach. If you have a method called getCustomData defined in CustomService.php, setting up an interface is simple:

var customService : AMFService = new AMFService( 'CustomService', '/amfphp/gateway.php' );
customService.addEventListener( AMFServiceEvent.RETURN, onServiceData );
customService.getCustomData();

function onServiceData ( e : AMFServiceEvent ) : void
{
  trace( e.data );
}

Hopefully a few of these techniques save some headaches when working with Google Maps in Flash. Feel free to post a comment with your own solutions.

There’s a built in help section, but here’s a short video that outlines the basic idea:

Since I didn’t include a voiceover for this example, the basic steps involved are:

1. Export a custom class on an empty symbol.
2. Write logic to add a text field and draw a circle.
3. Publish SWF and load into the image encoder.
4. Create 20 PNG images in the “output” folder on the Desktop.

Extra notes on functionality:

1. The application attempts to pass in the current serial index to the constructor of the class you’ve chosen. This has a variety of uses, but is especially good for looking up array data, or directly populating a text field (as in the example above).
2. Even if you don’t declare a constructor parameter, the export will still run just fine. This makes it easy to see what any class will look like as an image, or to export a series of images from a Math.random-based visualization class.

The application is available for download here. If you have any questions or requests, post a comment and I’ll do my best to help out.

The source code for this post includes a ScalingImage class that loads an image and responds to any stage resize event by proportionally scaling the image to fill the stage. Check out the demo and try resizing your browser.

The code behind a proportionally scaled full screen image is fairly straightforward:

// set image dimensions to match stage;
image.width = stage.stageWidth;
image.height = stage.stageHeight;

// choose the larger scale property and match the other to it;
( image.scaleX < image.scaleY ) ? image.scaleY = image.scaleX : image.scaleX = image.scaleY;

Since scaleX and scaleY are percentages, it’s just a matter of figuring out which property is larger and making the two equal.

By swapping the scale comparison from “greater than” to “less than”, the object will scale proportionally to fit the larger of the two dimensions given. This kind of calculation is handy when you need to fit items of variable dimensions into a fixed space, such as the flickr photos on the Authenticity Book Axiom Gallery.

// choose the smaller scale property and match the other to it;
( image.scaleX > image.scaleY ) ? image.scaleY = image.scaleX : image.scaleX = image.scaleY;

There are many applications for this technique, from creating image thumbnails to building a liquid grid layout. We’d love to see more examples of this approach in action, so feel free to leave a link or two in the comments.

The next release of Flash won’t include Actionscript 4 (since the ECMAScript Spec isn’t complete), but it will include some really advanced features. Among them are: native 3D support, advanced hardware acceleration, inverse kinematics, shareable pixel shaders and filters (the same used by Photoshop and AfterEffects), and dynamic streaming video quality adjustment.

Some long awaited additions to AS3 will include: typed arrays, runtime FileReference access, vectors, an enhanced drawing API, dynamic sound generation, and advanced text layout support.

Here’s a quick look at some of the new 3D tools:

Click here to view the embedded video.

It’s exciting to see the continued evolution of such a great program, as well as the creative possibilities opened up by the new features. If there is anyone out there still using AS2, it’s time to guts up and learn Actionscript 3. Without it, you won’t be able to truly enjoy all that the next version of Flash has to offer, even though they are seriously improving the timeline animation experience.

A short demonstration of Inverse Kinematic animation tools:

Click here to view the embedded video.

Download the Flash Player 10 beta from Adobe Labs (at your own risk, since it’s in beta).

This will have an unprecedented impact on the future of interactive development, punctuated by the following changes:

1. Removal of restrictions on use of the SWF and FLV/F4V specifications
2. Publishing the device porting layer APIs for Adobe Flash Player
3. Publishing the Adobe Flash® Cast™ protocol and the AMF protocol for robust data services
4. Removal of licensing fees – making next major releases of Adobe Flash Player and Adobe AIR for devices free

The Flash community has always been influential in shaping the future of Flash, and with the removal of licensing restrictions and fees there is an even greater opportunity for the community to inform its development. It will now be easier to develop more types of Flash applications, across more devices, without the need for a licensing deal.

We are excited to see what new levels of innovation this brings to the interactive industry. The implications for resolving issues between search engines and Flash content are huge, along with potential resolutions to technology-specific conflicts such as viewing Flash content on the iPhone.

If there was ever any doubt about the impact of the already widespread Flash technology, the Open Screen Project should instill a renewed faith in its potential. More information about open technologies supported by Adobe can be found at the adobe open source page.

Since launching Logobama, we’ve had a number of requests for the project source code. The process of saving images from Flash turns out to be a relatively simple one with Actionscript 3, and after some searching, uploading Flash encoded JPEGs to a web server was pretty simple as well.

With the Logobama project, we had three main objectives:

1. Upload an image into a Flash file
2. Encode a JPEG with AS3
3. Post the encoded image to a web server

In the case of Logobama, we also posted the saved image to a Flickr gallery, which was done using the phpFlickr library created by Dan Coulter. Thumbnails are automatically created with phpThumb.

The main engine behind this project is a combination of elements from the Adobe AS3 Corelib, and the very handy UploadPostHelper Class created by Jonathan Marston. There is also a small PHP upload script included in the source, along with TweenLite, which has quickly become our favorite tweening engine.

The basic system within the code nearly mirrors the Logobama project objectives:

1. Use the FileReference Class to upload an image:

var file : FileReference = new FileReference();
file.browse( new Array( new FileFilter( "Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png" ) ) );

2. Create a snapshot of the flash movie with the BitmapData.draw() method:

// set up a new bitmapdata object that matches the dimensions of the captureContainer;
var bmd : BitmapData = new BitmapData( captureContainer.width, captureContainer.height, true, 0xFFFFFFFF );

// draw the bitmapData from the captureContainer to the bitmapData object;
bmd.draw( captureContainer, new Matrix(), null, null, null, true );

3. Use the Adobe AS3 Corelib to encode a JPEG:

// create a new JPEG byte array with the adobe JPEGEncoder Class;
var byteArray : ByteArray = new JPGEncoder( 90 ).encode( bmd );

4. Post the encoded image to a web server with the help of the UploadPostHelper Class and a basic PHP Upload Script (included in the source files):

// set up the request & headers for the image upload;
var urlRequest : URLRequest = new URLRequest();
urlRequest.url = 'image.php?path=images';
urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
urlRequest.method = URLRequestMethod.POST;
urlRequest.data = UploadPostHelper.getPostData( 'image.jpg', byteArray );
urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );

// create the image loader & send the image to the server;
var urlLoader : URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.load( urlRequest );

So there you have it, an easy way to upload images into flash, edit them, and post the encoded JPEG result to a web server without the need for any fancy remoting or server-side computation.

Since all the above code is available under a Creative Commons Share Alike license (or similar), we’ve decided to make our source code for this project available as well. The functionality of this example was intentionally minimized to showcase the features outlined in this post. Enjoy, and please feel free to reply with comments, questions, or revisions.

Enter Console Log. For those of you who don’t have Firebug, get it. Now you can trace out to the Firebug console log from your .swf.

It’s as simple as two lines of code:

First, import the package declaration:

import flash.external.ExternalInterface;

Next, call to the log whenever you want to trace something out

ExternalInterface.call( "console.log" , "Hey! I'm tracing from Flash!");

Yes. It’s that simple. You can even add variables and other data to the trace. Just treat the argument as any other string:

ExternalInterface.call( "console.log" , "My variable is" + myVar );

This is even more useful when you can’t actually view the site. We recently had to debug an issue that was behind a client’s firewall. Rather than guessing back and forth, we were able to deliver a new .swf with a bunch of calls to the console, and solved the problem in a matter of minutes, as opposed to hours of guesswork.

Try it for yourself. You’ll appreciate how useful it is.