Simple KML Loader

Lately we have been playing around a fair bit with some google flash maps and have been amazed by the power and simplicity of the API. We used it heavily in the ABC Black Saturday site using custom markers with images and even a scrolling grid.

We were faced with another challenge of being able to mark out areas (districts) within Victoria that represented the most affected regions. These regions were sometimes complex and we needed to be able to update them simply and quickly as the need arose. The regions weren't to be displayed directly but used for two major items. Firstly to focus the map on a particular region, by moving the view to the region contained by these districts, and secondly, to assign events/markers to a district by calculating if they were contained within the bounds of the district lines.

The solution ended up being ridiculously simple. We created a shared map on google maps, with shapes defining the districts. We then could export from this online map to kml by grabbing the view in Google Earth link and changing the output parameter from nl to kml. This gave us the map of the districts in a nice kml format.

abc-district-google-map

Once we had the map in kml we needed to load in the objects and create overlays for google maps. Surprisingly there wasn't a simple "load kml" function in google maps, but there are some nice kml parsing utilities in the google map extras library. So we created a kml loader class that loads the kml file, extracts the objects and creates overlays for placement on a google map. Hopefully it can be helpful to others, check it out from the following:

https://github.com/marchbold/as3-gmaps-utils

Usage:

Firstly create the loader and start the load of your kml file. You'll need to add a listener to the COMPLETE event to process the code on completion.

  1. import com.distriqt.gmaps.kml.utils.*;
  2.  
  3. var kmlLoader:KmlLoader = new KmlLoader();
  4. kmlLoader.addEventListener( Event.COMPLETE, kmlLoader_completeHandler );
  5. kmlLoader.load( "your-kml-file-location.kml" );

Once the loading is complete you'll have to re-curse through the object list in the loader, adding the objects to your map. Note the "map" variable in the below should be your google map instance.

  1. function kmlLoader_completeHandler( _event:Event ):void
  2. {
  3. for each (var _object:KmlDisplayObject in KmlLoader(_event.currentTarget).objects)
  4. addObject( _object );
  5. }
  6. function addObject( _object:KmlDisplayObject ):void
  7. {
  8. // It may just be a container with child elements
  9. // so check if there is an overlay
  10. if (_object.overlay != null)
  11. {
  12. // Here you can add the kml object to your map
  13. map.addOverlay( _object.overlay );
  14. }
  15. // Add the children
  16. for each (var _child:KmlDisplayObject in _object.children)
  17. addObject( _child );
  18. }

Let us know if you find it useful.

OSX Tweaks

Here's some essential OSX tweaks / applications that I can never remember and always have to go searching for, so I thought I'd drop them into the one place. I'll update this with more as I remember and find them.

A Quake style terminal - Visor:
http://visor.binaryage.com/
(And you'll need SIMBL for this one)

An open-source package manager (apt-get etc):
Fink

Finder to display full path in title:

defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES
killall Finder

Change Login screen background:

sudo defaults write /Library/Preferences/com.apple.loginwindow DesktopPicture "/Path/to/your/loginwindow.jpg"

Change Finder open to use the return key:
http://www.returnopen.com/

Monitoring system statistics application:
http://islayer.com/apps/istatmenus/

Essential toolbar calendar popup:
http://www.charcoaldesign.co.uk/magical

To stop Finder writing .DS_Store files on network volumes:
defaults write com.apple.desktopservices DSDontWriteNetworkStores true

Quick look from the terminal add this line to .bashrc:
ql () { /usr/bin/qlmanage -p "$@" >& /dev/null & }

Search using Spotlight and show a "Quick Look" of matching files (again add this to .bashrc):
locateql ()
{
locatemd "$@" | enquote | xargs qlmanage -p >& /dev/null &
}

ABC Black Saturday Interactive goes live

Our first major project, ABC Black Saturday Interactive, went live yesterday!

"It pulls together hundreds of pieces of media – professionally produced media, official documents and records and the best user generated content – to provide a stunning insight into the fires and the people who lived through them. An interactive map and timeline allow you to explore the events through time and location, and a series of dramatic video portraits provide a moving insight into the personal experiences of some survivors."

ABC Black Saturday Interactive

This project has been a great experience, and we're really happy with the end product. The site pulls together a heap of media data such as video, audio, imagery and news content from a multitude of sources and combines it into a great interactive experience. The Google Maps API also provided us with a really interesting way of exploring the data visually based on the time and location of every media item and story.

Huge thanks go to the ABC Innovation Department, the producer Priscilla Davies, designers Bec Smith and Sarah Fawcett, and everyone else who contributed to the project - it was a great team to work with.

We're really proud to see this online so please go and check it out and explore the site!

Black Saturday Interactive

Website for sale

We developed a website for a customer but unfortunate circumstances meant it was never deployed. So we're offering it up cheap.

It's a full xml driven photo gallery website, designed for a photographer. We even linked it into a drupal CMS install with some custom php, to pull the images from the galleries allowing the site to be easily updated by the client.

We are really disappointed this site never went live, so if you have any interest in putting a photo based website up this may be for you.

Have a look at some screen shots below:

photography-site-1photography-site-1photography-site-1

And if you're interested in the website drop us an email and we'll setup a preview of the site for you.

ABC Black Saturday mini-module

Our first phase with the Black Saturday Interactive has been released on the ABC site.

The "mini-module" is a smaller version of the eventual full interactive site but is to be used on other news pages to draw people into the site. It displays a mosaic tiled wall of stories about the Black Saturday fires, each of which contains media items from a variety of sources including YouTube, Vimeo, flickr and ABC internal media sources.

ABC BSI Mini-Module Screenshot
ABC BSI Mini-Module Screenshot

Find it initially at:

AS3 on the Command Line

As anyone who knows me would tell you, I live by the command line, so I thought I would share an old trick to compile as3 applications from the command line in bash.

The trick here is to use the Flex SDK compiler which is available free from Adobe. It also requires having installed java, which is so common on most machines that I won't talk about installation.

The setup process is fairly simple:

Once that's done you should be able to type mxmlc into the command line and see an error stating you must specify a target file. To compile an as3 file simply use the following:

  1. mxmlc main-app-file.as -o output.swf

Additionally I compile my libraries to my-libs.swc by doing the following:

  1. compc -source-path . -include-sources . -output my-libs.swc

Since this is a flex compile you can also use flex syntax in your actionscript to embed resources in the code. Most commonly I use the swf definition line below to simply definite the frame rate and dimensions of the compiled output.

  1. [SWF(width='990',height='680',backgroundColor='0x000000', frameRate='30')]


Now to use Flash CS3's V3 Components see this post: moock.org

Additionally there are Eclipse tools for actionscript: the rasx() context

SWFAddress on Macs causes weird artifacts

Been working with SWFAddress a lot lately on a few projects, and I'd noticed some weird artifacts appearing randomly on the screen when the address value is changed from a mouse click. Strange boxes appearing for a split second in seemingly random places, etc. After a little bit of testing it was apparent that it only happened on Macs, and was the worst in Firefox.

After some googling, I found a post on the Big Spaceship blog about the issue here - it's all explained in that post, basically a strange issue with Firefox 3 and ExternalInterface calls altering the DOM window. It's not SWFAddress' fault, but it's really apparent when you're using SWFAddress for deep-linking.

One solution to fix the SWFAddress issue, is to add a slight delay on the javascript call using the setTimeout function. Click through the link above, and you'll be able to grab a modified version of the swfaddress.js javascript code with the fix applied.

The other option is to add a slight delay in your Actionscript code, from when a button is clicked to when the SWFAddress.setValue() method is called. I did it this way, and used the Timer class and a 20ms delay, and this fixed the issue straight away.

Website Release

Well we've finally gotten a simple website together to provide a bit of a web presence for distriqt. We have big plans for interaction on this site with a multiplayer game integration in development. The game should be a draw point of the site so check back in the coming weeks to see the results.

Seamlessly combining 2D and PV3D

We have often been asked to combine some Papervision 3D components or animations into a 2D site. Seamless integration of the two components is very simple once you set the 3D environment up correctly.

The simplest way is to confine your 3D space to the z-plane (z = 0), and to place the camera at a fixed position as below:

  1. var _cameraDistance:Number = 1000;
  2. camera = new Camera3D();
  3. camera.zoom = 2;
  4. camera.focus = _cameraDistance / camera.zoom;

Once you have this camera in place, anything you add to the z-plane should be to scale with your 2D content.

The last thing you have to take into account is the different coordinate systems in the 2D flash and the PV3D space. PV3D obviously is a 3D coordinate system with the zero point in the center and the positive axes being up and right. In contrast, the 2D coordinate system in flash is centered on the top left of the screen, having the positive axes down and right. This is a fairly easy transformation, requiring a mapping from the center of the stage to the center of the 3D space and then reversing the y axis. Just remember to take this into account when placing your clips in 3D.

open day 09

Opening posts are always a strange affair, usually offering up some form of justification for creating yet another blog. We however have no justification except our own needs. We're going to be using this as our own information base, combination of news, tips and to some extent a knowledge-base wiki.

At the moment we're busy doing our own website, and having lots of fun with it. Stay tuned to see what happens in the distriqt...