Comunidad de diseño web y desarrollo en internet

Sistema de noticias en Flash con LoadVars

Introducción

Flash, desde su versión MX, con el objeto LoadVars nos permitio crear increibles tipos de interacción cliente / servidor, dandonos por primera vez un control total y orientado a objetos de los datos dinamicos.
En este tutorial veremos como crear un sistema de noticias en Flash MX 2004; es recomendable que descarguen primero los archivos del tutorial.

Carga Simple con un solo registro

El primer paso es crear un campo de texto dinámico, que sea multilínea y que pueda interpretar código html eso lo definimos en el panel de propiedades del campo de texto una vez que lo colocamos en el Stage.
Luego abrimos nuestro inspector de Action Script y nos disponemos a trabajar en el código.

Como vemos en el gráfico de arriba vamos a explicar la metodología para cargar texto dinámicamente.

  1. Creamos el objeto y lo hacemos de esta manera. Obj1 = new LoadVars (), y luego generamos la precarga para el campo de texto dinámico que creamos previamente en el Stage. myTexto.htmlText =”Cargando…”
  2. Luego le decimos al Objeto “Obj1” que cargue todo el contenido del archivo “data.txt” (aquí usted puede utilizar un txt, php, asp, etc) y lo grabe dentro del él mismo.
  3. Luego creamos una función “onLoad” para poder manipular nuestros datos que cargamos previamente del txt. Y le decimos que onLoad va estar afectada al Obj1.
    Obj1.onLoad = function() {
    }
  4. Ahora creamos una variable por ejemplo “titulo” y accedemos el objeto justamente haciendo referencia al mismo y leyendo la variable que tenemos en el txt de esta forma.
    titulo = Obj1.titulo;
    Entonces la variable “titulo” ahora contiene el resultado de la variable titulo pero del objeto y luego repetimos este mismo procedimiento para todas la variables que tengamos como en este ejemplo. Entonces la asignación de valores quedaría así.
    titulo = Obj1.titulo;
    descripción = Obj1.descripcion;
    fuente=Obj1.fuente;
    A continuación limpiamos nuestro campo de texto para poder empezar a volcar la información
  5. Luego hacemos referencia a nuestro Text Field y le asignamos código html para darle formato de negritas, dejar espacios, subrayar etc.
    myTexto.htmlText = "<u>"+"<b>"+titulo+"</b></u>"+"<br>"+descripcion+"<br><br>"+"Fuente: "+
    "<u>"+"<A HREF="asfunction:LinkFuenteNoticias,clarin">"+fuente+"</u>"+"</A>";

Repasemos nuestro codigo completo

Obj1 = new LoadVars();
myTexto.htmlText = "Cargando...";
Obj1.load("data.txt");
Obj1.onLoad = function() {
titulo = Obj1.titulo;
descripcion = Obj1.descripcion;
fuente = obj1.fuente;
myTexto.htmlText = "";
myTexto.htmlText = "<u>"+"<b>"+titulo+"</b></u>"+"<br>"+descripcion+"<br><br>"+"Fuente: "+ "<u>"+"<A HREF="asfunction:LinkFuenteNoticias,clarin">"+fuente+"</u>"+"</A>";
};

Función asfunction

Usted ha notado que en el código html que asignamos al campo de texto tenemos una función que se llama “asfuncion”, esta función nos permite asignarle a una palabra o palabras contenida dentro de un campo de texto dinámico un valor determinado tipo string o variable, por ejemplo en este caso utilizamos la función “asfunction” para poner un link en la fuente de la noticia con la idea de que al hacer click nos lleve a la pagina de donde es la noticia originaria o si prefiere enviarle un corre electrónico al autor de esa noticia. Se debe de poner así en el campo de texto.
myTexto.htmlText = "<A HREF="asfunction:LinkFuenteNoticias,clarin">"+fuente+"</A>";

Entonces la función: “LinkFuenteNoticias” se va a ejecutar al hacer click y le vamos a pasar el parámetro “clarín”, en este caso

La función debe de estar definida para que funcione, ahora le indicaremos que el parámetro que va a recibir esta función lo debe de guardar en el la variable “cual” y vamos comparar dicha variable de esta forma.
Así que nuestro código completo hasta ahora el momento sería así:
Obj1 = new LoadVars();
myTexto.htmlText = "Cargando...";
Obj1.load("data.txt");
Obj1.onLoad = function() {
titulo = Obj1.titulo;
descripcion = Obj1.descripcion;
fuente = obj1.fuente;
myTexto.htmlText = "";
myTexto.htmlText = "<u>"+"<b>"+titulo+"</b></u>"+"<br>"+descripcion+"<br><br>"+"Fuente: "+ "<u>"+"<A HREF="asfunction:LinkFuenteNoticias,clarin">"+fuente+"</u>"+"</A>";
};

function LinkFuenteNoticias(cual) { if (cual == "clarin") { direccion = "www.clarin.com.ar"; trace("Fuente de la noticia: "+direccion+" Por: "+cual); } else if (cual == "informador") { direccion = "www.informador.com.mx"; trace("Fuente de la noticia: "+direccion+" Por: "+cual); } }

Bueno hasta ahora vimos como debemos hacer la carga de texto dinámico desde un txt, trayendo el valor de un solo registro tipo noticias.
Ahora veamos como debemos de hacer para cargar varios registros en un campo de texto dinámico tipo noticias.

Carga de varios Registros desde un archivo txt

Aquí se debe de repetir el mismo procedimiento que lo explicado anteriormente pero con la diferencia que como tenemos varios registros en un txt (o bien el resultado de una consulta de base de datos mediante asp, php o lo que usted utilice) los tenemos que recorrer para poder separarlos esto se hace mediante un bucle denominado “for” que lo explicaremos en el siguiente paso, ahora vamos a echarle un vistazo al código completo de este ejemplo.
Revisando este código vamos a encontrar que es muy similar al que vimos anteriormente, pero encontramos que cuando declaramos las variables encontramos esta sintaxis Obj2.titulo.split (“@@@”) , esto significa que vamos a separar los registros que llegan de nuestro txt mediante 3 arrobas (en este caso, pero usted póngale la simbología que usted prefiera).

El comando Split

El comando split funciona de delimitador de una cadena, entonces lo que vamos a hacer es separar nuestra cadena.

El split nos va a separar todos nuestros registros cuando encuentre tres arrobas (“@@@”) entonces, si hacemos un trace de “titulo.length” vamos a ver que nos va a dar un número, ese numero va a ser la cantidad de registros que usted tiene en su txt y ahora separados por a partir de las (“@@@”)
trace(titulo.length)
A continuación asignamos de la misma forma que en el primer caso ya visto, pero dentro del for y cuando declaramos el Text Field le indicamos que se incremente con los operadores “+=” para que nos muestre todos los registros.
for (var i = 0; i<titulo.length; i++) {
	myTexto2.htmlText += "<b>"+"<u>"+titulo[i]+"</u></b><br>"+
	descripcion[i]+"<br><br>"+"<i>"+"Fuente: "+"<a href="asfunction:linkFuenteNoticias,"+
	fuente[i]+"">"+"<u>"+fuente[i]+"</a></i></u>"+"<br>"+separador;
}
Entonces como vemos nuestro código quedará conformado casi de la misma manera que el anterior solo que nuestro text field está dentro de un bucle.
Nota: Asegúrese de separar los registros por el símbolo que usted le indica arriba en este caso las (”@@@”) en su archivo de texto.
Nuestro código completo quedaría de la siguiente manera.

Codigo completo (Caso 2)

Obj2 = new LoadVars();
Obj2.load("data_varias.txt");
myTexto2.htmlText = "Cargando...";
Obj2.onLoad = function() {
titulo = Obj2.titulo.split("@@@");
descripcion = Obj2.descripcion.split("@@@");
fuente = Obj2.fuente.split("@@@");
separador = "----------------------------------------------------------";
myTexto2.htmlText = "";
for (var i = 0; i<titulo.length; i++) {
myTexto2.htmlText += "<b>"+"<u>"+titulo[i]+"</u></b><br>"+ descripcion[i]+"<br><br>"+"<i>"+"Fuente: "+"<a href="asfunction:linkFuenteNoticias,"+ fuente[i]+"">"+"<u>"+fuente[i]+"</a></i></u>"+"<br>"+separador;
}
};
Dario Quiroga
darioquiroga@webserver.com.ar

¿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