Lector de RSS en Flash

14/12/2006
1:30 am
unijimpe

La presente es una guia para implementar un lector de RSS en Flash, utilizando para ello ActionScript 2.0, veremos en el ejemplo que se puede realizar muy fácilmente un mini lector de RSS, si desean agregarle mas opciones queda a la imaginación de ustedes.

Lo primero es crear un archivo llamado rss.fla con la interfaz visual para nuestro lector de RSS, para ello creamos tres campos de texto, el primero (txttitle) para el titulo del RSS, el segundo (txtdescription) para la descripcion del RSS y el tercero (txtcontent) para todo el contenido, adicionalmente hemos agregado un scroll para cuando existe gran cantidad de texto para el contenido.

En nuestro ejemplo utilizaremos como XML el RSS de este blog. Veamos la estructura de nuestro XML por que nos va a servir para el desarrollo.

<rss version="2.0">
<channel>
<title>unijimpe</title>
<link>http://blog.unijimpe.net</link>
<description>
ActionScript, PHP, ASP, ASP.NET, MySQL, SQL Server...
</description>
<pubDate>Tue, 08 Aug 2006 01:14:24 +0000</pubDate>
<generator>http://wordpress.org/?v=2.0.2</generator>
<language>en</language>
<item>
...
</item>
</channel>
</rss>

El siguiente paso es crear código ActionScript que se encargue de parsear el XML del RSS para posteriormente escribirlo en los campos que hemos creado. Lo primero es definir una variable que contiene el url del RSS a utilizar y luego una variable del tipo XML la cual utilizaremos para el parseo de los datos.

var rssurl:String = "http://blog.unijimpe.net/feed/";
var rssxml:XML = new XML();
rssxml.ignoreWhite = true;
rssxml.load(rssurl);
rssxml.onLoad = function() {
var nodo:XMLNode = rssxml.firstChild.firstChild;
var vtit:String = "";
var vurl:String = "";
var vdes:String = "";
var vcon:String = "";
// -----------------
// codigo para parsear data
// -----------------
txttitle.htmlText = "<a href=\""+vurl+"\">"+vtit+"</a>";
txtdescription.text = vdes;
txtcontent.htmlText = vcon;
}

Además de las variables antes mencionadas hemos creado cuatro variables adicionales en las cuales almacenaremos el titulo, URL, descripción y contenido del RSS, para finalmente escribirlas.

El siguiente paso una vez que ya se tiene la variable con el XML del RSS es obtener los valores necesarios, por defecto ActionScript nos permite obtener datos de un determinado nodo por el índice que indica en que posición se encuentra el nodo, pero en este caso no necesariamente los nodos estarán en en orden, para ello cada nodo posee un nombre el cual indica el contenido que posee. Entonces tenemos que recorrer todos los nodos verificando que tipo de contenido es y segun ello lo asignamos a la variable adecuada.

var nodo:XMLNode = rssxml.firstChild.firstChild;
for (i=0; i<nodo.childNodes.length; i++) {
var snodo:XMLNode = nodo.childNodes[i];
switch (snodo.nodeName) {
case "title":
vtit = snodo.firstChild.nodeValue;
break;
case "link":
vurl = snodo.firstChild.nodeValue;
break;
case "description":
vdes = snodo.firstChild.nodeValue;
break;
case "item":
vcon = vcon + getContent(snodo) + " ";
break;
}
}

En el caso de que el nodo sea del tipo item llamamos a la función getContent que se encarga de parsear los datos para cada item del RSS. La función trabaja de forma semejante pues nuevamente hay que recorrer los subnodos para conocer que tipo de dato es y luego armar un texto con esta información.

function getContent(vxml) {
var stit:String = "";
var surl:String = "";
var sdes:String = "";
for (j=0; j<vxml.childNodes.length; j++) {
var sxml:XMLNode = vxml.childNodes[j];
switch (sxml.nodeName) {
case "title":
vtit = sxml.firstChild.nodeValue;
break;
case "link":
vurl = sxml.firstChild.nodeValue;
break;
case "description":
vdes = sxml.firstChild.nodeValue;
break;
}
}
return "<a href='"+vurl+"'>"+vtit+"</a> "+vdes;
}

Luego uniendo todas las piezas de código obtendríamos:

var rssurl:String = "http://blog.unijimpe.net/feed/";
var rssxml:XML = new XML();
rssxml.ignoreWhite = true;
rssxml.load(rssurl);
rssxml.onLoad = function() {
var nodo:XMLNode = rssxml.firstChild.firstChild;
var vtit:String = "";
var vurl:String = "";
var vdes:String = "";
var vcon:String = "";
for (i=0; i<nodo.childNodes.length; i++) {
var snodo:XMLNode = nodo.childNodes[i];
switch (snodo.nodeName) {
case "title":
vtit = snodo.firstChild.nodeValue;
break;
case "link":
vurl = snodo.firstChild.nodeValue;
break;
case "description":
vdes = snodo.firstChild.nodeValue;
break;
case "item":
vcon = vcon+getContent(snodo)+" ";;
break;
}
}
txttitle.htmlText = "<a href=\""+vurl+"\">"+vtit+"</a>";
txtdescription.text = vdes;
txtcontent.htmlText = vcon;
}
function getContent(vxml) {
var stit:String = "";
var surl:String = "";
var sdes:String = "";
for (j=0; j<vxml.childNodes.length; j++) {
var sxml:XMLNode = vxml.childNodes[j];
switch (sxml.nodeName) {
case "title":
vtit = sxml.firstChild.nodeValue;
break;
case "link":
vurl = sxml.firstChild.nodeValue;
break;
case "description":
vdes = sxml.firstChild.nodeValue;
break;
}
}
return "<a href=\""+vurl+"\">"+vtit+"</a> "+vdes;
}

Con lo cual obtenemos el siguiente resultado:

This movie requires Flash Player 9

Como verán no es muy complicado el crear un lector de RSS, solo consiste en parsear un XML y no hemos necesitado de una clase especial para hacerlo. Finalmente les dejo los codigos fuente para que lo verifiquen.

Posts Relacionados

ActionScript, Flash, General

Total de Comentarios: 49

18/12/2006

1:14 am

[...] En esta oportunidad les presente mi primer ejemplo en AS3 al cual por motivos de tiempo no había hecho pruebas. Bueno como en un post anterior hablamos un Lector RSS en Flash con AS2, esta vez lo modificaremos y reescribiremos en AS3 con lo cual veremos que nuevas nos trae este nueva versión de ActionScript. [...]

10/03/2007

12:39 am

hola, sabes que en este momento estoy necesitando hacer un lector de rss, y en este ejemplo logro hacer que se lean archivos xml, pero no logro hacer que lea desde esta web mira http://www.montevideo.com.uy/anxml.cgi?60
me podrias guiar un poco? tiene algo que ver que sea un cgi?
saludos y gracias desde ya.

10/03/2007

11:48 am

Lo que sucede es que Flash lee archivos que están en un mismo dominio, esto por temas de seguridad, entonces para que lea tienes varias posibilidades:

1. Subes tu flash al sitio donde esta el RSS, con eso estarían en el mismo dominio y si funcionarían.
2. Creas en el dominio donde esta el RSS un archivo crossdomain.xml donde habilitas los permisos para que flash pueda leer el RSS.
3. Creas un archivo que he haga el cambio de dominio, eso lo puedes hacer con un php sencillo.

Cualquiera de estas tres opciones te ayudarán a que funcione correctamente tu RSS.

10/03/2007

1:21 pm

Por cierto, si deseas saber como hacer el cambio de dominio de tus archivos puedes leer: http://blog.unijimpe.net/proxy-en-php/

10/03/2007

1:34 pm

bueno, muchas gracias por la ayuda, por lo menos pude entender como funciona, pero no tengo acceso a ese sitio… es un portal, y en un trabajo que estoy haciendo me habian encargado un lector rss de ahi…
saludos, y felicitaciones por el blog.

10/03/2007

1:39 pm

Puede usar el proxy en php para convertir el archivo que esta en internet a tu propio dominio con lo cual ya tendrías el archivo disponible para tu lector de RSS.

10/03/2007

2:57 pm

me parece genial el dato, es justamente lo que preciso!!!
pero como lo llamo en flash?

10/03/2007

3:13 pm

hay! ya entendi el funcionamiento, lo que hace es lee el archivo como si fuese local, asi que desde flash tengo que llamar a mi archivo “proxy.php” que se encuentra en mi servidor, ya lo probe y me funciono!!! muuuchas gracias, y en mi opinion personal creo que deberias agregarle esta informacion al post original, ya que he buscado ayuda en muchos lugares y me tope con que mucha gente se choca con el mismo problema, y la ayuda que se brinda no es muy clara.
saludos!

16/03/2007

2:23 pm

Hola ! La mejor que es la solucion mas simple y mejor documentada de la web para un webreader.

Les hago una pregunta. Me gustaria tomar una imagen Thumbnail que venga en el rss y ponerlo encolumnado al lado del texto.

O sea quedarian las fotos alineadas, y al lado los textos. Como si fuera una tabla.

Alguna forma de hacer esto?
Gracias!

18/03/2007

12:56 am

hola
la rss esta fenomenal
pero tengo el mismo problema que nicot
y la inesperiencia en php que tengo
no produce buenos resultados
PREGUNTA: COMO PUEDO MANDAR DESDE FLASH A PROXY.PHP UNA PETICION DE UN ARCHIVO FUERA DE MI DOMINIO Y COMO PUEDO RECUPERARLO EN FLASH
GRACIAS POR TODO

18/03/2007

10:36 am

Es muy sencillo, en lugar de llamar directamente al RSS que deseas leer llamas a proxy.php, es decir cambiarías

var rssurl:String = “http://blog.unijimpe.net/feed/”;

Por lo siguiente:

var rssurl:String = “proxy.php”;

Ahora dentro del archivo proxy.php esta el código que accede al RSS que realmente deseas leer. Es decir este archivo proxy.php sirve como un puente entre en RSS que deseamos leer y nuestro flash.

Saludos.

20/03/2007

2:43 am

solucionado
el problema tenia cuando producia el proxy.php que dreamweaver metia
codigo de html por delante
lo cual no lo interpretaba correctamente

gracias por todo y adelante con la web que nos soluciona muchos problemas
saludos a todos

23/03/2007

10:56 pm

:) Excelente post, estaba buscando algo parecido pero tu idea es mucho mejor :) me ayudaste de mucho. Saludos

24/04/2007

11:43 pm

este Lector esta padrisimo y quisiera saber:
1. como programarlo para que las fotos que aparecen en algunos feeders de noticias (xml) aparezcan porque cuando hay fotos solo pone la primera noticia antes de la foto y cuando no, si lo abre todo.

2. como hacer para que al darle clic se abra en una nueva ventana y…

3. como hacer para darle movimiento por tiempo y no necesariamente irlo moviento manualmente con el scroll.

Gracias y felicidades.

18/05/2007

12:18 am

Exelente el RSS!! muchas gracias.
webnet tarde pero seguro, lo que tendrias que hacer para que lo abra en una ventanta nueva es simplete agregarle al tag a la propiedad target=’_blank’.
Saludos y muy bueno el blog.

05/06/2007

3:29 pm

[...] Nos hemos basado en un lector RSS en Flash ya creado. Concretamente en este de Unijimpe. C�mo en su web viene muy bien explicado, aqu� s�lamente haremos refer�ncia a los retoques o fragmento de c�digo a�adidos. [...]

02/07/2007

8:21 pm

quisiera que no me saliera solo un fragmento del texto de la noticia cuando esya tiene mucho texto, sino que me salga entero, como puedo lograr esto??

03/07/2007

8:59 am

Sucede que en el ejemplo estamos leyendo el nodo description, pero si quieres leer el detalle completo del post debes acceder al nodo: content:encoded con lo cual el código quedaría:

switch (sxml.nodeName) {
  case "title":
    vtit = sxml.firstChild.nodeValue;
    break;
  case "link":
    vurl = sxml.firstChild.nodeValue;
    break;
  case "content:encoded":
    vdes = sxml.firstChild.nodeValue;
    break;
}

05/07/2007

3:22 pm

Excelente, llevaba dias buscando algo parecido i di el clavo con este blog, una pregunta que me lleva de cabeza…. a ver si puedes ayudarme, hice todo tal i como explicas y me funciona, pero tengo un problema…. solo me muestra la primera noticia :( en un feed que hay muchas : http://feeds.feedburner.com/google/b
Pues bien de este feed solo me muestra la primera noticia…. como podria hacerlo para que me mostrara el contenido entero? es decir todas las noticias?

Mira esto me ocurre:

http://www.bodyboardbcn.com/smf/noticias/s/rss.html

Bueno espero que tenga solucion, muchas gracias!! y un saludo

05/07/2007

5:57 pm

oks logre que salieran… como? modificando el codigo, hice esto por si a alguien tb le pasa:

switch (sxml.nodeName) {
case “title”:
vtit = sxml.firstChild.nodeValue;
break;
case “link”:
vurl = sxml.firstChild.nodeValue;
break;
case “content:encoded”:
vdes = sxml.firstChild.nodeValue;
break;
}

Es lo que hay explicado en un post mas arriba pero ahora en descripcion me sale undefined, debo poner o agregar algo? muchas gracias, ya casi lo tengo ;)

05/07/2007

6:02 pm

es decir, cuando digo descricpcion es justo debajo de cada titulo en vez de salir un resumen de la noticia, me sale undefined. Solo me salen los titulos de la noticia.

06/07/2007

9:23 am

Ferran, en tu caso reemplaza content:encoded por description para que funcione correctamente.

06/07/2007

5:39 pm

hola muy buenas muchas, gracias por responder, mira si cambio eso, es decir content:encoded por description , no se porque, solo me sale una noticia, mira lo haré i te pongo un enlace donde lo subire para que veas que es lo que me sale.

Cambie el description por content:encoded y entonces me salieron todas las noticas ( solo los titulos ) el resumen de cada noticia me salia undefined. Por eso lo deje tal y como estaba ( con el contet:encoded) voy a probar de nuevo a ver i te cualgo el enlace

Un saludo!!

06/07/2007

6:00 pm

Mira ves, solo se me muestra una noticia, y ningun resumen ni nada ( esto con description)

http://www.bodyboardbcn.com/smf/noticias/rss_zinc.swf

Y este es con el ( content:encoded )que almenos me muestra los titulos de todas las noticias i en el reumen me pone undefined ( lo que le puse l mismo color de letra que el de fondo para que no se viese)… que por cierto solo funciona en firefox…

http://www.bodyboardbcn.com/smf/news/

Pues bien, me gustaria que salieran todas las noticias, y un pequeño resumen. No se si es que se necesita un feed especifico, yo uso feedburner… no se si tendra algo que ver…

08/07/2007

2:16 am

creo que el problema esta en el rss, tengo como titulos en las noticias… el de este blog es, titulo i texto, en cambio el mio hay, titulo, subtitulo y descripcion… por eso me debe salir undefined…

mira mi feed:

http://feeds.feedburner.com/google/b?format=xml

Bueno espero no pedirte demasiado jejeje solo quiero lograr que salga el resumen de las noticias con sus titulos…

08/07/2007

6:19 am

Hola, mira el problema es que el archivo que estas intentando leer es un XML que trae los textos con tags de HTML como TABLE por ejemplo, estos tags flash no los puede interpretar y por eso no lo muestra, ahora bien, revisando el archivo que estas intentando abrir, lo que debes hacer es abrirlo con un PHP y quitar todos los tags de html antes de leerlo con flash.

09/07/2007

12:15 am

es decir, crear un archivo php que anule los tags, i una vez hecho esto llamar al archivo php en:

var rssurl:String = “sintags.php”;

Oks muchas gracias, buscare como hacerlo i si lo encuentro lo pongo por aqui, imagino que si a alguien tb le sucede, le interesara saber como solucione este pequeño percance.

Muchas gracias por todo!

10/07/2007

8:56 am

pues no encuentro por ningun lado como hacer eso de pasar un archivo xml a php desde una url i luego eliminarle los tags HTML para que funcione en flash :( bueno no se mucho de esto pero mire en muchas paginas web…. tu no sabras hacerlo no?? o si sabes de alguna pagina que salga… xq yo con el google almenos no he visto nada…

Bueno un saludo y muchas gracias

10/07/2007

9:01 am

todo lo que encontre era hacer un xml a partir de una base de datos….

o eliminar los tags html a una frase previamente ya escrita… no de un xml…

Un saludo y gracias

19/07/2007

8:53 pm

Muchas gracias por tan buena contribucion lo aplique para hacer un front en flash y que tome las noticias de un sistema joomla rss 2.0 y funciona bello… ahora mi pregunta es como puedo hacer para que tome las imagenes de las noticias del rss 2.0

Muchas gracias unijimpe!!!

22/07/2007

10:13 am

Hola.. oye fijate que estoy tratando de leer un rss.

que es este:
http://news.google.com.mx/news?hl=es&ned=es_mx&q=linux&ie=UTF-8&output=rss

pero solo me sale la primera noticia.. mas arriba dices que eliminando los tags en el php.. pero nose como se hace.. Alguna idea ?

Gracias

22/07/2007

10:16 am

Ya me funciono :)

Puse el “content:encoded”
y me funciono de maravilla..

muchas gracias unijimpe..

^_^

18/08/2007

3:24 am

Bien, eso es lo que necesito hacer pero con el rss de yahoo, ya logré hacerlo con Dreamweaver, pero no con Flash. La dirección del rss de yahoo es: http://xml.weather.yahoo.com/forecastrss?p=VEXX0008&u=c y lo que necesito es la temperatura que está dentro, aqui les pego el link: rss/channel/item/yweather:contidion/@temp
Precisamente es para obtener la temperatura de mi ciudad y poder publicarla en un sitio web. Gracias.

15/10/2007

7:23 pm

Hola.
Excelente tutorial.

En caso que no quiera importar las imagenes de mi RSS como deberia hacerlo??

19/10/2007

1:38 pm

No Podrias poner tu archivo .fla para descargar? Soy novato y aprenderia mucho viendo como colocas los datos tambien

20/10/2007

7:22 am

Para mostrar todas las noticias de cualquier RSS hay que poner en el codigo de unjimpe lo siguiente:

function getContent(vxml) {
var stit:String = “”;
var surl:String = “”;
var sdes:String = “”;
for (j=0; j“+vtit+”“+vdes;
}

O sea el codigo es el mismo pero en descrition en lugar de la variable “vdes”, poner “vcon” en esta parte del codigo nada mas y ves todas las noticias.
Saludos

23/11/2007

3:41 am

[...] en el lector de RSS en Flash de Unijimpe vamos a modificarlo parcialmente para poder crearnos nuestra aplicación de escritorio con MDM [...]

24/11/2007

2:32 am

Funciona… pero es extraño: habiendo habilitado los caracteres internacionales, estos no se ven.

09/12/2007

4:39 pm

Hola, mi problema es que al leer los datos de rss http://www.radiaciones.net/backend.php Me reconoce mas los carácteres especiales, como acentos etc…
Por ejemplo, donde dice “Comisión” al leerlo en el flash pone Comisión

09/12/2007

5:03 pm

vaya al poner la palabra mal escrita, aquí si que aparece bien, pero por lo que leo, es un problema comun en muchos RSS, no se puede solucionar mediante proxys o algun php? mil gracias anticipadas.

30/12/2007

9:34 pm

Excelente tutorial unijimpe!!

Alguien sabe como hacer para que los vinculos de los rss los abra en otra pagina y no en la q estoy navegando?

17/01/2008

9:47 pm

Disculpa soy nuevo en esto del rss
copie tu codigo cmo lo pones en tu pagina. me funcion muy bien, el unico inconveniente es q no se ven las fotos. me encantaria que pudiese ver las fotos a lado de cada noticia. Agradezco mucho tu ayuda. mil gracis

15/02/2008

1:39 pm

Hola.
Ante todo gracias por este tutorial.
Sin saber casi nada de programación, y con un poco de cuidado he logrado que funcione. :-)

tengo una duda:
¿se podría hacer de modo que los enlaces apareciesen en otro color y en negrita?

Gracias de nuevo
Juan

16/02/2008

1:43 pm

Respecto al uso de colores y negritas en los textos, puedes utilizar los tags html permitidos en Flash, para mayor información acerca de estos tags puedes leer:
http://blog.unijimpe.net/incluir-html-en-flash/

19/02/2008

9:01 am

Hola de nuevo y gracias por toda la ayuda.

Escribo por que estoy teniendo un raro problema con este lector rss.
El viernes lo monté, y funcionaba bien, pero es cierto que de cada 10 visitas fallaba alguna vez, que no cargaba nada en el flash.
Hoy me dispongo a revisarlo todo y a retocar las negritas etc, y me encuentro con que sin haber cambiado nada no carga nunca nada.
Tras entrar se queda el loading… unos segundos, y más tarde desaparece todo.
El navegador se queda diciendo: Transfiriendo datos desde midominio.com.
Pero no hace nada.
¿alguien sabe por donde puede venir el error?

Mil gracias
Juan

19/02/2008

10:19 pm

Excelente tutorial unijimpe !!
Gracias por compartirlo, tengo una consulta.
Como puedo hacer para parsear acentos y demas caracteres?? Ya que no puedo utilizar xml con diferentes lenguajes que el ingles. Muchas gracias y hasta luego.

20/02/2008

4:46 pm

Una pregunta.
¿Alguien ha tenido problemas con este lector y blogspot?
Es que a mi me funciona cuando quiere.

Saludos

28/04/2008

5:14 am

Hola, estoy intentando crear una galeria de imagenes intgrada en un flash, que cargue las imagenes del RSS de mi cuenta de Flickr, con este ejemplo lo consigo, pero estoy probando a mejorar su presentación. Alguna sugerencia?
Gracias.

30/04/2008

11:25 pm

Saludos, excelente el RSS, yo lo estaba usando anteriormente, pero hace unos meses dejo de funcionar, lo raro es que si funciona el que hice con flash 8 hace 4 meses, pero ahora cuando creo el swf, deja de funcionar en el servidor, no se si tenga que ver con el nuevo flash player.

unijimpe

Lector de RSS en Flash

Total de Comentarios: 49

Buscador

Ultimos Posts

Recomendados

Categorias

Enlaces

Feeds

Suscripción