Rob’s geeky discoveries Blog

The latest site I’ve been working on has been live in Germany for a week or so now and is running nicely so thought I’d do a quick post in case anyone reading is interested in what I’ve been building lately…

If you can read Deutsch – the live site is http://www.blivebeatology.de – the version I’m linking is a showcase version in English so you’ll have a clue what’s going on. The basic premise of this site is that you upload a picture of your face and get back a video of yourself beatboxing but there’s a hoard of other functionality to explore and a big social element including a Facebook App so you can post your generated videos and share amongst your friends. The amazing video assets are all custom shot by Superglue and we’re very proud of it all. A holiday is in order for me but I shall probably do a bit more of a write up on it at a later date.

So… if you want to try it out or see an example grab a passport style photo of you – higher res and higher contrast the better ( sub 500KB) or if you don’t have one to hand, save this one below to your desktop. You’ll need a decent video player like VLC to watch .FLV directly but our system also generates an AVI. I’ve linked the image below to the generated AVI for this image and you can watch the FLV for it here if you prefer.

The back end will map the image onto one of 4 3D meshes, analysing it and applying one of several matrices to get the best fit and generate the videos on the back end which then send it back to you in Flash. We’re also creating 3GP videos for mobiles which are downloaded via a QR code link and allowing Webcam upload as a photo submission method so have been very busy.

Enjoy the beatboxery

I’ve had several problems with this that only affect the Mac version of the Flash Player – so frustrating – the joy of the Flash Platform is supposed to be that you don’t have disparate platforms to test! Anyhow if you’re struggling with this…

Add an extra output from the server to trigger onComplete on a Mac as outlined in Abdul Qabiz’s lovely post here:
http://www.abdulqabiz.com/blog/archives/flash_and_actionscript/workaround_file_1.php

Our ASP.NET backend had no trouble with this and even though the onComplete function was not the one throwing the error in my AS – fixing this seemed to have a domino effect of pleasurable error freeness. One point of note; contrary to many posts I have read; this deos not appear to be fixed in Flash Player 9 for Mac so do it anyway (can’t hurt)

Also maybe try:

- Making sure the FileReference Object never drops out of scope/gets removed too early

- Making sure you have a handler for onCancel (good for debugging)

- Using Delegate.create to specify the instance to handle:

this.referenceListener.onSelect = Delegate.create(this, refOnSelect);

Also be aware that you basically can’t send data back with the onComplete event:

http://www.mehtanirav.com/2006/04/29/filereference-on-mac-type-is-not-available/#comment-1252

We created a getUploadStatus Web Service that we called aftewards with the same UID we’d posted alomg with the upload to get around this.

P.S There is a FileReference.onUploadCompleteData event but it only works in Flash 9.0.28 and up…

Here’s how to Filter which filetypes your user can upload in AS2, I’ve provided code for Image Files & All Files:

[code lang="actionscript"]

var reference:FileReference = new FileReference();
reference.browse([{description:"Image files", extension: "*.jpg;*.gif;*.png"}]);
// OR reference.browse([{description:'All Files (*.*)', extension:'*.*'}]);

[/code]

Here’s how to Filter which filetypes your user can upload in AS3:

[code lang="actionscript"]

imagesFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
// OR imagesFilter = new FileFilter("All Files", "*.*");
f = new FileReference();
f.addEventListener(Event.SELECT,onFileSelect);
f.addEventListener(IOErrorEvent.IO_ERROR,errorFile);
f.addEventListener(Event.COMPLETE, uploadComplete);
f.browse([imagesFilter]);

[/code]

With both languages – remember that this level of file filtering is great for usability but is not for security – you should check the filetype on the server side too (for .exe, .bat etc…) as there are are certain ways of uploading files not specified by these filters (That’s true of AS2 and AS3 apps I believe)

Here’s the PHP file that handles the upload:

[code lang="php"]

if (isset($_FILES['Filedata'])){
if ($_FILES['Filedata']['name']) {
$randappend = time();
move_uploaded_file($_FILES['Filedata']['tmp_name'], 'uploads/' .$randappend . "_" . basename($_FILES['Filedata']['name']));
}
}

?>

[/code]

If that doesnt work check that the PHPinfo() on the server you are uploading to -

• Is file_uploads true?
• Is upload_max_filesize big enough?

Bookmark me if that’s useful