This tutorial will show you how to post photo (MovieClip) into the user’s Facebook photo album. The example is written in Flash CS3, but should be easily ported to Flex and should work in CS4 and 5.

===============

IMPORTANT UPDATE NOTES

Due to changes on Facebook API, change these elements to get this to work on OAUTH2.0:

• Change response.session to response.authResponse.
• Change getSession in .js to getAuthResponse.
• perms is now called scope.

The source link below has the changes already implemented, but the guide still refers to the old names.
===============

For a tutorial on how to set-up the Graph API in AS3, refer to this post:
https://www.permadi.com/blog/2010/12/using-facebook-open-graph-api-in-flash-as3/

Step 1

Set-up the application login process using the similar code as in https://www.permadi.com/blog/2010/12/using-facebook-open-graph-api-in-flash-as3/ — shown below if you are already familiar with the API:

import com.facebook.graph.Facebook;
import com.facebook.graph.data.FacebookSession;
import com.facebook.graph.net.FacebookRequest;

loginButton.addEventListener(MouseEvent.CLICK, onLoginButtonClicked);


// Change the APP ID with your own APP id.
Facebook.init('108257312581900', handleLogin);

function onLoginButtonClicked(event:MouseEvent):void
{
	if (Facebook.getSession()==null ||
		Facebook.getSession().uid  == null)
	{
		// "perms" is now called "scope"
		//Facebook.login(handleLogin, {perms:'publish_stream'});
		Facebook.login(handleLogin, {scope:'publish_stream'});
	}
	else
	{
		Facebook.logout(handleLogout);
	}
}

function handleLogin(response:Object, fail:Object):void
{
	if (response == null)
	{
		//resultTxt.text += 'Error login session';
		ExternalInterface.call('redirect');
		return;
	}
	changeToLoginState();
}

function changeToLoginState():void
{
	//resultTxt.text += 'Logged in';
	loginButton.label = 'Logout';
	loadMyInfo();

}

function loadMyInfo():void
{
	Facebook.api('/me', onMyInfoLoaded);
}

function handleLogout(success:Object):void
{
	//resultTxt.text += "Logout";
	//loginButton.label = 'Login';
	loginButton.label = 'Login';
	nameTextField.text="Please Login";
}

function onMyInfoLoaded(response:Object,fail:Object):void
{
	trace("onMyInfoLoaded "+response.name);
	nameTextField.text=response.name;
}

Step 2

• Add a movie clip into the stage, name it mc_photo. This will be our example photo, you can add a bitmap inside this movie clip if you want to.
• Add a button onto the stage, name it buttonSaveToPhotoAlbum to trigger the saving process.
• Add the following code to trigger to button to initiate the posting of the photo:

  buttonSaveToPhotoAlbum.addEventListener(MouseEvent.CLICK, onSaveToPhotoAlbumClicked);
  

Step 3

Now here’s the part of how to post a Bitmap into the Facebook Photo Album of the current user. Basically, you can use the me/photos Graph API to do this, passing the image data as multipart/form-data. (More information about me/photos: http://developers.facebook.com/docs/reference/api/photo.) Thankfully, the facebook-actionscript-api will do the multipart/form-data nifty-gritty for you, so you need not to be concerned out it.

As for creating the image data, you can use Flash Bitmap object. And since you can draw MovieClip into Bitmap objects, you can virtually save anything by drawing into a Bitmap object.

In the example below, assume that I have a movie clip named mc_photo on the stage. The code then:

• Draws the mc_photo onto a Bitmap object.
• Call the me/photos Graph API using Facebook.api.
• Sets the callback to onSaveToPhotoAlbumComplete.
• Note that you need the publish_stream permission to post to photo album (this is done in the Facebook.login() call in Step 1 and in the JavaScript redirect() function (refer to https://www.permadi.com/blog/2010/01/using-facebook-open-graph-api-in-flash-as3/ to read about how to setup the html page).

function onSaveToPhotoAlbumClicked(event:MouseEvent)
{
	var bitmapData:BitmapData=new BitmapData(mc_photo.width, mc_photo.height);
	bitmapData.draw(mc_photo);
	var bitmap:Bitmap=new Bitmap(bitmapData);

	var params:Object = {image:bitmap, message:'Test Photo', fileName:'FILE_NAME'};
	Facebook.api('me/photos', onSaveToPhotoAlbumComplete, params);
}

The Facebook.api function expects a parameter object containing the bitmap data in the image field.
Note that there is no need to specify the fileName parameter (it isn’t being used by Facebook in the photo album anyway), although you can if you want to.

That’s basically it. It’s that simple.

If you’re wondering how the bitmap gets transmitted to Facebook, take a look at
com.facebook.graph.net.FacebookRequest.as, the call method. It does a smart thing by handling the conversion of the Bitmap object into PNG and passing the PNG data into the POST variable of the me/photos call.

      /**
        * Makes a request to the Facebook Graph API.
        *
        */
        public function call(method:String,
                             values:* = null,
                             callback:Function = null
                             ):void {

            // OMITTED.........

            //If we have a Bitmap, extract its BitmapData for upload.
            if (fileData is Bitmap) {
				trace("fileData is Bitmap");
                fileData = (fileData as Bitmap).bitmapData;
            }

            if (fileData is ByteArray) {
				trace("fileData is ByteArray");

                //If we have a ByteArray, upload as is.
                post.writeFileData(values.fileName,
                                fileData as ByteArray,
                                values.contentType
                                );

            } else if (fileData is BitmapData) {
				trace("fileData is BitmapData");
                //If we have a BitmapData, create a ByteArray, then upload.
                var ba:ByteArray = PNGEncoder.encode(fileData as BitmapData);
                post.writeFileData(values.fileName, ba, 'image/png');
            }

            post.close();
            urlRequest.contentType =
                    'multipart/form-data; boundary='
                    + post.boundary;

            urlRequest.data = post.getPostData();
            urlRequest.method = URLRequestMethod.POST;

           // OMITTED.........

Example

You can check the example page at:
https://www.permadi.com/tutorial/as3-save-photo-to-facebook-album/?test

In that example, once you click the SaveToPhotoAlbum button, there will be a message below the button indicating SUCCESS or failure. Upon success, check your Facebook profile page and it should show the status (Profile->Status) like below (the photos are just blue background in this example application — I have posted 3 photos, that’s why you see three):

IMPORTANT UPDATE NOTES

Due to changes on Facebook API, change these elements to get this to work on OAUTH2.0:

• Change response.session to response.authResponse.
• Change getSession in .js to getAuthResponse.
• perms is now called scope.

The source link below has the changes already implemented.

Download link for the example files: https://www.permadi.com/blog/2011/02/using-facebook-graph-api-in-flash-as3-to-post-to-photo-album-download-example-source/

See also: An application example that allows user to save custom image to wall: Easter Your Facebook Friend