A lot of the pieces of this tutorial will look familiar to those of you who read the first pagination tutorial. There are enough differences however, that it is worth going through all the code once again. One of the big differences is that we are using buttons to move through the pages. Before we get started on the code itself, let's take a look at one way you can make your buttons in Flash.

Make Your Own Buttons

First thing is to make your buttons in PhotoShop, or whatever your favorite graphics program is. Once you have the buttons ready, open up your fla and go to File -> Import -> Import To Library, and bring your buttons in. You can download a zip file called pagDemoButtonSkins.zip that contains the png files and the original psd file if you want to see the set up. It was made using PhotoShop CS3.

Make sure you have already dragged an instance of Button from the Components to your library. With that in there, you will also have a folder called Component Assests. Open that and then open the Button Skins folder. There you will find all the skins that are associated with your button. These are all the default skins. Right click on the Button_upSkin and choose Duplicate. In the panel that comes up name your new skin Button_upSkinPN. Now check the Export for ActionScript checkbox and click OK.

You will see the new skin appear in the Button Skins folder. Right click on your new skin and choose Edit. In the timeline for this moveiclip add a new layer at the top above the highlight layer and drag your button_up instance from the library to the stage. Align it to the top and the left. Now delete the 3 layers under it on the timeline so that the only thing left is your new layer.

Now do the same steps with the Button_overSkin, Button_downSkin, Button_disabledSkin, Button_selectedDownSkin, Button_selectedOverSkin,and Button_selectedUpSkin, naming them Button_overSkinPN, Button_downSkinPN, etc.

And here's how we use our new buttons:
myButton.setStyle("upSkin", Button_upSkinPN);
myButton.setStyle("overSkin", Button_overSkinPN);
myButton.setStyle("downSkin", Button_downSkinPN);
myButton.setStyle("selectedUpSkin", Button_selectedUpSkinPN);
myButton.setStyle("selectedOverSkin", Button_selectedOverSkinPN);
myButton.setStyle("selectedDownSkin", Button_selectedDownSkinPN);
myButton.setStyle("disabledSkin", Button_disabledSkinPN);

We will be using the Toggle property on our buttons, so I have also created the skins for the _selected options. In all cases for the selected skins - up, down, over - we use our button_down skin.

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 afterwards that counts. For this tutorial I needed a lot more data in order to effectively show off the page numbers, so I cheated and just copied and pasted the entries in the rockMusicPN.xml file until I had enough. I mention this in case you are wondering why the songs repeat.

The Demo Files

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

The files included in the nextPrevPN.zip are PagDemoPN.as and pagDemoPN.fla. The easyMusicPN.xml and rockMusicPN.xml files hold the data that we will be reading into the movie. And, you'll find the NextPrevPN.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, once again, 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 world 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.

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.

And, as mentioned above there is a zip file with the PhotoShop psd file containing the artwork for the button skins used in this demo.

As usual, the fla is empty, except for a button in the library, our new skins, and the fact that the Document Class property is set to PageDemoPN.

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 PagDemoPN - remember, no .as extension, just the class name. This time, you'll have to create your button skins as described above. make sure to use the same names for the skins as I have and you should be fine. With all the files included in the zip in the same folder as your CS3 fla you should be good to go.

Future tutorials will likely be done in Flash CS5 now that I have finally moved up to that version. If you are doing a lot of custom class work, do yourself a favor and move up too. The custom class introspection is worth it all by itself.

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