Visto 3.990 veces.

AS3 – Útiles – Marquee marquesina horizontal para leer el feed rss de wordpress en flash

Hace poco decidí colocar en mi web una marquesina horizontal para mostrar las últimas entradas del feed rss de mi blog de wordprees. Mi primera intención fue crear la marquesina utilizando el tag html <-marquee-> y parseando el xml del feed mediante javascript así que me puse manos a la obra.

El primer problema que me encontré fue que recuperando el xml mediante js no funcionaba porque el feed de mi wordpress se encuentra dentro de un subdominio de mi propio dominio y por lo tanto se considera como un dominio independiente y por seguridad no se permite la carga de contenido. Para solucionar este problema tuve que replicar el feed mediante un php desde mi dominio principal llamando al feed de mi subdominio y mostrarlo en mi dominio con un simple “echo”.

El segundo problema fue con el tag html <-marquee-> al descubrir que no es un estándar soportado por todos los navegadores, además el validador W3C me daba errores por todos lados como XHTML stricto, así que decidí descartar el tag <-marquee->. Parece mentira que una etiqueta tan potente y simple que funciona tan bien no sea estándar y tengamos que reinventar la rueda.
Visto lo visto decidí crear una marquesina con js y css pero se me hizo muy engorroso el trabajo de tener que desplazar divs y solo me salían rompederos de cabeza y no me apetecía perder tanto tiempo en programar una simple marquesina por lo que se me ocurrió para ahorrarme código utilizar el scroll de un div para desplazar el texto de su interior utilizando el overflow forzando el scroll horizontal y escondiéndolos para luego controlar la posición del scroll mediante js pero una vez más el resultado fue poco fiable ya que para forzar el scroll Horizontal debía indicar el ancho del div en un porcentaje superior a su contenido reflejando una longitud del texto del div no correcta.

Cansado pensé que el invento más bien o más mal funcionaba así que iba a darlo por bueno hasta que me dio por probarlo con firefox en vez de con IE y la sorpresa fue que no funcionaba.
Finalmente tire la toalla, no tenía ganas de perder más tiempo y decidí hacer el lector rss con marquesina en flash.

Ejemplo:

This movie requires Flash Player 9

Esta marquesina en flash la simplifique utilizando el scroll Horizontal del campo de texto ahorrándome algunas líneas de código, el primer ejemplo es sobre la línea de tiempo del escenario y el segundo lo convertí en una clase para su mejor reutilización, además con un poco de maña se puede adaptar y mejorar la clase para que soporte scroll Vertical o configurar las opciones de la marquesina como la velocidad de desplazamiento desde fuera de la clase.

La descarga del ejemplo al final del post
Espero que a alguien le sea de utilidad
Saludos.

Uso en flash, copiar y pegar el código en el primer fotograma

Para los que prefieren un uso mas practico aqui dejo el mismo ejemplo de arriba convertido en clase

La clase la he hecho que extienda directamente de TextField y puede ser que sea un poco confuso para algunos el reconocer las propiedades ya que las aplico directamente sobre el objeto sin la clave this.

Para evitar que el texto aparezca de golpe se introducen espacios en blanco delante y detrás de la cadena a mostrar, de esta manera se consigue el efecto de verlo aparecer por la derecha y desaparecer por la izquierda.
Los espacios en blanco se introducen automáticamente dependiendo del ancho del campo de texto que asignemos. Si cambiamos el tamaño de letra dejara de funcionar correctamente porque introducira caracteres de mas o de menos.

Si cambiamos el tamaño de letra deberemos ajustar el divisor 3 de la siguiente línea de código.

Si aumentamos el tamaño de la letra, los espacios en blanco serán más grandes y pueden superar el ancho del campo de texto, como consecuencia puede tardar mucho en aparecer el texto dando la sensación de que no funcione la marquesina, para evitar tendremos que aumentar o ajustar el valor del divisor 3 para que introduzca menos espacios

Tamaños de fuente entre 10 y 13 funciona bien dividiéndolo entre 3
Entre 14 y 17 funciona dividiéndolo entre 4
Entre 18 y 21 funciona con 5

Es cuestión de probar dependiendo del tamaño, de todas maneras podemos dejar la clase para su ajuste manual eliminando las siguientes líneas de código

y sustituirlas por lo siguiente y así poder ajustar los espacios manualmente

Esta es la clase copiar y pegar dentro de un archivo llamado MarqueWp.as

MarqueWp.as

Uso de la clase
Crear un Nuevo proyecto flash y dentro del mismo directorio del proyecto flash guardar un archivo llamado MarqueWp.as y copiar dentro el código de arriba de la clase.
En el primer fotograma del escenario colocar el siguiente código

El primer parámetro es la ruta de nuestro feed
El segundo el ancho de la marquesina
El tercero y cuarto la posición X e Y en el escenario

Si tuvierais problemas de carga de contenido entre subdominios podéis solucionarlo colocando un php en vuestro dominio con el siguiente código para replicar el feed

leerRss.php

Suponiendo que el nombre de nuestro archivo php es leerRss.php
Solo tenemos que llamarlo desde www.dominio.com/leerRss.php como si fuera la dirección de nuestro feed
El leerRss.php accede al feed del subdominio www.blog.dominio.com/feed
Y lo replica en nuestro dominio permitiendo el acceso de nuestros scripts sin necesidad de colocar el crossdomain.xml

Descargar ejemplo lector-flash-rss-feed-wordpress/lector-flash-rss-feed-wordpress.rar - - Descargado (593) veces.

Social Report xavirobot

4 comments on “AS3 – Útiles – Marquee marquesina horizontal para leer el feed rss de wordpress en flash

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">