Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » as » Display Digg Posts Using ActionScript 3

Display Digg Posts Using ActionScript 3

Learn how to build a Digg posts viewer, showing a random post each time using ActionScript 3.

In this tutorial you will learn how to build an application which will display a Digg post which will be determined randomly. This will be built using Flash 9 and ActionScript 3. If you are still working in AS2, I recommend this tutorial.

Note: This application will not run online without some middle-man that loads the XML file. This is due to the Flash security sandbox. I recommend taking a look at the Loading remote XML in Flash tutorial which will show how to effortlessly create a PHP based proxy loader.

Let's start by building the overall application. You can either start here, or download the starting file which contains the application already designed.

The application consists of 3 text boxes and a Button component. The 3 text boxes will display the title, description and link for the specific Digg story. The Button will be used to load a new story each time its clicked.

Designing the Application

Start by grabbing the Text Tool (T) and create the 3 text boxes. Once they are created, grab the Selection Tool (V) and select the top textbox. With the text box selected, open the Properties Inspector panel (Window > Properties) and enter an instance name, which in this case would be "titleTxt".

Repeat the selecting and naming process for the other 2 text boxes using the instance names "entryTxt" and "urlText". Note the 3rd text box will be an HTML Textbox, so be sure to check the "Render Text as HTML" button.

The last step of the design process is to add the Button component from the Components panel (Window > Components).

Design Phase Complete. Begin Coding.

At this point the design phase is complete. Create a new layer, and name it "Actions". Then open the Actions panel (F9) to begin writing the code.

var diggURL:String = "http://digg.com/rss/index.xml";

var xmlResponse:XML;
var xmlResponseLength:uint;

The first part of the code simply defines the variables, which will be used later on.

var urlRequest:URLRequest = new URLRequest(diggURL);
var urlLoader:URLLoader = new URLLoader();

The next block of code creates a new URLRequest object which gets passed the location where the RSS feed (diggURL) will be found. The other part creates a new URLLoader instance which will contain the entire process of loading the requested data.

urlLoader.addEventListener(Event.COMPLETE, dataLoaded);
urlLoader.load(urlRequest);

The above code assigns an event handler which will be dispatched once the request is completed. Then its a matter of calling the load() method which kicks off the overall loading process.

function dataLoaded(e:Event):void
{
	var urlLoader:URLLoader = URLLoader(e.currentTarget);
	
	xmlResponse = new XML(urlLoader.data);
	xmlResponseLength = xmlResponse..item.length()-1;
	
	pullRandomEntry();
}

The first function serves two purpose. The first is to grab the loaded data and process it as XML. This is achieved by passing the loaded data into a new XML instance. The xmlResponseLength variable will store how many entries exist, which will be used later when selecting a random entry. This allows the code to evolve based on how many posts Digg returns.

The final step in the dataLoaded() function is to make a call to pullRandomEntry which you will define next.

function pullRandomEntry():void
{
	var entryKeyID:uint = Math.round(Math.random() * xmlResponseLength) + 0;
	
	titleTxt.text = xmlResponse..item[entryKeyID]..title;
	entryTxt.text = xmlResponse..item[entryKeyID]..description;
	urlTxt.htmlText = "<a href=\"" +  xmlResponse..item[entryKeyID]..link + "\">" 
		+ xmlResponse..item[entryKeyID]..link + "</a>";
}

The pullRandomEntry function is called whenever a new post is to be displayed. This occurs when the application first starts, and anytime the viewer clicks on the Button. The first step is to grab a random entry id to be used in the displaying of a post. Then once that number is determined the data is fed into each text box.

Quick "very quick" Introduction to E4X in AS3

You may notice an unfamiliar bit of code "..". This is using E4X to quickly parse through the XML nodes and grab the required data. ActionScript 3 introduced this new way which luckily replaced the old and painful "childNodes" way of doing thing in ActionScript 2.

function getNewStory(e:MouseEvent):void
{
	pullRandomEntry();
}

newBtn.addEventListener(MouseEvent.CLICK, getNewStory);

The last bit of code is used to attach a CLICK event to the button. This is also where you define a function which is called when the button is clicked. This function simply makes a call to grab a new entry.

Test it out!

That is all there is to the code, you can now test it out (CTRL+Enter) and see a new entry each time you click "Get New Story". As you can see ActionScript 3 is very powerful and fairly easy to work with. I hope you enjoyed this tutorial and if you want to dive deeper in to working with ActionScript and data, I recommend my newly released book.

If you have comments or questions, please feel free to post below. Until next time, happy coding!

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Display Digg Posts Using ActionScript 3

 Jeffrey Hyer  Wed May 14, 2008 12:57 pm  
This is a wonderful tutorial using AS3, I appreciate the linkback to my original article using AS2, I also really like the spin you out on it and made it pull a random post rather than just the newest ones, it is a great idea!

Keep up the good work!

Jeffrey
 vladimir  Wed May 28, 2008 9:02 am  
Wow, that is a great shortcut. Thanks for the tip!
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles