Last year we developed an application for the University of Melbourne, Ultrasound Education Group, Heartweb. The application is a file browsing, support and synchronisation utility for students enrolled in the Ultrasound Education Group's courses.

The group had a large amount of course material that traditionally was distributed on media (such as DVDs) to the students. The material was all being protected via Livecycle PDF security policy but they requested a simpler method of distributing and updating the materials.

Users' of the application log in and then are presented with a list of material that their policy allows them access to. The content was all moved to the Livecycle server and access was only available through custom developed secure API.

The application allows the user to select material for synchronisation keeping a directory, or individual files, "up-to-date" with the most recent updates to course material. As they browse through the material, files can be viewed or located on the local machine in the default system viewers or in the application where applicable.

Additionally links and other information can be passed to the students via the application allowing the course organisers to supply the students with important information through a single application portal.

A web browsing function was included so they could display content from the Heartweb website directly in the application. We used the StageWebView class functionality to achieve this end.

The application is written completely in Adobe AIR, allowing us to deploy across the multiple different platforms that the students used. We used the built in application updating techniques to provide application updates to the students.

Unfortunately, unless you want to sign up to the Heartweb course to get access to the materials, the application is unavailable, but it was a great experience in integrating file synchronisation with a secure document-based internet distribution process.

We've been doing a lot with Native Extensions for AIR lately, both in Android and iOS, and I just wanted to put together a quick "how to" on using other people's Actionscript Native Extensions (ANE) in Flash Builder 4.6.

I'm going to assume you already understand the process of developing and deploying mobile applications using AIR.

The process is quite simple, you'll need the supplied ANE for the extension. In your mobile project you want to add it into, open up the project properties (Right click / Properties) and find the "Actionscript Build Path" (or "Flex Build Path" if it's a Flex project).

You'll see a tab up the top labeled "Native Extensions" in which you can "Add ANE...". Click on this and select the ANE extension file. Once it's added in, you can expand out the details of the extension to see the target platforms supported by the extension. Below I'm showing the details on our Android Camera Extension.

The extension is now included in your project, however before you leave here I suggest you go to the "Build Packaging" for the platforms you are deploying and check the extension is going to be packaged (and available) with them.

You should now be able to return to your code and use the functionality and classes supplied in the extension, hopefully you've been supplied with documentation or example usage of the extension!

The Disaster Mapper - An interactive Resource for Schools is a project for the Attorney-General's Department, Australian Emergency Management Institute. The aim of the project was to provide an educational resource aimed at school students for investigating Australian natural disasters throughout history.

It was developed in 2009 but has just been released to the public.

This project made use of the latest Flash technologies with the Google Maps API to provide an interactive map where users could navigate and search disaster information by time, location, disaster types and keywords.

The application uses a very simple series of navigational elements. A series of large buttons allows the user to select the disaster categories of interest and a timeline allows the user to limit the time period displayed. The disasters matching these two filters are then displayed on the map along with overview information of the selected disaster categories in the information panels on the left.

Media associated with each disaster (including images, flv, youtube, viemo, mp3 and other media types) can be viewed either in quick view in the information panels or in the detail overlay.

The system also supported and included additional data such as population, temperature, rainfall and specific high-risk disaster areas which could be overlaid on the map.

The result is a very easy-to-use, interesting website and something suitable for the target audience of school students.

Making use of some extra available time, distriqt also developed an additional component for the CMS which allowed an administrator to directly edit overlay data on top of a Google Map, using a standard data format (KML). This allowed the client to create more meaningful and suitable overlay information for the website such as risk areas, temperature, population and rainfall data.

The project was delivered on-time and on-budget, and has been well-received by the client, schools, and educators - all feedback has been very positive.

See the site here.

Holden's latest promotion for their Barina includes a game that we developed for ThinkNimble and McCann Melbourne.

The game is a Guitar Hero style game, where icons move along the road and the player has to hit the matching key as the icon moves over the hit area.

"The aim of the game is to beat the street and score as many points possible by hitting colourful icons as they race down the street! There are eight stages that get more challenging as you play. The prize? Whoever has the highest eligible score at the end of the competition period will win an all-new Holden Barina."

It was created as a Facebook application to tap into the popularity of the growing social gaming market and to promote the features of the all-new Holden Barina. The game features music and sound effects from the radio adverts and TVC.

The competition is running until the end of February 2012. Play the game here

We've been so busy over the last few months that we haven't had a chance to update any information on what we've been doing.

So here's the first in a series of updates.

One of our clients Marija Ivkovic, an amazing photographer, whose site I did a while ago. In order to show to power of Flash we decided to turn her site into a mobile application, by taking the exact same code base from the site and applying a few small tweaks.

The end result was actually quite surprising for a direct port of a website. We obviously added some touch and swipe based interactions, removed the "mouse over" interactions and added in a nifty little database cache process to cache images for offline access, but overall the code base remained relatively unchanged.

We were very excited to be able to supply this as an option for development. Creating an interactive web and mobile application has never been easier or more powerful.

It's available for free for iPhone, iPod Touch and iPad in the App Store.

So as many people know, I've been promising an update to the KML Loader for a while now, and even to the point where I've had some local revisions and haven't had the time to check them in (I know, I know, bad practice!)

The major update has been to enable the ability to load linked assets. Initially this just extends to ground overlays and custom icons, but now that I have the structure setup to do this I'll be able to add in linked files and styles easily.

Other updates include a series of bug fixes, features with multiple geometries now load in correctly and I've updated the utility library to correctly parse the newer OGC KML namespace.

Some things to note:

• I've added a trunk directory to keep the main head revision separate from the tag tree
• I've removed the included version of the google maps utility library. I've committed in some changes to this library so I didn't want to have to maintain it in two places, so you'll now have to go to the google maps utility library on google code here (I'll package it all up at the end of this post as well).
• I've tagged the previous version of the library if you wish to keep using it, you'll find it at: http://svn.distriqt.com/public/trunk/gmaps/tags/R20101004_gmaps_utils_v1.0
• I've used the BulkLoader by Arthur Debert and have included it in the repository. This is used to load all the linked assets.

The functionality should be exactly the same as the previous version, so you can still refer to the post on interactions, about the SimpleKMLLoader and the initial post about the KmlLoader.

The major change is that you now need to grab the gmaps utility library separately and put both libraries in your source tree.

svn co http://svn.distriqt.com/public/trunk/gmaps/trunk/ distriqt-gmaps
svn co http://gmaps-utility-library-flash.googlecode.com/svn/trunk/ gmaps-utility-library-flash-read-only

You'll end up with a src directory in both of these checkouts that you need to add to your source path for your projects.

Here are the current packages (v1.2) distriqt-gmaps-kmlloader-v1.2 and google-utility-library-flash.

Let me know if you find it useful!

We've recently updated Lachlan's site with some new features, including an introduction slideshow, and integration with RoyaleCMS. The CMS is a powerful, rebrandable CMS for any XML driven website or web application. It's a flash/php based CMS and provides a very simple and clean interface especially good for gallery and image based websites.

Previously this site integrated with a Drupal backend, but we found that ordering images in a Drupal gallery was overly complex and was becoming an issue for image management for this site. Hence we decided to try RoyaleCMS.

We had a few minor integration issues but overall it was a simple experience to get our website interfacing to the CMS. The available parser libraries definitely made it an easy experience to get the content from the CMS. Our biggest problem was the difficulty of associating a description with an image. Something that nearly every gallery site requires however it was a bit of a process (though by no means impossible) to get the CMS setup to add this simple piece of metadata.

We definitely recommend RoyaleCMS if you're looking for a simple backend to manage a flash portfolio site.

Check out the updated site at lachlanmoore.com.au.

For an upcoming project we needed to stream content from the user's webcam to be recorded on the server. In theory this sounded like a basic operation, having used FMS to this end before, but actually installing and setting up the Red5 server proved to be a little tricky. So I just wanted to outline the process I went through to get a Red5 Server running on ubuntu and how to setup your first recording stream.

Red5 is a powerful Java based video streaming and multi-user solution for the Flash Player. Red5 includes support for the latest multi-user API’s including NetConnection, NetStream and SharedObject’s while providing a powerful RTMP / Servlet implementation. It is basically an open source Flash Media Server.

We're going to go through two major steps here, firstly installing Red5 on Ubuntu and then building a simple application to record the webcam.

Installing Red5

For this installation we're going to use a stock Ubuntu Server installation (8.04 Hardy Heron). We installed LAMP as well for the project but it's not required for Red5. Firstly we need to install a few dependencies including the Java runtime environment and the Java development kit (and yes these are terminal commands so get it up and running):

sudo apt-get install java-package sun-java6-jdk sun-java6-jre
sudo apt-get install subversion ant

Next we need to grab the code base for Red5. We tried the trunk version first but had some issues with it (as you'd expect from a HEAD revision) so ended up using v0.9.1. You can try other versions of the server by browsing the repository and replacing the reference in the svn checkout below:

svn co http://red5.googlecode.com/svn/java/server/tags/0_9_1/ ~/red5

Now we build using Ant:

export JAVA_HOME=/usr/lib/jvm/java-6-sun
export ANT_HOME=/usr/share/ant/
cd ~/red5
/usr/share/ant/bin/ant

Make sure there were no errors during the build. If there were consult the red5 wiki for help. Install:

sudo mkdir /usr/share/red5
sudo cp -R ~/red5/dist/* /usr/share/red5/.
sudo chmod 755 /usr/share/red5/red5.sh

Start the Red5 server:

export RED5_HOME=/usr/share/red5
/usr/share/red5/red5.sh

Next we need to create the startup script. This script will allow you to get the server starting on reboot etc. Put the following text into the file /etc/init.d/red5 and make the file executable sudo chmod 755 /etc/init.d/red5.

#!/bin/sh
# init script for Red5
# /etc/init.d/red5
 
RED5_USER=root
RED5_HOME=/usr/share/red5
RED5_PROG=red5
 
test -x $RED5_HOME/$RED5_PROG.sh || exit 5
 
case "$1" in
     start)
         echo -n "Starting Red5"
         echo -n " "
         cd $RED5_HOME
         su -s /bin/bash -c "$RED5_HOME/$RED5_PROG.sh &" $RED5_USER
         sleep 2
         ;;
     stop)
         echo -n "Shutting down Red5"
         echo -n " "
         su -s /bin/bash -c "killall -q -u $RED5_USER java" $RED5_USER
         sleep 2
         ;;
     restart)
         $0 stop
         $0 start
         ;;
esac

Now you can start/stop/restart from the command line by using:
sudo /etc/init.d/red5 [start/stop/restart]

Lastly once you've got the server running, you can browse to the test page on your server http://localhost:5080 and you should see:

If you can't see this it and you've confirmed the Red5 server is running it could be a firewall issue. You may need to alter the IPTables on your machine but that's not going to be covered here.

Lastly we need to install the actual streaming application on our Red5 Server. Navigate to http://localhost:5080/installer/, select the oflaDemo and click Install.
To test it installed correctly, navigate to http://localhost:5080/demos/ofla_demo.html (correct the server name in the top right) and hit connect. You should see a list of available videos and a green light in the top right.

Congratulations you're all up and running with a Red5 Server!

The following class shows a very simple example of starting a streaming feed to the server and then streaming the same data back from the server into a Video object on the stage.

The fundamentals are very simple:

• Create a NetConnection object and connect to the server
• Create a NetStream when the connection succeeds and publish the camera feed to the stream as a "record" type

package
{
	import flash.display.Sprite;
 
	import flash.net.NetConnection;
	import flash.net.NetStream;
	import flash.events.NetStatusEvent;
 
	import flash.media.Camera;
	import flash.media.Video;
 
	public class Red5Experiment extends Sprite
	{
		//
		//	Constants
		public static const RED5_URL	: String = "rtmp://SERVERNAME/oflaDemo/test/";
 
		//
		//	Variables
		private var _netConnection	: NetConnection;
		private var _netStream		: NetStream;
		private var _recvStream		: NetStream;
 
		private var _url		: String = RED5_URL;
		private var _filename		: String = "test-red5";
 
		private var _video		: Video;
 
		public function Red5Experiment()
		{
			_netConnection = new NetConnection();
			_netConnection.connect( _url );
			_netConnection.addEventListener( NetStatusEvent.NET_STATUS, netStatusHandler, false, 0, true );
 
			_video = new Video();
			addChild( _video );
		}
 
		////////////////////////////////////////////////////////
		//	FUNCTIONALITY
		//
		private function start():void
		{
			//
			//	Setup the camera
			var cam:Camera = Camera.getCamera();
			cam.setLoopback(true);
			cam.setMode(176,144,15);
			cam.setKeyFrameInterval(10);
			cam.setQuality(0,70);
 
			//
			//	Start publishing the video stream
			_netStream = new NetStream(_netConnection);
			_netStream.addEventListener( NetStatusEvent.NET_STATUS, netStatusHandler, false, 0, true );
			_netStream.attachCamera( cam );
			_netStream.publish(_filename, "record");
 
			//
			//	Grab live stream back from server
			_recvStream = new NetStream(_netConnection);
			_recvStream.play(_filename);
			_video.attachNetStream(_recvStream);
 
			//
			//	Alternatively, Use the local camera feed
//			_video.attachCamera(cam);
		}
 
		////////////////////////////////////////////////////////
		//	EVENT HANDLERS
		//
		private function netStatusHandler( event:NetStatusEvent ):void
		{
			trace( "Red5Experiment::netStatusHandler():"+event.info.code );
			switch ( event.info.code )
			{
				case "NetConnection.Connect.Success":
					start();
					break;
			}
		}
 
	}
}

The files are recorded to a directory within the webapps folder on your server. If you've followed the paths above you'll find the file /usr/share/red5/webapps/oflaDemo/streams/test/test-red5.flv on your server.

You now should have a complete streaming / recording media setup. All running off an open source server!

EDIT: I've created a zip of the sample application files: red5_sampleapplication

I've had a few requests asking about how to interact with the KML once you've loaded it onto the map. It's really quite an easy step once you've got the KML on there but I'll show you how in this simple example.

Firstly if you haven't read the Simple KML Loader post then head over there first. It explains how to get that KML file loaded and displayed on your map.

The objective of this simple example is to show an info window popup when we rollover one of the objects in the kml, showing the name of the kml object in the window.

The code for this example is in our svn:

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

Make sure you have our SimpleKmlLoader library in your project.

To create the loader, load the kml and have it added to your map:

var _loader:SimpleKmlLoader = new SimpleKmlLoader( _map, true );
_loader.addEventListener( Event.COMPLETE, loader_completeHandler );
_loader.load( _file );
 

Now on the complete handler you can add the interactions:

function loader_completeHandler( _event:Event ):void
{
	// At this point generally this objects array
	//   will simply be the base object of the KML
	addInteraction( _loader.objects );
}
 
/**
 * Add interaction to every object in the array
 */
function addInteraction( _objects:Array ):void
{
	for each (var _object:KmlDisplayObject in _objects)
	{
		_object.interactive = true;
		_object.addEventListener(MapMouseEvent.ROLL_OVER, object_rollOverHandler, false, 0, true );
		_object.addEventListener(MapMouseEvent.ROLL_OUT, object_rollOutHandler, false, 0, true );
 
		// Process any children
		addInteraction( _object.children );
	}
}
 
function object_rollOverHandler( _event:MapMouseEvent ):void
{
	// show an info panel...
	var _object:KmlDisplayObject = KmlDisplayObject(_event.currentTarget);
	_map.openInfoWindow( _object.latLng, new InfoWindowOptions({content:_object.name}) );
}
 
function object_rollOutHandler( _event:MapMouseEvent ):void
{
	_map.closeInfoWindow();
}

Now when you run with this code you should see the name of the kml object appear in the info window when you rollover the object. This is of course a very simple example, and much more can be done with this, but it is a good point to introduce the concept of interactions.

Okay so I'm not the most athletic person in the world, but one thing that does get me out of the house is tracking how far I've been running. Watching the km's tick over!

But I'm sick of iTunes and having to log into nike online all the time. So I got bored this weekend and the result is the start of a new little as3 interface using the content from my Nike+ device. Initially this library just processes files that nike+ stores on the device, but would eventually like it to access the online service as well.

The NikePlus class represents the base of the Nike+ interface. With this interface you can load a series of workouts from their xml files and use the data stored therein for other applications.

The workouts are stored as xml files on the devices at a location similar to the below, (you may have to enable filesystem access in itunes to be able to see this):

[DEVICEMOUNTPOINT]/iPod_Control/Device/Trainer/Workouts/Empeds/[NIKEPLUSID]/

Underneath this directory the data is setup as follows:

• latest/*.xml - A series of xml workout files that haven't been synced
• synched/*.xml - A series of xml workout files that have been synced
• lastWorkout.xml - The last xml workout file
• preferences.xml - Nike+ preferences xml file

You can get the library here:
svn co http://svn.distriqt.com/public/trunk/nikeplus/trunk

Usage of the library is relatively simple at this stage:

var _nikeplus:NikePlus = new NikePlus();
_nikeplus.addEventListener( NikePlus.LOADED, nikeplus_loadedHandler );
_nikeplus.loadWorkout( _workout_xml_location );
 

Then once loaded:

function nikeplus_loadedHandler( _event:Event ):void
{
	for each (var _workout:NikeWorkout in _nikeplus.workouts)
	{
		trace( _workout.summary.calories );
		trace( "Data Interval: "+_workout.intervalValue );
		for (var i:int = 0; i < _workout.data.length; i++)
		{
			trace( "Data Point["+i+"] "+_workout.data[i] );
		}
	}
}
 

Started building a simple little AIR application to eventually replace iTunes and Nike online. I'll post more when I have a working version.