Navigating Pages

Once you have more entries than you have specified in the flashGuestbook's 'Entries Per Page' parameter (the default value is 5) you will need to switch between pages to read all the messages. This tutorial will show you how.

 

Creating the Flash elements

Initially we need to create buttons to interact with.

 

 

1. First, if you have not already done so you will need to complete the Basic Tutorial. Once you have, open the .fla file you created.

 

 

2. Press Ctrl+F8 to open the 'Create New Symbol' dialogue box. Enter 'arrow button' as the symbol's name and ensure that 'Movie clip' is selected as the symbol's type. Click 'OK'.

 

screen shot

 

 

3. Use whatever tools you are comfortable with to draw a triangular shape on the new symbol's timeline.

 

screen shot

 

 

4. Return to the main timeline. Press Ctrl+L (Win) or Cmnd+L (Mac) to open the library panel and drag a copy of the 'arrow button' onto the stage. Press Ctrl+F3 (Win) or Cmnd+F3 (Mac) to open the properties panel and give the clip the instance name 'next_btn' (without the quotes).

 

screen shot

 

 

5. Drag a second copy of the 'arrow button' onto the stage to the left of the first. With the instance on the stage selected press 'Q' to select the free transform tool and rotate the symbol 180 degrees. Give the clip the instance name 'prev_btn' (without the quotes).

 

screen shot

 

 

6. Press 'T' to select the text tool and draw a dynamic text field between the two arrow buttons. Make it 'Single line' and give it the instance name 'pageNumber_txt' (without the quotes).

 

screen shot

 

 

Adding functionality

We now need to add functionality to the new items on our stage.

 

7. Select the keyframe of your actions layer. Press Alt+F9 to open the 'Actions' panel and immediately below the script you entered in step 16 of the Basic Tutorial add the following code:

 

function updatePageNumbers(){
	pageNumber_txt.text = "Page " + myGuestBook.currentPage + " of " + myGuestBook.totalPages;
}

 

This code is a function that, when called will write the current page and the total pages to the pageNumber_txt text field on your stage.

 

Below the preceding code add the following script:

 

next_btn.onRelease = function(){
	myGuestBook.viewNextEntries();
}
prev_btn.onRelease = function(){
	myGuestBook.viewPrevEntries();
}

 

This code adds functionality to the next_btn and prev_btn clips on your stage. The buttons will now call the guestBook's viewNextEntries() and viewPrevEntries() methods which cause the guestBook to display the next page and previous page of entries respectively.

 

Next, add the following code:

 

var guestbookListener:Object = new Object();
guestbookListener.displayComplete = function(){
	updatePageNumbers();
}
guestbookListener.onSubmit = function(){
	updatePageNumbers();
}
myGuestBook.addEventListener("displayComplete", guestbookListener);
myGuestBook.addEventListener("onSubmit", guestbookListener);

 

This code creates an object to act as a listener for two events from the guestBook component. The 'displayComplete' event fires when the guestBook component finishes displaying a page of entries and the 'submit' event fires when a new entry is successfully added to the database. When either of these events occurs the script calls the updatePageNumbers function to update the pageNumber_txt text field.

 

 

Publishing the files

 

8. Press Ctrl+S (Win) or Cmnd+S (Mac) to save your file and Shift+F12 to publish it.

 

Upload the .html and .swf files created when you published the movie to the same directory as your 'script' folder and open the .html file in a browser to test your file.