Tutorial: Pagination in ActionScript 2
Categories: AS2, AS3, All Tutorials, Beginner Tutorials, Flash, Intermediate Tutorials, Links
This is going to be a smaller tutorial about how to paginate objects in ActionScript 2.0. By paginate, I mean taking a large group of objects, and making it so the user can navigate through them by page. For example, in our previous tutorial, Make a Rhythm Game in AS2, we made a list of levels that the user could play. However, this list was only limited to 5 levels, and we didn’t paginate them. We’re going to do something like this today.
First of all, we’re going to make a large array of random values that we can paginate. Because we don’t care what the values are right now, we’re just going to make them totally random. If you’re going to use pagination for something more than a tutorial, then you probably should use your own values.
Make a layer called “actions” and place the following code in the first frame:
//this values array will hold all of the values we need to paginate var values:Array = new Array(); //this loop adds 1000 different values to the array for(i=0;i<1000;i++){ //the values will range from 0-9999 values[i] = random(9999); }
If you want to check, then try making a trace() statement to see what the values are.
Next, we’re going to have to make a MovieClip called “mcValueHolder” that will be placed onto stage with a certain value in the array within it. We also need a text field to actually have the value in it. Here’s what mine looks like:

Also, in the text field’s “Var:” field, put in thisValue. This will be the value that the MovieClip holds.
Now, we have to export the MovieClip for ActionScript. If you don’t know how to do that, then right click on the MovieClip in the library and click on “Linkage…”. Then, check off “Export for ActionScript”. That’s all you have to do. Click on “Ok” and we can continue.
We also need two buttons to click to get to the next page and the previous page. Hopefully, you can figure out how to do that yourself. Just add them to the bottom of the stage and give them instance names of “mcPrev” and “mcNext”.
Also, we need to make a text field which tells the user which page they are on out of the total pages. Just add it to the stage and set the “Var: ” field to pageTxt.
Now for the hard part, actually coding the pagination. Place this code in after we define the values variable.
//the current page we're on var page:Number = 1; //the limit of values we need per page var limit:Number = 6; //the current row that we're working on var row:Number = 0; //The total pages that we have var totalPages:Number = Math.ceil(values.length/limit); //the text at the bottom of the page var pageTxt:String = 'Page '+page+' out of '+totalPages; //the function that will add all of the mc's to stage function createValues():Void{ //this will always limit the amount to the limit variable //but, "i" will act as a marker for which part of the values //array that we're going to use for(i=(page-1)*limit;i<page*limit;i++){ //checks if there actually is a value where "i" is //otherwise we'll get some undefined movieclips if(i < values.length){ //attaches the movieclip to the stage attachMovie('mcValueHolder', 'value'+row, getNextHighestDepth()); //sets the coordinates based on the row _root['value'+row]._x = 5; _root['value'+row]._y = 5+_root['value'+row]._height*row; //sets this guys value to the correct part of the array _root['value'+row].thisValue = values[i]; //move onto the next row row ++; } } //then we reset the rows so we can use the variable again row=0; } //we have to remove movieclips from the stage if we're going to paginate function removeValues():Void{ //its a simple function, hopefully you can understand it for(i=0;i<limit;i++){ _root['value'+i].removeMovieClip(); } } //adding functions to the buttons when they're clicked mcPrev.onRelease = function(){ //if the page isn't too low if(page > 1){ //then go to the previous page removeValues(); page --; createValues(); //updating the text pageTxt = 'Page '+page+' out of '+totalPages; } } mcNext.onRelease= function(){ //if the page isn't too high if(page < totalPages){ //then go to the next page removeValues(); page ++; createValues(); //updating the text pageTxt = 'Page '+page+' out of '+totalPages; } } //we're going to have to show the values first thing createValues();
Pretty intense, eh? Well, this code is basically useless by itself. I doubt that anybody wants to look through random numbers. But, implementing it into your project will help a lot.





I suppose this could be modified to display highscores for a game?
August 16th, 2008 at 2:52 pm
Of course, you just need to know how to customize it :)
August 16th, 2008 at 5:02 pm
ok just a quick post back to the earlier problem.
I added a “numberOfValues:int” to track how many values are actually in a page. Eg: if there are only
3 values in the last page, by clicking the prev button this will result in a error as the number of values stated by limit wont exist.
October 10th, 2008 at 10:20 am
Great tutorial !!!
Simple code and very useful !!!
Thanks Mr Sun
October 29th, 2008 at 3:04 pm