Book Image

Facebook Graph API Development with Flash

By : Michael James Williams
Book Image

Facebook Graph API Development with Flash

By: Michael James Williams

Overview of this book

The Facebook platform provides you with an ideal solution for building rich, social experiences on the web to develop an effective user experience application. Combined with Flash which effectively enables social interactions, you can create a fully functional application on Facebook. If you've been waiting to get started with your own applications and games on Facebook, with this book you don't have to wait any longer.This book takes you through everything you need to know to integrate your AS3 apps and games with Facebook accompanied by illustrative screenshots and short quizzes.It presents you with in depth coverage of the key underlying concepts such as creating a basic application that runs inside Facebook and exploring the Graph API which greatly simplifies how developers can retrieve data. This book also covers topics on security, permissions and authentication features on Facebook.This beginner's guide starts off by teaching you about retrieving simple public data and then rapidly working your way up to authenticating users, building powerful searches across the entire database, and uploading photos and other content. Throughout the book, you'll learn by building two fundamental components: an RIA Facebook interface and an AS3 SDK that you can drop into any project to add Facebook integration. This easy-to-understand guide has everything written as AS3-only projects with publicly available components, so you can follow along whether you use Flash Pro, Flex, or MXMLC – as long as you know AS3! This hands-on tutorial will present you with a whole new perspective of the three core aspects of Facebook – searching, retrieving, and updating the data .This practical book focuses on how to set up an application on Facebook and how to deal with different contexts like AIR.By the end of this book, you will be confident enough to set up your own application and create social interactions for users to share on Facebook.
Table of Contents (17 chapters)
Facebook Graph API Development with Flash Beginner's Guide
Credits
About the Author
Acknowledgement
About the Reviewer
www.PacktPub.com
Preface
Index

The source code


At the start of Chapter 2, Welcome to the Graph, you'll be given a Flash project that's just an empty user interface—it'll be up to you to build the backend using the lessons you learn from Chapters 2 through 6.

This project is called Visualizer, and contains the class structure and all the UI for an application that can be used to represent all of the information stored on Facebook. You'll go far beyond simply allowing people to log in to the application and grabbing their username; there is so much more that can be achieved with AS3 and the Graph API, and you'll learn about all of it.

Although the project is complex, the classes have been arranged in such a way that you need to modify only a small number of them, and these have little or no code in them to begin with. This means that you don't have to dive into mountains of code that you didn't write! You can focus entirely on learning about the Facebook side of Flash development.

Each of the Chapters from 2 to 6 has two associated ZIP files: one for the start of the project at the start of the chapter, and one for the end. This means you could skip through those chapters in any order, but you'll find it must easier to learn if you go through them in sequence. All project files are available in forms that are compatible with Flash CS3 and above, Flash Builder, and FlashDevelop—and if you use a different Flash editor, you should find it easy to convert the project.

When you first compile the project, it'll look like this:

Nothing much to see. But before long, you'll have added features so that it can be used to explore Facebook, rendering different Pages and Photos:

By the end of Chapter 6, you'll be happily adding code to search for users by name, exploring their personal profiles, and posting images and links to their Wall:

…plus plenty more besides!

Powered by…

In September 2010, Adobe released an official Adobe ActionScript 3 SDK for the Facebook Platform Graph API, which will remain fully supported by Adobe and Facebook. Read more about it at http://www.adobe.com/devnet/facebook.html. This book will teach you how to use this SDK, as it is a standard technology.

However, the main aim of this book is to teach you the underlying concepts of Facebook Flash development; once you understand these, the actual code and the SDK used don't matter. For this reason, this book will also teach you how to program every sort of Facebook interaction you might need from scratch. The code will be all yours, and you'll understand every line, with no abstraction in the way.

Besides the Adobe AS3 SDK for Facebook Platform, two other code libraries are used heavily:

Debugging

From Chapter 3 onwards your SWF will need to be run from your server, through a web browser, in order to work. (Find out why in that chapter.) This makes debugging tricky—there's no Output panel in the browser, so trace statements aren't automatically visible.

The Visualizer contains a dialog feature which you can use to work around this. It can be created from any class that is in the display list. To do so, first import the DialogEvent class:

import events.DialogEvent;

Then, dispatch a DialogEvent of type DIALOG with an argument containing the text you wish to see output:

dispatchEvent(new DialogEvent(DialogEvent.DIALOG, "Example"));

It will look like this:

Of course, that's useful only for the Visualizer project. What can you do when you build your own?

There are a few tools that will help:

In Chapter 3, you'll learn how to run a JavaScript function in your web page from the AS3 in your SWF. One JavaScript function, alert(), creates a little window containing any String passed to it, like so:

This is a quick and simple way to display one-off messages without using trace.

Watch out for caching

When you run a SWF using Flash Player on your desktop, it loads and runs the SWF. Well, of course, why wouldn't it?

When you run a SWF in a browser, this isn't always the case, though. Sometimes, browsers cache SWFs, meaning that they save a copy locally and then load that copy—rather than the online version—the next time you request it. In normal browsing, this is a great idea—it saves bandwidth and reduces loading times. You can lose huge amounts of time trying to figure out why your new code isn't working, only to finally realize that the new code isn't being run at all because you were seeing only a cached copy of your SWF.

Different browsers require different solutions. It's usually possible to disable caching for one browsing session, and it's always possible to delete some or all of the cache.

In Google Chrome, you can do this by clicking on [Spanner] | Tools | Clear Browsing Data…, selecting Empty the cache, and choosing an appropriate time period:

You should easily be able to find the equivalent option for your browser by searching Google for «browser name» delete cache.