Last summer, I published a small experiment connecting Flash to Facebook using the new GRAPH API with the resource of Jozef Chúťka. A short time after that, in September, Adobe released a new SDK for Facebook.
Since I received several requests to publish a new example using Adobe’s recent resource, I decided to create this tutorial.
Few things before starting:
You need to deploy your compiled swf on a server – I would recommend that you setup a localhost server on your computer if you do not have one.
Since you can create as many applications as you want on “Facebook Developer” – You can create 2 projects: 1 for your localhost and 1 for your live deployment (We will see in detail how to make them later in this tutorial)
http://localhost/ will not be accepted by Facebook, but you can change your host file so your deployment will occur on http://localhost.local/ instead.
Give a name to your App and set the site URL and the site domain under the “Web Site” tab. The other settings can stay as default.
This is what you should get when your App is ready
B – Prepare your local deployment:
1 – Update your Host file so http://localhost/ becomes http://localhost.local/
Find your hosts file. On a Windows computer the host file is under “C:\Windows\System32\drivers\etc”.
Open it and add this line at the end:
2 – Update your index.html file with your Facebook App ID:
You index.html will pass the App ID to your swf file. By externalizing this key, you will facilitate your migration from local to live environment.
Note that your index.html contains several lines that are required for Facebook to callback your requests.
C – Test your application directly on your local server:
1 – Compile settings on FlashDevelop:
You can output your swf directly on your local server and target your index.html when you compile.
I did not use any framework to architecture my code source intentionally. You will find all the Facebook requests on the “FacebookTutorial.as” and the use of the objects received inside the views under com/elimak/views/tabs.
I would recommend that you use a debugger to trace and explore your received objects in order to have a better look on their properties and structure. The MonsterDebugger will do that very well.
I hope you enjoyed this resource. Do not hesitate to contact me if you have any further questions.