Desarrollo de una aplicaci贸n de Facebook con ActionScript 3 Adobe API
22/05/2009
Voy a mostrarles como conectar ActionScript 3 (Flash,Flex,Air) a trav茅s de la plataforma de Facebook con la API que Adobe saco, y as铆 poder realizar aplicaciones para esta conocida red social.

La Nueva Plataforma API de Adobe para Facebook en ActionScript 3.0, nos proporciona de una manera muy f谩cil el poder programar aplicaciones que combinen el poder de ActionScript con la plataforma de Facebook.

La plataforma de Adobe para Facebook nos provee de una solucion ideal y robusta pra experimentar con la red social mas conocida.
Flash actualmente est谩 instalada en mas de el 98% de las pcs, haciendo que los usuarios puedan utilizar las aplicaciones hechas en swf y asi interactuar con videos, animaciones y m煤sica.
La red social Facebook es usada por millones de personas diariamente para conectarse entre si y compartir sus experiencias.

Juntas estas dos plataformas te permiten:
* Compartir: Crea contenido interactivo para que los usuarios compartan con sus amigos.
* Divertirte: Desarrolla juegos sociales, permite a los usuarios competir y compartir con sus amigos.
* Conectarse: Perm铆tele a los usuarios conectarce a tu aplicaci贸n en Facebook.
* Resolver Problemas: Construir aplicaciones que refuercen el poder de la comunidad.
* Lleg谩r a los usuarios: LLeg谩 a millones de usuarios de Facebook a trav茅s de la distribuci贸n.

Comencemos con un poco de c贸digo, antes que nada el objetivo de este post no es explicar c贸mo configurar una aplicaci贸n en Facebook sino de c贸mo usar la API de Adobe para conectarnos a la base de datos de Facebook.

----------------------------------------------

Primero importamos todas las clases que vamos a utilizar para el desarrollo, les recomiendo que visiten la pagina del proyecto de la API para que se informen de sus funcionalidades.

import com.facebook.commands.profile.SetFBML;
import com.facebook.commands.users.HasAppPermission;
import com.facebook.commands.users.GetInfo;
import com.facebook.data.users.GetInfoData;
import com.facebook.data.BooleanResultData;
import com.facebook.data.auth.ExtendedPermissionValues;
import com.facebook.data.users.HasAppPermissionValues;
import com.facebook.data.users.GetInfoFieldValues;
import com.facebook.data.users.FacebookUser;
import com.facebook.errors.FacebookError;
import com.facebook.events.FacebookEvent;
import com.facebook.net.FacebookCall;
import com.facebook.Facebook;
import com.facebook.session.WebSession;
import com.facebook.utils.FacebookSessionUtil;
//------http://www.phoxer.com------


Ahora vamos a obtener todas las variables que facebook nos pasa como Flash Vars, estas variables contienen informaci贸n importante para el desarrollo.
Tambi茅n comenzamos a generar las variables que utilizaremos en la aplicaci贸n

var flashVarsParams:Object = loaderInfo.parameters;
 
var fbSessionUtil:FacebookSessionUtil = new FacebookSessionUtil("*ApyKey", null, loaderInfo);
fbSessionUtil.addEventListener(FacebookEvent.CONNECT, onFacebookConnect, false, 0, true);
var fb:Facebook = fbSessionUtil.facebook;
var user:FacebookUser;


*ApyKey: Es el c贸digo que Facebook te da al crear un nuevo espacio para tu aplicac铆贸n.

Ahora vamos a generar las funciones que nos permitan interactuar con la base de datos de Facebook.
Aviso Importante: este m茅todo solo funciona sobre Facebook, no funciona localmente, para generar aplicaciones localmente ver el video de mas abajo.

function isAppAllowed(SessionKey:String):void {
	if (SessionKey != null) {
		fbSessionUtil.verifySession();
	} else {
		shown.text="Facebook nesesita validad al usuario.";
	}
}
isAppAllowed(flashVarsParams.fb_sig_session_key);
 
function onFacebookConnect(e:FacebookEvent):void { 
	if (e.success){
		setApplicationFBML();
	} else {
		shown.text="Error, No se puede conectar a Facebook.";
	}
}
 
function setApplicationFBML():void{
	var call:FacebookCall=fb.post(new GetInfo([fb.uid],[GetInfoFieldValues.ALL_VALUES]));
	call.addEventListener(FacebookEvent.COMPLETE,onGetInfo);
}
 
function onGetInfo(e:FacebookEvent):void{
	user=(e.data as GetInfoData).userCollection.getItemAt(0) as FacebookUser;
	trace("Hello "+user.first_name+" "+user.last_name);
}


Listo con este c贸digo ya podemos conectarnos a la base de datos de Facebook y as铆 poder desarrollar aplicaciones de manera f谩cil y r谩pida.

Si quieres testear la aplicaci贸n localmente ver el video a continuaci贸n
----------------------------------------------


En este v铆deo, Daniel Dura, nos muestra c贸mo utilizar Flex Builder para desarrollar la primera aplicaci贸n Flash en la plataforma de Facebook utilizando el cliente de ActionScript 3.0 de Adobe para la Plataforma Facebook API.





Fuente: http://www.adobe.com/devnet/facebook/
Facebook Actionscript 3 api: http://code.google.com/p/facebook-actionscript-api/

| ActionScript 3 | Flex 3 | Air | Facebook
Share |

18 Comentarios.
patricio
19/08/2009

KPO TE COMENTO QUE LA RUEDA O ESA COSA XD DE LA FORTUNA ANDA MAL ! REPORTO PARA QUE NO TE ROMPAN :D SALU2 KPO ! :d

Ynes Paz
30/08/2009

Tengo un problema y quiero solucionarlo, por tanto deseo saber de d贸nde proviene tal comentario, gracias!

Tavo
11/09/2009

Probaste el codigo de arriba, me marca error en la linea:

fbSessionUtil.addEventListener(FacebookEvent.CONNECT, onFacebookConnect, false, 0, true);

error: Multiple markers at this line: -1120: Access of undefined property onFacebookConnect. -1120: Access of undefined property fbSessionUtil. -fbSessionUtil

igual me aparece en la linea de abajo:

isAppAllowed(flashVarsParams.fb_sig_session_key); mismo error

me podrias ayudar

Tavo
17/09/2009

alguien probo este codigo marca errores.

ShonnyS
19/09/2009

gracias a migo esta muy interesante, pero podrias poner un ejemplo descargable, es que sigo los pasos y me da error

gracias

Phoxer
20/09/2009

El codigo functiona bien, el video explica paso a paso como se implementa tambien, por mas que yo les ponga un archivo de muestra, van a encontrar ese c贸digo.

Tengan en cuenta que el codigo que yo uso, SOLO ANDA EN FACEBOOK no anda si lo ejecutan en flash localmente..

Si quieren testear el codigo localmente tienen que cambiar la linea de PARAMETROS (FlashVars) como lo explica el video.

Este codigo los us茅 en mis juegos:

http://apps.facebook.com/hanged-monkey/

http://apps.facebook.com/simon-extreme/

Saludos.

ShonnyS
21/09/2009

:) gracias phox, me estaba equivocando al momento de el uso de la etiqueta fb:swf

grax amigo eres muy inteligente ;)

Jose
22/09/2009

Hola, gracias por la info, he podido adelantar mucho en mi app pero tengo un problema que tal vez t煤 s铆 has podido resolver... c贸mo hago para publicar en el feed (donde todos los amigos ven) un mensaje desde Flash??

No quiero sonar HOYGAN pero estoy atorado en esto hace ya varios d铆as y no encuentro nada... Si me puedes mandar una pista aunque sea ser铆a excelente.

Gracias de antebrazo jaja

Tavo
22/09/2009

Alguien que haya hecho funcionar el codigo pueda pasarme su correo para hablar por msn y poder ver que estoy haciendo mail.

Gracias.

gary rojas
19/10/2009

Hola, disculpe alguien sabe cuales codigo fbml para poder publicar el ejemplo. creo q tengo un problema con respecto al flashvar se le agradeceria mucho.

ShonnyS
19/10/2009

el codigo es el siguiente:

<fb:swf swfsrc='http://tuURL/pelicula.swf' flashvars='variable1=valor1&variable2=valor2' width='760' height='600' wmode = 'opaque' swfbgcolor 'white' />

Miguel Garcia
21/10/2009

Que onda man, tengo una incognita que me esta matando desde hace ya unos dias y es si al api para facebook de adobe trabaja de la misma manera cuando lo utilizas por medio de facebook connect... y no en una aplicacion montada directamente en facebook.

Saludos

gary rojas
21/10/2009

Hola ShonnyS muchas gracias por el aporte. disculpa una pregunta mas. sucede que el ejemplo q esta en el video me salio de maravilla. ya que es un ejemplo para probar localmente. ahora el otro ejemplo para probar en el mismo facebook, ese si aun no me a salido yo supongo que debe ser un problemas con respecto a flashvar que va en el <fbswf flashvar=" me supongo q ahi va unas variables y unos valores en especial tales como el api o algo asi supongo " o no se en esta parte estoy un poco confundido disculpa por la pregunta absurda.

de ante mano muchas gracias.

ShonnyS
21/10/2009

Hola gary, pues yo trabajo con flash, no se si tu estes trabajando con flex, pero las flashvars de la etiqueta fb:swf que van en el php que llama al swf yo por lo menos las utilizo para pasar variables de los datos que saco de mi base de datos sql.

es decir.

saco el score almacenado en la base de datos de mysql y los mando por medio de flashvars para poder previsualizarlo en el swf.

gary rojas
28/10/2009

Hola ShonnyS, gracias por contestar. uhmm osea el flashvar q usas no tiene nada q ver con data de la bd de facebook no es cierto. bueno es q yo estaba intentando hacer el ejemplo q muestra Phoxer pero parece q no me funciona creia q necesitaba pasar datos del facebook ala aplicacion por flashvar. tal vez no sea eso bueno seguire chequeando gracias ShonnyS.

Marco Cartolano
06/03/2010

Que grande phoxer!! no sab矛a que ten铆as blog! :)

Yo me acabo de armar el mio y justo sub矛 un post con la api de facebook y air:

http://www.mentesflash.com.ar/blog/2010/03/conexion-de-facebook-y-as3/

abrazo!

marco

Phoxer
06/03/2010

Hey Marco!! si v铆 tu blog!! muy bueno!! vi el articulo de el reconocimiento de rostros, va de imagenes!! la verdad increible!!!

me pone bien contento que el ActionScript evolucione y sea mas serio!! espero que en una nueva version compita directamente con lenguajes como Java o c++ ojala!!! para hacer proyectos muy copados.

Saludos!!

thaylor mosquera castro
14/05/2010

hola fabuloso todo esto alguien sabe como puedo acer un login en fi aplicacion air con facebook, es decir poner un form con usuario y password y enviarlo a face y que me valide como usuario

P谩ginas

Sobre M铆

Phoxer

Mi vida es una pel铆cula

Categor铆as

Juegos

Peliculas

Musica

Arte

Humor

Horror

Curiosidades

Otros

Programaci贸n

ActionScript

Flash

Flex

Php

Air

Programas

Links

BeatsGames

Crazy Fungus

FaceBook

Twitter

LinkedIn

Formspring Me

Canal Rss

Donar al blog de tutoriales de Phoxer.

----------------------------------------------


Si los tutoriales o los temas tratados en este blog te gustaron y quieres ayudarme a mantenerlos en linea puede hacer una donacion.
La donaciones son destinadas para mantener este blog y a los tutoriales Online.

Donar al blog de tutoriales de Phoxer.

Phoxer