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 !!

10 comments:

  1. 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!
    ReplyDelete
  2. @Anonymous

    The PNGs can also be picked up using Tamper data, or using Firebug-Net tab.
    ReplyDelete
  3. I worked out a different way of doing this
    Email me at NGPriest@NGPriest.com to see how easily we can implement it?
    ReplyDelete
  4. can anyone please make a noob guide? I tried to add this cool lensflare to my site but I can't make it work :(
    ReplyDelete
  5. @dex

    Which website do you want to implement this in ?
    ReplyDelete
  6. 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
    ReplyDelete
  7. 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.
    ReplyDelete
  8. 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
    ReplyDelete
  9. Absolutely brilliant post guys, been following your blog for 3 days now and i should say i am starting to like your post. and now how do i subscribe to your blog?
    ReplyDelete