In this tutorial I will show you how to make a really cool Flash application using Flash 8 and ActionScript 2.0 (AS2). This application that we are about to build will grab the xml feed from Digg.com and display the first 3 stories from the frontpage in a nice little window for us to look at.

First of all, as I mentioned earlier, we will be using Macromedia Flash 8 (Now Adobe Flash) and ActionScript 2.0 (built-in scripting language in Flash 8). Now lets get on to the real cool stuff!

Step 1

Create a New Flash Document using the default size (550 x 400px).

Step 2

Set the background color to whatever you want, I chose a medium greenish blue. Then place the text "Loading..." in the center of the document. This frame (frame 1) will serve as a loading page and in the next step we will implement the code to advance the frame upon loading the XML file. The reason we have this frame is because I found that Digg.com's XML file is quite large and can take some time to load so we show this page while the file is being loaded.

Step 3

Insert the following code into the Actions for the first frame:

Actionscript:
  1. function GetDiggXML():Void {
  2. myXML = new XML()
  3. myXML.ignoreWhite = true
  4. myXML.load("http://digg.com/rss/index.xml")
  5. myXML.ref = this
  6. myXML.onLoad = function(succes){
  7. if(succes){
  8. gotoAndPlay(2);
  9. var root = this.firstChild
  10. nodes = root.childNodes;
  11.  
  12. var i:Number = 0;
  13. var h:Number = i+1;
  14. var j:Number = i+2;
  15. subnodes = nodes[i].childNodes
  16. this.ref["txt_Title1"].text = subnodes[4].firstChild.toString().substr(7).substr(0, -8);
  17. this.ref["txt_Description"+h].text = subnodes[4].childNodes[2].toString().substr(13).substr(0, -14).substr(0, 65)+"...";
  18. this.ref["txt_Diggs"+h].text = subnodes[4].childNodes[5].toString().substr(16).substr(0, -17);
  19. this.ref["txt_Title2"].text = subnodes[4+h].firstChild.toString().substr(7).substr(0, -8);
  20. this.ref["txt_Description2"].text = subnodes[4+h].childNodes[2].toString().substr(13).substr(0, -14).substr(0, 65)+"...";
  21. this.ref["txt_Diggs2"].text = subnodes[4+h].childNodes[5].toString().substr(16).substr(0, -17);
  22. this.ref["txt_Title3"].text = subnodes[4+j].firstChild.toString().substr(7).substr(0, -8);
  23. this.ref["txt_Description3"].text = subnodes[4+j].childNodes[2].toString().substr(13).substr(0, -14).substr(0, 65)+"...";
  24. this.ref["txt_Diggs3"].text = subnodes[4+j].childNodes[5].toString().substr(16).substr(0, -17);
  25. } else trace("Error opening 'Digg.com XML File make sure it exitsts!")
  26. }
  27. }
  28.  
  29. GetDiggXML();

This code will grab the XML file and when it has loaded will go the the next frame (frame 2) and display the data from the XML file for the first 3 posts on the front page.

Step 4

Now insert a second frame and draw your display. You will need 9 text boxes (dynamic) with the following labels:

txt_Title1
txt_Description1
txt_Diggs1

txt_Title2
txt_Description2
txt_Diggs2

txt_Title3
txt_Description3
txt_Diggs3

Then you will need another text box with the text "Refresh". Then convert that to a button and label it "btn_Refresh" and add the following actionscript code to the button:

Actionscript:
  1. on (release) {
  2.     gotoAndPlay(1);
  3. }

This will make it refresh the XML file and grab any new items.

Step 5

The next step is to add the following code to the second frame:

Actionscript:
  1. var countdown_time:Number = 900;
  2. var counter:Number = countdown_time;
  3.  
  4. function countdown() {
  5.     counter--;
  6.     if (counter == 0) {
  7.         gotoAndPlay(1);
  8.         clearInterval(intID);
  9.     }
  10. }
  11.  
  12. countdown_txt.text = countdown_time;
  13. intID = setInterval(countdown,1000);

This code will act as a timer, it will refresh every 15 minutes (so if you leave it running it will automatically refresh).

This concludes this tutorial, if you have any questions, comments, etc. feel free to leave a comment below. I will try to answer any and all questions brought up below.

9 Responses to “Grab and Display Digg.com Frontpage Posts with Flash and AS2”

  1. Dan

    Hi.

    i’ve got a problem with the skript.

    when i run the skript i got the following error message:
    “1046: Typ was not found”

    i think there is problem with the Void … i dont now why ?

    i using as2.0 and flash9 …

    can you help me ?

    best regards
    dan

    May 5th, 2008 | 12:06 am
  2. @Dan - I’m not sure why you’re getting that error, I am using Flash 8 with AS2.0, since your using Flash 9 I would try removing the :Void from the function and that should solve your problem.

    May 13th, 2008 | 8:47 pm
  3. Awesome tutorial. I was inspired to create an AS3 version, but linked the readers back to yours in case they are still on AS2. I hope you don’t mind.

    http://scriptplayground.com/tutorials/as/Display-Digg-Posts-Using-ActionScript-3/

    May 14th, 2008 | 2:48 am
  4. @Matthew Keefe - Thats great, thanks for making an AS3 version and thanks for linking back to my post!

    Feel free to modify my code and make something new! Thats what programming is all about ;)

    May 14th, 2008 | 10:55 am
  5. caygflsnr qklcifd qmdyutkx wzfa kzjq prwsbhik xjsdvenl

    June 3rd, 2008 | 3:51 pm
  6. yqcxe wgpvjk dhtb wmis cjpfbhxnl csbyxduq kyicga

    June 3rd, 2008 | 4:01 pm
  7. lehis dxyrw bnldwhmiz ugwtp wflvigeyo oqal loyd

    June 3rd, 2008 | 4:11 pm
  8. Nice website!!

    June 30th, 2008 | 1:06 pm
  9. […] to build will grab the XML feed from Digg.com and display the first 3 stories from the front page inhttp://www.techwhiz.info/2008/05/01/grab-and-display-diggcom-frontpage-posts-with-flash-and-as2/InformIT: Safari Books Online - 0201741431 - FrontPage 2002 for …0201741431 - frontpage 2002 for […]

    June 30th, 2008 | 6:02 pm

Leave a Reply