Enviar mail en Flash usando LoadVars

Introducción

Veremos como podemos desde enviar una pequeña petición a un servidor hasta el envío de correo electrónico por medio de un formulario creado en Flash MX 2004.

Requerimientos

  • Conocimientos previos de programación
  • Manejo básico de Flash MX o MX 2004
  • Tutorial hecho con "Macromedia Flash MX 2004 Professional", en ese formato se incluyen los ejemplos y demás
  • archivos.
  • Seria bueno el conocimiento de algún lenguaje de Script del lado del servidor (ASP,. PHP, ColdFusion, JSP) para poder avanzar de mejor manera con los ejemplos del tutorial.
  • Por ultimo, seria bueno que subieras a tu hosting en Internet (Si no tienes, hay muchos lugares donde puedes abrirlo gratuitamente) el ejemplo para probarlo en línea.

Enviando formularios y datos por GET y POST

Uno de los atractivos mas grandes de LoadVars es que nos permite enviar datos que nosotros pidamos al usuario desde Flash como un formulario HTML, que puede ser procesado por cualquier Script del lado del servidor (ASP, PHP, CFML, JSP, Perl, CGI, etc.!), vamos a ver un pequeño ejemplo del envío de un formulario a un script; usare el ejemplo con PHP y con ASP, para que ustedes puedan escoger cual les conviene mas, ya que normalmente estos son los dos lenguajes que soportan la mayoría de servidores; de cualquier manera el código en Flash es el mismo.
La idea es que cuando nosotros enviemos los datos del formulario, el script ASP o PHP nos devuelva un mensaje diciéndonos que el registro se completo y que mientras el script nos da el aviso, aparezca un mensaje cargando.

Para esto, vamos a crear una pequeña interfaz de formulario, con un campo de texto de tipo "Dynamic Text para el mensaje que devuelve el script del servidor, tres campos de entrada para Nombre, Email y Contraseña; en este caso, como lo que vamos a hacer es un formulario, usaremos los componentes de Flash MX 2004, no importa si lo quieres hacer con los tradicionales "Input Text", funcionara de la misma manera, usaremos para los campos de entrada este componente:

Así que la interfaz de usuario nos quedaría con:

  1. Campo de texto "TextInput" para el nombre llamado "nombre_txt"
  2. Campo de texto "TextInput" para el email llamado "email_txt"
  3. Campo de texto "TextInput" para la clave llamado "clave_txt"
  4. Botón de envío del formulario
  5. Campo de texto "Dynamic Text" multilínea para el mensaje del servidor
  6. Logo de Cristalab en la esquina 😀

Ahora el código, para no complicarme con código largo dentro del botón, creare una función llamada enviarForm que se encargara de tomar los tres valores de los campos de texto, organizarlos y enviarlos al formulario, así que el código de el botón de enviar será:

on (release) {
    //Coloca el mensaje de carga en el campo de texto "mensaje_txt"
    mensaje_txt.text = "Cargando…";
    //Llama a la función que envía el formulario
    enviarForm();
}

El código de la función que enviara los datos al formulario junto con el código inherente al LoadVars, estarán en el primer Keyframe de la película.
Nota: Como es la primera vez que vamos a enviar y recibir datos al tiempo, debo aclarar que Flash solicita dos objetos de la clase LoadVars para esta acción, y en este ejemplo así lo vamos a hacer, pero también se puede hacer con uno solo, complicando mas el código pero haciéndolo un poco mas optimo (La diferencia no es mucha).

//Declaro las variables para enviar y para recibir
var envio_lv:LoadVars = new LoadVars();
var recibir_lv:LoadVars = new LoadVars();
//Función que envía el formulario
function enviarForm() {
    //El nombre de la variable que enviara los datos del formulario
    //es "envio_lv", a esa variable le voy asignando uno por uno los
    //valores que le llegaran al formulario, y con el mismo nombre que
    //asigno aquí será con el que los Scripts trataran los datos del
    //formulario
    envio_lv.nombre = nombre_txt.text;
    envio_lv.email = email_txt.text;
    envio_lv.clave = clave_txt.text;
    //Uso el método "sendAndLoad" para enviar el formulario y recibir
    //la respuesta del servidor, el método tiene tres parámetros
    //el primero es la URL del script que tratara el formulario, en este
    //caso lo llame "form.php", el segundo es el objeto que cargara la
    //respuesta del servidor y el tercero el método de envío del formulario
    //que puede ser, como en HTML, GET o POST
    envio_lv.sendAndLoad("form.php", recibir_lv, "POST");
    //Aquí ustedes pueden cambiar de form.php a form.asp dependiendo del servidor
    //que usen
}
//Función que procesa los datos recibidos del servidor
recibir_lv.onLoad = function(exito) {
    if (exito) {
        //Hace que el campo de texto "mensaje_txt" reciba código HTML
        mensaje_txt.html = true;
        //Le asigna el mensaje recibido del servidor, con formato HTML
        mensaje_txt.htmlText = this.mensaje;
    } else {
        //Muestra un mensaje de error en negrita
        mensaje_txt.htmlText = "<b>Error en el Script</b>";
    }
};

Ahora, el código en ASP y PHP . . .

En ASP:

form.asp
<%
Dim nombre=Request.Form("nombre")
Dim email=Request.Form("email")
Dim clave=Request.Form("clave")
Response.Write("mensaje=Bienvenido " & nombre & "<br />Entra con tu clave ‘" & clave & "’ :D")
Response.Write("<br />Att: The Cristalab Team");
%>

Y ahora en PHP

form.php
<?
$nombre=$_POST["nombre"];
$email=$_POST["email"];
$password=$_POST["password"];
echo "mensaje=Bienvenido " . nombre . "<br />Entra con tu clave ‘" . password . " :D";
echo "<br />Att: The Cristalab Team");
?>

No importa si usas PHP o ASP, de cualquier manera ambos scripts siempre devolverán el mismo resultado, pongamos como ejemplo que nuestro usuario pone como nombre "Freddie", como email "[email protected]" y como clave "cr1stalab" , el código que cualquiera de los dos scripts generaría seria:

mensaje=Bienvenido Freddie<br />Entra con tu clave ‘cr1stalab’ :D<br />Att: The Cristalab Team

Para terminar, nuestra aplicación después de entrar esos datos se vería así:

De esta manera Flash puede enviar datos como un formulario a scripts del lado del servidor que los procesen y puedan devolverle un resultado a Flash.

Envío de correo electrónico desde un formulario de Flash usando PHP o ASP

No hay nada mas atractivo (Para el desarrollador, pero no precisamente para el usuario) que poder hacer una miniaplicación capaz de enviar correo electrónico a una dirección cualquiera (Digamos, la nuestra xD), así como Flash puede enviar formularios, de la misma manera es capaz de enviar correo electrónico, realmente el truco es el mismo que en el ejemplo anterior, la diferencia radica en el script que procesa el formulario.

Vamos a crear una interfaz en Flash para envío de correo y mostrare los dos pequeños scripts tanto en ASP como en PHP que a partir de los datos del formulario de Flash, componen y envían el correo electrónico.
Usaremos un nuevo componente, ya que un email normalmente puede incluir varias líneas de texto, el componente "TextInput" no nos sirve porque no es multilínea, así que para esta labor se hizo "TextArea".

Nuestra interfaz para el envío de correo estará compuesta por:

  1. Componente "TextInput" para el correo del remitente llamado "remitente_txt"
  2. Componente "TextInput" para el asunto llamado "asunto_txt"
  3. Componente "TextArea" para el cuerpo del correo llamado "cuerpo_txt"
  4. Botón bonito del ejemplo anterior ^_^
  5. Campo de texto "Dynamic Text" para informar al usuario del estado del envío llamado "estado_txt"
  6. Y el infaltable logo de Cristalab en la esquina 🙂

Nuestra interfaz:

El código es muy parecido al código del ejemplo anterior, así que mejor iré al grano, ya que el funcionamiento es exactamente el mismo; das click al botón de enviar, el estado muestra que estas enviando el correo y cuando lo envías el estado te dice que fue exitoso (Cuando hablo del estado hablo de estado_txt ), así que pondré de primeras, el código del botón:

on (release) {
    mensaje_txt.text = "Enviando su correo …";
    enviarMail();
}

Y ahora el código que debe ir en el primer KeyFrame de la película:

//Declaro las variables para enviar y para recibir
var envio_lv:LoadVars = new LoadVars();
var recibir_lv:LoadVars = new LoadVars();
//Función que envía el formulario
function enviarMail() {
    envio_lv.asunto = asunto_txt.text;
    envio_lv.email = email_txt.text;
    envio_lv.cuerpo = cuerpo_txt.text;
    envio_lv.sendAndLoad("email.php", recibir_lv, "POST");
    //Aquí ustedes pueden cambiar de form.php a form.asp dependiendo del servidor
    //que usen
}
//Función que procesa los datos recibidos del servidor
recibir_lv.onLoad = function(exito) {
    if (exito) {
        estado_txt.text = this.estado;
    } else {
        //Muestra un mensaje de error en negrita
        estado_txt.text = "Error en la aplicación de correo";
    }
};

Lo realmente importante aquí es el código del lado del servidor; estos dos ejemplos te servirán en la mayoría de los casos, pero si usas otro lenguaje puedes programarte tu propio script o siempre esta Google que lo encontrara por ti 😀

En PHP

<php
    $sendTo = "[email protected]";
    $subject = $_POST["asunto"];
    $headers = "From: " . "Cristalab_Flashform";
    $headers .= "<" . $_POST["email"] . ">rn";
    $headers .= "Reply-To: " . $_POST["email"];
    $message = $_POST["cuerpo"];
    mail($sendTo, $subject, $message, $headers);
    echo "estado=Mensaje enviado :D";
?>

En ASP

<%
Set oMail = Server.CreateObject ("CDONTS.NewMail")
oMail.BodyFormat = 0
oMail.MailFormat = 0
Remitente = Request.Form("email")
Destino = "[email protected]" ‘Email de destino
Asunto = Request.Form("asunto")
Cuerpo = Request.Form("cuerpo")
oMail.Send Remitente, Destino, Asunto, Cuerpo
Set oMail = Nothing
%>
estado=Mensaje enviado 😀

Conclusión

Desde Flash MX 2004 las posibilidades en cuanto a conexiones son casi ilimitadas, te invitamos a continuar experimentando con el objeto LoadVars, del cual hay un tutorial completo aquí.

Deja un comentario