// labs

We're super proud to announce that our ABC Black Saturday site won 2 AIMIA awards on Friday night in both the categories it was nominated for!

Check out the full list of winners here.

We'd like to thank everyone else who contributed to the project - Priscilla Davies the producer (who didn't get a lot of sleep during the last few weeks of it), Bec Smith the designer, and everyone else who worked on it!

This one has been frustrating me for a while, I just wanted to open an actionscript project that we have in our svn into my workspace.

Seemed like a simple concept, but I only recently discovered how to do it:

• Go to File > Import
• Select General > Existing Projects into Workspace
• Find your directory with your .project file and select finish

Seems so simple now.

One of our recent projects, Marija Ivkovic has been featured as the site of the day on Design Licks.

The site has already been featured on a few other design sites, but of course we're proud to announce this latest one

Marija Ivkovic on DesignLicks.com

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.

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:

svn co http://svn.distriqt.com/public/trunk/gmaps


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.

var kmlLoader:KmlLoader = new KmlLoader();
kmlLoader.addEventListener( Event.COMPLETE, kmlLoader_completeHandler );
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.

function kmlLoader_completeHandler( _event:Event ):void
{
	for each (var _object:KmlDisplayObject in KmlLoader(_event.currentTarget).objects)
		addObject( _object );
}
function addObject( _object:KmlDisplayObject ):void
{
	// It may just be a container with child elements
	//    so check if there is an overlay
	if (_object.overlay != null)
	{
		// Here you can add the kml object to your map
		map.addOverlay( _object.overlay );
	}
	// Add the children
	for each (var _child:KmlDisplayObject in _object.children)
		addObject( _child );
}

Let us know if you find it useful.

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


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."

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

Black Saturday Interactive

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:

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

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

Find it initially at:

• ABC News bushfire recovery
• Out of the Ashes blog

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:

• Grab Flex SDK: http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK
• Extract to a location, eg: ~/.flex
• Make executable: chmod +x ~/.flex/bin/compc ~/.flex/bin/mxmlc
• Add the location to your path in .bashrc: PATH=~/.flex/bin:"${PATH}"

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:

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

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

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.

[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

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.