Recently, a port of OpenCV, a library of object detection functions, was created for AS3 which has sparked a lot of interest and creativity in the flash and flex community. Stemming from this came facial recognition for AS3.

It is often difficult to find useful applications for these new technologies. Luckily, BKWLD was recently approached by .net magazine and was asked to write 2 articles. Jeff Toll, who’s article can be seen in this month’s issue, worked with me to come up with a design for a facial recognition application that will be featured in an upcoming issue of .net magazine. Together we came up with an idea for a virtual window, where the users can essentially fly through a 3D flickr gallery.

For the true experience you can visit the following link (you must have a web cam): http://bkwld.com/headtracking/. If you do not have a web cam, I have uploaded a demo video onto Vimeo at the following link: http://vimeo.com/7092048.

Here is the source if your feeling adventurous.
HeadTracking.zip

There are a couple things to note about the source code. First, this was developed using flex, so if you want use it in flash you will have to set HeadTracking.as as your document class. Second, I did not leave my Flickr API key in the source for obvious reasons. So, you will have to apply for a Flickr API key if you don’t already have one and enter it in the init function of the HeadTracking.as class file where it says “Enter your API key here”. If you find any errors in the source code be sure to yell at me in comments.

The following resources were used:
http://www.squidder.com/2009/02/26/realtime-face-detection-in-flash/
http://www.quasimondo.com/archives/000687.php
http://www.youtube.com/watch?v=Jd3-eiid-Uw

I don’t often batch import layered files (PSD, PNG) into Flash or even copy graphics into it.  But what I DO find really handy is copying text between the apps.  This worked in CS3 but it’s gotten better (more accurate) in CS4.  You can copy a whole group in and the font, size, and color are all maintained (or close enough, you usually have to nudge line height).  This saves tons of time when you’re populating a whole FLA from a text heavy design while keeping the text editable for the inevitable copy change.  Notice in this video how I can bring in multiple text boxes at a time.

ActionScript is awesome, but developing with it can be tedious. I have compiled a list of 10 resources that I use on a daily basis to help speed up development. I have purposely not included any animation, 3D or physics frameworks because there are far too many to include in a top ten list. If you have any that I didn’t include, feel free to post them. So here we go, listed in no specific order.

Monster Debugger
I’m loving this new debugger. It’s very easy to include in your code and it even has live editing! Moving that sprite over a couple pixels has never been easier.

Degrafa
I’ve been using this a lot lately. If you are doing any skinning in Flex you’re crazy if you aren’t using Degrafa.

Actionscript 3.0 TextMate Bundle
Here at BKWLD we LOVE TextMate. Although I still use Flex while developing with the Flex framework, I use TextMate for all of my Flash projects. The AS3 bundle makes Flash Development a breeze. Imagine being able to create a class file with the constructor, package declaration and custom class comments already there. At BKWLD we have taken it a step further by creating a huge list of custom snippets and templates that work with our AS3 library.

Pure MVC
While there are many great AS3 frameworks out there, this one is my choice. There are better solutions out there as far as frameworks for Flex development go, but the beauty about Pure MVC is that it is compatible with both Flash and Flex.

Flash Tracer
I use this thing all the time! It’s a Firefox add on that enables you to see all the output generated by any running flash swf, even the ones in your browser. It works great for debugging live content. Also, you get to see all the curse words that other developers have “accidentally” left in their trace calls.

Firefox Web Developer Toolbar
Every web developer who uses Firefox should have this. I mainly use it to test various screen sizes with liquid flash layouts.

Flash Player 10 Debugger
An absolute must have for any flash developer. Make sure you have the debugger version and not just the regular flash player.

Tour de Flex
This is really nice Flex component inspector that also allows you to quickly view the documentation of any component you are looking at.

Losum Ipsum Widget
Quick, randomly generated lines of lorum ispum text.

SQLite Admin
A quick and simple tool that allows you to view the structure of any SQLite database and execute queries. This is a great tool for anyone who is developing for AIR.

Visual effects studio OOOii was given the opportunity to create the visual interfaces for JJ Abrams new Star Trek movie. Typically, this is all done in post production and the actors have to pretend they are interacting with a super computer from the future. However, with the power of Flash and AIR, OOOii created numerous interfaces allowing the actors to interact in real time with actual working applications during many of the films scenes. Read more about it on Lee Brimelow’s Flash Blog.

I ran into an issue today with Flash and targeting the div wrapper (when using SWFObject). Basically, there seems to be a bug in Firefox (and possibly other browsers) that causes the applet to reload when changing its display state. I found that instead of using

document.getElementById('flash_div').style.display = 'none';

that by using an explicit dimension you can achieve the same result without restarting the applet:

document.getElementById('flash_div').style.height = '0px';

Not sure if Firefox 3 addresses this. I’m guessing it does.

EDIT
ARGH. Setting the height to 0 definitely hides it, but little pieces of the flash are still active. Guess it’s an official “bug.”

After recently launching a flash site developed in AS3, a stupid, stupid bug appeared that caused a slight amount of brain trauma. In InternetExplorer 6 the site loaded, and worked fine. But when you would navigate elsewhere and come back to the site, everything was all screwy. The alignment was off and the site wouldn’t initialize. Clear your cache, reload and everything was perfect. So, obviously its a cache problem, and it only occurred in IE6.

Here’s how I had my project set up:

Read the rest of this entry »

So, my thanksgiving break consisted of 4 days of leftovers and HBO On Demand. I also decided to make this nice little thingy. I have been talking about the new SoundMixer class introduced in AS3 for some time now, but I never utilized it. Well, I decided to create an equalizer using the new SoundMixer, Graphics and ByteArray classes introduced in AS3. It’s not too hard and can be implemented in soooo many ways.
http://www.maxrox.com/expirements/equalizer/
Source Code

Taking it one step further, I decided to include a little papervision3d magic. The result ended up looking very cool. It didn’t require an insane amount of code and runs fairly smooth.
http://www.maxrox.com/expirements/3dequalizer/
Source Code

Working with ActionScript 3, we’re finding plenty of bugs that others have found and have experienced some intermittent crashing due to garbage fonts, but yesterday we had a doosy that lasted all day. The site was running fine and frame-rates were great, but we could pretty consistently crash (or at best get a spinning color wheel on ) any browser (safari, firefox, ie 6 + 7, mac, windows) when you closed the window containing the flash movie (closing the browser window with a hot key or clicking the close button). We started by removing all our code; first papervision code, then removing the content that was being displayed, then all embedded fonts … it was pretty stripped down. It was not until the content was removed that the browser crashes subsided. So, we started googling the hell out of “flash player 9 crashes closing window” and randomly came across this post where user nikonratm noted the following:

Tweening the position of a TextField that has a mask, as soon as I close the movie window the program crashes, whether it be in the Flash (CS3) IDE or in a browser.

This was the first instance we had found where the crash was specific to closing the window. So, we went through and removed all masking and no crashes. We then added each mask back and tested and got to a point where we slimmed down the crash culprit as a directly masked text field that had a TextFormat applied to it (also it had embedded fonts, not sure if that had anything to do with it), i.e. a TextField that had a mask applied to it and not a DisplayObject containing a text field with a mask appled to the DisplayObject. You always had to put text inside MovieClips to dynamically mask in AS2 so it seems that either the implementation is faulty in AS3 or just moving or changing the text after it has been masked causes some kind of memory leak (which causes the browser to crash on close). Something like this:

var titleMasked:TextField = new TextField();
titleMasked.mask = gradient;

Perhaps a fix would be to put the text inside a sprite (at this point, I’ve spent so much time I’m not bothering to test it):

var titleSprite:Sprite = new Sprite;
var titleMasked:TextField = new TextField();
titleSprite.addChild(titleMasked);
titleSprite.mask = gradient;

To fix some of these issues, Adobe seems to think downgrading to flash player 8 is a good idea. Should we also go back to AS2 while this is resolved? I’m ready to after yesterday. Their solutions to bugs leave something to be desired. For example, one of their comments regarded the Loader classe’s inability to close streams when uploaded:

You cannot expect an “unloaded” movie to close its net streams automatically.

Well, it may not close the stream automatically, but if you create method called “unload,” I’m going to have the expectation that it’ll unload something. Perhaps there’s an undocumented unloadAndCloseStreamAutomatically.

My doppleganger posted this bitrate calculator for making FLVs. We should refer to this in the future for telling people what to set their compression settings to, instead of my usual “uhhh 400kbs?”

Noticed today that there is no onReleaseOutside in AS3 and events don’t fire when your mouse isn’t on the displayObject. Senocular, as usual, has the answer.