2. Loading data from text files

Ok, our basic that we will carry all around this tutorial comes in two flavors: one item and multiple items. What's the difference? In the first case we only need to bind three variables, while in the second we will load more quantity of data.
Here's a screenshot of our example

1. Open a blank movie and place holders for your data. Make three layers: image, text and code.
2. In the image layer, create a MovieClip (Menu Insert --> New Symbol --> MovieClip (name it holder)) and OK. You will prompt to put content in it, but we don't need content, so press on Scene 1 to return to main Stage.
3. Now we have an empty MovieClip to load content on it. Open the library (Ctrl+L) and drag the empty MovieClip to Stage. You get an empty circle because it has no graphical content on it (in the screenshot we have placed the final image). Put where you want to load the image (a 200x150 space will be fine) and give an instance name of holder_mc. Using a holder is better because we have more control over the image loading.
4. Now move to the text layer and create two dynamic textfields, the first as HTML single line and instance name of Title_txt and the second as normal multiline and instance name of Comments_txt. We don't need more graphic content, so let's move to the code layer and put this code into it:


    //Create the URLLOader instance
    var myLoader:URLLoader = new URLLoader()
    //the data will come as URL-encoded variables
    myLoader.dataFormat = URLLoaderDataFormat.VARIABLES
    //Load using an URLRequest, even beeing local
    myLoader.load(new URLRequest("anastasio.txt"))
    //onLoad handler listener
    myLoader.addEventListener(Event.COMPLETE, onDataLoad)
    //Error handling    
    myLoader.addEventListener(IOErrorEvent.IO_ERROR, onIOError)
    myLoader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError)
    //Could be an error or just a message
    myLoader.addEventListener(HTTPStatusEvent.HTTP_STATUS, onHTTPStatus)    
    //add a listener for the complete event
    function onDataLoad(evt:Event){
        Title_txt.htmlText = "<b>"+evt.target.data.Title+"</b>"
        Comments_txt.text = evt.target.data.Comments
        var loader:Loader = new Loader()
        holder_mc.addChild(loader)
        loader.load(new URLRequest(evt.target.data.Image))        
    }
    //error callbacks
    function onIOError(evt:IOErrorEvent){
        trace("IOError: "+evt.text)
    }
    function onHTTPStatus(evt:HTTPStatusEvent){
        trace("HTTPStatus: "+evt.status)
    }
    function onSecurityError(evt:SecurityErrorEvent){
        trace("SecurityError: "+evt.text)
    }


Our data.txt file should reside in the same folder as our movie. Here's how our text file looks (anastasio.txt):

Title=Anastasio&Comments=This is a nice guy&Image=anastasio.jpg

Note that we use name/value pairs. The image, anastasio.jpg is also in the same folder. The onDataLoad callback fires when data download to our movie. Then we simply assign content to proper text field. Note that we add a <b></b> pairs of tags to the Title text field (set to HTML), since we want to emphasize it.

There are many new things here, like the loader object and the addChild method to show in our empty holder_mc movieclip. The stage management as a tree is probably one of the most concerning new concepts, anyway is not the focus of this article. Is important to notice that the HTTPStatus event is just a notice, not neccesary an error. Usually when working from Flash IDE, it outputs 0, since it can't access any HTTP status due the lack of a browser.

Publish and test.

Using multiple data

In order to load more data, say two names, two comments and two images, we need to setup more holders. So rearrange the layout to have one image below the other and change instance names:

image_mc1
image_mc2
Title_txt1
Title_txt2
Comments_txt1
Comments_txt2

Here's a screenshot

Here's our text (anastasio2.txt)

Title0=Anastasio&Coments0=This is a nice guy&Image0=an1.jpg&Title1=Anastasio on car&Coments1=Here's Anastasio's car&Image1=an2.jpg&cant=2

The code will vary slightly:


    //Create the URLLOader instance
    var myLoader:URLLoader = new URLLoader()
    //the data will come as URL-encoded variables
    myLoader.dataFormat = URLLoaderDataFormat.VARIABLES
    //Load using an URLRequest, even beeing local
    myLoader.load(new URLRequest("anastasio2.txt"))
    //onLoad handler listener
    myLoader.addEventListener(Event.COMPLETE, onDataLoad)
    //Error handling    
    myLoader.addEventListener(IOErrorEvent.IO_ERROR, onIOError)
    myLoader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError)
    //Could be an error or just a message
    myLoader.addEventListener(HTTPStatusEvent.HTTP_STATUS, onHTTPStatus)    
    //add a listener for the complete event
    function onDataLoad(evt:Event){
        for(var i:uint=0; i<evt.target.data.cant; i++){
            this["Title_txt"+i].htmlText  = "<b>"+evt.target.data["Title"+i]+"</b>"
            this["Comments_txt"+i].text = evt.target.data["Comments"+i]
            var loader:Loader = new Loader()
            this["holder_mc"+i].addChild(loader)
            loader.load(new URLRequest(evt.target.data["Image"+i]))
        }
    }
    //error callbacks
    function onIOError(evt:IOErrorEvent){
        trace("IOError: "+evt.text)
    }
    function onHTTPStatus(evt:HTTPStatusEvent){
        trace("HTTPStatus: "+evt.status)
    }
    function onSecurityError(evt:SecurityErrorEvent){
        trace("SecurityError: "+evt.text)
    }


As you can see, now we loop trough the data using the cant variable to know in advance how many rows we expect. Variables are named in an incremental way, so Title0, Title1 and so on. This way, we can loop in an easy way (imagine 150 rows) fetching data in only one loop. Note that we use array notation to build the reference to the elements on stage and also to the elements loded from textfile.
We use 0 as the first row because arrays in AS are zero based, but it's really not strictly necessary, you can change to begin with 1 if you want as far as you change the variables in the text file accordingly. Also we have used brackets to access content, since all variables are exposed as an array inside the data property of the URLLoader object. Then, we bind each variable to the proper holder (Title and Comments text fields and holder_mc movieclip) Fetching data is the action of associate incoming variables to the proper visual element. Note the use of an array also to point to text fields: the content in any timeline is also exposed as an array. Since we load external images, is advisable to build some preloader, since could take a while to load the image ... but this is outside the scope of this tutorial.

------------------------------------------------------------------------------------------------------------------------------------------
TIP

Accessing content into a timeline using array notation is a useful technique. The usual notation involves the special word this to refer to current timeline, and an expression to evaluate inside the brackets, like ["some_mc"+i]. If i have a value of 0 in example, this expression points to some instance with the name "some_mc0" in current timeline. So looping while incrementing the value of i will result in pointing to some_mc0, some_mc1, some_mc2 and so on. Creating content on the fly usually involves this technique
------------------------------------------------------------------------------------------------------------------------------------------

So, now that we know how to load data from text files, we can move to XML structures.