Machines are looking for Michael Jackson

Today passes my 5th year of living and working in the UK... feeling in sort of a nostalgic/festive mood, did some cool VJing last nite and decided to spend semi-hangovery afternoon doing some (softcore) flashcoding. I got some good feedback and suggestions (thanks you know who) to my recent Terminator Salvation "machine vision" experiment and decided to explore that area a bit further.

This time I've managed to add "the real face tracking" ported from OpenCV by Masakazu "Mash" Ohtsuka (with some great optimizations by Quasimondo) to my video processing framework (codename HiSlope) which should be hopefully released within a couple of weeks (still need to do some important/major refactoring). Follow me on twitter.com/blog2t for updates.

So I was looking for some perfect video to use for testing... couldn't think of anything really. Then suddenly the spirit of Michael Jackson (RIP) came to me and whispered into my ear: "Black or white?" – and it was all clear then :)

Enough words, click the image to sing along.

I found this video particularly challenging – with loads of head banging and different races (skin tones, facial hair etc.) – which actually makes a perfect source material for testing.

And again, I am really surprised by the final result – it's still not the fastest (I am getting 20 FPS in browser and about 35 FPS in standalone projector) but the main task is achieved.

The filters' settings were optimized for the video, so if you switch to the webcam mode you probably won't get your eyes detected (there's still a bit of work for me to do on it – that's why I am not releasing the sources yet), but do try to play with sliders, especially with HSBC (no, not the bank, it's Hue, Saturation, Brightness, Contrast) – enable it by clicking the checkbox on the left) and Eye Finder – enable debug and adjust blur and fuziness.

So, where's Michael? He's wandering somewhere in that black puma's outfit, fighting with racism. Watch out!

Assassinating jumpy htmlText hyperlinks

UPDATE: Read this great tutorial on styling the HTML text field

I read quite recently that people are still swearing Flash jumpy hyperlinks in htmlText with Anti-aliased for readability option turned on. What are they talking about? – here's the example.

Roll over and out the links in the left column and carefully observe what happens to the text. Pretty bad stuff.

Fortunately, there is a perfect workaround discovered by Jonnie Hallman aka Destroy Today, but not everybody knows about it yet. So, (to save the world), I wrote a simple TextField wrapper class that automatically deals with the issue, additionally it also fixes another annoying bug – selectable code>TextField scrolls one line on text select – when you click and drag down the mouse while selecting the text, the content scrolls vertically! (and it shouldn't as the text height is the same as the box height, so there's nothing to scroll)

The fixed TextField is presented in the right column – again, try rollover the links.

How does the fix work then?
Basically, after setting the htmlText property, store the height of the TextField, then set autoSize to NONE. That will lock it, so no no more jumping is happening. It is all done at one go by overriding htmlText setter method.

override public function set htmlText(value:String):void
{
    autoSize = TextFieldAutoSize.LEFT;
    super.htmlText = value;
    recordedHeight = height;
    autoSize = TextFieldAutoSize.NONE;
    // adding extra height will prevent "vertical scroll on text select" bug
    // the extra height value should be just bigger than the default leading
    height = recordedHeight + getTextFormat().leading + 1;
}

Additionally, we're adding few pixels extra the TextField default leading value plus 1 to the height there (discovered by Luke Sturgeon), it will prevent "vertical scroll on text select" bug described above.

How should I apply this fix to my broken TextField?
By creating a FixedTextField instance instead, exactly the same way as you would instantiate an ordinary TextField:

var textTF:FixedTextField = new FixedTextField();

Alternatively, you could clone an existing TextField by referencing to it:

var textFieldFixed:FixedTextField = new FixedTextField(someOtherTextFieldToClonePropertiesFrom);

In fact, you can even attach the TextField stored in the Flash IDE library (obviously wrapped up in a MovieClip symbol) – I wrote a separate blog post on that matter.

Download zipped demo including the FixedTextField class.

A TextField called Dolly

I love Flash IDE. Especially the way you can stylise the TextField – decide what glyphs to embed and what fonts to include, set line height (leading), kerning (letterSpacing), colours, etc. I really hate creating new TextFields from scratch, entirely in code.

Using Library to store a TextField
Unfortunately, we can't store a TextField directly as a Flash IDE library symbol, so we have to wrap it up in a MovieClip and reference to it as follows:

var textFieldNormal:TextField = new TextMC().textTF;

where TextMC is the library MovieClip symbol containing a TextField named textTF.

How to duplicate (clone) a TextField?
You can't do it natively in AS3. But you can do some magic instead – clone all (excluding read-only) properties of another TextField.

var description:XML = describeType(referenceTextField);

for each (var item:XML in description.accessor)  
{
    // clone passed textfield properties that are not read only  
    if (item.@access != "readonly") targetTextField[item.@name] = referenceTextField[item.@name];  
}

targetTextField.defaultTextFormat = referenceTextField.getTextFormat();  

TextFormat of the referenceTextField won't be cloned with the loop above as it's not accessible via getter/setter/public methods. You have to clone it manually and this is what the last line does. It's very handy when you want to change the default kerning (letterSpacing) in Flash IDE and you want it to be preserved in your cloned text field.

I wrote a FixedTextField class that does that (plus fixes a couple of other TextField problems) – download zipped demo including the class.

Managing Flash (and Adobe CSx) file versions without changing the extension

When Flash CS4 came out we got yet another FLA file format. All sweet, it has the same legendary FLA file extension but now it can only be opened with Flash CS4 IDE. What's wrong with it? Imagine the following scenario: if you bought Flash CS4 (or decided to use trial version) and played about with your CS3 files there, you could accidentally save over them with CS4. When the trial expires, you're no longer able to access your files (well, you could revert them if you keep everything under version control but you'd still lose your changes). Or you might just have downloaded some cool source FLA files from a Flash blogger and doh! – they won't open with your CS3 although they are not using CS4 features at all (I had that problem with BIT-101's FiTC source files before having CS4).

The easiest fix was found by Senocular, let me quote Trevor:

All this takes is 3 additional key strokes for the first time you save a source file. No Fireworks engineering effort is required, it works for all versions of Fireworks, and Fireworks source files can continue to be easily recognized by other applications – and even, for that matter, humans. Using a .fw.png extension clearly indicates (to developers) that the PNG file is a Fireworks source file.

So next time you save the file, please do append 4 extra characters after the filename and before the actual file extension, e.g., if you save from Flash CS4 use filename.cs4.fla – in fact, you could apply this rule to all (almost) Adobe CS products, i.e., when saving from Photoshop, use filename.cs3.psd, etc.

I hope that this naming convention will get somehow included in Adobe CS5 (so opening the .cs4.fla file and re-saving it will still at least auto-rename it to .cs5.fla), so everybody will be able to easily distinguish between different file versions coming from the same named app.

The published SWF will follow the same convention: filename.cs4.swf and I think that makes sense as well, it may give you a clue what version of Flash Player the build is targeted for (unless you change the Publish Settings).