Boiling the soft egg aka Webcam Stories

If you came here after seeing my FOTB talk – that's great! Thank you!

Make sure you've seen the Black or White vs Machine Vision mash-up first.

Then head to the HiSlope GitHub repo to download/fork the HiSlope toolkit and have fun.

Yes, HiSlope is opensource!

I am going to add more examples, couple of cool and previously unreleased Pixel Bender filters and more tutorials/documentation soon, so make sure you follow me on Twitter @blog2t.

Please send comments and feedback, I'd really like to hear from you! Any Q&As - catch me at the conference.

Update: I've added the video from my pitch.

Webcam stories

Pressure. It's all coming along. This Saturday, the Art Tech Seminars at Assembly Summer in Helsinki, Finland, 7th of August at 2.00PM. WebCam stories.

If you want to experience the potential of Flash and a typical webcam to achieve face recognition, eye tracking and motion detection, using real-time image processing, come and see. I will share how we can use our often dusty and under-used webcams to make our eyes less tired after hours of gazing into pixels.

Another good news is that HiSlope toolkit will be finally released there.

Although the Flash Player is recently being eschewed in favour of emerging HTML5+JS technologies (most notably by Apple), I will prove it still offers decent processing power and support for external devices such as webcam and microphone (which HTML5 is not yet capable of) and can significantly contribute to improving real human-computer interfaces.

Thanks to Justyna for a cheeky title :)

PS I also got the chance to speak at the Elevator Pitch this Autumn, which is part of Flash on the Beach conference in Brighton, UK (26-29 September 2010) – my very own 3 minutes!

Embedding Private Keys in SWF files

I've recently came across the new online SWF, Zend, and Java decomplier at showmycode.com that allows you to almost "view the source" of the SWF file online. If you had some important data stored in your SWF (such as API keys or passwords) you may not wish them being exposed.
The easiest (and therefore naïve) way to hide them* would be to store them in external text files and embed in the SWF.

[Embed(source="api_key.txt", mimeType="application/octet-stream")]
private const API_KEY:Class;

// ...

var myAPI_KEY:String = String(new API_KEY());

Then you can create an instance and cast it to String, like shown above.

The asset class extends mx.core.ByteArrayAsset and its byte content is not revealed by most decompilers.

*Of course, this "solution" does not offer any serious protection, you can still decompress the SWF and view the keys in the hex editor. You could scramble/hash them a bit to make the hacker's job harder but it's still possible to extract them.

Flash Bokeh

Sometimes your best efforts to convince clients to originality end up in the trash... but on the other hand there is nothing wrong with it – just shake the dust off and share. This time it's the colourful realtime bokeh effect inspired by this tutorial and programmed for tictoc as a proof-of-concept demo.

Click the image above to preview. Due to expensive alpha and blending processing it may slow down your browser/computer a bit. I've tried two approaches there:

1. Adding and removing circles to the display list (with cacheAsBitmap turned on).
2. Drawing circles onto (transparent and non-transparent) bitmap using draw() method.

Both methods eat similar processor time. Haven't tried using any GPU wmodes, not sure if that would help at all here, I'll leave it to you - the code is very simple and there's a lot of room for improvements and optimisations.

Considering the recent HTML5 vs Flash war, the challenge is to code a similar effect using JS + HTML5's canvas and compare the speed – is anyone up for it?

Grab the source (AS3, Flash CS4 was used to tween the circle shapes but you could entirely use drawing API if needed) and enjoy!

Including imports

Do you remember the #include "filename.as" AS2 directive? It was often used to include predefined prototype functions in AS2. Since using prototypes become obsolete in AS3 (in favour of the inheritance) the include in often underused.

For example, Darron Shall suggests using include directive to mimic multiple inheritance. Recently, I had been given a glimpse of brain damage enlightenment and I started using it again in AS3 for including all project specific libs only. If you want to pass me the hammer now, please read on.

How?

Using wildcards (like import flash.display.*) is often considered a bad practice (or laziness) as we don't know what classes/packages are actually being imported. So we are left with typing all import directives for every class we write. Very commonly we use the same shared functionality (either a framework or built-in classes) in the SWF. The idea is that instead of having to import the same classes in every project class, we can have a list of them in a file, i.e.:

import flash.display.Bitmap;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.utils.setTimeout;
import gs.TweenLite;

and then stop worrying anymore about what needs to be imported.

All you need to do is to place include "../../imports.as"; where your import directives would normally live. I've personally chosen to put it in the same location as the source directory.

package net.blog2t
{
    include "../../imports.as";

    public class Banner extends Sprite
    {
    }
}

Then you can do it for every project specific class you add.

If you're on OS X and using Textmate, you can use the shortcut – F5 key to sort lines and remove duplicated entries.