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:
- MinimalComps: Keith Peters' excellent, lightweight user interface components, available at http://www.minimalcomps.com/ under an MIT license.
- as3corelib: A collection of classes and utilities for working with AS3, including classes for JSON serialization, available at https://github.com/mikechambers/as3corelib under a BSD license.
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:
- De MonsterDebugger: Excellent tool for general AS3 debugging: http://demonsterdebugger.com/.
- Flash Tracer for Firebug: This Firefox tool lets you see
tracestatements from any SWF, as long as you have the debug version of Flash Player installed in your browser: http://blog.sephiroth.it/firefox-extensions/flash-tracer-for-firebug/. - Vizzy Flash Tracer: Similar to Flash Tracer for Firebug, but also works for Internet Explorer and Chrome: http://code.google.com/p/flash-tracer/.
- SOS max: Creates a socket server on your computer to which an AS3 project can send data; this data will then be logged and can then be viewed: http://www.sos.powerflasher.com/.
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.
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.