Alright, great.
Next...the next/previous buttons.
First, in order to manipulate the page number, we'll have to add it to a variable. I'm going to call it current for current page and set it equal to 0 at the beginning of the movie. Remember that the page number is really the XML index (which starts at 0). Have I said that enough? :-p
To reflect this change, we'll update our onLoad() function from loadImages(0) to loadImages(current).Code:// Variables
var total:Number = new Number();
var path:String = new String();
var positions:Array = new Array(left, center, right);
var current:Number = 0;
Now, we're ready to write the logic for the next/previous buttons. First, the next. Each time we click the next button we want the page to go up one. In other words, we want current to increase by one. Then, we want to load the images associated with that next page.Code:// Load XML
xml.onLoad = function(success) {
if(success) {
total = xml.firstChild.childNodes.length // Set total number of pages
path = xml.firstChild.attributes.path;
loadImages(current);
}
else {
trace("Error: XML Didn't Load");
}
}
So, we do something like this:
current++ increases current by one each time the function is called. Since we made loadImages() flexible by adding the parameter, we can easily call the images associated with the next "page".Code:function goForward() {
current++;
loadImages(current);
}
The same logic applies with the previous function. This time, we're just decreasing current by one.
Next, we assign those functions on the onRelease states of the next and previous buttons.Code:function goBackward() {
current--;
loadImages(current);
}
To wrap up, let's add some logic to test for when the next and previous buttons are needed. On the first page, we don't need the previous button. On the last page, we don't need the next button. So let's create a function that tests for those conditions.Code:next.onRelease = goForward;
prev.onRelease = goBackward;
We'll want to call this function each time the page is changed. The one function we 100% know will get called on each page is loadImages(). So, we'll add a function call to createNavigation() within loadImages() right after the for loop.Code:function createNavigation() {
// Show/Hide Next Button
if(current >= (total-1)) {
next._visible = false;
}
else {
next._visible = true;
}
// Show/Hide Prev Button
if(current == 0) {
prev._visible = false;
}
else {
prev._visible = true;
}
}
That's it. Now, you should have working navigation. The pages should change accordingly. The page number display should update accordingly. Let me know if that doesn't happen.Code:function loadImages(page) {
pageNo.text = "PAGE " + (page+1) + " OF " + total;
for(i=0;i<3;i++) {
var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
if(imagePath!="") {
positions[i].loadMovie(imagePath);
}
}
createNavigation();
}
All together, this is the AS I have so far:
Next, we'll use the MovieClipLoader class to load in the images and create a preloader. Lee Brimelow has a great video tutorial on gotoAndLearn() about this, if you're interested. It's entitled "External SWF Preloading".Code:// Initiate XML
var xml:XML = new XML();
xml.ignoreWhite = true;
// Variables
var total:Number = new Number();
var path:String = new String();
var positions:Array = new Array(left, center, right);
var current:Number = 0;
// Load XML
xml.onLoad = function(success) {
if(success) {
total = xml.firstChild.childNodes.length // Set total number of pages
path = xml.firstChild.attributes.path;
loadImages(current);
}
else {
trace("Error: XML Didn't Load");
}
}
// Load Images
function loadImages(page) {
pageNo.text = "PAGE " + (page+1) + " OF " + total;
for(i=0;i<3;i++) {
var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
if(imagePath!="") {
positions[i].loadMovie(imagePath);
}
}
createNavigation();
}
// Next Button
next.onRelease = goForward;
function goForward() {
current++;
loadImages(current);
}
// Previous Button
prev.onRelease = goBackward;
function goBackward() {
current--;
loadImages(current);
}
// Create Navigation
function createNavigation() {
// Show/Hide Next Button
if(current >= (total-1)) {
next._visible = false;
}
else {
next._visible = true;
}
// Show/Hide Prev Button
if(current == 0) {
prev._visible = false;
}
else {
prev._visible = true;
}
}
xml.load("test.xml");
