Working with Methods in 3d Carousel: Next/Previous Buttons
Updated: Feb 19, 2008
Views: 1426
Description: This tutorial will show you how to use buttons to call methods of the 3d Carousel that will the select next and previous items in 3d Carousel.
Complete Code:
import com.afcomponents.events.CarouselEvent;
// Handle previous image button
function nextImgClick(event:MouseEvent):void {
myCarousel.selectNextItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, nextImgClick);
// Handle next image button
function prevImgClick(event:MouseEvent):void {
myCarousel.selectPreviousItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, prevImgClick);
// Handle previous image button
function nextImgClick(event:MouseEvent):void {
myCarousel.selectNextItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, nextImgClick);
// Handle next image button
function prevImgClick(event:MouseEvent):void {
myCarousel.selectPreviousItem();
}
btnNextImg.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 3d Carousel component using XML. Also make sure that you give your 3d Carousel has 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, btnPrevImg.
Plan for ActionScript
We will use a little ActionScript to connect these buttons to the 3d 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 3d Carousel component which selects the next item and a property that makes sure the animation direction is forward.
- 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 3d Carousel component and a property that reverses the direction so that items come backwards.
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 3d Carousel which selects the next item and a property that makes sure the directions is forward.
// Handle next image button
function prevImgClick(event:MouseEvent):void {
myCarousel.selectPreviousItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, prevImgClick);
function prevImgClick(event:MouseEvent):void {
myCarousel.selectPreviousItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, prevImgClick);
Selecting Previous Item in the 3d Carousel with a Button
For the previous item, we proceed similar to the next item except reference our other button, call a different function, use the select previous item method, and change the animation direction of our 3d Carousel.
// Handle next image button
function prevImgClick(event:MouseEvent):void {
myCarousel.selectPreviousItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, prevImgClick);
function prevImgClick(event:MouseEvent):void {
myCarousel.selectPreviousItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, prevImgClick);
