Tutorial de LoadVars en Flash

Introducción

Abarcaremos con detalle la clase "LoadVars" de Flash MX 2004, desde lo mas basico a las tecnicas avanzadas de descarga, envio y organización de datos; con archivos de ejemplo incluidos.

Requerimientos

Conocimientos previos de programación
Manejo basico de Flash MX o MX 2004
Como nota adicional, este tutorial fue hecho con "Macromedia Flash MX 2004 Professional" y en ese formato se incluyen los ejemplos y demas archivos.
Para la sección avanzada, 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

Indice

Que es LoadVars?
Nivel Basico
1. Cargando variables de un archivo de texto con LoadVars
2. Trayendo el contenido completo de un texto
Nivel Intermedio
1. Enviando formularios y datos por GET y POST
2. Envio de correo electronico desde un formulario de Flash usando PHP o ASP
Nivel Avanzado (Entregas aparte)
1. Problemas de tildes y signos, formas de solucionarlo
2. Cargando datos de archivos tabulados de Excel en CSV
3. Evitando el cache por el medio tradicional
4. Usando "HTTP Request Headers" para mejorar seguridad y estadisticas
5. Evitando el cache por medio de "Request Headers"
Creando un navegador web en Flash, con LoadVars

¿Que es LoadVars?.

Desde la versión 4 de Flash, Macromedia incluyo formas de conectar a Flash con fuentes externas de datos, por medio de la rudimentaria función loadVariables y su contraparte que cargaba en niveles loadVariablesNum; al llegar Flash 5 al mercado se incluyo la impresionante, para ese entonces, capacidad de carga XML , lo que le daba a flash el poder de cargar "Verbosity Data" (Daros estructurados) por medio de XML.
Sin embargo, la falencia aun existia en el campo de las comunicaciones de texto plano, no XML, hizo que para la salida de Flash MX se creara una nueva clase que reemplazaria a loadVariables y que tendria todo tipo de metodos, eventos y propiedades necesarias para la carga eficiente de texto plano y formateado en Flash MX, el objeto LoadVars.
Como reemplazo de loadVariables, LoadVars es capaz de cargar texto con variables formateado GET/POST o como texto plano, como veremos mas adelante
A partir de ahora, emepzamos con el codigo necesario para la carga de archivos de texto en LoadVars

NIVEL BASICO

Cargando variables de un archivo de texto con LoadVars

En los foros de Flash, normalmente lo que mas piden los usuarios ( Y lo que primero se incluye en las FAQs) es el codigo para cargar archivos de texto externos dentro de Flash, esto LoadVars lo hace de manera sencilla; LoadVars carga variables de un archivo, que estan en el mismo formato establecido para el envio de formularios por "GET"o por "POST", que es el siguiente:

Queremos cargar la variable "nombre" cuyo valor es "Freddie" y la variable "edad" cuyo valor es "69", como son dos variables, el archivo de texto quedaria asi:

nombre=Freddie&edad=69

Notese que para separa una variable de la otra se utilizo el signo ampersand (&) y para asignarles un valor se hizo igual que en cualquier lenguaje de programación.

Nota: En general, el formato para cargar variables desde campos de texto siempre sera :
variable1=valor1&variable2=valor2&variable3=valor3&variableX=valorX

Vamos a cargar nuestro primer archivo de texto plano por medio de LoadVars; el ejercicio consistira en dos campos de texto (Nombre y Edad) donde seran cargados un nombre y una edad traidos de un archivo de texto con esas variables. Creen una nueva pelicula y llamenla "CargaVariables.fla", en mi caso la hare de 200 x 300 pixeles.
Coloquen dos campos de texto de tipo dinamico (Dynamic Text) en el escenario y coloquenles como nombre de instancia "nombre_txt" y "edad_txt" respectivamente, por ultimo abran la libreria comun de Botones ( En Flash MX 2004 : Window -> Other Panels -> Common Libraries -> Buttons ) y coloquen un boton en el escenario; o creen ustedes mismos un boton; en este momento su pelicula se debe ver asi:

Bueno, tal vez no como este ejemplo, pero si parecida debe estar tu pelicula (Todos los archivos de este tutorial estan incluidos en el paquete de "Archivos del Tutorial") asi que ya teniendo una interfaz creemos el archivo de texto.
En la misma carpeta donde tienen ubicado a "CargaVariables.fla" creen con cualquier editor de texto y coloquenle este contenido:

nombre=Freddie&edad=69

guardenlo con el nombre "variables.txt".

Nuestro siguiente paso sera crear el ActionScript necesario para cargar el archivo de texto, que sera el siguiente (Con comentarios explicando para que sirve cada linea de codigo), una parte debe venir en el primer KeyFrame de la pelciula y otra parte dentro del boton

En el KeyFrame #1:

//Crea una objeto de la clase "LoadVars" llamado "cargdor_lv"
var cargador_lv:LoadVars = new LoadVars();

/*Esta es la función que va a manejar todo lo que pase cuando se carguen las variables
  Por eso se llama el evento "onLoad", notese que la función no tiene nombre porque
  es asignada directamente al "onLoad" asi que ese sera su nombre, tambien tiene un 
  parametro llamado "exito", este asume el valor "true" si se cargo con exito el 
  archivo o "false" si buho algun problema como errores 404*/
cargador_lv.onLoad = function(exito) {
	//Si las variables fueron cargadas con exito
	if (exito) {
		/* Coloque en "nombre_txt" el valor de la variable "nombre" del archivo de
		  texto que carego el objeto LoadVars, como estamos dentro de uno de sus
		  metodos (onLoad) podemos llamar al objeto desde su apuntador "this" y
		  esto sera igual que si escribieramos "cargador_lv" */
		nombre_txt.text = this.nombre;
		//Igual que el anterior, coloca la edad
		edad_txt.text = this.edad;
	//En caso de que haya un error
	} else {
		//Mostrar mensaje de error en el campo de texto
		nombre_txt.text = "Error!! :(";
	}
};
//Frena la linea de tiempo principal
stop();

En el boton :

on (release) {
	/* 
	 Le ordena al objeto "cargador_lv" que cargue, por medio de la instrucción "load"
	 el contenido del archivo "variables.txt", haciendo que se ejecute la función 
	 "onLoad" 
	*/
	cargador_lv.load("variables.txt");
}

Ahora para probarlo, dale click al boton y veras que en los campos de texto te cargara el contenido de las variables que tenias en el archivo de texto, intentalo modificando el archivo de texto y volviendo a cargar las variables.

Trayendo el contenido completo de un texto

Otro de los casos muy comunes de uso de la clase LoadVars es la carga de textos completos provenientes de un archivo de texto; esta vez vamos a poner de ejemplo que cargamos un poema en Flash que aparecera en nuestra web, pero que podremos cambiar con el simple hecho de cambiar el archivo de texto por otro poema.

Para empezar vamos a crear una sencilla interfaz, una pelicula de 200x300 y un campo de texto Dynamic Text que en vez de Single Line sea MultiLine, asi cargara el poema si tiene saltos de linea (ENTER); luego, como nombre de instancia para ese campo de texto colocamos poema_txt.
Esta es la interfaz que queda (Mas o menos, sin los adornitos)

Encarguemonos del poema; creo un archivo llamado poema.txt en la misma carpeta de poema.fla y (en mi caso) coloco este texto en el archivo

	Flash . . . 
	Esto es la prueba para hacer rapidamente . . .
	Un poema en Flash MX 2004 que cargue por . . .
	LoadVars, la clase encargada de conectar . . .
	Archivos de texto con Flash 	         . . .
	F...

Bueno que quede claro que le "jalo" mas al ActionScript que a la poesia :D; por ultimo, el ActionScript que cargara mi gran poema en la pelicula, como el poema debe descargarse en el momento en el que se abra la pelicula tendra que venir en el primer Keyframe, yo lo coloco en un nuevo layer vacio que llamo "ActionScript"

/* Creamos al igual que antes, una instancia de la clase "LoadVars"
   Que la llamaremos "poema_lv" */
var poema_lv:LoadVars = new LoadVars();
//Función que se ejecutara cuando cargue el archivo
poema_lv.onLoad = function(exito) {
	if (exito) {
		//     AQUI ESTA LO IMPORTANTE    //
		//La clase LoadVars tiene un metodo llamado "toString"
		//Que devuelve en formato de texto exactamente lo que cargo
		//Asi podremos obtener el texto tal como esta en el archivo,
		//sin formatear.
		poema_txt.text = poema_lv.toString();
	} else {
		//Si no se cargo, muestra un mensaje de error
		poema_txt.text = "Error !!!";
	}
};
poema_lv.load("Poema.txt");
stop();

Y vemos que no funciona!!!, por lo menos no adecuadamente, porque pasa lo mismo que pasa cuando en el navegador nosotros colocamos espacios en una dirección, los convierte en su equivalente Unicode Hexadecimal, los transforma al signo "%20", asi que, ironicamente, si todo va bien, ustedes veran en pantalla

Asi que vamos a arreglar un poco el codigo, observen el "sutil" cambio que haremos al codigo:

var poema_lv:LoadVars = new LoadVars();
poema_lv.onLoad = function(exito) {
	if (exito) {
		//La función "unescape" pide como parametro un texto con
		//caracteres unicode "escapados" como el %20 y los cambia por su 
		//equivalente en texto normal (ASCII) es decir
		// el %20 locambiaria por un espacio, etc!
		poema_txt.text = unescape(poema_lv.toString());
	} else {
		poema_txt.text = "Error !!!";
	}
};
poema_lv.load("Poema.txt");
stop();

Eso "en teoria" ya hizo que vieramos el texto normal despues de la carga del archivo, pero nos queda un problema que quedara mas facilmente explicado con una captura de pantalla

Noten que el final del poema es "=&onLoad?[type Function"; eso no parece un buen final para nuestro poema, esto ocurre porque al usar la función "toString" todo el objeto LoadVars que nosotros cargamos es convertido a texto, asi que tambien es convertida la función que nosotros le asignamos a "onLoad", asi que la forma de solucionarlo es recurriendo a una función del objeto "String" que es el que contiene todos los metodos y propiedades inherentes a las cadenas de texto; para poder usarla, primero tendriamos que asignarle el valor que devuelve "poema_lv.toString();" a un objeto String y luego asignarle el valor devuelto por la función que cortara ese "final" del texto al campo de texto.
Para verlo de una manera mas sencilla, veamoslo en codigo


/* Creamos al igual que antes, una instancia de la clase "LoadVars"
   Que la llamaremos "poema_lv" */
var poema_lv:LoadVars = new LoadVars();
//Función que se ejecutara cuando cargue el archivo
poema_lv.onLoad = function(exito) {
	if (exito) {
		//Creamos un String al estilo de ActionScript 2.0
		var poema_str:String = new String();
		//La clase LoadVars tiene un metodo llamado "toString"
		//Que devuelve en formato de texto exactamente lo que cargo
		//Asi podremos obtener el texto tal como esta en el archivo,
		//sin formatear.
		//La función "unescape" pide como parametro un texto con
		//caracteres unicode "escapados" como el %20 y los cambia por su 
		//equivalente en texto normal (ASCII) es decir
		// el %20 locambiaria por un espacio, etc!
		//Por ultimo, asignamos el valor devuelto a la variable "poema_str"
		poema_str = unescape(poema_lv.toString());
		//Aqui usamos un metodo y una propiedad de la clase String para "cortar"
		//el texto y quitar la función que sobra, esta es la función "substr"
		//que pide como primer parametro desde donde vamos a cortar, en este caso
		//desde el inicio, cero; y segundo parametro hasta donde vamos a cortar
		//para saber hasta donde, le decimos que todos los caracteres (obtenemos
		//la cantidad exacta de todos los caracteres con la propiedad "length" de
		//el objeto) menos 24, porque 24 son la cantidad de caracteres que compone
		//el "feo" final que nos coloca
		//Por ultimo, asignamos eso al campo de texto "poema_txt"
		poema_txt.text = poema_str.substr(0, poema_str.length-24);
	} else {
		//Si no se cargo, muestra un mensaje de error
		poema_txt.text = "Error !!!";
	}
};
poema_lv.load("Poema.txt");
stop();

Ahora, si volvemos a probar la pelicula veremos que ahora carga adecuadamente nuestro poema, pero el codigo es muy largo y no muy adecuado, asi que vamos a apartar en una función todo el codigo que nos permite adecuar el texto cargado, asi que EL CODIGO FINAL DE LA PELICULA quedaria asi:


// Función para arreglar textos cargados mediante LoadVars
function arreglarTexto(texto_str:String):String {
	texto_str = unescape(texto_str);
	return texto_str.substr(0, texto_str.length-24);
}
/* Creamos al igual que antes, una instancia de la clase "LoadVars"
   Que la llamaremos "poema_lv" */
var poema_lv:LoadVars = new LoadVars();
//Función que se ejecutara cuando cargue el archivo
poema_lv.onLoad = function(exito) {
	if (exito) {
		//Le asignamos al campo de texto el texto que fue cargado
		//Arreglado pro la función declarada arriba "arreglarTexto"
		poema_txt.text = arreglarTexto(poema_lv.toString());
	} else {
		//Si no se cargo, muestra un mensaje de error
		poema_txt.text = "Error !!!";
	}
};
poema_lv.load("Poema.txt");
stop();

Puedes utilizarlo en tu web, solo cambia el archivo de texto del poema cada vez que quieras, puedes hacerlo mas avanzado, usar HTML y hasta hacer un minisistema de noticias basado en Flash con el :D.

NIVEL INTERMEDIO

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:

Campo de texto "TextInput" para el nombre llamado "nombre_txt"
Campo de texto "TextInput" para el email llamado "email_txt"
Campo de texto "TextInput" para la clave llamado "clave_txt"
Boton de envio del formulario
Campo de texto "Dynamic Text" multilinea para el mensaje del servidor
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 "[email protected]" 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:

Componente "TextInput" para el correo del remitente llamado "remitente_txt"
Componente "TextInput" para el asunto llamado "asunto_txt"
Componente "TextArea" para el cuerpo del correo llamado "cuerpo_txt"
Boton bonito del ejemplo anterior ^_^
Campo de texto "Dynamic Text" para informar al usuario del estado del envio llamado "estado_txt"
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 enviarForm() {
	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 = "[email protected]";
	$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 = "[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 :D

Conclusión

Si, aun faltan los tutoriales del nivel avanzado, pero estos por su extensión, seran divididos y entregados gradualmente en la sección tutoriales de Cristalab, asi que no te preocupes, estos estaran en linea pronto
LoadVars es una herramienta poderosa para lo que puedas imaginar conectando bases de datos, clientes y servidores o lo que tu imaginación alcanze a crear unificando Flash con el resto de los lenguajes de programación
No olvides que las preguntas referentes al tutorial debes colocarlas en el foro

Freddie® Cristalab
[email protected]

¿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