Advanced Flash Components

Working with Methods in Media List: Next and Previous Page/Item Buttons

Updated: Jan 24, 2008 Views: 650

Description: This tutorial will show you how to use buttons to call methods of the Media List that will the select next and previous items and pages in Media List.

Components Used in this Tutorial: Media List AS3.0 and Buttons created inside of Flash.

The Completed Project:

Complete Code:

import flash.events.MouseEvent;

//handles next page button click
function nextPageClick(event:MouseEvent) {
    myList.displayNextPage();
}
btnNextPage.addEventListener(MouseEvent.CLICK, nextPageClick);

//handles previous page button click
function previousPageClick(event:MouseEvent) {
    myList.displayPreviousPage();
}
btnPrevPage.addEventListener(MouseEvent.CLICK, previousPageClick);

//handles next item button click
function nextItemClick(event:MouseEvent) {
    myList.selectNextItem();
}
btnNextItem.addEventListener(MouseEvent.CLICK, nextItemClick);

//handles previous item button click
function previousItemClick(event:MouseEvent) {
    myList.selectPreviousItem();
}
btnPrevItem.addEventListener(MouseEvent.CLICK, previousItemClick);

Set-Up and Add Content Using through XML

Before you begin make sure that you have successfully installed the component and have been able to load content into the Media List component using XML. Also make sure that you give your Media List an instance name of myList.

Also make sure that you have created two buttons or dragged two instances of the Button component (Window > Components > User Interface) onto the stage. Give the button the instance names of btnNextItem, btnPrevItem, btnNextPage, and btnPrevPage.

Plan for ActionScript

We will use a little ActionScript to connect these buttons to the Media List.

First will set up the event listener for the next page button.
Second will need another event listener for the previous page button.
Third we will add another event listener for the next Item button to select and play next item.
Lastly this event listener is for the previous Item button to select and play previous item.

Selecting Next Page in the Media List with a Button

As noted in our plan, we create an event listener for when our page item button is clicked. In this event listener we call a function that calls a method of our Media List which selects the next item.

//handles next page button click
function nextPageClick(event:MouseEvent) {
myList.displayNextPage();
}
btnNextPage.addEventListener(MouseEvent.CLICK, nextPageClick);

Selecting Previous Page in the Media List with a Button

As noted in our plan, we create an event listener for when our page item button is clicked. In this event listener we call a function that calls a method of our Media List which selects the next item.

//handles previous page button click
function previousPageClick(event:MouseEvent) {
myList.displayPreviousPage();
}
btnPrevPage.addEventListener(MouseEvent.CLICK, previousPageClick);

Selecting Next Item in the Media List with a Button

As noted in our plan, we create an event listener for when our next item button is clicked. In this event listener we call a function that calls a method of our Media List which selects the next item.

//handles next item button click
function nextItemClick(event:MouseEvent) {
myList.selectNextItem();
}
btnNextItem.addEventListener(MouseEvent.CLICK, nextItemClick);

Selecting Previous Item in the Media List with a Button

As noted in our plan, we create an event listener for when our previous item button is clicked. In this event listener we call a function that calls a method of our Media List which selects the previous item.

//handles previous item button click
function previousItemClick(event:MouseEvent) {
myList.selectPreviousItem();
}
btnPrevItem.addEventListener(MouseEvent.CLICK, previousItemClick);

Component Info

Media List (AS 3.0)

Knowledge Base

Forum