Flash Tutorial – Pagination

Pagination is a navigation style where you have a bunch of content that won’t fit on one screen, so you give your user BACK and NEXT arrow keys to flip through “pages” displaying the content. In many ways, it’s preferable to a scrolling navigation, because you don’t have to fill the box with all of your content at once – you can pull it down for your user on demand. (note: i’ve seen a few rare cases where a the application downloads content as you scroll the list, but in my experience it’s not very common)

You see pagination everywhere, and i use it at least once in every single game i build. It’s just handy. Check out the puzzle gallery in Jigsaw! for an example:

Jigsaw Pagination

Pagination at work

When i was first learning Flash and i had to set up these paginated galleries all the time, i would constantly make the same mistake. The left arrow button would fire a function that would be almost identical to the right arrow button’s function. For some bizarre reason, it took me YEARS to figure out how to set this up without duplicating code.

If you’re a smartypants and you figured this out long ago, more power to you. But if you’re just learning and you have a similar problem, here’s the trick:

ID, please

The first thing you need is an ID to store which “page” the user is looking at. Remember that our gallery is going to be completely code-created, so there are no actual “pages” to speak of – you decide how many items will appear on your pages. But you’ll use this ID value to figure out which content to display.

1
2
3
4
5
//AS2:
var ID:Number;
 
//AS3:
var ID:uint;

That’s the variable declaration. When you initialize your gallery screen, set ID to 0.

mod

Next, i give each arrow button a variable called “mod“. That’s short for “modifier“. The LEFT/BACK/PREVIOUS arrow gets a mod of -1, while the RIGHT/FORWARD/NEXT button gets a mod of 1.

1
2
btnArrowLeftClip.mod = -1;
btnArrowRightClip.mod = 1;

Interactify it!

Set up some button events or event listeners for your arrow buttons, and pass each button’s mod value to a common function.

1
2
3
4
5
6
7
8
9
10
11
12
13
//AS2:
btnArrowLeftClip.onRelease =
            btnArrowRightClip.onRelease = function():Void
{
     flipGallery(this.mod);
}
 
//AS3:
btnArrowRightClip.mod = 1;
btnArrowLeftClip.mod = -1;
 
btnArrowLeftClip.addEventListener(MouseEvent.CLICK, flipGallery);
btnArrowRightClip.addEventListener(MouseEvent.CLICK, flipGallery);

Flip it real good

Now, you just set up a flipGallery function. It accepts mod (-1 or 1) as input and uses that to change the ID value.

1
2
3
4
5
6
7
8
9
10
11
12
// AS2:
flipGallery = function(mod:Number):Void
{
      ID += mod;  
      // If mod is -1, ID goes down.  If mod is 1, ID goes up.
}
 
//AS3:
function flipGallery(e:MouseEvent):void
{
      ID += e.target.mod;
}

That’s a Wrap (?)

You’ll want to add some logic to your flipGallery function to wrap the ID variable. Figure out how much stuff you have to display, then figure out how much stuff you can fit on one “page”. That will give you totalItems and totalItemsPerPage values. Do some division to calculate a totalPages value.

Then, within your flipGallery function/method:

1
2
3
if(ID >= totalPages) ID = 0;
if(ID < 0) ID = totalPages-1; 
      // we subtract 1 because we're working with 0-base counting

So what do you actually do with your flipGallery function once the ID is set properly? If you have all of the things you want to display numbered sequentially and linked from the library (or stored in an array), just loop through totalItemsPerPage. Multiply ID (current page) by totalItemsPerPage and add it to your iterative value (usually i in a for loop). That’s the number of the correct item to display … so display it!

There’s a little more work involved with actually laying out your items on the stage so that they’re not all lumped together. i’ll leave that up to your discretion. i just wanted to talk about the mod method, because i would have appreciated it very much if the Ghost of Christmas Future had written this article for me and emailed it to me back in 2002.

Ghost of Christmas Future helps Scrooge with Flash programming

Will Tiny Tim ever learn Actionscript, spirit?

Shall we have some more?

Was that helpful? Not? Do you have a way better way to do it? Is there another topic you want to see covered? Let me know!

– Ryan

5 thoughts on “Flash Tutorial – Pagination

  1. ron

    Hi
    i was looking for something like this tutorial, so thanks.

    i have on stage 2 buttons with instances “next_btn” and “prev_btn”.

    i started to write the code and i got this error message:
    1119: Access of possibly undefined property mod through a reference with static type flash.display:SimpleButton.

    i`m learning AS3 and i`m not sure what does that message means.

    hope you can help me. i`m trying to build a gallery that pulls its content from an xml file. but for now i`m just trying to understand the mechanism of the pagination.

    best regards

    ron

    Reply
  2. Ryan

    Hey ron. You’re absolutely right – i posted the literal AS3 translations of all my AS2 code, but i didn’t bother testing it in AS3. Terribly sorry about that.

    The easiest way to do this is to put the CLICK event listener on each button, and then in the flipGallery function, do a quick conditional check against e.currentTarget (where “e” is the event parameter that you’ve passed into the function).

    If currentTarget is your next arrow, set mod =1. If it’s the back arrow, set mod = -1.

    Sorry for the confusion! My hands aren’t nearly as dirty with AS3 as they should be by now.

    Big-ups to my dirty-handed colleague i11uminatus for helping me sort through it.

    – Ryan

    Reply
  3. Ron

    Hi
    just saw your answer, and sorry if i do not understand (just learning AS3).

    the CLICK event is executing the flipGallery function, so how and where can i add a CLICK event to the buttons? can i add ?

    best regards

    ron

    Reply
  4. Ryan

    Yeah – just add the CLICK event to the button like this:

    btnArrowLeftClip.addEventListener(MouseEvent.CLICK, flipGallery);

    Reply
  5. Ron

    Hi

    thanks for the answers. but i`m messing everything up. i hope you can make a more detailed tutorial. i tried to find other tutorials but no one got this pagination idea.

    ron

    Reply

Leave a Reply to ron Cancel reply

Your email address will not be published. Required fields are marked *