; Facebook apps and Flash
Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Facebook apps and Flash

VIEWS: 5 PAGES: 6

  • pg 1
									Facebook apps and Flash, a one-two punch

I just finished my new app called HairCutStylist (http://apps.facebook.com/haircutstylist/)
using Flash, PHP and mySQL. In order to complete that I ran through LOTS of problems
until I finally figured out how to make Flash and Facebook act together. To implement Flash
in FB apps is a great deal, because it offers so many possibilites. Think about the facts that
you can load the list of users and create animations similar to those seen in applications of
Slide.com or think about what you can do with the photos displayed in Flash. You can fade,
or scale them. Only the imagination is your limit.

But in order to be able to do this, you have to make smaller steps towards those goals. This
tutorial is a small step that will make you confident to make more complex apps in future. It
doesn't make sense to start with too complex stuff because you will loose all your selfesteem


Before you start with the tutorial, I assume you already have a facebook account and the
developer application added so you can make apps in FB. I also assume that you already
have developed Facebook apps before and that you are not a beginner. There are a lot of
beginner tutorials for how to start with Facebook application development, the API keys
and how to get them, the canvas pages etc. There is lots of coverage about this so I will not
repeat myself here. Also, for this tutorial you will need Flash Professional CS3.

Let's get it on!

In this tutorial we will simply try to load the profile image into the Flash file using
ActionScript 3.0. It's a good start before you start creating fancier stuff.

1. Open Flash CS3 and make a Flash document of size 300 x 300.
2. Place a Loader component on it:




3. Name it „profilePic_mc―.
4. In the first frame of the movie, add the following code to it:

//get the facebook parameters
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
var imgSrc:String = String(paramObj["imgSrc"]);

profilePic_mc.source = imgSrc;

Your document should look like this:




5. Publish the movie only as Flash and thats all for Flash! Upload the main.swf you just
created to the remote directory of your facebook application.
Lets move on to Facebook, here is how your index.php page should look like, it's fairly
simple:

<?php

//path to your facebook library
require_once("facebook/client/facebook.php");

//create new facebook instance with your api keys
$facebook = new Facebook(YOUR_KEY, YOUR_SECRET);
//prompt the user to login
$fb_user = $facebook->require_login();

//check if the user has added the app
if (!$facebook->api_client->users_isAppUser()) {
         //if not, redirect him to add it
    $facebook->redirect($facebook->get_add_url());
}

//load the profile image
$profilePhoto = $facebook->api_client->users_getInfo($fb_user, 'pic_big');

?>

<!—embed flash file -->
<fb:swf
swfsrc='http://www.pathToYourServer.com/pathToYourApp/main.swf?imgSrc=<?=
$profilePhoto ?>' allowscriptaccess='always' bgcolor='#ffffff' wmode='transparent'
flashvars='' width='300' height='300'/>

Save this as „index.php― or however you like and upload it to you Facebook application
directory.

As soon as you load you app in the Facebook Canvas Page, you should see you profile image
right in the Flash file:
Here is the explanation of the code.

$profilePhoto = $facebook->api_client->users_getInfo($fb_user, 'pic_big');

This line loads the path to your profile image, the larger one. And looks in reality like
http://profile.ak.facebook.com/v224/120/49/4234324324.jpg.

In the Flash embed code we pass this image to the SWF:

<fb:swf
swfsrc='http://www.pathToYourServer.com/pathToYourApp/main.swf?imgSrc=<?=
$profilePhoto ?>' allowscriptaccess='always' bgcolor='#ffffff' wmode='transparent'
flashvars='' width='300' height='300'/>

See this main.swf?imgSrc=...?

Finally in Flash we load this image and display it using the code we already discussed.

That's it! If you complete this tutorial, you will have the confidence to make more complex
applications. This tutorials was only a introduction to the one-two punch called Flash – FB!

Have fun and please dont forget to read my next tutorials!

Mirza

About the author:
Mirza Hatipovic is a Flash developer from Bosnia and Herzegovina. He enjoys programming
in ActionScript, PHP and C#. An enthousiast in all fields, he is currently focused on the
Facebook API.

								
To top