Una de las API’s mas atractivas y con la cual muchos desarrolladores desean trabajar es la de Facebook, la cual se encuentra en desarrollo continuo y que en esta ocacion vamos a integrar con Flash Professional, anteriormente ya les habíamos mostrado un ejemplo usando Flex. En este tutorial aprenderemos como desarrollar aplicaciones que se comuniquen con Facebook y nos permitan publicar en nuestra cuenta una foto capturada con la webcam; todo esto desde Flash.

Para comenzar necesitaras revisar este tutorial sobre integración de la webcam con Flash, pues a partir de este comenzaremos a integrar la comunicación hacia Facebook.El único cambio es que ahora nuestra aplicación sera de escritorio (AIR).

1.- Comenzaremos descargando el SWC de Facebook para Desktop y ligandolo a nuestra aplicación. Esto lo haremos en el menu File -> ActionScript Settings -> En la pestaña Library Path donde seleccionaremos el pequeño botón con el logo de Flash Player, buscaremos dicho SWC y lo seleccionaremos (se recomienda incluir dicho SWC dentro de la ruta donde se encuentra nuestro proyecto).

2.- Crearemos una nueva clase de ActionScript a la cual llamaremos FacebookConnection (y que heredara de MovieClip), la cual asignaremos hacia nuestro proyecto dentro del mismo menú donde agregamos el SWC.

3.- Las variables que teníamos previamente declaradas dentro de nuestro layer actions, serán declaradas ahora dentro de nuestra clase.

Dentro de nuestro método constructor haremos invisibles nuestros iconos (webcam_mc e imagen_mc) y nuestros textos (txt_uno y txt_dos), para que no sean visibles hasta que el usuario allá iniciado sesión en Facebook. Ademas de agregar un EventListener a nuestro botón login_btn (el cual arrastraremos hasta nuestra aplicación desde el panel components).

4.- Nuestra función loginHandler se encargara de enviar el ID de nuestra aplicación hacia Facebook y así crear la conexión. Ademas de que ejecutara nuestra siguiente funcion a la cual llamaremos evaluaSesion que se encargara de evaluar el resultado de dicha conexión. Arrastraremos a nuestra aplicación una Label a la cual llamaremos labelU, que mostrara al usuario un mensaje cuando allá iniciado o cerrado sesión.

5.- Dentro de este If se evaluara si el usuario ya ha iniciado sesión en Facebook con nuestra aplicación o sino. Si el resultado es que el usuario no ha iniciado sesión entonces se ejecutara la función iniciarSesion, la cual enviara los permisos a Facebook que deberá autorizar el usuario para nuestra aplicación (en este caso para publicar en su muro) y por medio de la función login incluida en el SWC mostrara un popup para que el usuario inicie sesión.
evaluasesion también ejecutara la función evaluaWebcam, que es donde colocaremos el If de la funcion start que teniamos en nuestro layer actions y que se encarga de buscar una webcam instalada en el equipo.

Las funciones onCapturar y onCargar están incluidas dentro del layer actions, y las cuales copearemos a nuestra clase. Solo les agregaremos un especificador de acceso private.

Ahora cuando el usuario inicie sesión en Facebook, la aplicación evaluara si su equipo tiene una webcam instalada y lista para usarse o si solo mostrara la función que nos permita cargar un archivo desde la PC.

6.- Copearemos las demás funciones del layer actions a nuestra clase, puesto que serán las que ejecuten una vez se allá seleccionado captura desde la Webcam o desde Archivo. Añadiremos un boton a nuestra aplicacion y lo llamaremos siguiente_btn al cual haremos invisible desde el panel properties y lo haremos visible cuando el usuario allá hecho la captura con la webcam o allá seleccionado un archivo. La función que ejecutara nos mostrara un TextInput al que llamaremos mensaje_txt, el cual almacenara un mensaje que el usuario escriba con respecto a la captura.

7.- Declararemos una nueva variable llamada distractor del tipo Distractor, el cual se encargara de mostrar al usuario el mensaje: Subiendo… cuando se ejecute la función enviarImagen. Ademas esta función contendrá una variable temporal del tipo object, dentro de la cual contendremos nuestro mensaje, el nombre del archivo y el objeto preview que guarda nuestra imagen. Dicha variable sera enviada ademas por medio del uso de la función api de Facebook, hacia la url /me/photos, por medio del método POST.

8.- Añadiremos un nuevo botón a nuestra aplicación que se llamara logout_btn y que sera invisible hasta que nuestra próxima función respuestaFacebook allá devuelto un resultado positivo respecto a la carga de la imagen. Dicho botón tendrá ademas un EventListener que ejecutara una nueva función llamada cerrarSesion, la cual por medio del método logout de la API, cerrara la sesión del usuario.

9.- Por ultimo, nuestra función evaluaCierre se ejecutara cuando invoquemos el método logout de la API. Esta función ademas devolverá la aplicación a su estado inicial.

Ahora cuando el usuario cargue o capture una imagen desde nuestra aplicación, podrá subirla directamente a su cuenta de Facebook y así compartirla con sus amigos.

Si tienes alguna duda al respecto, no olvides dejar tu comentario, o tambien puedes Descargar el Proyecto.