In this collection of tutorials I will show you the power of the Flash CS3 components and how to use them in the best way.
I am going to start with the List component. I will show you how to easily populate XML data into the List.

The Flash components are very useful, powerful and easy to customize. Some of them are ComboBox, CheckBox, DataGrid and so on. You can see them in the Components panel by clicking Window -> Components. Now I will show you the best and the fastest way, in my opinion, to populate data from an XML file. We’ll be using the List component. The List component is a scrollable single- or multiple-selection list box. To add an item to the List you can use addItem() and addItemAt() methods. A List item has two properties: label and data.
Let’s get started with the example.

1. Open a new Flash CS3 document and save it under “listXML.fla”. Set the size to 250 x 350 and for background color choose #CCCCCC. On the top of the document create a static text field and write “My favourite movies list”.
2. Go to the Components panel by clicking Window -> Components and drag a List component on the stage. Make it 250px wide by 300px high. Give it an instance name “xmlList”.
3. Now let’s create a new XML file. I made an XML with my favourite movies. You can copy it or you can list your favourite movies.

<?xml version = "1.0" encoding = "UTF-8"?>
<data>
  <movies>
    <movie>
      <title>The Shawshank Redemption</title>
      <link>http://www.imdb.com/title/tt0111161/</link>
   </movie>
   <movie>
     <title>The Godfather</title>
     <link>http://www.imdb.com/title/tt0068646/</link>
  </movie>
  <movie>
    <title>Lock, stock and two smoking barrels</title>
    <link>http://www.imdb.com/title/tt0120735/</link>
  </movie>
  <movie>
    <title>I am Sam</title>
    <link>http://www.imdb.com/title/tt0277027/</link>
  </movie>
  <movie>
    <title>Oldboy</title>
    <link>http://www.imdb.com/title/tt0364569/</link>
  </movie>
  <movie>
    <title>Training day</title>
    <link>http://www.imdb.com/title/tt0139654/</link>
  </movie>
  <movie>
    <title>Live flesh</title>
    <link>http://www.imdb.com/title/tt0118819/</link>
  </movie>
  <movie>
    <title>Liar Liar</title>
    <link>http://www.imdb.com/title/tt0119528/</link>
  </movie>
  <movie>
    <title>Carlito's way</title>
    <link>http://www.imdb.com/title/tt0106519/</link>
  </movie>
  <movie>
    <title>Blow</title>
    <link>http://www.imdb.com/title/tt0221027/</link>
  </movie>
  <movie>
    <title>The bank job</title>
    <link>http://www.imdb.com/title/tt0200465/</link>
  </movie>
  <movie>
    <title>Big fish</title>
    <link>http://www.imdb.com/title/tt0319061/</link>
  </movie>
  <movie>
    <title>25th hour</title>
    <link>http://www.imdb.com/title/tt0307901/</link>
  </movie>
  <movie>
    <title>Scarface</title>
    <link>http://www.imdb.com/title/tt0086250/</link>
  </movie>
  <movie>
    <title>Alfie</title>
    <link>http://www.imdb.com/title/tt0375173/</link>
  </movie>
  </movies>
</data>

Save the file under “list.xml”. It should be in the same directory as the .fla file.

The main idea is to populate the XML data into a List component and then set a List event. On double click we will navigate to the movie presentation on IMDB (Internet Movie DataBase) site.

4. Go back to Flash and create a new layer called “actions”. Open the Actions Panel.

//we need a ListEvent for our List
import fl.events.ListEvent;

//we create a variable to store the loaded XML
var xml:XML;
//the path to the xml file
var xmlPath:String = "list.xml";
//we create a loader and when the loading is over we call the xmlLoaded function
var loader:URLLoader = new URLLoader();
//a url request for our loader
var req:URLRequest = new URLRequest(xmlPath);
loader.addEventListener(Event.COMPLETE, xmlLoaded);
loader.load(req);

//adding a double click event handler to the list
xmlList.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, itemDoubleClicked)

function xmlLoaded(event:Event):void{
	//this will be the List item object
	var item:Object;
	xml = new XML(event.target.data);

	//looping through the XML nodes
	for each(var movieItem:XML in xml.movies.movie){
		//creating a new item object
		item = new Object();
		//the part that the user sees
		item.label = movieItem.title.toString();
		//we store the URL for every movie presentation
		item.data = movieItem.link.toString();
		//we add the items to the List
		xmlList.addItem(item);
	}
}

function itemDoubleClicked(event:ListEvent):void{
	//here we store the selected item's link
	var linkTo:String = xmlList.selectedItem.data.toString();
	//on double click we navigate to the movie presentation
	navigateToURL(new URLRequest(linkTo));
}

That was all!

See how it looks:

Today I will show you how to use XML and ActionScript 3 to create a small application that changes your favourite quotes after some time interval. We will be using also the AS3 Tween Class to animate the quotes’ appearance.

At first this was just an experiment but i thought it might be useful for some of you. What the rotator does is to choose a random quote from an XML file and then shows it for several seconds. Then it chooses another random quote and so on. You can use it for header of your blog or whatever you want. So, let’s get started.

1. Create a new Flash CS3 document with size 600 x 100 and background color #000000.
2. Create two dynamic text fields. The first one should be about 580px wide and the second one – about 200px. For the long text field choose #ffffff for color, size 14, bold. I have used “Verdana” for font. If you don’t like it choose another font. Align the text inside the text field to center. Give it an instance name “quoteTxt”. Embed the font like this:

Now repeat this step for the other text field but only change the color to #00CCFF and give it an instance name “authorTxt”.
3. Convert the text fields to movie clips. Select the long text field and convert it to movie clip with instance name “quoteMC”. Repeat the same for the other text field and put “authorMC” for instance name.
4. Now let’s create the XML file we will be using. You can simply download it from here. So after downloading put the file into directory named “data”.
5. Create a new layer called “actions”, open the actions panel and paste this code:

//importing tween classes
import fl.transitions.Tween;
import fl.transitions.easing.*;

//we create a variable to store the loaded XML
var xml:XML;
//the path to the xml file
var xmlPath:String = "http://www.flashadvanced.com/wp-content/upload/quotes/quotes.xml";
//we create a loader and when the loading is over we call the xmlComplete function
var loader:URLLoader = new URLLoader();
//a url request for our loader
var req:URLRequest = new URLRequest(xmlPath);
loader.addEventListener(Event.COMPLETE, xmlComplete);
loader.load(req);
//a variable for our tween
var myTween:Tween;
//we need to set a timer
var timer:Timer = new Timer(5000);
timer.addEventListener(TimerEvent.TIMER, changeQuotes);
timer.start();

function xmlComplete(e:Event):void{
	xml = new XML(e.target.data);
	addQuotes();
	randomQuoteTween();
}

//we create arrays to store the quotes and the authors
var quotesArray:Array = new Array();
var authorsArray:Array = new Array();
//we need a random quote number
var randomNumber:Number;

function addQuotes(){
	//we loop through the "quote" element of our XML
	for each(var item:XML in xml.quotes.quote){
		//we fill the arrays with quotes and authors
		quotesArray.push(item.content);
		authorsArray.push(item.author);
	}
}

function randomQuoteTween():void{
	//calculating the random number
	randomNumber = Math.round(Math.random() * (quotesArray.length - 1));
	//filling the text fields
	quoteMC.quoteTxt.text = quotesArray[randomNumber];
	authorMC.authorTxt.text = authorsArray[randomNumber];
	//creating tween effects
	myTween = new Tween(quoteMC, "alpha", Strong.easeOut, 0, 1, 3, true);
	myTween = new Tween(authorMC, "x", Strong.easeOut, 550, 500, 3, true);
}

function changeQuotes(e:TimerEvent){
	randomQuoteTween();
}

Here is the final result: