Okay, I am not trying to defend Flash in any way, but Html5 development will soon hit the same bottle-necks the Flash player did, as it uses the browser’s Javascript engine.

Evidence: check out the CPU demands in Google’s buckyball page.. looks familiar?

I had some setbacks and strugles along the way, thought it might save you some time (and wasted ‘Likes’ too) to write few tips down. It will not be a full tutorial, instead I will focus on some oddities on the Facebook side:

First tip will be: Do not implement until you REALLY understand what your options are and what exactly you want to do. Facebook offers two main options for adding a ‘Like’ button to your page/site/blog, one is IFRAME, second is XFBML. The iframe option is as simple as adding a line in your html source, and will get you going in seconds. The xfbml is based on their Javascript SDK, and sports the Facebook ‘insight’ statistics via open graph, but requires few preliminary steps which are kinda tricky as the documentation is fairly sparse. Obviously we would prefer the xfbml option.

In order to use xfbml you will need an AppID, which require you to set up an application, to do that you will have to add the Developer application to your Facebook Profile.

Then, you have to activate you developer account – you have to give you cell number, after which you will receive a code via sms to submit.

Then you can create an application in Facebook here.
* This page has a strange behavior, you will define your application name, pass a captcha and receive an Error page:
“Sorry, an error has occurred.
We’re working on getting this fixed as soon as we can.”

But if you look at the column on the right in the developers page, you will see that the application was actually created:
(Facebook, are you serious about that? is this some kind of a test?) I ended up creating about 10 applications, read countless forums threads until I found it by mistake!

After that you can start implementing, follow the instruction here which are pretty simple.

Since I thought Facebook application creation service is down, I started with the iframe version, obviously a mistake as all the ‘Likes’ I got were dumped once I connected the xfbml. damn.

Good luck and may the force be with you..

The background is made of two movieClips, each has it’s own behavior, if you click the horn you can adjust its size and direction, if you click the text area you can scale the textField and the balloon background along with it.

This trick can be really handy if you’re making animations of moving silhouettes. In this flash I used GreenSock’s TransformManager to make the textField and horn controlable.

Originally I was using the onFocus & onBlur events, attached to the window object, I found out that each browser can deal with these event when attached to a different object, I started testing which object works for each browser, and added browser sniffer for the listener definition, these are the objects for each browser:

Browser	Object
Safari, Opera, Omniweb	window
Firefox	window.document
IE7	document.body (* partially working)

And here are the results:

Mac OS X 10.5.2 Leopard
Safari	All working fine.
Firefox	onblur is only fired when loosing focus to another Firefox window, not to another app.
Opera	All working fine.
Omniweb	All working fine.

Windows XP
IE7	With Tabbing enabled: onblur is fired upon focus event, no event corresponds with blur. With Tabbing disabled: onblur fires properly if clicked on title area, once clicked on body (content of page) behaves the same as with Tabbing enabled..
Firefox	onfocus is fired twice when clicked on body, once when clicked on browser title.

The situation on Mac seems to be much better than on Windows XP (sorry, I did not test Vista, so if someone can try this on Vista and send me the results – it would be great), currently both IE7 and Firefox on XP have strange behavior.
With IE7 it gets even weirder, when IE7 has Tabbing enabled, it can’t handle onblur event for body object, while without tabbing, onblur works if clicked on the browser title area, once clicked inside the window (Html body) “something” goes crazy and both onfocus and onblur are fired together upon focus event.

Here is the test page, you will find the events I tested for IE7 commented in the page source.

Does anyone know a way around this strange behavior on IE7 and Firefox?
any way to make this listener compatible with all browsers?