Font embedding in flash can be a total drag, so we’ve been working on an OS X application to do all the heavy lifting in creating font swfs. And we just said a ton about it already on the FontSWFCreator page and we’re tired of  [witty remark] so just check out the full details here.

Wow. It’s hard to believe that it’s been over three months since we last pulled ourselves out of our actionscript induced stupor and posted to this blog. It’s been one heck of an augmented reality hangover.

But besides bringing sexy back, a lot of cool stuff has happened in squidder land:

For one, we’re coming out of the closet. That’s right: we’re all proud creative developers at the Washington, DC office of AKQA. We’re going to start talking a little more openly about our daily office work, so hopefully that means more interesting topics for you to read and more funny pictures for us to make.

And while we certainly don’t speak for the whole company when we post here (there are many other, far more talented developers who work in our offices all over the world who probably don’t want their good names tarnished by pictures of unicorns and Star Trek: TNG references), we do feel confident in saying that we’re the best looking flash devs this side of tellTarget.

For two, we launched a most excellent AR campaign for USPS, call the Virtual Box Simulator. It’s been getting some very nice attention and we’re proud to have found something useful to do with all of our experiments here.

Three: We got picked up both by Adobe in Japan and and PAGE in Germany. We sure fooled them.

Four: This guy played our drums with his face. This is why we get up in the morning.

Anyway, we’ve learned some good lessons in the past three months, but we have to clean out the 4,525 spam comments that we received since we last logged into WordPress. After that, we’ll be in the sharing mood, so watch this space.

Log this one in the “Totally out there” bin. Also in the “doesn’t really work, but shows off a cool notion that could probably be done if we were smarter and weren’t using an underpowered web plugin” bin. And the “Big Brother / 1984″ bin.

Inspired by the love our Augmented Reality Twitter Shirt recieved and our recent foray into face detection, we decided to put the two together. At the moment, the script doesn’t detect a specific person — that’s where the (kind of) comes into play. But imagine associating specific faces with twitter (or “face”book… …. sorry) usernames and you’ve suddenly combined the power social networking with video monitoring that would make the Brit’s CCTV system cry like it just got relegated to League Two.

However, it’s easy to check and see if the person has an iSight installed and, if so, automatically choose that one.

var index : int = 0;

for ( var i : int = 0 ; i < Camera.names.length ; i++ ) {

_webcam = Camera.getCamera( String( index ) );

Voilà. You’re now covered for mac users and windows users won’t notice a thing.

UPDATE: We’re be remiss not to also point you to Eric’s excellent FLARManager class. He took some of the stuff we’ve covered here and put a far more delicious topping on it.

One of the big things we’ve been wrasslin’ with recently here at Squidder is how to handle multiple instances of multiple markers using FLARToolKit. Well we haven’t totally nailed it — close, but there are still a few niggling issues. So we’re looking to you, dear Squiddite, to help us out.

Before reading on, you can get our source code here.

It contains all the libraries (FLARToolKit, Papervision, even some of our own) you need to get going, even if this your first FLAR project. It’s as simple as extending a single class, creating an array of the markers you want to load in, and rocking and rolling. It also works great even if you’re only dealing with a single symbol.

Read on for more thrilling details!

Anyway, what we’ve done is created our own version of FLARMultiMakerDetector that tries to maintain a consistent array of all the markers on the screen. So when a new marker is added, FLARSquidderMarkerDetector fires off a MARKER_ADDED event, which contains the id your marker (the order in which was loaded in — so the first marker has an id of 0) and the index (first marker on the screen, second, etc).  Conversely, when an object is removed, a MARKER_REMOVED event is fired. So this brings things a bit more in line with the type of event driven actionscript that we’re used to writing.

The problem that we haven’t quite gotten our brains around is how to make sure that we always have the correct index when multiple instances of the same marker is added. Here’s an example: You have three instances of Marker A on the screen. How do you know which one specifically is the one removed?

Currently, this isn’t a visible issue, since the other two markers will just “snap” instantly into place. But try tweening an object to its next location and you’ll see things start to flip flop between symbols.

Once again, feel free to grab our source code and let us know what you think!

Before we start this post, we ask that all non-nerds leave the room. Seriously, it’s for your own good.

Alright, now that we’re alone, let’s get down to business. When we first started messing with FLARToolkit, we were confused as hell about how to create our own markers, as were many other people we came across in our augmented reality induced travels. So now that we’ve got a grasp on it, let’s break it down so that future Magellans of the internet won’t make that stop in the Philippines.

First thing you need is the ARToolkit Marker Generator, which is graciously available online, for free, and looks like this:

Step 1: Create your pattern image.

First thing you need is your custom marker image. We’ve found that the easiest way to do a marker image is to make a 256×256 block in photoshop, like the one below. You can save it out as either a gif or png for best results. Also, keep in mind the generator won’t read images that are too large, so stick to marker images that are less than 300×300.

A few things to note: the symbol cannot be symmetrical either horizontally or vertically. This is important so the code can tell which direction is “up”, “left”, etc. Also, your marker image should be fairly simple, or at least not too finely detailed (looking at you, Prince fan). Anything too elaborate and FLARToolkit has trouble reading it from far away.

Step 2: Upload your pattern image into the generator.

Now, you can get your marker image into the generator a few ways. The first is to print it out and capture it using your webcam (the default way). But in our opinion, the best thing to do is hit the drop down under “Mode Select” and choose “Load Marker Image”. Choose your marker image and you’re good to go.

Step 3: Select your marker resolution.

If you select the drop down under “Marker Segments:”, you’ll see options for “4×4, 8×8, 16×16, 32×32 , 64×64″. This is basically the resolution of your actual marker pattern file. The simpler your marker, the lower your resolution can be. 16×16 has worked well for us for all but the most detailed markers. Ideally, you want the lowest resolution possible — this increases the likelihood that the FLARToolkit will be able to pick out your pattern from a distance.

You should also be able to tell in the preview window if things are looking too crunchy — if you can’t distinguish the marker, the computer won’t be able to either.

Step 4: Select the marker size.

This was perhaps the most confusing part for us at first. Marker size is the percentage of your marker image that the actual pattern takes up. So in our example above, the area that we use for our unique markings is 50% of the overall width and height of the marker image:

Again, this is one of those things that you’ll be able to double check in the “Preview Marker” window.

Step 5: Preview and save your pattern.

Once you’ve set the segments and size of your marker, go ahead and hit “Get Pattern”. You should see the central part of your marker image appear, according to the marker size (so in the example above, we only see what’s within the red lines). When you’re happy with this, go ahead and hit “save” and put the “.pat” file wherever you like.

A tip of advice: When saving your pattern, make sure to put both the number of segments and the size of your marker into the file name, e.g. “marker16_50.pat”. When you’re testing multiple markers, or tweaking settings for the best results, this will come in handy for our next part:

Step 6: Set up the FLARCode properly in actionscript:

Now that you’ve got your custom marker pattern saved down, let’s be sure you’re set for success in the actionscript.

new FLARCode( i_width:int , i_height:int , i_markerPercentWidth:uint = 50 , i_markerPercentHeight:uint = 50 );

This is the actionscript to create a new FLARCode. If you’re using the FLARToolkit starter kit, this will already be set up for you.

Now in order for your pattern to be properly detected, the values passed into FLARCode must match the segment and size values you set when making the pattern. So for our example above, the proper constructur would look like this:

new FLARCode( 16 , 16 , 50 , 50 );

But if you chose “32×32″ for your segements and a size of 80, your constructor would be:

new FLARCode( 32 , 32 , 80 , 80 );

One final detail.

Once you’ve got your markers loaded in and set up properly, you’ll notice that there’s a 3rd variable called “i_marker_width” in the constructor for FLARSingleMarkerDetector. This represents the physical size of your marker when printed out, measured in millimeters.

So if your pattern is 80mm x 80mm when printed, that means if you create a papervision plane that’s 80w x 80h, it will match the pattern exactly. While the physical dimensions won’t actually change the way your papervision object looks, it is important when making sure the paperversion world mirrors the physical world as close as possible. See the comments below for more details. [Thanks makc]

WHEW

So that’s about it, at least to our understanding. If you have any other advice or hints, please drop them like they are hot in the comments below.

This actually came about as a happy little accident while trying to bend FLARToolkit to our will (tracking multiple instances of multiple symbols – a total pain in the ass. But that’s a story for another time). It just so happened that we were rocking out to Kiss’ “God Gave Rock & Roll To You” and it suddenly occurred to us that “Hey, it wouldn’t be so hard to make these things make sounds when they disappear.” So we did. And it was awesome.

We’ve (for once) posted a usable demo, so you too can rock out at your desk. Below is a quick video demo of all four sounds and after the break, you can see the demo of using multiple instances of the same drum.

A couple of days ago we came across the AS3 library Marilena which is based off the Object Detection from the C library OpenCV. It’s an object detection library which is able to process an image and search for a particular type of object with a set of features. In this case it’s looking for faces (was provided with the library). See more about how it works here.

The input images are driven from the webcam. We added confidence and motion monitoring for the purpose of “snapping” a photo.

Check out the video below or try out the demo.

Update 3.3.09: We’ve gotten a few requests for code examples using this technology and who are we to say no? Grab the source here.

We couldn’t help it. The XBOX Controller wasn’t enough. Had to hook it up to a wiimote too (big nod to the guys over at the WiiFlash project).

It’s no secret that we’re obsessed with augmented reality. Using this fantastic car demo whipped up by John Lindquist over at pv3d.org, we added in some FLARToolkit love to create a cool experience of driving the car around on a table.

But we didn’t stop there. Using the mind blowing-ly good ControllerMate and some simple keyboard mapping classes, we hooked the car up to a wired xbox 360 controller for maximum nerd. Next step, get some shaders going on that sweet Ford Focus. Ah, we couldn’t resist, so we added a shader.

UPDATE: YouTube was being unhappy with our videos for some reason (we suspect it doesn’t get along with Snapz, but who knows), so we’re moving over to Vimeo. We’ve also updated our demo video here, too, to include a slight shadow under the car, as well as part where the car does it’s business without the flar symbol present. Enjoy!