Working with Methods in 2D Carousel: Next and Previous Items Buttons
Updated: Dec 13, 2007
Views: 939
Description: This tutorial will show you how to use buttons to call methods of the Carousel that will the select next and previous items in Carousel.
The Completed Project:
Complete Code:
// Handle next image button
function nextImgClick(event:MouseEvent):void {
myCarousel.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
// Handle previous image button
function prevImgClick(event:MouseEvent):void {
myCarousel.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
function nextImgClick(event:MouseEvent):void {
myCarousel.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
// Handle previous image button
function prevImgClick(event:MouseEvent):void {
myCarousel.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
Set-Up and Add Content Using through XML
Before you begin make sure that you have successfully installed the component inspector have been able to load content into the Carousel component using XML. Also make sure that you give your Carousel an instance name of myCarousel.
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 btnNextImg and btnPrevImg.
Plan for ActionScript
We will use a little ActionScript to connect these buttons to the Carousel.
- First we want to add a mouse event listener for when our next image button is clicked and then in function that is called reference a method of our Carousel component which selects the next item.
- Likewise, we want to add a mouse event listener for previous image button is clicked and reference a method that will select our previous item in our Carousel component in the function that our event listener calls.
As noted in our plan, we create an event listener for when our button that created to move forawrd is clicked. In this event listener we call a function that calls a method of our Carousel which selects the next item.
// Handle next image button
function nextImgClick(event:MouseEvent):void {
myCarousel.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
function nextImgClick(event:MouseEvent):void {
myCarousel.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
Selecting Previous Item in the Carousel with a Button
For the previous item we proceed similar to the next item except reference our other button, call a different function, and use the select previous item method of our Carousel.
// Handle previous image button
function prevImgClick(event:MouseEvent):void {
myCarousel.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
function prevImgClick(event:MouseEvent):void {
myCarousel.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
Other Methods of the Carousel
For a complete list of the methods that the Carousel supports please see the method section in the 2D Carousel API documentation.
