Saturday, May 9, 2009

Facebook Konami Lens Flare Effect

The Konami cheat code finally made its way into facebook. There were a lot of posts that spoke about the up-up-down-down-left-right-left-right-B-A-Enter code and the lens flare effect on facebook. I did a little probing and here is how it is implemented and can be reused in your own site.
First, there is the handler that catches the secret key. You can find it in this file. Just search for
[38,38,40,40,37,39,37,39,66,65,13] which represent the character codes for the secret key combination. The function is called onloadRegister which typically registers a key handler on the window. The function effectively loads this response that in turn loads the file responsible for the lens flare javascript file.
The lens flare is initialized using the following code after the required javascript file is loaded.

var lf = new LensFlare("http:\/\/static.ak.fbcdn.net\/images\/lensflare\/*?8:162521");LensFlare.flareClick(lf).flareScroll(lf).flareKeyPress(lf);
This is done after some variable are set in the win.Env object, the use of which is still a mystery to me. To execute this in our page, we need to initialize some objects, defined in this file. To get lens flare running, this file also has to be included. Here is the consolidated code that you need to use.

Paste this in the browser URL first,


and then, after sometime, to activate the flares, paste this.


You can try the code on this very blog window.
To include this in your page, you have to include the following script in your page.



The interesting part in this is the animation of the images to create the lens flare, another example of fine javascript wizadary !!

8 comments:

Anonymous said...

Hi i read your article and examined the javascript code. What i have discovered is interesting,The first line of the lensflare.js file is
flares='lf0.png':-1,'lf1.png':0.275,...so basically this file caches some pngs (because they support transparency) and the rest of the js code just trys to flash these using timers, events ,fast moving elements,alpha chanel tunings etc

You can practically see these pngs(firefox):
-1-Log in facebook
-2-clear browser cache
-3-enter codes and do some clicks
-4-navigate to browser cache directory
-4-there will be some files usually with no extensions
-5-rename thes files to .png and see what youv got!

Parashuram said...

@Anonymous

The PNGs can also be picked up using Tamper data, or using Firebug-Net tab.

NGPriest said...

I worked out a different way of doing this
Email me at NGPriest@NGPriest.com to see how easily we can implement it?

dex said...

can anyone please make a noob guide? I tried to add this cool lensflare to my site but I can't make it work :(

Parashuram said...

@dex

Which website do you want to implement this in ?

Pirson said...

So far so good...
Just a copy paste of the code and it works immediately.
But this is the problem...
I cannot implement the if(cheatCode){
runTheFunction()
}

I'm a noob in Js

AMB05104 said...

Actually you can quite simply download all of the PNGs by accessing:

http://static.ak.fbcdn.net/images/lensflare/lf[x].png

where [x] represents the image number, from 0 to 15.

tatactic said...

No, the code works perfectly on every website.
The only problem is that the code launches the function immediately in place to wait that you enter the cheat code.
That's the only thing I cannot implement.
THX