Tutorial de AMFPHP y Actionscript 3

Muchas veces queremos conectar Actionscript con alguna base de datos o enviar mails, etc..., sin embargo Flash, Flex y AIR por si mismo no traen un mecanismo que lo haga nativamente por lo que debemos usar algun lenjuage que nos permita hacer de back-end.

Si bien hoy en día hay muchas posibilidades (Weborb, Zend Framework, ...) usaremos la mas conocida y simple: AMFPHP, que como su nombre lo indica, nos comunicará con una clase PHP.

AMFPHP es una implementación en PHP, gratuita y de código abierto del AMF (Action Message Format), el cual es un formato binario basado en SOAP. AMF permite la serialización binaria de objetos y tipos nativos de ActionScript 2 y ActionScript 3 para ser enviados a servicios del lado del servidor.

Instalación de AMFPHP

Debemos tener instalados en nuestras máquinas alguna de las tantas herramientas que permiten la manipulación de Apache, MySQL y PHP. En mi caso uso Appserv, pero hay varias como Xampp o Wamp. Elijan el que más les guste descarguénlo e instálenlo.

Luego baja los archivos amfphp-1.9.beta.20080120.zip.

Luego de descomprimirlo, buscar y copiar la carpeta amfphp en nuestro diectorio www o htdocs, es decir, la que normalmente usamos como localhost.

La estructura del directorio quedaría de la siguiente manera (en mi caso, la carpeta amfphp la puse en la carpeta raíz de mi blog en el servidor):

• amfphp (Directorio)
  • browser (Directorio)
  • core (Directorio)
  • services (Directorio)
  • gateway.php
  • globals.php
  • json.php
  • phpinfo
  • xmlrpc

Para instalar el dispositivo, debemos dirigirnos a nuestro navegador preferido (con esto digo cualquier menos IE) y en la barra de direciones colocar:http://localhost/amfphp/browser/. Esto nos mostrará una pantalla como la siguiente:

En esta ventana de configuración deberás asegurarte que la dirección del Gateway es correcta. Después de hacer click en el botón Save te aparecerá la lista de servicios que tenemos instalados. Por default y como todavía no hemos creado ningún servicio nuevo, solamente aparecerá el servicio DiscoveryService dentro de la carpeta amfphp.

Pueden hacer la prueba ustedes mismos ingresando en http://localhost/amfphp/browser/ y ahi verán la imagen que esta arriba. Ahora ingresen un número dentro del campo $numeroA e ingresa otro número dentro del campo $numeroB; luego hagan click en el botón Call y observen cómo en el área de resultados (Results) se muestra el resultado regresado por el método restar de nuestra clase operaciones que creamos recién. Luego pueden hacer lo mismo para el método sumar. Y un detalle, es que se fijen en lo que escribimos como comentarios, que ahora se observa por qué son tan útiles.

Importante: Dentro de nuestra clase podemos utilizar métodos privados, los cuales no podrán ser utilizados desde el navegador de servicios (browser) ni desde nuestras aplicaciones en Flash, Flex oAIR. Esto permite crear funciones que realicen operaciones importantes o que requieran mayor seguridad como lo muestra Carla en su Post Original.

Programación de nuestro ejemplo Flash y Actionscript 3

Ahora crearemos nuestro archivo Flash. Para eso creen un documento de Actionscript 3, del tamaño que deseen.

Dentro crean 2 botones (Buttons), estos serán los encargados de sumar y restar correspondientemente, por lo que a uno de ellos le pondremos nombre de instancia: mas_btn y al otro menos_btn. (Como verán mi imaginación para los nombres es muy reducida). Luego agregar 3 TextInput y les damos nombres de instancias: numeroA, numeroB y resultado_txt.

Tendría que quedar algo parecido a esto:

(Aunque supongo que a muchos les quedará mas lindo)

Agregamos una nueva capa y la nombramos Actions. Esta capa contendrá el código necesario para realizar la conexión y los cálculos, por lo que el Actionscript será:

/* 
Archivo realizado por: MAWAPE Sistemas 
Bajado de: www.mawape.com.ar/blog 
*/ 
 
/*Estas son las librerías necesarias para realizar la conexión*/ 
import flash.net.NetConnection; 
import flash.net.Responder; 
 
/*En la variable gateway escribimos la dirección en donde se encuentra nuesto archivo gatawey.php*/ 
var gateway:String = "http://localhost/amfphp/gateway.php"; 
/*La variable conexion del tipo NetConnection es la que permitirá la comunicación*/ 
var conexion:NetConnection = new NetConnection; 
/* Establecemos una conexión Ida/Vuelta entre el Flash y el servidor */ 
conexion.connect(gateway); 
/*Esta variable se encarga del os valores que son regresados por el servidor, 
ya se si es exitosa o no la conexión*/ 
var responder:Responder; 

Tengan en cuenta los comentarios para futuras conexiones. Hasta ahora solo hemos puesto lo minimo para realizar la conexión.

A continuación agregamos lo siguiente, en donde declarando dos métodos que serán llamados dependiendo de botón en que se haga click ya sea el de mas o el de menos.

/*Creamos los listeneres que activarán los botones*/ 
mas_btn.addEventListener(MouseEvent.CLICK, suma); 
menos_btn.addEventListener(MouseEvent.CLICK, resta); 

function suma(evento:MouseEvent):void { 
    /*Creamos las variables que obtendrán los valores ingresados en los TextInput*/ 
    var numeroA:Number = Number(numeroA.text); 
    var numeroB:Number = Number(numeroB.text); 

    /* Le decimos a la variable responder que debe realizar en CASO DE ÉXITO (respuesta) 
y en CASO DE FRACASO (error)*/ 
    responder = new Responder(respuesta, error); 
    /*Invocamos, por medio del método call, al método sumar que se encuentra en la clase 
operaciones (operaciones.sumar). Si se fijan bien, al estar el archivo dentro de un 
directorio, debemos indicarle la dirección exacta. El segundo parámetro del método 
call es nuestro objeto de la clase Responder, este se encargará de manejar los valores ingresados. 
Por último, le pasamos como tercero y cuarto parámetro los dos números que deberá 
recibir la función sumar. */ 
    conexion.call("operaciones.sumar", responder, numeroA, numeroB); 
} 

function resta(evento:MouseEvent):void { 
    var numeroA:Number = Number(numeroA.text); 
    var numeroB:Number = Number(numeroB.text); 

    responder = new Responder(respuesta, error); 

    conexion.call("operaciones.restar", responder, numeroA, numeroB); 
} 
/*Esta función se ejecuta en caso de ÉXITO tras ejecutar el método call, pasándole como 
parámetro un objeto con el resultado regresado. Este resultado lo mostraremos dentro del TextInput 
resultado. */ 
function respuesta(resultado:Object):void { 

    resultado_txt.text = String(resultado); 
} 

/*Esta función se ejecuta en caso de FRACASO tras ejecutar el método call, pasándole como 
parámetro el objeto del eror, el mismo será mostrado en un trace.*/ 
function error(error:Object):void { 
    trace("Error: " + error.description); 
} 

/*Le indicamos que el TextInput con nombre de instancia resultado, será de solo lectura*/ 
resultado_txt.enabled = false; 

Y este es el ejemplo de la aplicación.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo