Hola amigos.
La clave es haber preparado todo, incluido: html, js, y incorporar el swc de facebook en el FLA. Si llegas a este blog por primera vez, recomiendo que leas los siguientes post, porque en estos se explica como la introducción al desarrollo facebook en AS3. Estos son: Parte0, Parte1 y Parte2. Esta es la entrega número 3.
Consiste en que cuando un usuario va a ingresar a nuestro aplicativo por primera vez, vamos a solicitar los permisos que queramos de necesitemos para nuestro aplicativo. Existen muchos permisos (leer, escribir, email, etc), para ver cuales ahí, miren este link de facebook.
Es algo así como esto, para que entendamos:
Entonces... el código que debemos colocar en nuestro swf, es el siguiente:
stop();
import com.facebook.graph.Facebook;
//este textfield para pruebas
var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.border = true;
tf.textColor = 0xFF0000;
addChild(tf);
//api de nuestra aplicacion
var apiAPP = "xyzasdfghjkldfghjkdfghjkl"; //esto lo sacas de la pagina propia de developers de facebook, en la opción"mis aplicaciones"
//verificar si esta logeado o no
Facebook.init(apiAPP,loginHandler); //este número largo es el id del aplicativo
function loginHandler(success:Object,fail:Object):void {
if(success){
//crear como el cookie de flash para facebook
Facebook.api("/me",getMeHandler);
}
else {
//si no esta logeado se pasa a logearse
ExternalInterface.call("redirect",apiAPP, "publish_stream, user_photos","http://apps.facebook.com/miaplicativo/");
}
}
function getMeHandler(result:Object,fail:Object):void{
tf.appendText(String(result.first_name));
}
Ojo: lo que tienes que modificar en este código es:
a) apiAPP y
b) http://apps.facebook.com/miaplicativo/ por la ruta de tu aplicativo.
La línea de a continuación es donde solicitamos los permisos que queramos:
ExternalInterface.call("redirect",apiAPP, "publish_stream, user_photos","http://apps.facebook.com/miaplicativo/");
Como nos damos cuenta, para colocar más o menos permisos, los debemos separar por comas:
En el ejemplo anterior se colocó: "publish_stream, user_photos" Pero puedes agregar más si quieres.
¿Como podemos hacer pruebas?
La primera vez no hay problema, pero como puedo probar si agregue nuevos permisos?
Paso No. 1 Eliminar cache de nuestro explorador.
Paso No. 2: Eliminar la aplicación que agregamos de nuestra cuenta.
Paso No. 3: Subir a nuestro servidor el nuevo swf actualizado. (jeje lógico)
Cuando hayas hecho esto, entonces podras volver a ingresar a tu link del aplicativo ejp: http://apps.facebook.com/miaplicativo/
Bueno... espero te sirva.
Sean felices.
Si tienes dudas, has tu comentario y preguntame...
A aquel que se ha "matado" encontrando la solución. Le doy las gracias mediante este blog. Y lo que aprendí de él, lo comparto con todos.
Busca lo que quieras
Mostrando entradas con la etiqueta TutoFaceAS3. Mostrar todas las entradas
Mostrando entradas con la etiqueta TutoFaceAS3. Mostrar todas las entradas
Tutorial aplicacion facebook as3 parte2 Antes de programar configurar
Hola amigos.
//editado 08/abr/2011: Que pena si en este no explico el hola Usuario, pero es que es necesario preparar todo html, js, y swc en el flash, así que lean primero este post, y después si podran pasar al siguiente post de este tutorial.
Esto gracias a Adobe y su super manual Claro que esto esta en flex y no en flash.
En la parte No. 1 mencionamos como hacer un hola mundo.
Ahora vamos a realmente preparar todo (javascript y librerias) para realizar la interacción entre facebook y as3.
Gracias a los amigos de google contamos con varios desarrollos que nos ahorraron todo el trabajo.
Así que a continuación coloco el formato general que debe tener un html para el manejo de facebook sobre el flash.
Al respecto solo coloco en cursiva lo que realmente tiene que ver con facebook, lo demás, son conocimientos de swfobject, y pues nada más.
A continuación el código html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Include support librarys first -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<!-- Include FBJSBridge to allow for SWF to Facebook communication. -->
<script type="text/javascript" src="FBJSBridge.js"></script>
<script type="text/javascript">
function embedPlayer() {
var flashvars = {};
swfobject.embedSWF("index.swf", "flashContent", "720", "596", "10.0", null, null, null, {name:"flashContent"});
}
//Redirect for authorization for application loaded in an iFrame on Facebook.com
function redirect(id,perms,uri) {
var params = window.location.toString().slice(window.location.toString().indexOf('?'));
top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+id+'&scope='+perms+'&redirect_uri='+uri+params;
}
embedPlayer();
</script>
</head>
<body>
<div id="fb-root"></div>
<div id="flashContent">
<h1>Tu necesitas instalar la última versión de flash para ver este contenido.</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
Como vemos... las librerias son llamadas desde los servidores de google y facebook excepto FBJSBridge.
Asi que aquí dejo el link de FBJSBridge
Ahora vamos a agregar la librería para el desarrollo facebook en nuestro archivo .fla.
Será algo muy similar a los pasos que desarrolle en el manual de tweenlite effects. Es decir, agregar a la library de flash el swc conrrespondente de facebook. Aquí dejo el link para que sigan los pasos con pantallazos, lo unico diferente es que vamos es a seleccionar otro swc diferente. En este caso, se llama GraphAPI-web-1.5.swc y la última versión se encuentra en google. Así que descarguen la última versión.
Y agregan el swc descargado tal como lo menciona esta guía de tween effects.
Cuando la hallamos agregado, entonces estamos listos y preparados para comenzar a programar con la api de facebook en as3. Felicidades!!!
Y verán las maravillas que se podrán hacer!!!.
Proximamente, mostraremos como hacer el "hola USUARIO"... donde explicaremos toda la lógica de esto del API de facebook.
Espero les sirva..
Sean felices.
//editado 08/abr/2011: Que pena si en este no explico el hola Usuario, pero es que es necesario preparar todo html, js, y swc en el flash, así que lean primero este post, y después si podran pasar al siguiente post de este tutorial.
Esto gracias a Adobe y su super manual Claro que esto esta en flex y no en flash.
En la parte No. 1 mencionamos como hacer un hola mundo.
Ahora vamos a realmente preparar todo (javascript y librerias) para realizar la interacción entre facebook y as3.
Gracias a los amigos de google contamos con varios desarrollos que nos ahorraron todo el trabajo.
Así que a continuación coloco el formato general que debe tener un html para el manejo de facebook sobre el flash.
Al respecto solo coloco en cursiva lo que realmente tiene que ver con facebook, lo demás, son conocimientos de swfobject, y pues nada más.
A continuación el código html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Include support librarys first -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<!-- Include FBJSBridge to allow for SWF to Facebook communication. -->
<script type="text/javascript" src="FBJSBridge.js"></script>
<script type="text/javascript">
function embedPlayer() {
var flashvars = {};
swfobject.embedSWF("index.swf", "flashContent", "720", "596", "10.0", null, null, null, {name:"flashContent"});
}
//Redirect for authorization for application loaded in an iFrame on Facebook.com
function redirect(id,perms,uri) {
var params = window.location.toString().slice(window.location.toString().indexOf('?'));
top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+id+'&scope='+perms+'&redirect_uri='+uri+params;
}
embedPlayer();
</script>
</head>
<body>
<div id="fb-root"></div>
<div id="flashContent">
<h1>Tu necesitas instalar la última versión de flash para ver este contenido.</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
Como vemos... las librerias son llamadas desde los servidores de google y facebook excepto FBJSBridge.
Asi que aquí dejo el link de FBJSBridge
Ahora vamos a agregar la librería para el desarrollo facebook en nuestro archivo .fla.
Será algo muy similar a los pasos que desarrolle en el manual de tweenlite effects. Es decir, agregar a la library de flash el swc conrrespondente de facebook. Aquí dejo el link para que sigan los pasos con pantallazos, lo unico diferente es que vamos es a seleccionar otro swc diferente. En este caso, se llama GraphAPI-web-1.5.swc y la última versión se encuentra en google. Así que descarguen la última versión.
Y agregan el swc descargado tal como lo menciona esta guía de tween effects.
Cuando la hallamos agregado, entonces estamos listos y preparados para comenzar a programar con la api de facebook en as3. Felicidades!!!
Y verán las maravillas que se podrán hacer!!!.
Proximamente, mostraremos como hacer el "hola USUARIO"... donde explicaremos toda la lógica de esto del API de facebook.
Espero les sirva..
Sean felices.
Tutorial aplicacion facebook as3 parte1 Hola mundo
Hola amigos.
Aclaro antes que nada que esto es una manera, pues hay muchas formas de hacerlo.
Para hacer esto necesitamos:
1) Tener usuario y password de facebook.
2) En la casilla buscar colocar developer e ingresar a "Desarrollador" y permitir acceso a información básica.
Si te saca error, lo que tienes que hacer es volver a buscar e ingresar.
3) Clic en "crear nueva aplicacion".
4) Verificar a través de telefono movil o como quieras.
5) Colocar cualquier nombre de aplicacion, aceptar condiciones y clic en boton "Creacion... o aceptar o como diga"
6) Configurar el aplicativo(en este caso aplicativo basado en IFRAME)
Lo que hay que configurar es:
- Sitio Web -> Site url : http://www.midominio.com/miaplicacion/
- Integración con facebook -> Pagina de trabajo: aplicacionprueba
- Integración con facebook -> Canvas URL: http://www.midominio.com/miaplicacion/
- Integración con facebook -> Canvas type: Iframe
7. Subir nuestro swf (que diga hola mundo) siendo impreso a través de una pagina html, puede llamarse index.html.
Para imprimir un flash con swfobject puedes ir al siguiente link: http://graciasinternet.blogspot.com/2011/03/pasar-parametros-con-flashvars-en-as3-y.html
8. Verificar en nuestro browser que el link: http://www.midominio.com/miaplicacion/ abrá el swf correctamente.
9. Ahora si probemos el link pero de facebook: http://apps.facebook.com/aplicacionprueba/
10. Si te carga el swf con ese link haz alcanzado el primer objetivo!!!. Muy bien.
11. Disfrutarlo y seguir con la parte No. 2 de este tutorial (Puedes revisar en palabras clave "TutoFaceAS3" otros tutoriales de facebook como también en la palabra clave Facebook), algo como esto:
Sean felices!
Aclaro antes que nada que esto es una manera, pues hay muchas formas de hacerlo.
Para hacer esto necesitamos:
1) Tener usuario y password de facebook.
2) En la casilla buscar colocar developer e ingresar a "Desarrollador" y permitir acceso a información básica.
Si te saca error, lo que tienes que hacer es volver a buscar e ingresar.
3) Clic en "crear nueva aplicacion".
4) Verificar a través de telefono movil o como quieras.
5) Colocar cualquier nombre de aplicacion, aceptar condiciones y clic en boton "Creacion... o aceptar o como diga"
6) Configurar el aplicativo(en este caso aplicativo basado en IFRAME)
Lo que hay que configurar es:
- Sitio Web -> Site url : http://www.midominio.com/miaplicacion/
- Integración con facebook -> Pagina de trabajo: aplicacionprueba
- Integración con facebook -> Canvas URL: http://www.midominio.com/miaplicacion/
- Integración con facebook -> Canvas type: Iframe
7. Subir nuestro swf (que diga hola mundo) siendo impreso a través de una pagina html, puede llamarse index.html.
Para imprimir un flash con swfobject puedes ir al siguiente link: http://graciasinternet.blogspot.com/2011/03/pasar-parametros-con-flashvars-en-as3-y.html
8. Verificar en nuestro browser que el link: http://www.midominio.com/miaplicacion/ abrá el swf correctamente.
9. Ahora si probemos el link pero de facebook: http://apps.facebook.com/aplicacionprueba/
10. Si te carga el swf con ese link haz alcanzado el primer objetivo!!!. Muy bien.
11. Disfrutarlo y seguir con la parte No. 2 de este tutorial (Puedes revisar en palabras clave "TutoFaceAS3" otros tutoriales de facebook como también en la palabra clave Facebook), algo como esto:
Sean felices!
Tutorial aplicacion facebook as3 parte0 Introducción
Hola amigos.
/**************************************Coloco esto como si fuera comentario porque es pura chachara... JE JE JE JE
Para quienes no me conozcan, resumo lo que dice mi blog: "A aquel que se ha "matado" encontrando la solución. Le doy las gracias mediante este blog. Y lo que aprendí de él, lo comparto con todos."
Bueno, pues este será mi primer tutorial para beginners, principiantes y avanzados (porque no... recordar es vivir).
Comenzaré mi primer tutorial: TutoFaceAS3, ó Tutorial para hacer aplicaciones en facebook en AS3.
Esto se pone interesante. Así que como la gallina... al grano.
Este tutorial estará compuesto de varios post, los cuales pueden ser consecutivos pero otros no. Así que trataré de ser lo más organizado, pero a medida que salgan cosas nuevas, pues recomiendo mirar dentro de la sección "palabras clave" "TutoFaceAS3" a la derecha del blog. :P. O suscribanse a mi blog. Más fácil no?.
***************************************/
Comencemos.
Lo primero que haremos es un "Hola mundo", o configuración inicial de nuestra app.
Haz click aquí para ir al post No. 1 de este tutorial.
Sean felices! :) :)
/**************************************Coloco esto como si fuera comentario porque es pura chachara... JE JE JE JE
Para quienes no me conozcan, resumo lo que dice mi blog: "A aquel que se ha "matado" encontrando la solución. Le doy las gracias mediante este blog. Y lo que aprendí de él, lo comparto con todos."
Bueno, pues este será mi primer tutorial para beginners, principiantes y avanzados (porque no... recordar es vivir).
Comenzaré mi primer tutorial: TutoFaceAS3, ó Tutorial para hacer aplicaciones en facebook en AS3.
Esto se pone interesante. Así que como la gallina... al grano.
Este tutorial estará compuesto de varios post, los cuales pueden ser consecutivos pero otros no. Así que trataré de ser lo más organizado, pero a medida que salgan cosas nuevas, pues recomiendo mirar dentro de la sección "palabras clave" "TutoFaceAS3" a la derecha del blog. :P. O suscribanse a mi blog. Más fácil no?.
***************************************/
Comencemos.
Lo primero que haremos es un "Hola mundo", o configuración inicial de nuestra app.
Haz click aquí para ir al post No. 1 de este tutorial.
Sean felices! :) :)
Suscribirse a:
Entradas (Atom)
Palabras Clave
.NET
(93)
AJAX
(2)
ajaxcontroltoolkit
(2)
Algoritmos
(1)
android
(1)
Angular
(1)
Arrays
(1)
AS2 o ActionScript 2.0
(1)
AS3 o ActionScript 3.0
(64)
ASP
(7)
ASP.NET
(3)
Azure
(1)
Azure DevOps
(2)
Backup
(2)
Batch
(4)
blogger
(1)
Browser Support
(2)
C#
(53)
Charts
(1)
Chorme extensions
(1)
Chrome
(3)
cmd
(18)
código postal
(1)
Colombia tips
(1)
command
(1)
Conexion remota
(1)
Controles Web .NET
(24)
Cookies
(1)
cordova
(1)
CSS
(14)
CSV
(5)
Cufon
(1)
DateTime
(2)
deployment
(2)
Desarrollo movil
(2)
Desarrollo web
(5)
Diseño
(4)
DNN o DotNetNuke
(5)
docker
(1)
Encuestas
(1)
Entity Framework
(1)
Error
(1)
Eval
(2)
Excel
(4)
Expresiones regulares
(2)
Facebook
(14)
fechas
(1)
Fiddler
(1)
FileUpload
(1)
Filezilla
(1)
Firefox
(2)
Flash
(9)
Fonts
(3)
FQL
(1)
frameworks
(2)
Futuro de la web
(1)
git
(1)
Google Code
(13)
Google Maps
(4)
hackintosh
(3)
hazard 10.6.2
(3)
herramientas para developers
(1)
highchart
(1)
Hilos
(2)
Hosting Windows
(18)
HTML
(38)
HTML5
(6)
IDE
(1)
IE
(2)
IE9
(1)
IIS
(13)
imagenes
(3)
jasmine
(2)
java
(1)
jqgrid
(2)
Jquery y Javascript
(90)
jquery-ui
(5)
jQueryMobile
(1)
JSON
(1)
knockout
(4)
library
(1)
Link Interesantes
(2)
List
(1)
Macro
(2)
Matemáticas
(2)
Membership
(6)
Memoria
(1)
Mis Experiencias
(3)
momentjs
(1)
ms-dos
(1)
MSN
(1)
MVC
(1)
MVC4
(3)
MySQL
(2)
node.js
(4)
Notepad++
(3)
Notificaciones
(1)
ObjectDataSource
(2)
Online
(2)
Opinión
(4)
OSX
(3)
Parallels Plesk Panel
(1)
petapoco
(1)
PhantomJS
(1)
PHP
(4)
Porqué este blog
(1)
Powershell
(1)
Razor
(3)
Redes
(2)
REGEX
(4)
REST
(1)
SDK Android
(1)
Seguridad
(1)
SelectParameters
(1)
Selenium
(2)
sencha
(3)
sencha cmd
(2)
SEO
(1)
SMTP
(2)
Software útil
(8)
Solución
(1)
Soporte
(1)
SQL
(15)
SQL Server
(58)
SQLite
(2)
Store Procedures
(20)
String
(5)
Testing Code
(2)
texto
(2)
tips de datos
(1)
tips de desarrollo
(1)
TutoFaceAS3
(4)
TutoProAS3
(4)
Tutoriales
(7)
Tweenlite effects
(3)
Últimas noticias
(1)
unit testing
(1)
usb
(1)
VBA
(1)
Video
(1)
virus
(1)
Web API
(2)
Web Browsers
(1)
Web Forms
(7)
web.config
(1)
Webmaster
(8)
Webmatrix
(1)
webrole
(1)
webservices
(1)
webstorm
(1)
Win Forms
(5)
Windows
(21)
Windows 7
(1)
Windows 8
(1)
XML
(2)
Youtube API
(2)



