ActionScript 3.0 Client Library for Facebook Platform API – Flash Sample Code

The new ActionScript 3.0 Client Library for Facebook Platform API, fully supported by Facebook and Adobe, makes it easy to build applications that combine the strengths of the Flash Platform and Facebook Platform.

I had a few problems trying to find some sample AS3 code, using the new ‘ActionScript 3.0 Client Library for Facebook Platform API‘ which is supported both by Adobeand by Facebook, which wasn’t focused on Flex. So I took Adobe’s ‘BROWSE THUMBNAILS OF FACEBOOK PHOTOS‘ example and converted it into something you can use for Flash.

1. Watch this video http://www.adobe.com/devnet/facebook/articles/video_facebook_quick_start.html
2. Download the ActionScript 3.0 Client Library for Facebook vX.X – Source from http://code.google.com/p/facebook-actionscript-api/downloads/list
3. Setup your facebook application as per the video instructions, making sure you select ‘Desktop’ as your ‘Application Type’ in the advanced tab
4. Create a new Flash AS3 file
5. Open the components panel (Window>Components) and drag to your library the ‘Button’, ‘List’, ‘TileList’ and ‘UILoader’ components
6. Create a new ‘Document class’, named FacebookImageBrowser.as, and assign it to your newly created Flash file
7. Add the following code to your document class and include your own ‘API_KEY’ and ‘SECRET_KEY’, which is listed on your Facebook application’s settings page
8. Publish your movie and step through the buttons as you get feedback

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	import fl.controls.Button;

	import flash.events.Event;
	import flash.events.MouseEvent;
	import fl.events.ListEvent;

	import fl.controls.List;
	import fl.controls.TileList;
	import fl.controls.ScrollBarDirection;

	import fl.data.DataProvider;

	import fl.containers.UILoader;

	import com.facebook.data.photos.AlbumData;
	import com.facebook.data.photos.PhotoData;

	import com.facebook.Facebook;
	import com.facebook.events.FacebookEvent;
	import com.facebook.net.FacebookCall;
	import com.facebook.data.photos.GetAlbumsData;
	import com.facebook.data.photos.GetPhotosData;
	import com.facebook.commands.photos.GetAlbums;
	import com.facebook.commands.photos.GetPhotos;
	import com.facebook.utils.FacebookSessionUtil;

	/**
	* ...
	* @Flex Developer: Steven Shongrunden
	* @Flash Conversion: Trevor Boyle
	*/

	public class FacebookImageBrowser extends Sprite {

		private var fbook:Facebook;
		private var session:FacebookSessionUtil;

		private var API_KEY:String = "XXXXX";
		private var SECRET_KEY:String = "XXXXX";

		private var facebookPhotoAlbums:DataProvider; 

		private var facebookPhotos:DataProvider;

		private var button1:Button
		private var button2:Button
		private var button3:Button

		private var status:TextField;

		private var albumsDataGrid:List;
		private var photosList:TileList;

		private var myUILoader:UILoader;

		function FacebookImageBrowser(){
			trace("FacebookImageBrowser Constructor")
			init()
		}

		private function init():void {
			trace("FacebookImageBrowser.init()")
			session=new FacebookSessionUtil(API_KEY, SECRET_KEY, loaderInfo);
			session.addEventListener(FacebookEvent.CONNECT, onConnect);
			fbook=session.facebook;

			button1 = new Button();
			button1.label = "1. Login to Facebook";
			button1.width = 120;
			button1.move(10, 10);
			button1.addEventListener(MouseEvent.CLICK, session.login)
			addChild(button1);

			button2 = new Button();
			button2.label = "2. Done logging in";
			button2.width = 120;
			button2.move(10, 40);
			button2.addEventListener(MouseEvent.CLICK, doneLoggingIn)
			addChild(button2);

			button3 = new Button();
			button3.label = "3. Browse Photos";
			button3.width = 120;
			button3.move(10, 70);
			button3.addEventListener(MouseEvent.CLICK, getPhotoAlbums)
			addChild(button3);

			status = new TextField();
			status.x = 10;
			status.y = 100;
			status.text = "Please log in"
			status.autoSize = "left"
			addChild(status)

			facebookPhotoAlbums = new DataProvider();

			albumsDataGrid = new List();
			albumsDataGrid.setSize(200,300);
			albumsDataGrid.dataProvider = facebookPhotoAlbums;
			albumsDataGrid.addEventListener(Event.CHANGE, showSelectedAlbum);
			albumsDataGrid.move(10,130)
			addChild(albumsDataGrid);

			facebookPhotos = new DataProvider();

			photosList = new TileList();
			photosList.direction = ScrollBarDirection.VERTICAL;
			photosList.dataProvider = facebookPhotos;
			photosList.sourceFunction = getPhotoDataSourceSmall
			photosList.addEventListener(Event.CHANGE, showSelectedPhoto);
			photosList.columnWidth = 75;
			photosList.rowHeight = 75;
			photosList.columnCount = 4;
			photosList.rowCount = 4;
			photosList.setSize(320,300);
			photosList.move(230,130)
			addChild(photosList);

			myUILoader = new UILoader();
			myUILoader.autoLoad = false;
			myUILoader.scaleContent = false;
			myUILoader.move(10, 440);
			addChild(myUILoader);
		}

		private function onConnect(e:FacebookEvent):void {
			trace("FacebookImageBrowser.onConnect()")
			status.text = "Facebook API Ready";
		}

		private function doneLoggingIn(e:MouseEvent=null):void {
			trace("FacebookImageBrowser.doneLoggingIn()")
			session.validateLogin();
		}

		private function getPhotoAlbums(e:MouseEvent=null):void {
			trace("FacebookImageBrowser.getPhotoAlbums()")
			var call:FacebookCall = fbook.post(new GetAlbums(fbook.uid));
			call.addEventListener(FacebookEvent.COMPLETE, handleGetAlbumsResponse);
		}

		private function handleGetAlbumsResponse(e:FacebookEvent):void {
			trace("FacebookImageBrowser.handleGetAlbumsResponse()")
			var albumsResponseData:GetAlbumsData = e.data as GetAlbumsData;

			if (!albumsResponseData || e.error){ // an error occurred
				status.text = "Error";
				return;
			}

			facebookPhotoAlbums.removeAll()

			var albumData:AlbumData;
			for(var i:int = 0; i < albumsResponseData.albumCollection.length; i++){
				albumData = albumsResponseData.albumCollection.getItemAt(i) as AlbumData
				facebookPhotoAlbums.addItem({label:albumData.name, aid:albumData.aid, cover_pid:albumData.cover_pid,
owner:albumData.owner, name:albumData.name, created:albumData.created, modified:albumData.modified,
description:albumData.description, location:albumData.location, link:albumData.link, size:albumData.size, visible:albumData.visible});
			}
		}

		private function handleGetPhotosResponse(e:FacebookEvent):void {
			trace("FacebookImageBrowser.handleGetPhotosResponse()")
			var photosResponseData:GetPhotosData = e.data as GetPhotosData;

			if (!photosResponseData || e.error){ // an error occurred
				status.text = "Error";
				return;
			}

			facebookPhotos.removeAll()

			var photoData:PhotoData;
			for(var i:int = 0; i < photosResponseData.photoCollection.length; i++){
				photoData = photosResponseData.photoCollection.getItemAt(i) as PhotoData
				facebookPhotos.addItem({label:photoData.caption, pid:photoData.pid, aid:photoData.aid,
owner:photoData.owner, src:photoData.src, src_big:photoData.src_big, src_small:photoData.src_small, link:photoData.link,
caption:photoData.caption, created:photoData.created});
			}
		}

		private function showSelectedAlbum(e:Event):void {
			trace("FacebookImageBrowser.showSelectedAlbum()")
			facebookPhotos.removeAll()

			var selectedAlbumID:String = albumsDataGrid.selectedItem.aid;

			var call:FacebookCall = fbook.post(new GetPhotos('', selectedAlbumID));
			call.addEventListener(FacebookEvent.COMPLETE, handleGetPhotosResponse);
		}

		private function showSelectedPhoto(e:Event):void {
			trace("FacebookImageBrowser.showSelectedPhoto()")
			var selectedPhoto:String = getPhotoDataSourceBig((photosList.selectedItem as Object));

			myUILoader.source = selectedPhoto
			myUILoader.load();
		}

		private function getPhotoDataSource(item:Object):String {
			return item.src;
		}

		private function getPhotoDataSourceSmall(item:Object):String {
			return item.src_small;
		}

		private function getPhotoDataSourceBig(item:Object):String {
			return item.src_big;
		}
	}
}