Chris Bristol

I have been using Flash in my web development since version 4. As ActionScript became a more powerful language, I found myself fascinated by the interaction between it and PHP and MySQL. In recent years, I have worked at eliminating the use of the timeline altogether, building everything in pure AS3, and making my code reusable. The fantastic resources of the vast online Flash community has been a great source of help and inspiration. I hope to be able to give back a little of that. You can reach me via my website: Xty Digital Design

View all articles by Chris Bristol

Anytime you need to display a lot of results, whether from a database, or, as in this tutorial's demo, from an XML file. In a full Flash site you generally have limited space in which to display data, but even if you are putting the results into a separate Flash movie, your space is still limited. Let's say you have a data set to display which includes images, a block of text, and a couple of buttons. Let's also say each result takes up 250 pixels of height. With the limit on a Flash movie's size being 2880 x 2880, vertically you'd only get 11 results to a single page.

The Demo Movie

The movie below feeds on 2 XML files containing the song data. I wanted the demo to make use of dynamically gathered data, and XML seemed to be the best choice under the circumstances. How you get your data is unimportant to the pagination concept, it's what we do with it afterward that counts. To see the flexibility of the class you can adjust the number of results to display.



The Demo Files

Now, download the nextPrev.zip file and let's dig into the code and see how this works.

The files included in the nextPrev.zip are PagDemo.as and pagDemo.fla. This set of files shows the pagination working with both a top and bottom set of controls, while the PagDemoSingle.as and the pagDemoSingle.fla demonstrates the same class being used with only a single set of controls. The easyMusic.xml and rockMusic.xml files hold the data that we will be reading into the movie. And, you'll find the NextPrev.as class and the CustomEvent.as class files inside the ca.xty.myUtils folder system.

The XML files are very simple examples, and so I hope they don't need any detailed explanation, because I'm not providing any. There are quite a few good tutorials about using Flash and XML and, to do the subject justice, I'd need to make this tutorial even longer than it is. Besides, you will most likely have much more complex data to work with in a real situation, and consequently a much more complex XML file. What I'll mainly be dealing with is gathering the data from the XML file and packaging it up in a way that's easy for us to use.

The pagDemoSingle.as has sections commented out to show you what gets left out when you are using a single set of controls, and beyond that everything else is exactly the same.

There is also a text file called backToTop.txt. This is a tiny bit of JavaScript that we will use together with the ExternalInterface class provided by Flash.

As usual, the fla's are empty, except for a button in the library and the fact that the Document Class property is set to PageDemo or PageDemoSingle.

What's not included in the zip file this time out is an fla for CS3 - but don't despair! Creating one is dead easy. Make a new fla in CS3 with a width of 500 and a height of 600. Drag a Button component into the library and set your Document Class to read either pagDemo or pagDemoSingle - remember, no .as extension, just the class name. Make sure you have all the files included in the zip in the same folder as your CS3 fla and you're good to go.

So let's jump into the pagDemo.as file already!