When I opened a GIF file up in 0xED, I saw that the next few bytes seemed to reflect what I suspected was the image dimensions. A quick check against the specification revealed exactly that - two unsigned shorts, width and height respectively. Wow, that was easy. Supplied a ByteArray of the image file contents, to get at this information requires only the following code to verify that the file is indeed a GIF and to determine its dimensions.

var start:Number = data.readUnsignedByte();
 
if( start == 71 )
{
	data.position = 6;
	data.endian = Endian.LITTLE_ENDIAN;
 
	trace( "Width: " + data.readUnsignedShort() );
	trace( "Height: " + data.readUnsignedShort() );
}

I had never looked at the PNG format at all, so I was curious as to what it held for me in terms of complexity. Though the specification is not written particularly clearly, it is still much more concise than the JPEG format. I soon discovered that PNG files start with the same eight bytes that include, among other things, the characters “PNG”. After those eight bytes comes a series of chunks.

Chunks are defined simply enough. They start with a four byte integer that says how big the chunk is supposed to be. After the length of the chunk comes four bytes that say the type of chunk being described. Usually in these file formats, there is almost always a chunk that contains the width and height, so I scanned the chunk types in the specification. What I found is that after the initial eight bytes of a PNG file, the first chunk is always a “header” block, which contains width and height as four bytes each.

var start:Number = data.readUnsignedByte();
 
if( start == 137 )
{
	data.position = 16;
 
	trace( "Width: " + data.readUnsignedInt() );
	trace( "Height: " + data.readUnsignedInt() );
}

Now back to the JPEG file format, which I have now discovered is one seriously messed up format. It strikes me that it ever gained the popularity that it did. Anyways, JPEG images are designed to hold meta information. Sometimes that is there, sometimes not. That meta information is most commonly seen as EXIF data, but that too may also not be there. In that case there is a subset of called JFIF which actually proceeds EXIF.

The JPEG image, like the PNG image is dived up into chunks as well, but the format of those chunks may actually vary from vendor to vendor. EXIF as an example fills the meta area of a JPEG file, but its format is one that’s generally agreed on by camera vendors, and not specifically called about in the JPEG specification. When I create a JPEG from Fireworks CS4, I even noticed that it crams a bunch of XML in the meta area - in short, it seems to create JPEG images with it’s own little piece of data.

This is all acceptable of course, and specifically allowed for by the specification, but makes parsing JPEG files incredibly tedious.

It seemed that somebody had probably already done this somewhere, so in looking for some pointers, I headed to ye olde Google. After a little searching I ran across a snippet that scanned the JPEG block for a specific 0xFFC0 segment. The first four bytes of this segment, two unisigned bytes each, contains the width and height of the JPEG file. After a little experimenting I found that this approach actually disregarded the meta information block altogether and worked on JPEG images whether they had EXIF, JFIF, or other meta information.

var format:Number = 0;
var marker:Number = 0;
var start:Number = data.readUnsignedByte();
 
if( start == 255 )
{
	data.endian = Endian.BIG_ENDIAN;
	data.position = 3;
	format = data.readUnsignedByte();
 
	while( marker != 0xC0 )
	{
		start = data.readUnsignedShort() - 1;
		data.position = data.position + start;
		marker = data.readUnsignedByte();
	}
 
	data.position = data.position + 3;
 
	trace( "Height: " + data.readUnsignedShort() );
	trace( "Width: " + data.readUnsignedShort() );
}

You’ll notice that throughout this description, I have never called out how I was getting the data. Perhaps because I wanted to play around more with Flash Player 10 local file IO, I first implemented this as a web application running on Flash Player. Once I had the project completed, it occurred to me that since I was dealing with the ByteArray from the file, that it could be done with AIR as well.

Rather than call out a specific runtime, I created a function that will take a ByteArray of an image file, and return to you the type of image file (GIF, PNG or JPG) as well as the width and height of the file. If you have Flash Player 10, you can try this functionality out right below this paragraph. Simply click the button, select one or more image files, and Flash Player 10 will read the data and tell you what you selected!

It wouldn’t take much work of course to run this same method in an application running in Adobe AIR. A little more work and you could even run it as JavaScript inside Adobe AIR. I’ve made the source code for the Flash Player version above available for download. If you implement it in AIR with AS3 or JavaScript, please leave a comment and let me know! There’s a variety of sample/test images included in the download as well. I think I’ve tested it pretty thoroughly, but if you find any images it doesn’t work for, also please leave a comment and let me know.

The first thing you need to know about local file IO is that any access to the system must be driven by a user click interaction. You are not free to go about opening files at random, or without user permission. You can also only perform one local access per click and cannot chain the system access. For example, you can’t save some data, and then immediately open some other file without first getting user another click event from the user.

The next thing to know about local file IO is that the methods are designed to work with a ByteArray object. This is pretty clever as it gives you the flexibility to read and write any file type whether it be text, or something more complicated like an image file. RFC 2445 files are text-based and easily human readable. You can download the test file I used, my actual schedule for the week of Nov 3, 2008, or create your own, but for reference, here’s some sample data.

BEGIN:VCALENDAR
...
BEGIN:VEVENT
SEQUENCE:2
TRANSP:OPAQUE
UID:61BC7865-E5CF-4C7A-89A7-45B91592143B
DTSTART;TZID=America/Denver:20081103T130000
DTSTAMP:20081102T202730Z
SUMMARY:DEN to LGA
CREATED:20081102T202722Z
DTEND;TZID=America/Denver:20081103T170000
END:VEVENT
...
END:VCALENDAR

Now onto the actual implementation details. You will first need to provide a means for the user to indicate that they want to open a local file. In my application, I use the “+” icon in the upper right hand corner of the application. It’s just a MovieClip instance, and I’ve registered a listener for the MouseEvent.CLICK event. When that listener gets fired, we can prompt the user to select a local file using the FileReference.browse() method, but before we got hat far, we have some other work to do first.

All of these operations happen asynchronously. When the user select a file from the browse dialog, an Event.SELECT event will be fired. That lets us know where we can read the local data. Reading the data though, also happens asynchronously, so we’ll need to also register for the Event.COMPLETE event, which will get fired with the local file has been loaded into a ByteArray for further processing. You’ll find that ByteArray object on the FileReference.data property once local access has finished.

public var ical:FileReference = null;
 
public function doAdded( event:Event ):void
{
  ical = new FileReference();
  ical.addEventListener( Event.SELECT, doSelect );
  ical.addEventListener( Event.COMPLETE, doComplete );
}
 
public function doSelect( event:Event ):void
{
  ical.load();
}
 
public function doComplete( event:Event ):void
{
  var lines:Array = null;
  var file:String = null;		
 
  file = ical.data.readMultiByte( ical.data.length, US_ASCII );
  lines = file.split( CR_LF );			
 
  // ...
}

The ByteArray class has a ByteArray.readMultiByte() method on it for reading strings. You might go about using this method in any number of manner, but in this case, I just read in the all available data in the ByteArray instance as a giant string. From there I can use the string methods to parse the details. The RFC 2445 standard uses a carriage return and line feed marker to indicate a new line, which I use to split the string up initially. Then I run through the lines and parse all the relevant data (again using more string manipulation).

The great thing about using ByteArray by default is that it allows you to work with both text files and binary files. For example, there’s no reason that an application couldn’t read or write an image file. Other file types such as PDF or SWF also seem as though they’d be particularly compelling. Or, if you just want to write out some text, you can do that too. It’s very flexible for your specific situation.

Though I didn’t use it in this example, the FileReference.save() method behaves a little differently. Rather than have your user select the file first, you actually need to build the ByteArray object you intend to write to the local system up front. That ByteArray instance will be passed to the FileReference.save() method. From there the user will select where they want to put the file. As soon as they’ve selected a destination, that ByteArray data will be written instantly.

There’s clearly a vast amount of potential with this feature. Image simply not having to bounce simple data off a server anymore whenever you want to save a file locally? The shortcoming for now being that there are few libraries in ActionScript for the countless file types that are in existence. Perhaps now that this feature is available, we’ll see more developers create such libraries. In the meantime, you can download the source for my example. If you expand upon it, and create a full implementation for iCalendar files, please drop me a comment and let me know.

I know who you are! You’re that guy that uses Flex Builder, but not the Flex framework. It’s true! It happens! I’ll avoid the political mire that is editors in the Flash world, and just say that this example shows you how to connect to a “HelloWorld” PHP object from a pure ActionScript project developed with Flex Builder, but without the use of the Flex framework via Zend AMF.

Charts

It became plenty obvious to me early on that charting solutions in the PHP world are lame. Busting out bitmaps on demand? Calculating dimensions, drawing lines, figuring out ranges? Whatever! These examples walk you through building really effective and powerful charts using the Flex Charting components. It starts simply enough with getting some data into a LineChart. Then we add data tips. Then we add styles. Then we add formatting. Then we add filtering. Then we add alternating views via a ViewStack. Then we pimp it out and bring the full Zend Framework web site look and feel into a fully interactive data visualization application.

Data

You know, because what’s a Flex application without some data? I developed all these samples on MAMP, which includes MySQL. If you’re using the same port information and default user name and password for your development/testing environment, then you’ll be good to go. If you’re not, and you want to just drop the data into your own configuration, I’ve provided you with the example data in XML format, as well as a SQL dump that includes the table schema.

Desktop

It can seem counter intuitive at times, I know. Didn’t we move to the web to get away from the desktop? Regardless of the shift, there are still good reasons that the desktop matters to web developers, and when you want to go there, you can do so easily, and cross-platform with Adobe AIR. These examples, take a Flex-based application, that connects to a PHP data access object (DAO) via Zend AMF to the desktop with Adobe AIR. You’ll start with a basic web version, just shoved into an AIR window. Then you’ll add native drag and drop to upload a vCard file. Then you’ll check to see if the network is even available. Then you’ll just work offline entirely using the embedded SQLite database that’s part of AIR. Sample vCards provided!

External

Nobody likes code that’s hard to maintain. So what’s the first thing you’ll do to take that old-school procedural code and make it maintainable? That’s right, you’ll pull all the core logic out to a separate PHP file and then include that file wherever you need that functionality. That’s what this example shows. On the server, in PHP-land, all the core database access is put aside in it’s own comfy script. That script is then included in numerous additional PHP files that expose functionality as XML. To help you get along, there’s incremental builds for every step of the flex application - from getting that initial set of data to a complete CRUD application.

Flash

Did you know that the Flash authoring environment has included components for a long time? They’re of a different nature than the Flex components, but they are there; great for one-off application style functionality in any otherwise immersive experience you might be creating. Presented here are two complete applications that use those components, and the supporting FLA files for Flash CS3 and Flash CS4. One of the applications connects to PHP via XML, while the other via Zend AMF. I make heavy use of the “document class” concept, so prepare yourself for ActionScript 3 goodness.

Hello AMF

What could be better than good old fashioned “hello world?” The “ActionScript” example goes at Zend AMF using a pure ActionScript project. This example uses the Flex framework to connect to that “HelloWorld” PHP class Zend AMF. Sometimes you just need the basics to get you going, and if all the staged builds and various approaches have you down, this is the place to start.

Hello Text

You don’t see it done too often, but there’s no reason that our service calls from Flex have to be XML, SOAP or AMF. If you’d prefer to just get a bunch of text back, and process that data yourself, then be our guest. This example shows connecting Flex to a PHP endpoint that returns a plain text string. In this example, that value is just dumped to the screen, but you could use this approach to deal with comma-separated values (CSV) or any other text that might be provided by a service endpoint you don’t control.

Hello XML

This is the de facto standard when it comes to services and Flash. You send a query string out with your HTTP request, and you get XML data back. Flash Player of course has really good XML manipulation via ECMAScript for XML (E4X). In this example, you’ll pass that query string to a PHP resource, that will process it and return some data in XML. Quick, two guesses, what the response will say!

Inline

You weren’t always the magic code man that you are today. You had to start somewhere. Or perhaps you’re maintaining code that was somebody else’s starting point. The most common way to get going before you understand the value of modularity and code reuse is to cram everything into one PHP file and just get the job done. This example covers that situation. If you’re inclined to shove everything into one PHP script, this example builds out a complete CRUD application using XML as a return format to satisfy every brute force craving you might have.

Object

Yes! It’s true! PHP can be object oriented! I still hear biases that PHP is procedural, and this example sets out to prove that wrong. On the PHP side you’ll get patterned to death by creating a DAO that uses a Factory (helper) to connect to a database, and then uses value objects (VO) in place of the traditional associative arrays. That well constructed object oriented infrastructure is then used to return XML to a Flex client. On the client side, once again, staged builds of a complete CRUD application are provided to gently walk you along learning Flex.

Remoting

AMF in general likes objects, and Zend AMF is no exception. In the “Object” example, there’s an additional PHP script for each CRUD operation. That means more work for you to expose you’re wonderfully OO code as dumb XML. XML in it’s own right is just downright heavy too - especially as it applies to the enterprise. In this example we’ll take the classes from the “Object” example and expose them via Zend AMF to a Flex application. Just because I can, staged builds are included here too, to walk you along building a Flex application with complete CRUD operations.

REST

You say “tomato” and I say “tomato” … Er, something like that. The Zend Framework includes REST server functionality. While it’s not true REST, and uses the old query string in, XML out approach, we’re still talking XML, which is what we want when we’re building Flex applications. There are two examples here that use the Zend REST server functionality. Leveraging the externalized script from the “External” example, we can immediately expose that functionality as XML. You get one example that does that, but the problem is that the result isn’t in a format that’s especially friendly to iteration. Then there’s another example that shows customizing the XML response from the Zend REST server to be more palatable to an SOA application. And yes, staged builds for complete CRUD functionality are provided here too.

<?xml version="1.0" encoding="UTF-8"?>
<getContacts generator="zend" version="1.0">
  <key_0>
    <id>1</id>
    <firstname>Ryan</firstname>
    <lastname>Stewart</lastname>
    <email>rstewart@adobe.com</email>
    <mobile>123-456-7890</mobile>
  </key_0>
  <key_1>
    <id>2</id>
    <firstname>Mike</firstname>
    <lastname>Downey</lastname>
    <email>mdowney@adobe.com</email>
    <mobile>111-222-3333</mobile>
  </key_1>
  <status>success</status>
</getContacts>

Upload

Flash Player has included the ability to upload and download files for a while. The great thing about this functionality is that it allows you to specify a single or multiple file mode, and also lets you filter out files that you don’t want the user to select. While the upload/download is going, you also get progress reports. It’s among the most common uses for Flash, and as such here’s an example of how to use the upload functionality from a Flex application to a PHP endpoint. This example expects you to upload a vCard (samples provided) to PHP, which then parses the data, puts a record in the database, and returns the details about the new record back to the client for display.

The problem with examples like these is that there’s just never enough time to iterate over the code in every possible way (despite my obsession). Still on my list include using the Zend Framework MVC component to provide alternative presentations for the same logic, as well as real-time support using a custom socket server (written in PHP as well of course). I see a little chat and collaboration in my future. I’ll make another post to update the code when I get there. In the meantime, if there’s an example of functionality you’d like to see, then leave a comment a let me know!

In this session, Karl Swedberg, author of the well-known “Learning jQuery” book gets you started with jQuery. Karl had a number of projector problems up front, so this session isn’t as long as the other two. As you would expect, this session is a very gentle introduction to using jQuery. Karl started off with his own slides, and then moved into using some available from John Resig. I really felt like Karl hit his stride about the last fifteen minutes, but unfortunately ran out of time. This is one of those sessions I wish had gone on for another hour.

Introduction to jQuery UI (audio)

If you follow jQuery, you’ll know that there has been working on a user interface suite of components called jQuery UI. The UI project is still very much in its infancy, and has lots of room to grow, but in this session Richard Worth gives a good introduction to where the team is so far. The occasional one-off comment about why the project is architected one way versus another was probably the most valuable part for me. Dreamweaver CS4 supports OpenAjax Metadata Specification Widget Metadata, and you can expect to see a number of the jQuery UI components available as extensions (and more from other frameworks).

Building Your First Plug-In (audio)

My favorite feature of jQuery is that it is very unobtrusive to my workflow. If find that the minimalist approach works very well for me when building Adobe AIR applications. My second favorite feature then is the plug-in architecture, which has created a vibrant community. If you’re looking for some feature for your application, chances are that a plug-in already exists. Probably the most thorough session I attended during the conference, Mike Alsup walks you through all the details of making your own plug-ins for jQuery.

There was much to like about the conference. I like the location (Boston), the timing (just before The Ajax Experience), the content (jQuery), the community, the meals (breakfast, lunch and dinner), the venue (MIT STATA), and more. One area that I thought the conference might improve is to have an intermediate track. There were a few cases where the beginner was too beginner, and the advanced too advanced. It would have been great to find a middle ground for sessions as well. Other than that, I look forward to attending next year.

In the meantime, you can download the jQuery/AIR example I put together for the conference. The application is an early version of a desktop application I’ve been working on to monitor a specific set of RSS feeds - those from my reports. It includes all the assets necessary to roll the web-based version of the application (using PHP on the server) to a desktop application using Adobe AIR. The bits in the archive are in that final state and includes custom chrome, local file IO, system notifications and network detection - all using jQuery and AIR. Enjoy!

The popular convention is to chop off the segments that need to stay the same, and can’t be distorted. Then you can take the areas that can be repeated, or stretched, without distortion impacting how they look. This is generally accomplished by slicing the image up into three top segments, three middle segments, and three bottom segments using your favorite image editor. The result is nine separate images. We can then reassemble the image files to fit whatever size we may need, and the result will appear to not have been distorted.

In the case of Flash, this technique was added as a feature with Flash Player 8 called 9-slice. Using tooling or ActionScript, you can specify where the slice guidelines fall, and then Flash will handle slicing the guides, stretching the images appropriately, and then reassemble all the parts at the final dimensions. In Flash CS4 you can find this on your symbol properties, and then selecting to enable “9-slice.” You will then see slicing guides on your symbols. Try it! Take the transform tool and resize a rounded rectangle. If you’ve set the guides correctly, the rounded corners will retain their radius.

In HTML/CSS there’s no such feature. Well, there was no such feature until browsers started implementing CSS 3. CSS 3 includes a variety of new background and border features, one of which is the “border-image” property. The border image property expects you to (a) specify border widths and then (b) specify an image to use. You’ll also tell CSS where you want the slicing to occur on the border image. You can even tell CSS how you want the parts that do get distorted to actually distort.

/* top right bottom left */	
#chrome {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	top: 0px;
	border-width: 59 17 17 17; 
	-webkit-border-image: url(images/desktop_panel.png) 59 17 17 17 stretch stretch;	
}

CSS 3 isn’t complete. It’s also not broadly available as browsers that support it haven’t been on the market that long. That doesn’t mean that this is just wasted knowledge - especially as it pertains to Adobe AIR. One of the browsers that does support this functionality already is Safari. Safari uses WebKit as it’s rendering engine. The same WebKit in built into Adobe AIR. That means you can use this style property in Adobe AIR (as well as many others you’ll find in the CSS 3 specification).

One of my favorite way to use this is to skin custom window chrome and custom button chrome. Going all the way back to that panel image I mentioned earlier, even though it is only 104 x 126 pixels, I can now have the browser slice and dice it to fit whatever size the window of my AIR application may be (certainly larger than 104 x 126). I also don’t particularly like the AIR default button look/feel, nor do I like making a fixed size/labeled image for every button in my application. Using CSS 3 border image, I can take an image and apply it to fit any size of button.

(download this custom chrome template)

The big picture here is that Flash Player has been slicing images for a while now. We’re now seeing that innovation roll into standards. Somebody had to go first, and Flash took that step. It was the same with the image tag in HTML, which at the time was hotly debated when it was added by Netscape. It’s also important to remember though that standards invite a larger group to contribute to an innovation. CSS 3 as an example accounts for several manners of treating the way the slices are applied to a border (stretch, repeat and round) which Flash does not. It’s important to recognize that standards and proprietary innovation both have their place.

Although certainly not as large an event, I’ll also be at jQuery Conference the preceding Sunday. I’m excited to learn more about jQuery, but I’ll also be there to show off my latest application called “What Now” and talk about how jQuery and Adobe AIR made it possible. While I’m still refining the application (yes, with only a few days to go), here’s an early sneak peak at one of the screens. The application includes features such as custom chrome, running as a background process, system notifications, local data storage, network availability detection and more.

The second major conference at which you’ll find Adobe, the company, is the AJAXWorld RIA Conference. I won’t be at AJAXWorld this time around, my first time missing the conference in a few years, but another Kevin will be on hand to give a keynote presentation - Kevin Lynch, CTO at Adobe. I’m not going to spill the beans about Kevin’s presentation, but he doesn’t like to take the stage without having an announcement to make.

To my earlier point, the reason for Adobe being at these conferences isn’t about converting JavaScript developers to Flash. The reason is that Adobe has a mission to change the way people engage with ideas and information. We have runtimes, tools, servers and services to facilitate every aspect of that mission for every type of designer and developer. On the JavaScript side of the house this might mean everything from Adobe’s involvement in Tamarin (let’s not forget where all these speed improvements in JavaScript are coming from), Dreamweaver CS4 with amazing new CSS and JavaScript features, to ColdFusion’s most excellent Ajax forms and JSON support, to emerging efforts like Adobe Share with its REST API.

While at the conference, I tried to attend a few sessions. The booth traffic was enough though that getting out of the exhibit hall proved challenging at times. Since the exhibits closed up on Wednesday night, but there was still more conference on Thursday, I decided that’d be my first, best, and potentially only chance to sit in on a session. As luck would have it, the first session I ran across was one by Ed Finkler entitled “Building Desktop RIAs with PHP, HTML, & JavaScript in AIR.” I’m pretty sure he was going for a title that completely filled the first slide.

Although I was unable to attend, I do know that Ed also presented other topics including another one that included Adobe AIR at the Zend un-conference. If you’re not familiar with Ed, he has an application called Spaz, built on Adobe AIR. Spaz is an award-winning Twitter client written using HTML, JavaScript and CSS. It has been a real treat to watch it evolve since AIR has been available.

I really like that during Ed’s session at Zend Con that he repeatedly emphasized AIR’s focus on security, and how developers and framework teams should stop using dangerous practices such as reliance on the eval() method. Ed’s tie back into PHP here was that “PHP is your server-side buddy” with a picture of Jay and Silent Bob. Showing off a new, and somewhat controversial application, Ed talked about how the Flash APIs in AIR can give you some image manipulation abilities. Since Ed doesn’t know Flash however, he sends images to PHP to be manipulated. That’s a great point about AIR being built on web technologies - use what you know.

Ed has made his slides available, and I was also able to record the session audio.

It’s true that this was really my coming out as a cigar smoker. It has been a past time of mine for a long time, but I’ve rarely found others in this political climate with whom I can enjoy a fine stogie. Over the past year, I’ve found more and more that Adobe developers and designers are turning to cigars as a luxury item and an opportunity to talk geek with each other. As William Thackeray said:

I vow and believe that the cigar has been one of the greatest creature comforts of my life — a kind companion, a gentle stimulant, an amiable anodyne, a cementer of friendship.

With that in mind, I am very seriously considering hosting a Cigar BOF at MAX. As you probably know, California and indeed San Francisco itself isn’t a particularly friendly environment for smokers. Rather than host this BOF in the Moscone, which would mean no smoking, what I’d really like to do is arrange a specific venue just for us. There are a couple places that are open to cigar smokers in San Francisco, but I can’t commit to reservations if there’s not enough interest.

So … Of the roughly five-thousand of you attending MAX this year in San Francisco, how many would be interested in a Cigar BOF event? Geeks and cigars is sure to be a fantastic event, but I won’t be able to pull it off without your support. So sound off! Leave a comment! Let me know if you’re interested in attending. Knowing just how serious you are would also be helpful. There’s an off chance that I may be able to get a tobacconist to throw in a discount or sponsorship, so throw in a reference to your favorite cigar as well! Of late I’ve been on a big Romeo y Julieta 1875 en Tubo kick myself.

The first step is to provide an area for the user to provide a color sample. I chose a 10 x 10 pixel space, and represented that on the screen as a little square in the middle of the web camera display. When something enters that space, the color across the 100 pixels is averaged. When you get the color you want, you can press the space bar to “lock in” your color average.

public function sampleImage():void
{
	var bmpd:BitmapData = new BitmapData( VIDEO_WIDTH, VIDEO_HEIGHT );
	var capture:BitmapData = new BitmapData( CAPTURE_WIDTH, CAPTURE_HEIGHT );
	var pixel:uint = 0;
	var r:uint = 0;
	var g:uint = 0;
	var b:uint = 0;
	var totalr:uint = 0;
	var totalg:uint = 0;
	var totalb:uint = 0;			
 
	bmpd.draw( video );
	capture.copyPixels( 
		bmpd, 
		new Rectangle( 
			sample.x - video.x + 1, 
			sample.y - video.y + 1, 
			CAPTURE_WIDTH + 1, 
			CAPTURE_HEIGHT + 1 ), 
		new Point( 0, 0 ) 
	);
 
	swatch.graphics.clear();
	swatch.graphics.lineStyle( 1, 0xFF0000, 0 );
 
	for( var h:Number = 0; h < capture.height; h++ )
	{
		for( var w:Number = 0; w < capture.width; w++ )
		{
			pixel = capture.getPixel( w, h );
 
			r = ( pixel & 0xFF0000 ) >>> 16;
			totalr = totalr + r;
 
			g = ( pixel & 0x00FF00 ) >>> 8;
			totalg = totalg + g;
 
			b = pixel & 0x0000FF;					
			totalb = totalb + b;					
 
			swatch.graphics.moveTo( w * 10, h * 10 );
			swatch.graphics.beginFill( pixel );
			swatch.graphics.drawRect( w * 10, h * 10, 9, 9 );
			swatch.graphics.endFill();
		}
	}
 
	r = Math.round( totalr / ( capture.width * capture.height ) );
	g = Math.round( totalg / ( capture.width * capture.height ) );
	b = Math.round( totalb / ( capture.width * capture.height ) );			
 
	select.graphics.clear();
 
	select.graphics.moveTo( 0, 0 );
	select.graphics.lineStyle( 1, 0x838383 );
	select.graphics.beginFill( 0xE8E8E8 );
	select.graphics.drawRect( 0, 0, 24, 20 );
	select.graphics.endFill();			
 
	select.graphics.moveTo( 3, 3 );
	select.graphics.lineStyle( 1, 0xFF0000, 0 );
	select.graphics.beginFill( ( 0x000000 | r << 16 | g << 8 | b ) );
	select.graphics.drawRect( 3, 3, 19, 15 );
	select.graphics.endFill();			
}

At that point the application start sampling the entire image for the strongest impression of that color average. I was originally sampling 10 x 10 pixel areas and averaging, but found accuracy and ease of use increased significantly when I just looked for the closest match to every pixel in the web camera’s coverage area. This does of course mean that the smaller the web camera space, the more performance you will get. To small however, and the plane becomes difficult to control. I landed at 160 x 120 and 24 frames per second.

public function processImage():void
{
	var bmpd:BitmapData = new BitmapData( VIDEO_WIDTH, VIDEO_HEIGHT );
	var average:uint = 0;
	var distance:Number = 0;
	var percent:Number = 0;			
	var r1:uint = ( color >> 16 ) & 0xFF;
	var g1:uint = ( color >> 8 ) & 0xFF;
	var b1:uint = color & 0xFF;
	var r2:uint = 0;
	var g2:uint = 0;
	var b2:uint = 0;
	var rotX:Number = 0;
	var rotY:Number = 0;
 
	bmpd.draw( video );
 
	closest.color = 0;
	closest.distance = 1000;
	closest.x = 0;
	closest.y = 0;			
 
	for( var h:Number = 0; h < video.height; h++ )
	{
		for( var w:Number = 0; w < video.width; w++ )
		{			
			average = bmpd.getPixel( w, h );
 
			r2 = ( average >> 16 ) & 0xFF;
			g2 = ( average >> 8 ) & 0xFF;
			b2 = average & 0xFF;
 
			distance = Math.sqrt( 
				Math.pow( r2 - r1, 2 ) + 
				Math.pow( g2 - g1, 2 ) + 
				Math.pow( b2 - b1, 2 ) 
			);
 
			if( closest.distance > distance )
			{
				closest.distance = distance;
				closest.x = w;
				closest.y = h;
				closest.color = average;
			}
		}
	}
 
	sample.x = video.x + closest.x - 5;
	sample.y = video.y + closest.y - 5;
 
	// Rotation on x-axis
	percent = closest.y / video.height;
 
	if( percent < 0.50 )
	{
		photo.rotationX = 360 - ( MAX_ROTATION * ( 0.50 - percent ) );
	} else if( percent > 0.50 ) {
		photo.rotationX  = ( MAX_ROTATION * percent ) - ( MAX_ROTATION / 2 );
	} else {
		photo.rotationX = 0;
	}
 
	// Rotation on y-axis
	percent = closest.x / video.width;
 
	if( percent < 0.50 )
	{
		photo.rotationY  = ( MAX_ROTATION * percent ) - ( MAX_ROTATION / 2 );
	} else if( percent > 0.50 ) {
		photo.rotationY = 360 - ( MAX_ROTATION * ( 0.50 - percent ) );
	} else {
		photo.rotationY = 0;
	}			
}

There’s a lot of tweaking that can go on here to improve the result. As an example, generally HSB values work better than RGB, but RGB is easier for me to grasp mentally, so I started there. Then there’s the definition of “closest” color match. Tracking would also likely be smoother if I focused on an area of the screen that represented the overall closest color match versus just a pixel. That’s being said, if you have Flash Player 10 (and a web camera), here’s what I came up with for your viewing pleasure.

Note: A special thanks goes out to one of my colleagues, Serge Jespers, for discovering that you may need to change the privacy settings on the Flash Player to allow access to your web camera from this domain in order for this example to work. To enable web camera usage, right click on the application and select “Settings…”.

Update: I added the ability to “push” and “pull” the image based on the closeness of the object to the web camera. This is done by monitoring how much of the color is present in the web camera’s viewable space, and is highly subjective depending on the contrast of the selected color value. For this reason, push/pull is off by default and can be enabled by selecting the check box in the lower left-hand corner.

This all works best if you a) use a high contrast color such as a neon green b) bring the object close for initial sampling (spacebar) and then c) pull the object back relatively far such as to reduce the overall footprint in the web camera display. I couldn’t figure out what to do with the web camera/color selection area once an initial selection had been made, so if you have any feedback, I’d very much welcome your thoughts. In general, I just found it easier to control the image (whatever has been recently loaded onto Flickr) if the web camera was still front and center.

Rotating display objects in Flash Player 10 is just like the standard rotation property we all know and enjoy using today, but there’s now rotationX and rotationY. The hard part is that you have to maintain the z-ordering yourself. I would expect that the community will be quick to pick up this shortcoming when the final release of Flash Player 10 (and related tooling) is available.

While its not an amazing new 3D library or game, my first little footsteps into Flash Player 10 have been really fun. Even my four year old daughter enjoys making the picture move with her hands - and her colorful toys laying around the house have made great test subjects. Not bad for an afternoon of work and the industry leading innovation of Flash Player 10! If you want the source code, I am making that available for download as usual.

<cfoutput>#CGI.REMOTE_ADDR#</cfoutput>

Simply getting the IP wasn’t enough for me though, and I wanted to provide some additional value. A quick search around the web landed me with several “geo IP” services that map an IP to a specific geography. Calling a web service from ColdFusion is a matter of using the CFINVOKE tag, specifying the URL to the WSDL of the web service, and the operation (called “method” in ColdFusion) on that service that you want to call. It’s also helpful to specify a return variable.

<cfinvoke returnvariable="geoip" webservice="http://www.webservicex.net/geoipservice.asmx?WSDL" method="GetGeoIP">
	<cfinvokeargument name="IPAddress" value="#CGI.REMOTE_ADDR#" />
</cfinvoke>

In the case of this geo-IP web service, you’ll get a few pieces of information back, most notable is the name of the country from which the IP originates and the respective country code. That’s three pieces of information to hand back, and since Flash does such an excellent job with XML, I chose to go that direction. I little fiddling with the data and I landed at a schema I like, into which I simply dumped the return values from the web service call.

<result>
	<ip><cfoutput>#geoip.getIP()#</cfoutput></ip>
    <country name="<cfoutput>#geoip.getCountryName()#</cfoutput>" code="<cfoutput>#geoip.getCountryCode()#</cfoutput>" />
</result>

I think there’s a tendency for this to get a little confusing. The above ColdFusion code builds a service that can be called by any client capable of handling XML as a result format. This little service itself however, actually leverages another web service. Let’s call it composite web services. That’s the great thing about web services; they open the door for you to mix and match the data in your own new and interesting ways. Who knows, somebody else may use this ColdFusion service in their own service, making the service chain nested three levels.

On to consuming this service from ActionScript. If you’re using Flex, this is an HTTPService call where HTTPService.resultFormat is E4X. Put a result handler on there as well, and you’re off to the races. Since this is really more about Flash in general however, I’m going to talk about using URLLoader, which is really what HTTPService uses under the covers.

To interact with this service, you instantiate a new URLLoader object, add the event listener for Event.COMPLETE, so you know when the data has been returned, and then call URLLoader.load() passing a URLRequest instance. The URLRequest instance contains the URL that acts as the endpoint for this service. While my little ColdFusion service here is public, I make no garuntees about it being around forever. If you like what I’ve done here, you should probably look to create a similar service on a server you control.

var loader:URLLoader = null;
 
loader = new URLLoader();
loader.addEventListener( Event.COMPLETE, doIPComplete );
loader.load( new URLRequest( IP_SERVICE ) );

When the results come back, the event handler that you specified on the URLLoader will be called. In this case, I know we’re dealing with XML, so I create a new XML object from the raw text string contained in the URLLoader.data property. From there I can use E4X to quickly access the pieces of data in which I am interested. Note that the root node is actually a given, and doesn’t need to be specified on the XML object. So rather than “result.result.country.@name” we can simply say “result.country.@name” where the first “result” is actually the variable name.

public function doIPComplete( event:Event ):void
{
	var loader:URLLoader = event.currentTarget as URLLoader;
	var result:XML = new XML( loader.data );
 
	ip.text = result.ip;
	country.text = result.country.@name;
	code.text = result.country.@code;			
}

It seems obvious that the next step would be to wrap this in it’s own class that can be easily reused. I’m lazy I guess then, because since this is but a few lines of code it barely seems worth the effort. Since JavaScript doesn’t have the ability to reach across domains, it would probably also make sense to provide a little script that could be included in HTML. If you build a JavaScript wrapper, let me know and I’ll put it up on the server as well. Or if you build an ActionScript class wrapper, let me know so I can help share your work. In the meantime, here’s the source code for both the ColdFusion part and the ActionScript application. An example application is also available for viewing.