How To Create XML News Section in Flash

Hello and welcome.

This tutorial will teach you how to create a news section for your Flash site which is fed via an XML file, for easy updating.

Well, let's get started.

Set up XML File

First, let's set up our XML file with the articles that we want. I am going to include a title and a date for each article, just so that it looks and feels just like a real news section.

Here's mine:

<news>
<article>
<title>My title</title>
<date>June 3, 2007</date>
<body>My article content here My article content here My article content here My article content here My article content here My article content here My article content here My article content here My article content here My article content here </body>
</article>
<article>
<title>My title2</title>
<date>June 1, 2007</date>
<body>My 2nd article content hereMy 2nd article content hereMy 2nd article content hereMy 2nd article content hereMy 2nd article content hereMy 2nd article content hereMy 2nd article content hereMy 2nd article content hereMy 2nd article content hereMy 2nd article content hereMy 2nd article content here </body>
</article>
<article>
<title>My title3</title>
<date>May 28, 2007</date>
<body>My 3rd article content here My 3rd article content here My 3rd article content here My 3rd article content here My 3rd article content here My 3rd article content here </body>
</article>
</news>

Save XML file

Save it in the same directory as where you are going to put the finished .swf file, and give it a name of "news.xml".

Open new Flash project

Now that we have finished the XML file, it's time to turn our attention back to flash.

Open a new document and place a new text area on the stage. Make it as big as you'd like and do not forget to make a dynamic text field. Give an instance name of "news_txt". We should also make the text wrap, so in the bottom of the page look for a dropdown menu with the default option of "Single line". We need to change that to "Multiline". Also, look to the right of that dropdown menu and click on the "Render as HTML" icon.
You should also pick the font and the size of the text.
Now lock this layer.

Create new layer

Create a new layer, lock it and click on the first frame.
Now press F9 to bring up the actionscript window.
From now on, all the work that we will be doing will take place in this window.
Time to declare a new XML file:

var newsXML : XML = new XML(); // declare a new XML
newsXML.ignoreWhite = true; // avoid errors using this command
var output:String = ""; // initialize a new string that will contain all the text

Open XML file in Flash

Time to begin the real work on the project.
A standard procedure when using XML in flash.

var newsXML : XML = new XML();
newsXML.ignoreWhite = true;
var output:String = "";

newsXML.onLoad = function(){ //Telling flash that it needs to do all of the code when the XML loads
if(success){               //If the loading is successful we will begin showing the news items
                                 //In between these two curly brackets is where all the coding will take
                             //place
}
}

Create array of articles

We need to include all of our articles into an array so that we may refer to them later, when we are going to load them.

var newsXML : XML = new XML();
newsXML.ignoreWhite = true;
var output:String = "";

newsXML.onLoad = function () {
if(success) {
    //Our array will enable us to refer to one
    //article at a time
      var news:Array = newsXML.firstChild.childNodes;
}
}

Read articles with for loop

Now we need to create a "for" loop, so that we may access all of the articles.

var newsXML : XML = new XML();
newsXML.ignoreWhite = true;
var output:String = "";

newsXML.onLoad = function(){
if(success){
      var news:Array = newsXML.firstChild.childNodes;
    //This command returns the number of articles
    //in our XML file
      nr_articles = newsXML.firstChild.childNodes.length;
    //A "for" is what we need to access all of
    //the articles
    for(i=0;i<nr_articles;i++){
            }
      }
}

Get data from XML to Flash variable

We will now begin the actual extraction of data from the XML into our "output" variable that we created earlier.

var newsXML : XML = new XML();
newsXML.ignoreWhite = true;
var output:String = "";

newsXML.onLoad = function(){
if(success){
      var news:Array = newsXML.firstChild.childNodes;
      nr_articles = newsXML.firstChild.childNodes.length;
      for(i=0;i<nr_articles;i++){
      //output takes in the title of the article,
      // because the first tag in every article is
      //the title
      output += news[i].childNodes[0].nodeValue;
      // we extract the date of that given article
      output += news[i].childNodes[1].nodeValue;
      //this last line extracts the body of the article
      output += news[i].childNodes[2].nodeValue;
      //Put the text in the dynamic text field so
      //that you can have a look at your work
      news_txt.htmlText = output;
    }
}
}
//This line actually gives flash the
//command to load our XML file, so that
//you may take a look at your work so far.
newsXML.load("news.xml");

Format text from XML

If you have had the curiosity to test the movie, you will see that it just looks like a whole paragraph, you can't even make out which ones the title and which one is the body.
Well we're going to take care of that.

Test your movie

Test your movie and marvel at your newly created web section for your site.

There is sample XML News Flash Project, used in this tutorial.

This tutorial is written by Dr00pY.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback