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.

What does this have to do with the focus state? Part of the reset includes resetting the focus state style.

/* remember to define focus styles! */
:focus {
	outline: 0;
}

Note the comment there…

Resetting the focus state is fine, I’d encourage it in fact — the default browser focus state is ugly! Here’s an example of what the default focus state for Firefox (3.5 Mac) looks like:

Even though Eric explicitly states in his reset CSS to define a focus style, in my experience this step is often neglected. Without a focus style defined, using the keyboard as a navigation device becomes a more difficult task. Keyboard navigation may be an edge case, but a focus state should always be considered.

The simplest solution is to extend the hover style:

a:hover, a:focus {
	color: #666;
	}

With one extra selector, we’ve made the interface more accessible to keyboard navigation. For more complex interfaces with varying hover styles, you may need to declare more than one focus style, but that’s a small price to pay for accessibility.

From my testing, I’ve found this is only an issue in Internet Explorer 8 (hats off to Microsoft for a brand new CSS bug).

The Setup

The setup for this bug is fairly straightforward. It requires a <button> or submit <input> that has a background image. For this example, I’ll use the <button> element. I’ll also be using image replacement to hide the button’s HTML text. I believe this makes the bug more apparent, though it has nothing to do with the actual bug.

The markup:

<button type="submit">Submit</button>

The CSS:

button {
	background: url(button.png) no-repeat 0 0;
	border: 0;
	display: block;
	height: 30px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	width: 81px;
	}
button:hover {
	background-position: 0 -30px;
	}

Experiencing the Bug

On first glance, it appears that everything is fine in IE8. The problem occurs when the button is in its active state. Upon clicking the button, the background image shifts -1px to the top and left, though the container of the button stays in the same position. Here’s a demo (view this in IE8) of the bug in action, and here’s a screenshot (I’ve added a red outline to help illustrate the background shift):

So how do you fix this?

I was able to find some workarounds for this bug, and though none are completely bulletproof, all are better than the alternative (doing nothing).

Solution 1: Mo’ Markup + Mo’ CSS (demo)

One option is to add an extra element within the <button> and target that element for the background-image. We can use the same base CSS from The Setup with some additional IE-specific CSS.

The markup:

<button type="submit"><span>Submit</span></button>

The IE-specific (version 8 and below) CSS:

button {
	position: relative;
	}
button span {
	background: url(button.png) no-repeat 0 0;
	height: 30px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	}
button:hover span {
	background-position: 0 -30px;
	}

There are a number of problems with this solution.

1. Requires extraneous markup.
2. Will not work for a submit <input> element, as it does not allow for any child elements.
3. Requires IE specific CSS to absolutely position the extra element – neglecting to do so will result in an opposite 1px shift to the right and bottom in IE (version 8 and below). If this CSS is not targeted for IE, Mozilla browsers (at least Firefox 2 and 3) exhibit a different bug altogether (a topic for a future post).

Because of the problems associated with this solution, I don’t recommend this approach.

Solution 2: JavaScript-only

I’m sure this could be fixed using IE8-targeted JavaScript, but I’d rather not rely on it, as it would break down if the browsing device has JavaScript disabled or lacks JavaScript support. Let’s try a CSS-only method (my preference)…

Solution 3: CSS-only (demo)

With the release of IE8, Microsoft has added several proprietary CSS extensions. Each of these extensions work in IE8, but not in previous IE versions, or any non-IE browsers. Because this bug is isolated to IE8, we can take advantage of these extensions.

The CSS:

button:active {
	-ms-background-position-x: 1px;
	-ms-background-position-y: -29px;
	}

This CSS counters the bug, by positioning the background top and left 1px. This offset is relative to the button’s hover state, using the height dimension to offset the y-axis (in this case 30px height -1px offset results in -29px for the y-axis offset). If your button has no hover state, the offset would be relative to the button’s default background position. This can be safely included in your main stylesheet without affecting other modern browsers, but as a best practice I’d recommend including this in a separate IE stylesheet along with any other IE-specific CSS (using CSS conditional comments to target IE).

As I mentioned, none of the solutions are bulletproof and that includes this one. If you click the button and drag your cursor off the button’s boundaries, the background shift is visible. I feel that this type of interaction is atypical and most users will click the button without much movement, so this is my recommended approach for the time being.

In Conclusion

I’d love to hear any alternative solutions for this issue. Track and vote for this bug on Microsoft Connect.

So we thought (as we often do), wouldn’t it be cool to combine the random meeting of people with the lessons learned from SXSW presentations? After some quick emails back to SWHQ to discuss, the idea for SXSWLesson.com was born.

We don’t see SXSWLesson.com as a comprehensive play-by-play of every panel, but more of a place to capture the insights and nuggets of knowledge. It’s a way for everyone – panelists, presenters, and attendees – to share the lessons they learned. By adding the #sxswlesson hashtag to your insights via Twitter, you automatically share your wisdom with the crowd via the SXSWLesson.com site. In turn, people can comment on each insight to continue the conversation. You can browse all of the lessons sequentially, and you can also randomly view the lessons, much in the same way that you randomly come across interesting people around the convention center and out on the streets. You can also follow twitter.com/SXSWLesson to receive new ideas right to your Twitter account.

The other thing we implemented on the site is the new Twitter OAuth into the site, which accesses peoples’ Twitter accounts through the SXSWLesson.com site without them having to share their username/password with us. Basically this allows Twitter users to comment on the site and associate their Twitter profile with their comment, which in turn can increase the level of conversation between people.

As a Substance Labs project, we moved this one through quickly, focusing on the most important task: helping people share ideas. Erin, Cory and Eric honed the vision to launch within four days of coming up with the concept. Nothing like rapid prototyping, launching, and seeing what happens.

Hope you enjoy it! Oh, and if you can help spread the word about SXSWLesson.com and let people know to add the #sxswlesson hashtag, you’ll be contributing to a richer, deeper conversation. So thanks in advance for that.

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.

We at Substance have come across this a number of times, and the best solution we have found is to knock out the areas of the Flash movie that require accessible content displayed below. This can be accomplished rather easily with the use of layer blend modes.

The first step to making this work is to set wmode in your HTML Flash embed code to transparent. After that is done, you can immediately take advantage of this trick:

1. Set the blendMode property in your Document Class to BlendMode.LAYER
2. Set the blendMode property of your knockout area to BlendMode.ERASE

This approach differs from creating a true mask, which acts as a window to the clip being masked, by doing the reverse – creating a window through the clip being masked, which in this case is the entire SWF.

Here is a quick example ( assuming “this” is your document class ):

// set blendMode for Document Class;
this.blendMode = BlendMode.LAYER;

// create knockout area;
var knockout : Sprite = new Sprite();

// draw 50 x 100 px box;
with ( knockout.graphics )
{
	beginFill( 0x000000 );
	drawRect( 0, 0, 50, 100 );
}

// give mask knockout powers;
knockout.blendMode = BlendMode.ERASE;

// add knockout mask to stage;
this.addChild( knockout );

On the Arakawa home page, the Flash area is set to fill the browser window completely. The logo, navigation, and footer are all knocked out, with a listener attached to the stage for Event.RESIZE so that the footer window always remains at the bottom of the file. This is pretty simple, but here’s a snippet of to show how to keep an item positioned at the bottom of the stage:

// add listener to stage in constructor;
stage.addEventListener( Event.RESIZE, onResize );

// resize listener in class body;
private function onResize () : void
{
	knockout.y = stage.stageHeight - knockout.height;
}

It’s time that we recognize the true genius behind a well-crafted piece of spam. In support of this worthy cause, we have created spamlets™, a place where the world can bring the poetry of unrequested badgering to light. Do your part, donate a spamlet today.

Just enter any suspect web address into our sniffer at RickProof.com, and our RickBot™ will assess the risk of a Rickroll. No need to thanks us, we don’t do this for the fame, we do it for the people.