Creating a Twitter Widget in Flash

By Blue_Chi | Flash CS4 | ActionScript 3.0 | Intermediate | Page 1, 2, 3

In this section we will load our Twitter data and display it through our Tweet text fields. The Twitter data is structured in XML format, so we are going to use the URLLoader Class and the XML Class to take care of this. Displaying on the text fields will be done using the basic properties of the Text Field Class. By the end of this section you will have a functional widget that works properly on your desktop.

This page is divided into the following sections:

  • Loading the Twitter data using the URLLoader Class.
  • Processing the XML file using the XML Class.
  • Displaying the Data using the Text Field Class properties.
  • Configuring the Follow Me Button.

Loading the Twitter Data using the URLLoader Class

First of all you should know that the latest Tweets of any user can be retrieved from Twitter via the following link:

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

You can replace the last part with the ID of any Twitter user to retrieve the data of that user, assuming of course that this user has made his twitter account public.

Loading any textual data in AS3 requires using the URLLoader Class. This class is very simply use to use. Start off by creating an instance of it and then use the .load() method to load the twitter data:

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("http://twitter.com/statuses/user_timeline.xml?screen_name=blue_chi"));
You can learn more about AS3 URLLoader Class by reviewing our tutorial on this topic.

This should load our Twitter XML data into Flash, but that on its own will not do anything as Flash is not told what to do when the file loads. To take action once the file is loaded we need to use an event handler to listen to the Event.COMPLETE. We will register this event with a function which we will create later called processXML(). Simply add the following code to use the .addEventListener() method to register for this event:

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("http://twitter.com/statuses/user_timeline.xml?screen_name=blue_chi"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);
You can learn more about AS3 Event Handling by reviewing our tutorial on this topic.

Using the event listener will let us take an action when the data loads. This action is obviously processing it using the XML Class. We will deal with this below.

Processing the XML Data

We are going to process our XML through the function processXML which is triggered when the XML data finishes loading. The code to be triggered must reside inside this function. Simply create it under the code we currently have:

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

function processXML(e:Event):void{

}

Processing our XML data will require creating an instance of the XML Class and assigning the data of our XML file to it. Do that by using the code below inside the processXML function:

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

function processXML(e:Event):void{
var myXML:XML = new XML(e.target.data);
}
You can learn more about the AS3 XML Class by reviewing our tutorial on this topic.

At this stage you should learn a little bit about the structure of the Twitter XML Data. Twitter data retrieved through the URL we are accessing comes out in the following structure:

<statuses>

<status>
<created_at>...</create_at>
<text>...</text>
<other elements...>...</other>
</status>

<status>
<created_at>...</create_at>
<text>...</text>
<other elements...>...</other>
</status>

<status>
<created_at>...</create_at>
<text>...</text>
<other elements...>...</other>
</status>

</statuses>

The structure above is extremely simplified as there are tens of elements under each <status> element providing you with every little piece of information you might ever need to know about the tweet update. We do not know need to know anything other than that the status update <text> contains the actual tweet text.

Using simple XML properties we can retrieve a single status updates and pick the value of the text element this way:

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

function processXML(e:Event):void{
var myXML:XML = new XML(e.target.data);
trace(myXML.status[0].text);
}
Elements inside an XML list are zero-relative. This means that the first item in the list is at position Zero, the second is at position 1, then 2, then 3, etc.

The code above should output the text of the most recent tweet in the output window. You can test your movie (Ctrl+Enter) to see this in action. The loading process might take a couple of seconds depending on your connection speed, etc.

We can retrieve any other tweet update by using a different value other than Zero. Our XML data is now ready. We will display it in the text fields in the next section.

Displaying the Tweets on the Screen

Displaying the tweets inside the text fields is a dead easy process. We simply use the .text property of each text field to do this. The first one of our text fields is named tweet_1 and we can configure it this way:

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

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

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

You can now remove the previous trace() command and update your other text fields this way:

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

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

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

That should do it. Test your movie again to see all your tweets displayed properly now!

AS3 Flash Twitter Widget

Configuring the Follow Me Button

Making our button clickable to the actual twitter profile page is another easy task. Simply use the addEventListener() method to register for a MouseEvent.CLICK, and then use the navigateToURL() method to go to that URL. The following code should do the trick:

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

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

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

follow_btn.addEventListener(MouseEvent.CLICK, onFollow);
function onFollow(e:MouseEvent):void{
navigateToURL(new URLRequest("http:///twitter.com/blue_chi"));
}
You can learn more about AS3 Event Handling by reviewing our tutorial on this topic.

This should make our button functional, however, in order to make it feel like a button we need to make the cursor change into the handcursor when the user hovers over the button. This is done by using the .buttonMode property this way:

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

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

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

follow_btn.addEventListener(MouseEvent.CLICK, onFollow);
function onFollow(e:MouseEvent):void{
navigateToURL(new URLRequest("http:///twitter.com/blue_chi"));
}
follow_btn.buttonMode = true;

That should do it. Your Twitter Widget is now fully functional locally. However, it will not work online before we create a number of supporting scripts for it. We will do that in the next section.

Summary

We did the following in this sections:

  • Loading the data using the URLLoader Class.
  • Processed the data using the XML Class then displayed it on the text fields.
  • Configured the Follow Me button.

In the next section we will create the supporting scripts to make our widget functional online.

- Next Page