Creación de un widget de Twitter en Flash 2

En esta sección vamos a cargar los datos de Twitter y mostrarlo a través de nuestros campos de texto Tweet. Los datos de Twitter se estructura en formato XML, por lo que se va a utilizar la clase URLLoader y la clase XML para cuidar de esto. Viendo en los campos de texto se hará uso de las propiedades básicas de la clase de campo de texto. Al final de esta sección tendrá un control funcional que funciona correctamente en su escritorio.

Esta página se divide en las siguientes secciones:

  • Carga de los datos de Twitter con la clase URLLoader.
  • Procesar el archivo XML mediante la clase XML.
  • Viendo los datos utilizando el campo de texto de propiedades de clase.
  • Configuración del botón de “Sígueme”.

Carga de los Datos de Twitter con la clase URLLoader

En primer lugar usted debe saber que los últimos Tweets de cualquier usuario se puede recuperar de Twitter a través del siguiente enlace:

http://twitter.com/statuses/user_timeline.xml?screen_name =EsauTorrecillaM

Puede sustituir la última parte con la identificación de cualquier usuario de Twitter para recuperar los datos de ese usuario, asumiendo por supuesto que este usuario ha hecho pública su cuenta de Twitter.

Cargar los datos de texto en AS3 requiere el uso de la clase URLLoader. Esta clase es muy simple utilizar para su uso. Comience por la creación de una instancia de ella y luego usar el). carga ( método para cargar los datos de Twitter:

var myXMLLoader: URLLoader = new URLLoader ();
myXMLLoader.load (new URLRequest (“http://twitter.com/statuses/user_timeline.xml?screen_name=EsauTorrecillaM”));
Usted puede aprender más sobre la clase URLLoader AS3 mediante la revisión de nuestro tutorial sobre este tema.

Esto debería cargar nuestro Twitter datos XML en Flash, pero que por sí sola no hará nada como Flash no se le dice qué hacer cuando se carga el archivo. Para actuar una vez que el archivo se carga tenemos que utilizar un controlador de eventos para escuchar el Event.COMPLETE. Vamos a registrar este evento con una función que vamos a crear más tarde llamado processXML (). Basta con añadir el siguiente código para utilizar el ). addEventListener ( método de registro de este evento:

var myXMLLoader: URLLoader = new URLLoader ();
myXMLLoader.load (new URLRequest (“http://twitter.com/statuses/user_timeline.xml?screen_name=EsauTorrecillaM”));
myXMLLoader.addEventListener (Event.COMPLETE, processXML);
Usted puede aprender más acerca de eventos AS3 manipulación mediante la revisión de nuestro tutorial sobre este tema.

Utilizando el detector de eventos nos permitirá realizar una acción cuando se carga de datos. Esta acción es, obviamente, que el procesamiento mediante la clase XML. Nos ocuparemos de esto más adelante.

Procesamiento de datos XML

Vamos a nuestro proceso de XML a través de la función processXML que se activa cuando los datos XML termine de cargar. Los códigos que se ha disparado debe residir dentro de esta función. Sólo tiene que crear con el código que tenemos actualmente:

var myXMLLoader: URLLoader = new URLLoader ();
myXMLLoader.load (new URLRequest (“http://twitter.com/statuses/user_timeline.xml?screen_name=EsauTorrecillaM”));
myXMLLoader.addEventListener (Event.COMPLETE, processXML);  

function processXML (e: Event): void {

}

Procesamiento de los datos XML se requiere la creación de una instancia de la clase XML y la asignación de los datos de nuestro archivo XML. Hacerlo mediante el siguiente código dentro de la processXML función:

var myXMLLoader: URLLoader = new URLLoader ();
myXMLLoader.load (new URLRequest (“http://twitter.com/statuses/user_timeline.xml?screen_name=EsauTorrecillaM”));
myXMLLoader.addEventListener (Event.COMPLETE, processXML);  

function processXML (e: Event): void {
var myXML: XML = new XML (e.target.data);
}

Usted puede aprender más sobre la clase AS3 XML mediante la revisión de nuestro tutorial sobre este tema.

En esta etapa usted debe aprender un poco sobre la estructura de los datos de Twitter XML. Twitter datos recuperados a través de la dirección que está accediendo sale en la siguiente estructura:

<statuses> 

<status>
<created_at> …</> create_at
<text> …</ text>
elements…> <otros …</> otros
</ Estado>

<status>
<created_at> …</> create_at
<text> …</ text>
elements…> <otros …</> otros
</ Estado>

<status>
<created_at> …</> create_at
<text> …</ text>
elements…> <otros …</> otros
</ Estado>

</ Status>

 

La estructura anterior es muy simplificada, ya que hay decenas de elementos en cada <status> elemento que le proporciona cada pedacito de información que siempre puede ser que necesite saber acerca de la actualización tweet. No sabemos necesita saber nada más que la actualización de estado <text> contiene el texto tweet reales.

Usando simples propiedades XML podemos recuperar un solo actualizaciones de estado y recoger el valor del elemento de texto de esta manera:

var myXMLLoader: URLLoader = new URLLoader ();
myXMLLoader.load (new URLRequest (“http://twitter.com/statuses/user_timeline.xml?screen_name=EsauTorrecillaM”));
myXMLLoader.addEventListener (Event.COMPLETE, processXML);  

function processXML (e: Event): void {
var myXML: XML = new XML (e.target.data);
trace (myXML.status [0] texto.);
}

Elementos dentro de una lista XML son cero relativo. Esto significa que el primer elemento de la lista está en la posición cero, el segundo es en la posición 1, luego 2, luego 3, etc

El código anterior debe de salida el texto de la reciente tweet más en la ventana de resultados. Puede probar la película (Ctrl + Enter) para ver esto en acción. El proceso de carga podría tomar un par de segundos dependiendo de su velocidad de conexión, etc

Podemos recuperar cualquier actualización tweet otros mediante el uso de un valor diferente de cero. Nuestros datos XML ya está listo. Vamos a mostrar en los campos de texto en la siguiente sección.

Viendo los Tweets en la pantalla

Viendo los tweets dentro de los campos de texto es un proceso fácil muertos. Simplemente utiliza el . texto propiedad de cada campo de texto para hacer esto. El primero de nuestros campos de texto se denomina tweet_1 y podemos configurar de esta manera:

var myXMLLoader: URLLoader = new URLLoader ();
myXMLLoader.load (new URLRequest (“http://twitter.com/statuses/user_timeline.xml?screen_name=EsauTorrecillaM”));
myXMLLoader.addEventListener (Event.COMPLETE, processXML);  

function processXML (e: Event): void {
var myXML: XML = new XML (e.target.data);
trace (myXML.status [0] texto.);

tweet_1.text myXML.status = [0] texto.;
}

Ahora puede quitar la anterior sentencia trace () de comandos y actualice su campos de texto de esta manera:

var myXMLLoader: URLLoader = new URLLoader ();
myXMLLoader.load (new URLRequest (“http://twitter.com/statuses/user_timeline.xml?screen_name=EsauTorrecillaM”));
myXMLLoader.addEventListener (Event.COMPLETE, processXML);  

function processXML (e: Event): void {
var myXML: XML = new XML (e.target.data);

tweet_1.text myXML.status = [0] texto.;
tweet_2.text = myXML.status [1] texto.;
tweet_3.text myXML.status = [2] texto.;
tweet_4.text = myXML.status [3] texto.;

}

Eso debería hacerlo. Pon a prueba tu película de nuevo para ver todos los tweets que aparecen correctamente ahora!

Configuración del botón de “Sígueme”

Hacer nuestro botón que se pulse a la página de twitter perfil real es otra tarea fácil. Sólo tiene que utilizar el método addEventListener () método para registrar unaMouseEvent.CLICK, y luego usar el navigateToURL () método para ir a esa URL. El siguiente código debe hacer el truco:

var myXMLLoader: URLLoader = new URLLoader ();
myXMLLoader.load (new URLRequest (“http://twitter.com/statuses/user_timeline.xml?screen_name=EsauTorrecillaM”));
myXMLLoader.addEventListener (Event.COMPLETE, processXML);  

función processXML (e: Event): void {
var myXML: XML = new XML (e.target.data);

tweet_1.text myXML.status = [0] texto.;
tweet_2.text = myXML.status [1] texto.;
tweet_3.text myXML.status = [2] texto.;
tweet_4.text = myXML.status [3] texto.;
}

follow_btn.addEventListener (MouseEvent.CLICK, onFollow);
onFollow function (e: MouseEvent): void {
(New URLRequest (“http:///twitter.com/EsauTorrecillaM”)) navigateToURL;
}

Usted puede aprender más acerca de eventos AS3 manipulación mediante la revisión de nuestro tutorial sobre este tema.

Esto debería hacer que nuestro botón funcional, sin embargo, con el fin de hacerlo sentir como un botón que necesita para realizar el cambio del cursor en la handcursor cuando el usuario se desplaza sobre el botón. Esto se hace mediante el buttonMode. característica de esta manera:

var myXMLLoader: URLLoader = new URLLoader ();
myXMLLoader.load (new URLRequest (“http://twitter.com/statuses/user_timeline.xml?screen_name=EsauTorrecillaM”));
myXMLLoader.addEventListener (Event.COMPLETE, processXML);  

function processXML (e: Event): void {
var myXML: XML = new XML (e.target.data);

tweet_1.text myXML.status = [0] texto.;
tweet_2.text = myXML.status [1] texto.;
tweet_3.text myXML.status = [2] texto.;
tweet_4.text = myXML.status [3] texto.;
}

follow_btn.addEventListener (MouseEvent.CLICK, onFollow);
onFollow function (e: MouseEvent): void {
(New URLRequest (“http:///twitter.com/EsauTorrecillaM”)) navigateToURL;
}
follow_btn.buttonMode = true;

Eso debería hacerlo. Su Twitter Widget es ahora completamente funcional a nivel local. Sin embargo, no va a funcionar en línea antes de crear un número de secuencias de comandos de apoyo para ella. Lo haremos en la siguiente sección.

1 comentario en «Creación de un widget de Twitter en Flash 2»

  1. Pingback: Articulo Indexado en la Blogosfera de Sysmaya

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.