The "$1 Recognizer" is a simple gesture recognition algorithm created by Andy Wilson from Microsoft Research and Jacob Wobbrock and Yang Li from the University of Washington.

By simple, I mean that it's under 100 lines of code that you can quickly add to your application to give it gesture recognition capabilities.

To enable novice programmers to incorporate gestures into their UI prototypes, we present a "$1 recognizer" that is easy, cheap, and usable almost anywhere in about 100 lines of code. In a study comparing our $1 recognizer, Dynamic Time Warping, and the Rubine classifier on user-supplied gestures, we found that $1 obtains over 97% accuracy with only 1 loaded template and 99% accuracy with 3+ loaded templates. These results were nearly identical to DTW and superior to Rubine.

It works by using a simple 4-step process, which basically amounts to:

1. Resampling the recorded path into a fixed number of points that are evenly spaced along the path
2. Rotating the path so that the first point is directly to the right of the path's center of mass
3. Scaling the path (non-uniformly) to a fixed height and width
4. For each reference path, calculating the average distance for the corresponding points in the input path. The path with the lowest average point distance is the match.

What's great is that the output of steps 1-3 is a reference path that can be added to the array of known gestures. This makes it extremely easy to give your application gesture support and create your own set of custom gestures, as you see fit.

Give the demo a try. I was pretty surprised at how accurate the results were, even with single-temple custom gestures that I quickly scribbled out.

$1 Gesture Recognizer - Examples and Source (Javascript, Actionscript, and C#)

Gestures without Libraries, Toolkits or Training:
A $1 Recognizer for User Interface Prototypes (PDF)

This whole setup is made pretty simple by Erik Sjodin's as3Glue library:

as3Glue is an ActionScript 3 library that enables communication between Flash/Flex/AIR applications and Arduino boards. It can together with one or several Arduino boards be used to monitor sensors (such as rotary encoders and motion detectors), control actuators (such as LEDs and motors) and interface other electronics (such as RFID readers) from Flash, Flex and AIR applications.

The library includes Arduino sketches and ActionScript 3 code examples as well as custom version of the Standard Firmata Arduino firmware and a serial proxy.

The AS3 portion of the library is released under the MIT license, and provides methods for setting pin modes and writing digital and analog data to pin output. It also provides event callbacks for receiving digital and analog data back from the device. The only wonky thing is that the proxy doesn't appear to be released in source form (as far as I can tell), and it's only provided as binaries for Windows and Mac users. On the bright side, it's pretty easy to digest what's happening from the Arduino.as file and the Standard Firmata protocol, so it wouldn't be a huge ordeal to cobble together your own proxy if you know a little C or PERL.

as3Glue - Arduino control from Flash, Flex and AIR
SimpleIO.as - a decent AS3 Arduino example
Firmata - host machine to microcontroller communication protocol

Pixlr is a simplified photo editor that runs right in your web browser. The interface is similar to Photoshop, though its tools are still a bit rudimentary. It's the pet project of Swedish web developer Ola Sevandersson, and is still fairly beta, but there are some things I really like about it. For one, the File->Open and File->Save menus show off how seamless file interaction on the web can actually be. The other cool thing is that the application has layer support, which is one of the basic requirements of any photo editor (but often not seen in online experiments). Missing are selection rotation and transformation, among other things, but hopefully this will continue to be developed into a substitute for the 99% of what most folks use desktop photo editors for.

Pixlr beta
One Man Photoshop: Pixlr is Slick

Google released a plug-in, currently for Windows browsers only, that allows you to embed the Earth application inside the browser. Existing Google Maps mashups can use some of the functionality right away just by adding the G_SATELLITE_3D_MAP map type. Even more exciting is that you can interact more deeply with the map—including camera angles, KML layers, and 3D models—right from Javascript. I'm so eager to go find a PC to play around with this that I'll let the video speak for itself.

Also worth noting is that Google just released an official Maps API for Flash AS3. Call me a fanboy, but I think my head is spinning.

Google Earth API
Some Example Applications
Maps API for Flash

I haven't done any coding in Flex yet, but I came across this howto today that illustrates how simple it is to pull in a Flash SWF that has an embedded font and use it within the Flex application. Embedding the bold, italic, and bold-italic sets for a font allows you to use the standard <b> and <i> tags in an htmlText element that is using the embedded font.

As an aside, it appears that Flex even allows you to do a rotation on the text even when it's not using a standard system font. This is something that was a total pain with embedded fonts in Flash/AS2, requiring rendering the text on the fly as a bitmap and then rotating the bitmap version. Major headache.

I'm pretty excited to see that text effects like this have become so simple to achieve. Now, if only someone could figure out how to lighten the file size when you're trying to embed a traditional Chinese character set.

Embedding fonts from a Flash SWF file into a Flex application

What's killer is that Adobe's as3corelib addon library finally gives us some essential tools that have been sorely lacking, none the least of which is a client side JPEG encoder. With this, you can turn any drawable object like a sprite or a movieclip into a ByteArray holding the compressed JPEG data in just a few lines of code. It's as simple as this:

import com.adobe.images.JPGEncoder;

var clipbmp:BitmapData = new BitmapData (aclip.width, aclip.height);
clipbmp.draw(aclip);

var jpgEnc:JPGEncoder = new JPGEncoder(90);
var jpgbytes:ByteArray = jpgEnc.encode(clipbmp);


This turns the "aclip" sprite or movieclip into a rasterized, flattened, BitmapData object. The BitmapData is then run through the JPEG encoder with the quality setting of 90 and you're left with the raw JPEG-compressed image in a ByteArray object. The as3corelib also provides a PNG encoder, with which you can just use the static method PNGEncoder.encode(clipbmp).

This is perfect for saving a capture of user-generated artwork to the server. Just set the data member of a URLRequest object to the ByteArray and post it. For more detailed information on how to put all the pieces together, Henry Jones has a really thorough post of compressing JPEG data and pinging it off a server to force an image download.

Unfortunately, to trigger a JPEG download, you still need to post the image data up to a server script and have it echo it back to the browser. The difference now, though, is that you can do the compression on the client end, saving both server CPU time and the time to upload the image data. This means saving a large image is a few second process instead of taking a minute and a half.

Actionscript 3 Core Library (as3corelib)

I caught this self-referential tutorial on YouTube today which walks you through the basics of the YouTube API. It appears to be quite simple to develop Javascript or Flash applications that can control or interact with the YouTube player, or even completely reskin the interface.

What I didn't know until recently was that the API has provisions for allowing your application to upload videos and post comments. You can even authenticate users and allow them to interact with the YouTube backend through your private application. It looks like you can do just about everything programatically except remove the YouTube watermark on the video.

YouTube Developer's Guide
Developer API Blog

There's a good post on the O'Reilly Rich Internet Application blog about running Air under Linux on the EeePC:

Adobe recently released the first public alpha version of the AIR runtime for Linux on labs. This is great news! I felt compelled to "geek out" with it, and was able to get AIR running on an Asus EeePC, although with a few minor issues.

The Asus EeePC runs a derivative of Xandros with KDE, which is not a supported Linux distribution for AIR. I got it working with a little help from the Adobe forums, and I'm very excited about it. I have never gotten into Linux desktop application development, but I think that's could soon change.

There's a thread on the Adobe forums that has guidance for running Air on Linux machines. It's a simple matter of downloading the SDK and running your applications from the command line using the adl command like so:

~/AIR-SDK/bin/adl -nodebug ~/app/META-INF/AIR/application.xml ~/app

The AIR runtime for Linux release notes are pretty clear that this is still a pretty alpha product with some unfinished features, but it's something, and if you do a lot of AIR or traditional Flash development, this would be a cool way to include Linux as a build target for your next desktop application.

AIR + Linux + EeePC [via Lebon Bon Lebon]
Adobe AIR for Linux
Running AIR on Linux (Adobe forum)

Yahoo recently released an official AS3 API for Yahoo! Maps, which provides another option for Flash-based GIS applications. This adds to Mapquest's official AS3 API and a couple of partially-complete, open source AS2 APIs for Google Maps.

All of these services provide the traditional AJAX APIs, of course, and that's perfect for a lot of uses. By using Flash as the rendering engine, though, there are new options available for the developer. Things like incremental scaling between tile sets, map rotation, and more advanced multi-level vector and raster overlays immediately come to mind.

Yahoo! Maps for ActionScript 3.0 - Link
Google Maps Flash Interface - Link
MapQuest AS3 API - Link
UMap: Google Maps Flash Overlay (flash above above AJAX map) - Link

Quentin Lengelé put together a cool demo for a Flash application that uses the Papervision 3D library to pan around a 360 degree video while it's playing:

The idea was to apply the BitmapData of that movie on a GeoSphere.

The GeoSphere is made in 3DSMAX with flipped faces and exported in ASE Format.
The ASE Format is readable by Papervision3D.

Then you just need to draw your bitmapData into a texture you apply to the ASE in ActionScript.

I'd be really interested in seeing a DIY version of the 360 degree camera hardware. Has anyone taken something like this on?

360 Degree Video with PaperVision 3D - [via] Link

On the Javascript side, Adomas Paltanavicius has put together a thorough overview and some example code for making this work in your application. You can capture wheel scroll events in IE, Safari, Firefox and Opera.

For Flash, you need to do some Javascript to Flash communication to capture mouse events on the Javascript side, and then make the data available from within the running Flash application. The SWFMacMouseWheel library provides the necessary glue to do all of this, bundling the Javascript listener code and an Actionscript event object into an easy to use package.

Mouse wheel programming in JavaScript - Link
SWFMacMouseWheel: use the mouse wheel in Flash - Link

MakeFan: wrote in to remind us that those cute little Chumby devices are for sale now. The best thing about the little wireless touchscreen appliance is that they were designed to be open and hackable. The underlying operating system is Linux, and there are a number of lower level OS hacks, but you can also pretty easily whip up slick "widget" applications as well, since the Chumby's normal mode of operation is to play Flash Lite 3 applications.

The Chumby developer wiki has source for a number of sample widget applications that will help you get started if you're new to Flash. If you're a seasoned pro, Flash Lite 3 isn't all that different from developing in standard Flash / AS2. You just need to avoid a few features like bitmap caching, and lay off CPU and graphics intensive code.

If you're interested in developing for the Chumby community, but don't have a device, you can make an account on the chumby.com site. After logging in, you can upload your widgets to a "Virtual Chumby" and see how they would run on the device.

Resources:
Chumby Flash development overview - Link
Chumby Flash development forum - Link
Widget development Wiki - Link

Constants are not inherent in actionscript 2.0. The closest one could get is to make something private, and globally accessible. However, this doesn't ameliorate the problem, since the variable could still easily be changed, and the notion of it being a constant crushed.

I've found a very easy way to simulate constants. After looking around, I've found no one else that has suggested and/or used this method.

The first step is to create a static class, and define a private variable with the value one would like to store. The next step is to add a public function that returns the aforementioned private variable. Naming the function identical to the private variable (all in caps), is a great and easy way to access the constant.


static class ConstantVars {
  private var ARRAY_SIZE = 12;

  public function ARRAY_SIZE() {
    return ARRAY_SIZE;
  }
}


So now, one can use ConstantVars.ARRAY_SIZE() to access the constant, with no way to change or get rid of it. I've also found that naming the class something simple, like "Const" will make everything even more quick and simple.

This works, but I think we can even do one better.

By using a static "getter" method, you can retrieve enforced constant value and you don't need to use a function's normal parenthesis notation to access it. You can use this in a more global static "Const" class as Edgar describes for more global variables. Alternatively, you can encapsulate the static constant in any normal class, which is handy if the constant is relevant to a particular class (instead of just a global const variable).

As an example, let's say you had a class that authenticates a user. It's not a static class. It has some member variables and a few methods that deal with authenticating and storing a user's credentials. It also has a few message strings that are relevant to the authentication process, which you may want available to other parts of the application, but you want to make sure these strings are constants and aren't accidentally changed at runtime:


class Authentication {
  private var guid;
  private var username;
  private var password;
  private var server;

  public function Authentication( server, username, password ) {
    ...
  }
  public function authenticate():String {
    //Performs the authentication and returns one of the constant error strings
  }
  ...
}


Now code inside your Authentication class can refer to NOSUCHUSER_MSG directly, and code external to the class can access the constant values in a simple manner like Authentication.SERVERERROR_MSG. In this scenario, this could be pretty useful, because the Authentication class can pass success/error information around and external classes can know what the text means, even if it's changed in another translation. Another class could do something like the following to authenticate a user:


Authentication userauth = new Authentication( servername, user, pass );
var result = userauth.authenticate();
if ( result != Authentication.SUCCESS_MSG )
{
  displayError( result );
}


This is a really simplified example--and there is probably a better example that didn't immediately come to mind--but you get the idea. Real constants are supported in Actionscript 3.0 using the const syntax, but if you're working on an AS2 project, there's still a solution for you that will give you the same effect.

Only Two Cross-Browser Web Fonts
If you want to choose fonts that will look similar across most modern browsers you have two choices: Georgia and Verdana. Yeah, there are a few other fonts, such as Times, Arial, Helvetica, etc., that are available on all platforms, but they tend to look really nice on one platform and really crappy in another. Or they look nice in both, but the kerning or the letter height will be different for the exact same font size.

The web is a boring, two-font world.

Here's the thing though. Georgia and Verdana are really decent screen fonts. For large blocks of body copy, they provide you with a very respectable serif and sans-serif font option. When it comes to titles or navigational elements, however, you often want something that will stand out from the rest of the copy on your page.

Fonts in GIFs: The Old Way
The typical solution is to create your titles and nav buttons in Photoshop, then cut GIF images for placement in the web page. This lets you use any font face you desire, ensures that things look exactly the same in all browsers, and takes an extraordinary amount of extra effort.

If you want to put slick looking titles on your blog posts, this method will probably have you in a big white coat with extra long sleeves before a month is up. Even worse—hey, some of us look good in white—if you're using images for navigation or titles, the text isn't selectable, it isn't search friendly, and it's probably a nuisance for people who use screen readers to navigate your site.

sIFR: The Better Way
sIFR is a little Flash/CSS/Javascript hack created by Shaun Inman and maintained by Mike Davidson and Mark Wubben. It uses Flash's font-embedding and rendering capabilities to place whatever typography you like in your site. What makes it different from the GIF method is that you develop your site with plain-ol' HTML, apply normal CSS classes, and if your browser supports Javascript and Flash, sIFR replaces the text on page-load with the desired typeface.

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

1. A normal (X)HTML page is loaded into the browser.
2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
3. If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".
4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

Essentially, you can have the titles on your site render in any font you like by just adding a few lines of Javascript to the page template. Search engines and screen readers will still see normal HTML text, you can still use traditional fonts in your CSS classes so that it degrades gracefully on unsupported browsers, and the other 95% of browsers out there will render your site exactly as you designed it, regardless of platform. Oh, and you can select your fancy text too.

Seriously? Flash can used to improve web design _and_ promote web standards, accessibility, and indexability... This has been available for a couple of years, but I'm still left scratching my head.

Links:
Rich Accessible Typography for the Masses - Link
Download sIFR - Link
sIFR Wiki Documentation - Link
sIFR Example Page - Link

For those of you who didn't catch our previous post about seam carving, it's a smart image resizing algorithm, invented by Dr. Ariel Shamir and Dr. Shai Avidan. Where you would normally have to choose between cropping or squeezing/stretching an image to change its aspect ratio, the seam carving method will attempt to find horizontal or vertical paths within the image that can be removed without altering "important" parts of the image, such as people or other objects that would look funny if squished.

There are now a couple of open source Actionscript implementations as well as a GIMP plugin that enable you to "liquid rescale" your photos.

I'm thinking that with a few simple tweaks, you could hack one of the Flash versions load a user-specified JPG or PNG and provide an interface for adjusting the image. It'd just be a simple matter of doing a screen capture to pull the result back into the image editor of your choice.

There's also a Photoshop plugin that claims to do this, but it's closed source, unavailable for macs, and the test version doesn't work for images larger than 640x480. To that I say, "Phtfphpht," but I've included a link in case you are interested. To be fair, it's probably cool... I'm just more excited to see the open source versions surfacing.

References:
GIMP Liquid Rescale (lqr) plugin - Link
Content-aware image resizing in Actionscript (Joa Ebert's original source) - Link
Seam carving in Actionscript (Mario Klingemann's optimizations) - Link
Pictual: Photoshop plugin for smart resizing - Link
Seam carving: content-aware image resizing - Link

Quasimondo came up with a really clever hack that solves the problem. You can create a second flash movie and use Javascript to resize it to specific widths for particular keycodes. Even though Flash cannot detect the keycodes, it does receive an onResize event. When it receives this event, it then retrieves its current width, which was set to the value of the keycode. This second swf file can then use Flash's LocalConnection to communicate that value to the primary swf.

How to Make the Wiimote Work in Flash - Link
Aral Balkan's discussion on using the Wiimote in Flash - Link
Wiimote Key Codes @ WiiNintendo - Link

Understatement: Joshua Davis creates some really incredible artwork in Flash.

By combining vector primitives, a carefully chosen color pallete, some deterministic rules, and pinch of random(), the images are generated in Actionscript at runtime. Each time the software is executed, a unique image is created, though it maintains the same guiding principles of other iterations of the same series.

You can download the source for a number of very discrete examples. Tweak and experiment with his code. It's a nice set of building blocks for creating your own dynamic artwork.

Dynamic Abstraction: examples and source code - Link
Joshua Davis' blog - Link

Resources:

• Mii Editor
• Wiimote data transfer library (includes MiiTransfer utility)
• Detailed info on the Mii data format
• My Mii

Thankfully, last December Adobe released free end-user Flash Lite 2.1 installers for both Symbian series 60 and Windows Mobile platforms. So if you don't have the most recent hardware, you can perform a quick upgrade and extend the usable life of your device. For thos of you who are interested in developing Flash apps for devices, Adobe's dev center also has some decent starter howtos on the subject.

I'd love to get your opinions on mobile development. So if you have any thoughts on the subject or know of any good open source tools, guides or resources, please share them in the comments!

References:

• Flash Lite 2.1 for Windows Mobile
• Flash Lite for Nokia/Symbian S60
• Adobe's Flash Lite dev center

There are a few different ways to get at the FLV file that the video player application is downloading. Safari users can use the Window->Activities feature to locate and download flv files as they are playing, and Joshua Kinberg put together a couple nice Greasemonkey scripts for Firefox that make downloading pretty simple.

I was looking for an easy solution that works cross-browser, and this is what's working for me: 2 javascript URLs, based on the original code from Joshua's Greasemonkey scripts, that you can add to your bookmarks list.

Google Video Download Bookmark (right-click, copy address and save to bookmarks)
Download Google Video

Youtube Download Bookmark (right-click, copy address and save to bookmarks)
Download Youtube Video

Don't click on those URLs here. Just get them into your browser's bookmarks. The next time you are watching a video on Google Video or Youtube, you can click the appropriate bookmark and a window will pop up that will begin downloading the FLV! The Youtube file will be named "get_video" after it is downloaded. Just rename it and add a ".flv" extension and you should be in good shape.

Related:

• VLC - Video Lan Client (plays flvs nicely and it's cross-platform)
• Youtube and Google Video Greasemonkey scripts for Firefox