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 any 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:


    myData = new LoadVars()
    myData.load("anastasio.txt")
    myData.onLoad = function(succes){
        if(succes){
            Title_txt.htmlText = "<b>"+this.Title+"</b>"
            Comments_txt.text = this.Comments
            holder_mc.loadMovie(this.Image)
        } else trace("Error loading data") 
    }


This way we load data into our LoadVars object as exposed. 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 onLoad handler 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. 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_mc0
image_mc1
Title_txt0
Title_txt1
Comments_txt0
Comments_txt1

Here's a screenshot

Here's our text (anastasio2.txt)

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

The code will vary slightly:


        myData = new LoadVars()
        myData.load("anastasio2.txt")
        myData.ref = this
        myData.onLoad = function(succes){
            if(succes){
                for(var i=0; i<this.cant; i++){
                    this.ref["Title_txt"+i].htmlText = "<b>"+this["Title"+i]+"</b>"
                    this.ref["Comments_txt"+i].text = this["Comments"+i]
                    this.ref["holder_mc"+i].loadMovie(this["Image"+i])
                }
            } else trace("Error loading data")
        }


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. We use the variable ref (we will see again this technique in XML loading) to make a shortcut to the current timeline, since the content is in _root timeline, not inside the LoadVars object. Why didn't use this shortcut in the previous example? Because we don't need to use array notation to evaluate content (i.e. this["some_mc"+i]), so hard coded paths don't have this problem.
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 texe file accordingly. Also we have used brackets to access content, since all variables are exposed as an array inside the LoadVars 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 use loadMovie, is advisable to build some preloader, since could take some time 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 involves generally this technique
------------------------------------------------------------------------------------------------------------------------------------------

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