elimak

Flash-Facebook connection with the Adobe SDK

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.
  • I included the source of the project in my post. It uses FlashDevelop.

The tutorial will show you how to:

  • Logging in / logging out.
  • Reading/writing a post on your wall including attachment such as picture, Youtube video and interactive SWF.
  • Uploading a picture using BitmapData.
  • A – Create your Facebook Applications (local/live)

    1 – Install the developer application

    Go to Facebook Developer.
    When your application is installed -> “set up a new App”


    2 – Create your local and live Apps:

    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
    Local:


    Live:

    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:
    127.0.0.1 localhost.local

    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.

    Final notes:

    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.

19 Comments

    [...] NEW POST ON FLASH / FACEBOOK CONNECT – CHECK THIS [...]

  • Nice tut! Thx :-)

  • WOOT! Thanks for the mention of the MonsterDebugger!
    BTW there is a save way to embed key’s in you Flash application instead of in the javascript or html of the page:

    Create a file called key.txt and add a SUPER SECRET KEY
    In your constants file use the following embed code:

    [Embed(source="key.txt", mimeType="application/octet-stream") ]
    public static var SECRET_KEY:Class;

    When you need the key in your code:
    var key:String = new Constants.SECRET_KEY();

  • You are welcome!
    Its actually only the App ID that I am using, the graph API does not require the secret key as it generates a token/cookie when you log in and this token is added to your calls by the Adobe SDK.

  • great stuff and also a great summary .. you saved my day! thx

  • Thanks for the tutorial. One question, how can i open the FacebookTutorial.as3proj file on mac osx, i use flash professional or flash builder?

  • You dont have to open the file: FacebookTutorial.as3proj if you are not using FlashDevelop.
    You can create a new project with Flash Builder and drop the sources that I zipped directly inside your new project. So all the files under “lib” and “src”. The files in “bin_server” should be deployed on a server (remote or local).
    Good luck!

  • [...] First, the setup for a web based project is a bit messy, since you need to register your Facebook app with a specific URL and put some code in the Html wrapper – for a full explanation read this post. [...]

  • Thanks for your post. Very helpful. I still have one problem which is that my Facebook.api call to post a photo is working in that the photo is getting posted, but my callback function is not being called. Any ideas why that might be happening?

  • If this happen with all the calls (posting picture, messages, reading feed…) double check your html wrapper and make sure that you have all the requirements.

  • Thanks for the localhost tip. It was doing my head in uploading to a web server to test any changes!

  • That’s what I was needed! Thnks:)

  • Hi!

    I’m doing an example like this. Have a canvas where you can draw and get a picture. However flash.api(‘/me/photos/ … is not working.
    I’ve tried the other kind of post and those are running just fine.
    The problem is when i’m trying to upload a photo.

    The login is fine, posting in feed is fine, i get the information of my user and still photo is not uploading. And very important, it seems that not even the function is read. It doesn’t throw any error message. What i am doing wrong?

    private function uploadImage():void
    {

    var bmpData:BitmapData = new BitmapData(_canvas.width, _canvas.height);
    bmpData.draw(_canvas);
    var values : Object = { message:’Foto’, fileName:’MyPhoto’ };
    retro.text = “uploadImage”;
    //HERE THE FUNCTIONING STOPS
    Facebook.api(‘/me/photos’, handleUploadComplete, values, ‘POST’);

    }

  • Found the answer:

    private var _permissions : Object = { perms:”publish_stream, user_photos” };
    Facebook.login( handleLoginResponse, _permissions);

    change it for:

    Facebook.login( handleLoginResponse, ['user_photos', 'publish_stream']);

    Don’t know why but it worked.

    Bye :)

  • Hi,

    This tutorial is several months old already. Facebook changes its API on regular basis. I cant guaranty that this tutorial is still working like it used to when I created it.
    I am happy you found the solution.
    Thank for posting it!

    cheers!

  • Hello –

    I am very interested in trying your demo, but when i unzip the file set and bring everything into Flash Builder its telling me i am missing the following:

    import elimak.gfx.FCconsole;

    I opened the zip again and looked through the source folders and cannot find the class or the elimak.gfx package.

    thanx

  • Its a class embedded inside the library.swc

  • your own file on this site is not working

  • This tutorial/resource is 2 years old. Search for more recent implementation of the Graph API. Facebook regularly updates it.

Leave a Reply

You must be logged in to post a comment.