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.

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!

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!

So we here at squidder have been playing around with the FLARToolKit a lot recently. Pretty amazing stuff really. And while fooling around with it, something (perhaps obvious) occurred to us: We love flash. And we also love t-shirts. And Papervision. And Twitter.

And, suddenly, we had a way to combine them all together.

Below is an early technical demo, in which a barcode, containing a twitter username, is embedded within our FLAR pattern. This is important because you don’t need to create a new pattern for each username. Instead, the flash reads the person’s username (up to 8 characters, encoded in 6 bit chunks) and then pulls that person’s latest post from twitter. 

The source code is a mess, but we’ll be posting some more how-to details soon. In the meantime, enjoy the video demo below!

Update: YouTube drools, Vimeo rules.

Update: Fixed a minor bug when dealing with transparent sources.

Everyone loves pixel bender and everyone loves those apple-like reflections. So why not combine them? That’s why we’ve gone ahead and created a very simple pixel bender filter for creating just this effect, even on video (and it looks especially good on video).

Source code and download after the jump.

Here is the pbk source code for the filter:

kernel ReflectionFilter
<
   namespace : "com.squidder";
   vendor : "Jon Reiling / Squidder.com";
   version : 1;
   description : "Filter for creating an apple-like reflection.";
>
{
   input image4 src;
   output pixel4 dst;

      if ( coord[ 1 ] < imageheight ) {
         dst = sampleNearest(src, coord );
      } else {
         float alpha = 1.0 - ( coord[ 1 ] - imageheight ) / fadeheight;
         coord[ 1 ] = imageheight - ( coord[ 1 ] - imageheight );
         dst = sampleNearest( src, coord );
         alpha *= fadealpha;
         dst.a *= alpha;
         dst.r *= alpha;
         dst.b *= alpha;
         dst.g *= alpha;
      }
   }
}


 
As you may be able to tell, there are two unfortunate aspects to this filter. The first is that you have to manually pass in the height of the image. I have yet to figure out how to get the overall height of the image being passed in — if anyone knows, please hit us up in the comments!

Secondly, if you try this out, you’ll see that the reflection actually overwrites the bottom part of the source image. This is because, as far as I can tell, you can’t add height to your output. So to counter this, you’ll need to artificially add height to your target clip. You can do this easily by adding a transparent shape the height of your reflection. Again, if you have any notions on this, please drop a comment.

Finally, here is the flash code to read in and apply the filter:


var reflectionHeight : int = 50;

   var filter : ShaderFilter = new ShaderFilter( shader );
   target.filters = [ filter ];
}

Download the source files.

Whew! It’s been a busy few months for your friends over at squidder. But to make up for the fact that we have been totally delinquent bloggers, we bring you Bumblebee.

What is Bumblebee, you ask? It’s a program born out of many many projects where the client has sent us excel documents and we’ve had to either move it to xml by hand or try to wrap our heads around the excel xml mapping scheme (spoiler: it sucks).

So we went ahead and wrote our own mapping program that uses simple templates to map values from an excel xml file to your own xml file.

We’ve love to hear if it helped you at out or if you have any suggestions, bugs or feature requests for future versions. Hit us up at bumblebee at squidder dawt com.

Enjoy responsibly!

We at squidder often talk about the best way to bring SEO and accessibility to our flash work. And in many ways, the work is simple when you add in fancy tools like SWFObject — just spit out the content you want to appear to a search engine in the div that gets overwritten!

But what if you’ve got an extremely complex site, with many sections, pages and drill downs that you want to make accessible? One option is to simply spit out all the content, no matter how long, into that same div. Yes, that will get indexed by search engines, but not only does it make the page you’re loading very large, it also doesn’t link users directly to the content they searched for.

That’s where SWFAddress and mod_rewrite come in. Full deets after the jump.

Let’s look at our tools:

SWFAddress, as you may know, is an OUTRAGEOUSLY awesome javascript tool that works in tandem with SWFObject to allow for deep linking and use of the back/forward buttons in the browser.

mod_rewrite is an apache module that basically lets you parse out elements of a url as variables instead of the folder structure that they appear to be.

So let’s put them together.

Let’s say you’ve got a flash application set up for selling music. There is conceivably a huge amount of information that you would want to make available to search engines, but there’s no way you could output all the information on one page.

Instead, you set up a “fake” directory structure using mod_rewrite that might look like this:

yourmusicapp.com/alternative/wolf_parade/apologies_to_the_queen_mary/

So everything after the first “/” is parsed and used to return an html page with the track listing and album info for Wolf Parade’s album “Apologies To The Queen Mary”.

Similarly, if you went to “/alternative/work_parade/”, you would get html of links to all of Wolf Parade’s albums and a description for the band. Go futher down to just “/alternative/” and you’d get links to all the alternative artists and if you just went to “/” you’d get a links to all the genres.

So now we’ve set up a structure that can easily be indexed. But now how does that allow us to get into the flash?

If we call the above links “hard urls”, then “soft urls” would be urls that you pass into SWFAddress for deep linking — basically anything that occurs after the “#”. So the soft url of the example above would be:

yourmusicapp.com/#/alternative/wolf_parade/apologies_to_the_queen_mary/

The flash is then set up as such that when it receives the value above from SWFAddress that it automatically goes to the album view for “Apologies To The Queen Mary”.

Now the final step: using javascript, you can automatically forward users with flash who are led to the “hard urls” to the the “soft urls”. So someone who searches for “Wolf Parade” in google would get back:

yourmusicapp.com/aternative/wolf_parade/

If the viewer is a search engine, they’ll be stopped here and just index the information about wolf parade. But if its a viewer with flash installed, they’ll be seamlessly redirected to the flash application:

yourmusicapp.com/#/alternative/wolf_parade/

Conclusion

Our next step is to get a public example of this for people to take a gander through. SEO solutions of this caliber for flash are great for both developers and agencies as it lets us alleviate some fears that clients may put up to going with flash. It’s not for every project — you’ll probably need control of the back end development as well as the front end — but when you find the right one, you’ll know it.

Also, keep in mind that you don’t actually need mod_rewrite to pursue a solution like this – you could generate the hard urls as actual html files instead of generating them on the fly, which, if your music store was getting a ton of traffic, might be a better plan anyway. The important thing is coming up with a url structure that is mirrored in the both the hard urls and the soft urls.

Finally: if you haven’t heard “Apologies To The Queen Mary”, do yourself a favor and get it. I’m not going to say that if you listen to it backwards while reading this post, you’ll find a super secret message… but you never know.