Ahora vamos a hacer uno Tutorial de Actionscript3, para realizar una galeria de imagenes Finitas, de cierta forma es un tutorial super basicoooooo, pero sirvie bien para los que estan migrandose o comenzando con AS3, ademas la idea de este tutorial es crear una galaeria simple, pero luego veremos como aplicar un efecto 3D a la misma que le dara un toque mucho mas vistozo! … Por ultimo cabe decir que para realizar este ejemplo necesitas tener como minimo la version de Flash CS3.
Este sera el resultado final:

Creamos un nuevo documento de Flash y Actionscript 3, lo ponemosa 24Frames/seg y con un ancho de 480 y un alto de 200, ahora nos descargamos estas imagenes de prueba que usaremos para nuestro ejemplo, una ves descargas (y descomprimidas) simplemente las arrastramos de la carpeta al escenario de flash… Y ahora procederemos a ordenarlas tomamos de una por una y las colocamos cada una a 10px de separacion entre ellas… (Pueden colocar una en X=0 Y=0, la siguiente en X=110 y Y=0 y luego X=220 y asi sucesivamente) una ves ordenadas las seleccionamos todas y las convertimos en MovieClip precionando F8, selecionamos el punto de control en el centro y ponemos como nombre img_mc….

Imagenes Seleccionadas Y MovieClip

Una ves echo esto, seleccionamos el MC en el escenario y en el panel de propiedades le ponemsocomo nombre de instancia “img_mc”, por ultimo colocamos el MC centrado (x=240 y=100)… Listo tenemos el MC preparado empecemos con el codigo, que solo son unas cuantas lineas, seleccionamos el primer frame de la pelicula y en el panel de acciones (F9) ponemos el siguiente codigo:

var minX:Number=35;
var maxX:Number=445;
var mitadEscenario:Number=240;
img_mc.addEventListener(Event.ENTER_FRAME,mover);

Explicacion: Es muy simple, creamos 3 Variables que contienen datos sencillos, la coordenada menor (minX) que el mc img_mc puede tener, la coordenada mayor (estas dos las sacamos simplemente haciendo que el mc quede 10px separado del inio y 10 del final del escenario) y la mitad del escenario…
Luego al MC img_mc le colocamos un listener que ejecutara la funcion “mover” cada ves que se haga el evento ENTER_FRAME…

Ahora nos falta crear esa funcion “mover” que como su nombre lo dice se encargara de mover el MC img_mc.. asi que agregamos estas lineas debajo de las anteriores:

function mover(e:Event){
	var movX:Number= ((stage.mouseX-mitadEscenario)/mitadEscenario)*15;
	img_mc.x+=movX;
	if(img_mc.x<minX){
		img_mc.x=minX;
	}else if(img_mc.x>maxX){
		img_mc.x=maxX;
	}
}

Explicacion: Primero obtenemos un valor que seran los pixeles que se movera el MC, para esto usamos una simple formula (stage.mousex: nos da la pocicion del Mouse en la coordenada X del escenario) y la mejor manera de explicarla seria con un ejemplo: Si tenemos el mouse en la coordenada 20, (stage.mouseX-mitadEscenario) nos dara como resultado -220 (esta parte siempre nos dara un numero entre -240 y 240, dependiendo la pociocion del Mouse), ahora si ese -220 lo dividimo entre la mitad del escenario -220/240 nos dara como resultado -.91 (igualmente al hacer esta division siempre obtendremos un numero entre -1 y 1, dependiendo de la pocicion del mouse!!!! =O…) por ultimo este numero lo multiplicamos por 15 (podria ser caulquier valor) y de esta forma obtenemos un movimiento de pixeles de -13.75 (simepre obtendremos un numero entre -15 y 15)… como ven de esta forma dependiendo la pociccion del mouse, la galeria se movera mas o menos rapido y en la direccion correcta!!!.. =)
Ya teniendo este valor!! se lo sumamos al valor actual de “img_mc” y asi se movera…
Por ultimo tenemos 2 condiciones que simplemente verifican si la pocicion de “img_mc” se sale de alguno de los limites que establecimos antes (minX o maxX) y si es asi entonces lo pociciona directamente en el limite…

Y listo!! tenemos nuestra galeria funcionando facilmente!! pocas lineas de codigo y da un muy buen efecto! esto en ActionScript3 =)…

Espero les haya gustado el tutorial y ya saben que cualquier duda comentario o sugerencia escribanos y estare atento =)!!!..
La proxima ves veremos como hacerla con un efecto 3D … Gracias y suerte!!

Hola hola, bueno ahor mismo tengo problemas con la PC y estoy sin Flash, dreamweaver, photoshop ya saben todos esos programas que nos encantan U.u!!! (sin embargo ahroa mismo ya estoy instalandolos!)

Por lo tanto por ahora me queda hablar de un TAG de FBML que es lo mas sencillo, ahora hablaremos del tag bookmark…
Que es?
Es un link de acceso directo a la aplicacion que aparece de lado izquierdo de la pagina de facebook, y estos nos permiten añadir y organizar nuestras aplicaciones mas usadas…

Colocar Boton Bookmark:
En realidad es muy sencillo colocar un boton de bookmark en tu aplicacion, como cualquier otro tag de FBML, solo abrimos nuestra aplicacion para editar el codigo (y recuerden tener configurada la aplicacion para usar FBML) y colocamos el siguiente codigo donde queremos que aparesca el boton

<fb:bookmark/>

Simpleeeee, ahora los usuarios de tu aplicacion pueden agregar a su barra de favoritos tu aplicacion =)

suerte y gracias!

Hola ola!!… Ahora nos adentraremos a la conexion con Graph Api de Facebook y Javascript SDK y la publicacion con la misma..
aqui les dejo el ejemplo de lo haremos:
http://muelalab.com/ejemplos/tutos/facebook/publicar1.php

Vamos a empezaar..
Antes que nade tienen que tener ya una apllicacion configurada…

1.- Login con Facebook Connect
Creamos un nuevo documento .php o .html, y comenzamos colocando este codigo:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Muelalab.com :: Publicar Con Api Facebook</title>
    </head>
    <body>
</body>
</html>

Esto es necesario siempre que vayamos a utilizar la graph Api, Ahora entre los tag escribimos el siguiente codigo, cambiando las xxxx por tu Aplication ID:

<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.init({appId: 'xxxxxxxxx', status: true, cookie: true, xfbml: true});
    };
    (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());

Esta es la manera mas eficiente de cargar la SDK javascript en la pagina, lo que hace el metodo FB.init es inicializar las librerias SDK… aca hay mas info, igual el div “root” siempre debe estar colocado…

Ahora usaremos otro metodo FB.Events.subscribe que nos permite registrar algunso eventos como son login y logout, vamos a cambiar el codigo anterior y colocamos este:

<div id="fb-root"></div>
        <script type="text/javascript">
            window.fbAsyncInit = function() {
                FB.init({appId: '124092184283992', status: true, cookie: true, xfbml: true});
                FB.Event.subscribe('auth.login', function(response) {login();});
                FB.Event.subscribe('auth.logout', function(response) {logout();});
                FB.getLoginStatus(
					function(response){
                    if(response.session){login();}
                });
            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/en_US/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e);
            }());

De esta forma cuando el usuario se hga login se ejecutara la funcion login, cuando le usuario haga logout, se ejecutara la funcion logout… y por ultimo tenemos otro metodo FB.getLoginStatus que este verifica si el usuario ya estaba logeado (auto-login) y si es asi entonces ejecuta la funcion login…

Ahora falta crear el boton de login, para esto usaremos lel tag fb:login-button y como saben tenemos que pedir permisos para poder obtener informacion “privada” del usuario, el codigo para el boton seria:

<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button>

Como ven aqui estamos requiriendo que el usuario otorge permisos para poder publicar, obtener us email, y otros mas…
Bueno por ahora el codigo completo estaria asi:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Muelalab.com :: Publicar Con Api Facebook</title>
    </head>
    <body>
        <div id="fb-root"></div>
        <script type="text/javascript">
            window.fbAsyncInit = function() {
                FB.init({appId: '124092184283992', status: true, cookie: true, xfbml: true});
                FB.Event.subscribe('auth.login', function(response) {login();});
                FB.Event.subscribe('auth.logout', function(response) {logout();});
                FB.getLoginStatus(
					function(response){
                    if(response.session){login();}
                });
            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/en_US/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e);
            }());
        </script>
    <fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button>
</body>
</html>

2.- Publicando con la Graph Api
Ahora crearemos 3 funciones, la funcion de login la funcion de logout y la funcion para estas 3 usaremos la graph api, escribimos el siguiente codigo dentro de el tag script:

function login(){
                FB.api('/me', function(response) {
                    alert(response.name + " se ha logeado.!");
                });
            }
            function logout(){
                alert("Hasta luego!");
            }
            function Apipublish(){
                var mensaje = 'Aprendiendo A Publicar Con La Graph Api Desde muelalab.com';
                FB.api('/me/feed', 'post', {message:mensaje}, function(response){
                    if(!response || response.error) {
                        alert('Error!');
                    }else{
                        alert('Se Ha Publicado');
                    }
                });
            }

Las funciones login y logout son sencillas (en este caso), simplemente cuando son llamadas muestran un mensaje, en el caso de usar FB.api(‘/me’… estamos requieriendo a la Api nuestra informacion, entre ellas esta el “name”…
Para la funcion de Apipublish hace uso del metodo FB.Api() que hace una llamada al HTTP POST a http://graph.facebook.com/me/feed con un mensaje como parametro… y ese mensaje sera el publicado en el feed (wall) del usuario.. Aca mas info de la Api

Y listo ya tienen su funcion para publicar! logicamente solo hay que llamarla.. para eso podrian ahcerlo con un link de la siguiente forma…

<a href="#" onClick="Apipublish(); return false;">Publicar En Muro Usando La Graph Api</a>

Espero les ea util!! y estare habalndo mas sobre la Graph Api, les dejo el codigo de mi ejemplo para escargar…
Cualquier duda/sugerencia/comentario es bueno para mi!

muchas gracias y sueerte!!

Buenas buenas.. una ves mas aqui con un tutorial express!!!.. he recibido algunos correos que queiren q les hable mas de la Graph Api de Facebook y con gusto lo hare solo que ahora como lo dije en un post anterior estoy con un nuevo proyecto y estoy usando todo el tiempo posible en el..

Pero bueno sigamos!… ahroa vamos a ver como obtener por medio de la Graph Api alguna informacion del usuario logeado…
Aqui les dejo un ejemplo:
http://muelalab.com/ejemplos/tutos/facebook/info.php

Vean el ejemplo!… Entre la informacion que podemos acceder esta la siguiente:

• ID: El id del usuario logeado
• first_name: Primer nombre
• last_name: Apellido
• name: nombre completo
• link: un link hacia el perfil del usuario
• about: el texto que aparece debajo de la imagen del perfil
• birthday: fecha de cumpleaños
• work: lo que tenga escrito en la casilla trabajo
• education: lo que tenga en la casilla educacion
• email: Su correo electronico
• website: su pagina web

Como ven esos son los datos que podemos acceder de un USUARIO, como lo hariamos!.. mas q simple!! (ya se los habia dicho en el tutorial anterior pero parece q nadie experimento ni me hizo caso XD!!!)
Lo que haremos es seguir EXACTAMENTE el tutorial de Graph Api Facebook Tutorial hagan el tutorial y pruiebenlo.. una ves les funcione, podran acceder a la informacion del usuario simplemente ahciendo algo como esto:

echo '<h3>Mis Datos</h3><br>';
echo '<img src="https://graph.facebook.com/'.$uid.'/picture"><br>';
echo $me['name'];
echo "<br>Email: ".$me['email'];
echo "<br>Cumpleaños: ".$me['birthday'];
echo "<br>About Me:".$me['about'];

Calro ese codigo lo agregan al index.php donde imprimimos los datos… y listo tendran accesos a esa informacion! =)!!
Espero les sea de ayuda!! y seguire colocando tutoriales!! de hecho ya tengo un muy buen ejemplo preparado!! es cuestion de escribir el tutorial!! sigan visitandonos, recomendandonos y sobre todo comentando!! hasta un gracias es bueno y si tiene dudas con gusto las resolvemos!!

Suerttee!!