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ónManejo 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
- Cargando variables de un archivo de texto con LoadVars
- Trayendo el contenido completo de un texto
- Nivel Intermedio
- Enviando formularios y datos por GET y POST
- Envio de correo electronico desde un formulario de Flash usando PHP o ASP
- Nivel Avanzado (Entregas aparte)
- Problemas de tildes y signos, formas de solucionarlo
- Cargando datos de archivos tabulados de Excel en CSV
- Evitando el cache por el medio tradicional
- Usando "HTTP Request Headers" para mejorar seguridad y estadisticas
- Evitando el cache por medio de "Request Headers"
¿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:
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:
En la misma carpeta donde tienen ubicado a "CargaVariables.fla" creen con cualquier editor de texto y coloquenle este contenido:
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();
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 .
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...
/* 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();
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();
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();
// 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();
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
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(); }
//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>"; } };
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") %>
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"; ?>
mensaje=Bienvenido Freddie<br />Entra con tu clave 'cr1stalab' :D<br />Att: The Cristalab Team
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 :-)
on (release) { mensaje_txt.text = "Enviando su correo ..."; enviarMail(); }
//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"; } };
<?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"; ?>
<% 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 prontoLoadVars 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.
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?
Inicia sesión
¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?
Registrate