Comunidad de diseño web y desarrollo en internet online

Guía de LoadVars, desde acentos a bases de datos

La interaccion de distintos archivos y/o scripts en una aplicación se ha convertido en una necesidad más que en un "lujo", los creadores de Flash Mx 2004 consciente de esto, nos dan varias alternativas para lograr la comunicacion u obtener fuentes de otros archivos que nos ayuden a hacer animaciones, web, etc. más dinámicas; una de las alternativas muy buenas que nos ofrecen es la clase LoadVars, que nos permite obtener y/o enviar a datos de distintos archivos, ya sean scripts de un lenguaje de servidor(php, asp, coldfusion, etc.) o simplemente cargar datos de un archivo txt y otros.

La clase LoadVars contiene unos metodos muy similares a la clase XML, asi que si ya has trabajado con esta clase, no te será muy dificil trabajar con LoadVars, pero a su vez nos da por decirlo de alguna manera más libertad, ya que dicha clase carga datos con nombres y valores asociados, la manera como LoadVars carga y envia datos(variable y valor) es basándose en el estándar MIME format application/x-www-form-urlencoded, usado para los scripts CGI, por ejemplo, si quisieramos cargar datos por LoadVars, la manera correcta de hacerlo es construyendo una cadena similar a esta:

&variable=valor de mi variable&otraVariable= valor de mi otraVariable& 

Nota: asi deberia estar lleno nuestro archivo txt, o en el caso de un lenguaje de servidor debe imprimir una cadena similar a esa.

Donde estamos definiendo dos variables llamadas variable y otraVariable respectivamente, entonces viendo dicho ejemplo podemos entender que una variable en LoadVars debe estar construida por un & + nombre de la variable + = + el valor de la variable.

Nota: es una buena práctica finalizar la variable o el conjunto de variables con un &.

Entendido esto, podemos empezar a explicar los métodos que más se usan de la clase.

LoadVars: método load(url:String)

Recibe un solo parametro, que será la url del archivo (o script) de donde queremos cargar los datos, los datos serán cargados como propiedades del objeto que creamos con LoadVars, uso:

var miObjetoLoadVars:LoadVars = new LoadVars();
miObjetoLoadVars.load("miarchivo.txt");

LoadVars: método sendAndLoad(url, objeto[,metodo])

Donde url es la dirección del archivo al que le queremos enviar unos datos para recibir una respuesta (otros datos); objeto será el objeto loadvars que recibirá los datos y metodo sera porque método del protocolo HTTP enviaremos los datos (GET o POST), uso:

var miObjetoLoadVars:LoadVars = new LoadVars();
var miObjetoLoadVarsReceptor:LoadVars = new LoadVars();
miObjetoLoadVars.variable= "un valor"; miObjetoLoadVars.otraVariable = "otro valor";
miObjetoLoadVars.sendAndLoad("miscript.php",miObjetoLoadVarsReceptor,"POST");

En el código previo, estaríamos enviando las variables variable y otraVariable por el método POST al script de php llamado miscript.php.

Nota: aunque sendAndLoad envia por el metodo GET, no quiere decir que modifica la url del navegador, pues no lo hace.

LoadVars: evento onLoad(success:Boolean)

El objeto loadvars que haya hecho un load, o el objeto pasado como segundo parametro en sendAndLoad tendrá disponible los datos cargados al ejecutarse este evento, siempre y cuando el parametro success(exito en ingles) tenga como valor true, en tal caso de que success sea false, los datos no son cargados, esto puede ocurrir por múltiples razones, algunas son: la url que se dio fue errónea, en el caso de los scripts del lado del servidor, puede ser que no compilen por errores de sintaxis, servidor caído, etc., uso:

var miObjetoLoadVars:LoadVars = new LoadVars();
miObjetoLoadVars.load("archivo.txt",miObjetoLoadVars,"POST");

miObjetoLoadVars.onLoad = function (success:Boolean){
if (success){
for (var variable in this){
trace("Variable "+variable+": "+ this[variable]);
}
} else{
trace("Error, los datos no fueron cargados");
}
}

Nota: es buena práctica hacer validación del que parametro recibido sea true, asi sea de un simple txt NO somos perfectos.

Nota: al parametro success le puedes personalizar el nombre si quieres, llamandolo: exito, cargado, etc.

Preguntas y Respuestas Frecuentes de LoadVars

Caracteres Especiales (Acentos, ñ, etc.) con LoadVars (Cargar):

El problema al cargar los acentos con LoadVars se solventa de una manera muy simple, en el caso de archivos de texto, debemos guardar el archivo con codificación UTF-8 o Unicode, hacerlo es muy sencillo, en caso del bloc de notas solo haz esto:

  • Abre tu archivo.
  • Guardar como...
  • Debajo de donde le das el nombre dice codificación, por defecto esta seleccionado ANSI, selecciona UTF-8 o Unicode,
  • Guarda tu archivo.

Nota: lo previo también aplica para los archivos xml.

Nota: si no sabes que codificación deberias usar, lee aqui: codificación UTF-8 .

Para el caso de los scripts php, solo debes imprimir la cadena resultado con codificación UTF-8, manera de hacerlo:

$variable = "&caracteres=áéíóúñ&";
echo utf8_encode($variable);

Nota: si usa otro lenguaje de servidor, busca la función similar.

Caracteres Reservados(&, + y otros) de LoadVars

El uso de los caracteres reservados de loadvars en la cadena que contiene los datos que serán cargados deben escribirse con el escape del caracter, para saber el escape de un caracter solo haz esto en flash:

  trace(escape("&")); // salida: %26

Entonces si queremos usar el & en el valor de una variable cargada por loadvars ponemos %26 en vez de &; otro caracter problema es el +, para este tendremos que usar %2B.

Enviar Caracteres Especiales (acentos, ñ, etc.) con LoadVars

Para enviar los caracteres especiales es sencillo, desde flash se envian normalmente, pero al momento de recibirlo en el script php tendras que usar la función utf8_decode, para mas opciones de codificacion ver en php.net:

Funciones de URL, UTF-8 Encode y UTF-8 Decode

Si usas otro lenguaje de servidor, busca la función similar.

Errores Comunes

No carga los datos (problema de url) de LoadVars

Cuando estamos cargando los datos de un script del lado de servidor, debemos poner la url completa del script en el servidor en el parametro correspondiente de los metodos load o sendAndLoad, esto es si queremos probar nuestra pelicula solo con el swf; si usas rutas relativas entonces debes probar tu pelicula desde el navegador y el swf tendra que estar en el servidor. Ejemplo:

Para probar la carga de datos desde el mismo swf:

var miObjetoLoadVars:LoadVars = new LoadVars();
miObjetoLoadVars.load("http://localhost/miscript.php");

Para probar la carga de datos solamente desde el navegador

var miObjetoLoadVars:LoadVars = new LoadVars();
miObjetoLoadVars.load("miscript.php");

En el codigo previo, el swf debe estar al mismo nivel del script php, y tendríamos que escribir en el navegador algo como esto: http://localhost/loadvars.swf, esto es sencillamente porque el script php se debe ejecutar en el servidor, sino lo que hace LoadVars es cargar el script php como un archivo de texto

Nota: esto aplica para todos los lenguajes de servidor (asp, coldfusion, etc).

Errores de Tipeado (problemas al comparar, al sumar, etc.) con Datos de LoadVars

Todos los datos de loadvars son cargados como cadenas (String), un error muy común es intentar hacer una operación matemática y/o comparar con datos cargados desde LoadVars, la solución a esto es hacer la conversión al tipo de datos con que queremos trabajar el dato cargado por LoadVars, ejemplo:

Variables.txt

&a=10&b=20&

Código actionscript

var sumaLV:LoadVars = new LoadVars();
sumaLV.load("variables.txt");

sumaLV.onLoad = function (success:Boolean){
	if (success){
		trace(this.a+this.b); //salida 1020
		var a:Number = Number(this.a);
		var b:Number = Number(this.b);
		trace(a+b); //salida 30
	} else{
		trace("Error en la carga de datos");
	}
}

Uso de System.useCodePage para solventar el problema de caracteres especiales (acentos, ñ, etc.)

Algo que hacen muchos y que siempre critico, es el uso de esta línea:

System.useCodePage = true;

Con la idea de que con ella solucionarán el problema de los acentos, ñ ,etc., pero NO lo hace, esa línea lo que hace unicamente es hacer que el player utilice la codificación del sistema operativo en donde se esta ejecutando, por ejemplo, si nuestro swf es visto por una visitante de estados unidos que no tiene la codificación latina, sino la inglesa, dicha codificación no incluye acentos ni ñ, entre otros, pues ellos no la usan en su lenguaje, asi que los acentos y ñ serán sustituidos por caracteres inesperados. Más información en la ayuda de Flash.

Ejemplos de LoadVars

Archivo de texto (txt) con LoadVars (sencillo) .

Este ejemplo se basará en la carga de un artículo, por lo tanto, cargaremos 3 variables, las cuales serán: titulo, texto y autor. Suponiendo que ya leíste todo lo anterior, nuestro archivo txt estará llenado de la siguiente manera:

texto1.txt

&titulo=Titulo de Articulo&texto=Contenido del articulo&autor=Autor del Articulo& 

Donde estariamos definiendo 3 variables, las cuales son: titulo, texto y autor respetivamente, ahora nuestro código actionscript para cargar las variables seria algo así:

var archivoTexto:LoadVars = new LoadVars();
archivoTexto.load("txt/texto1.txt");

archivoTexto.onLoad = function (exito:Boolean){
	if (exito){
		trace("Titulo: " + this.titulo);
		trace("Texto:  " + this.texto);
		trace("Autor: " + this.autor);
	} else{
		trace("error al cargar archivo de texto");
	}
}

Archivos de Texto (txt) con LoadVars(avanzado)

Siguiendo con el ejemplo anterior, este se basará en cargar varios articulos, por lo que definiremos nombres continuos a las variables que definamos en nuestro archivo txt.

texto2.txt

&titulo0=Titulo del Articulo 0&texto0=Contenido del Articulo 0&autor0=Autor del Articulo 0&titulo1=Titulo del Articulo 

1&texto1=Contenido del Articulo 1&autor1=Autor del Articulo 1&titulo2=Titulo del Articulo 2&texto2=Contenido del Articulo 

2&autor2=Autor del Articulo 2&

Código ActionScript

var archivoTexto:LoadVars = new LoadVars();
archivoTexto.load("txt/texto2.txt");

archivoTexto.onLoad = function (exito:Boolean){
	if (exito){
		for (var i:Number=0;this["titulo"+i]!=undefined;i++){
			trace("Titulo"+i+": "+this["titulo"+i]);
			trace("Texto"+i+": "+ this["texto"+i]);
			trace("Autor"+i+": "+ this["autor"+i]);
		}
	} else{
		trace("error al cargar archivo de texto");
	}
}

PHP con LoadVars(Básico)

Siguiendo el mismo ejemplo del articulo, esta vez lo haremos con php por lo que se tendrá que generar una salida como esta:

&titulo=Titulo de Articulo&texto=Contenido del articulo&autor=Autor del Articulo& 

Bueno para hacer simplemente nos podemos apoyar de echo de php, algo así:

articulo.php

<?php
  $titulo = "Problemas con \"acentos\", ñ, etc. usando php y loadvars de flash";
  $articulo = "Para solventar los problemas de caracteres especiales debes usar la función utf8_encode de php, para mandarle la respuesta a flash con la codificación indicada. Si usas otro lenguaje de servidor que no sea php, busca la función similar en el lenguaje.";
  $autor = "Maikel";
  $respuesta = "&titulo=$titulo&texto=$articulo&autor=&autor&";
  echo utf8_encode($respuesta); 
?> 

En actionscript es similar que hacerlo con txt, solo que ahora pondremos en la url la direccion del archivo php.

Código ActionScript

var archivoPHP:LoadVars = new LoadVars();
archivoPHP.load("http://localhost/tutorial/loadvars/php/articulo.php");

archivoPHP.onLoad = function (exito:Boolean){
	if (exito){
		trace("Titulo: " + this.titulo);
		trace("Texto:  " + this.texto);
		trace("Autor: " + this.autor);
	} else{
		trace("error al cargar el script php");
	}
}

PHP y Base de Datos (MySQL) con LoadVars

En este caso, lo haremos similar al ejemplo de archivos de texto avanzado, definiremos varias variables, donde los valores de cada una lo extraeremos de una base de datos en mysql, para el ejemplo se creó dos tablas, descritas a continuación:

Tabla articulo

Nombre de campo
Tipo de Dato
Características Adicionales
id
INT
Clave primaria, auto_increment, not null
idautor
INT
null
titulo
varchar(100)
null
contenido
TEXT
null

Tabla autor

Nombre de campo
Tipo de Dato
Características Adicionales
id
INT
Clave primaria, auto_increment, not null
nombre
varchar
null

Veamos el codigo necesario de php, para cargar todos los articulos que esten en la base de datos y mandarselos a flash.

articulobd.php

<?php
	 $HOST = "localhost";
	 $USER = "root";
	 $PASS = "";
	 $DATABASE = "loadvars";
	 $conex = mysql_connect($HOST, $USER, $PASS);
	 mysql_select_db($DATABASE, $conex);
	 $sql = "SELECT art.titulo, art.contenido, aut.nombre FROM articulo as art LEFT JOIN autor as aut ON art.idautor = aut.id";
	 $result = mysql_query($sql);
	 mysql_close();
	  $respuesta="";
	 $i=0;
	 while ($row = mysql_fetch_array($result)){
	      $respuesta.= "&titulo$i=".$row['titulo'];
   	  $respuesta.= "&texto$i=".$row['contenido'];
   	  $respuesta.= "&autor$i=".$row['nombre'];
		  $i++;		   
	 }
	 $respuesta.="&";
	 echo utf8_encode($respuesta);
?>

El código previo de php generará una salida como esta:

&titulo0=Titulo del Articulo 0&texto0=Contenido del Articulo 0&autor0=Autor del Articulo 0&titulo1=Titulo del Articulo 

1&texto1=Contenido del Articulo 1&autor1=Autor del Articulo 1&titulo2=Titulo del Articulo 2&texto2=Contenido del Articulo 

2&autor2=Autor del Articulo 2&

Código ActionScript:

var archivoPHP:LoadVars = new LoadVars();
archivoPHP.load("http://localhost/tutorial/loadvars/articulobd.php");

archivoPHP.onLoad = function (exito:Boolean){
	if (exito){
		for (var i:Number=0;this["titulo"+i]!=undefined;i++){
			trace("Titulo"+i+": "+this["titulo"+i]);
			trace("Texto"+i+": "+ this["texto"+i]);
			trace("Autor"+i+": "+ this["autor"+i]);
		}
	} else{
		trace("error al cargar el script php");
	}
}

Nota: sí sé que no leiste el tutorial, lee la parte de preguntas frecuentes y errores comunes, para el problema de acentos, ñ, &, etc.

Despedida

La clase LoadVars es muy potente y nos da muchas cosas que le podemos sacar provecho si la sabemos usar, aqui trate de explicar todo su potencial, ademas de reducir el miedo de utilizarla por los problemas comunes que se le presenta a todos cuando empiezan a usarla, bueno no me quedas más nada que decir, solo que la disfrutes.

Un especial agradecimiento a Mx que hizo el diseño del ejemplo.

¿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