Creating a Twitter Widget in Flash

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

In the final section of this tutorial we will have to configure some security issues to enable the Flash movie to read the Twitter data when we upload it to our website. The Flash Player has security restrictions that prohibit loading data from another server. We will over come this issue by doing the following:

  1. Creating a proxy PHP file to retrieve the data into our server.
  2. Creating a cross domain policy file to allow Twitter to communicate with our server.

Creating a Proxy PHP file

We will start off by creating the proxy PHP file that will copy the data from Twitter. To do this we can use the following readymade code I found online:

<?php
/*
* @return string
* @param string $url
* @desc Return string content from a remote file
* @author Luiz Miguel Axcar (lmaxcar@yahoo.com.br)
*/

function get_content($url)
{
$ch = curl_init();

curl_setopt ($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_HEADER, 0);

ob_start();

curl_exec ($ch);
curl_close ($ch);
$string = ob_get_contents();

ob_end_clean();

return $string;
}

#usage:
$content = get_content ("http://twitter.com/statuses/user_timeline.xml?screen_name=blue_chi");
echo $content;
?>

Code Credits: Luiz Miguel Axcar.

Simply create a new text file using the notepad and save it as twitter.php. The code simply reads the twitter data and outputs it again. This means that instead of accessing Twitter directly, we can now access the URL of this PHP page instead. You have to upload this file to the same folder in which you will upload your SWF file to make reference to this file easy.

Configuring the Cross Domain Policy

A cross domain policy of a website is a file that grants permissions to other websites to update the content on that site. Our PHP proxy will need to use the data from Twitter, and in order to do this, we need to grant Twitter access to our website.

Creating such a file is easy. Simply use the notepad to create a blank text file and paste the following in it. This code is pretty self-explanatory:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">

<cross-domain-policy>

<allow-access-from domain="www.twitter.com" />
<allow-access-from domain="twitter.com" />

</cross-domain-policy>

You will need to save this file as crossdomain.xml and then upload it to the root directory of your website, i.e. the same folder in which your homepage index file is placed.

Back to the FLA

All of our scripts are now ready, we need to update our ActionScript code now so that it does not attempt to load the Twitter data directly and instead loads the PHP file instead. To do this simply update your the target of your .load() method:

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("twitter.php"));
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;

You can now export your SWF file, and then upload it along with the twitter.php script to the same folder.

You can now access your movie online to see the latest tweets!

Important Notices About The Online Version

Due to API restrictions by Twitter, no single user is allowed to make more than a 150 requests per hour to the Twitter server. This means that if your website receives a large number of hits, this widget will always fail to load the data at the end of each hour as the number of requests exceeds 150. The API request limit is restored on hourly basis.

It is possible to overcome this problem by using an advanced PHP script that automatically retrieves the twitter data at periodic times throughout the hour so that the request to the server is independent of the visits of actual users to your widget. However, this goes beyond the scope of this tutorial.

End of Tutorial

This concludes our tutorial, I hope that you learnt something new from it. You can download the end source files from here. If you have any questions or suggestions to make, please feel free to post them at the Republic of Code Forum.

- End of tutorial.