Comunidad de diseño web y desarrollo en internet online

Enviar correo electronico en Flash usando LoadVars

Introducción

Veremos como podemos desde enviar una pequeña petición a un servidor hasta el envio de correo electronico por medio de un formulario creado en Flash MX 2004.

Requerimientos

Conocimientos previos de programación
Manejo basico de Flash MX o MX 2004
Tutorial hecho con "Macromedia Flash MX 2004 Professional", en ese formato se incluyen los ejemplos y demas archivos.
Seria bueno el conocimiento de algun 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 linea

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 envio 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 mayoria de servidores; de cualquier manera el codigo 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 diciendonos 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 :

Asi que la interfaz de usuario nos quedaria 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. Boton de envio del formulario
  5. Campo de texto "Dynamic Text" multilinea para el mensaje del servidor
  6. Logo de Cristalab en la esquina :D

Ahora el codigo, para no complicarme con codigo largo dentro del boton, creare una función llamada enviarForm que se encargara de tomar los tres valores de los campos de texto, organizarlos y enviarlos al formulario, asi que el codigo de el boton de enviar sera:
on (release) {
	//Coloca el mensaje de carga en el campo de texto "mensaje_txt"
	mensaje_txt.text = "Cargando...";
	//Llama a la función que envia el formulario
	enviarForm();
}
	  
El codigo de la función que enviara los datos al formulario junto con el codigo inherente al LoadVars, estaran en el primer Keyframe de la pelicula.
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 asi lo vamos a hacer, pero tambien se puede hacer con uno solo, complicando mas el codigo pero haciendolo 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 envia el forumlario
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 aqui sera 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 metodo "sendAndLoad" para enviar el formulario y recibir
	//la respuesta del servidor, el metodo tiene tres parametros
	//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 metodo de envio del formulario
	//que puede ser, como en HTML, GET o POST
	envio_lv.sendAndLoad("form.php", recibir_lv, "POST");
	//Aqui 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 codigo 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 codigo 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 devolveran el mismo resultado, pongamos como ejemplo que nuestro usuario pone como nombre "Freddie", como email "webmaster@cristalab.com" y como clave "cr1stalab" , el codigo que cualquiera de los dos scripts generaria seria :
mensaje=Bienvenido Freddie<br />Entra con tu clave 'cr1stalab' :D<br />Att: The Cristalab Team
Para terminar, nuestra aplicación despues de entrar esos datos se veria asi:

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

Envio de correo electronico 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 electronico a una dirección cualquiera (Digamos, la nuestra xD), asi como Flash puede enviar formularios, de la misma manera es capaz de enviar correo electronico, 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 envio 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 envian el correo electronico.
Usaremos un nuevo componente, ya que un email normalmente puede incluir varias lineas de texto, el componente "TextInput" no nos sirve porque no es multilinea, asi que para esta labor se hizo "TextArea".

Nuestra interfaz para el envio de correo estara 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. Boton bonito del ejemplo anterior ^_^
  5. Campo de texto "Dynamic Text" para informar al usuario del estado del envio llamado "estado_txt"
  6. Y el infaltable logo de Cristalab en la esquina :-)
Nuestra interfaz:

El codigo es muy parecido al codigo del ejemplo anterior, asi que mejor ire al grano, ya que el funcionamiento es exactamente el mismo; das click al boton de enviar, el estado muestra que estas enviando el correo y cuando lo envias el estado te dice que fue exitoso (Cuando hablo del estado hablo de estado_txt ), asi que pondre de primeras, el codigo del boton:
on (release) {
	mensaje_txt.text = "Enviando su correo ...";
	enviarMail();
}
Y ahora el codigo que debe ir en el primer KeyFrame de la pelicula:
//Declaro las variables para enviar y para recibir
var envio_lv:LoadVars = new LoadVars();
var recibir_lv:LoadVars = new LoadVars();
//Función que envia el forumlario
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");
	//Aqui 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 aqui es el codigo del lado del servidor; estos dos ejemplos te serviran en la mayoria de los casos, pero si usas otro lenguaje puedes programarte tu propio script o siempre esta Google que lo encontrara por ti :D

En PHP
<?php
	$sendTo = "webmaster@cristalab.com";
	$subject = $_POST["asunto"];
	$headers = "From: " . "Cristalab_Flashform";
	$headers .= "<" . $_POST["email"] . ">\r\n";
	$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 = "webmaster@cristalab.com" 'Email de destino

Asunto = Request.Form("asunto")
Cuerpo = Request.Form("cuerpo")

oMail.Send Remitente, Destino, Asunto, Cuerpo

Set oMail = Nothing

%>
estado=Mensaje enviado :D

Conclusión

Desde Flash MX 2004 las posibilidaes en cuanto a conexiones son casi ilimitadas, te invitamos a continuar experimentando con el objeto LoadVars, del cual hay un tutorial completo aqui
No olvides que las preguntas referentes al tutorial debes colocarlas en el foro

Freddie® Cristalab
webmaster@cristalab.com

¿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

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate