Working with Methods in 3d Flow List: Next/Previous Buttons
Updated: Mar 26, 2008
Views: 678
Description: This tutorial will show you how to use buttons to call methods of the 3d Flow List that will the select next and previous items in 3d Flow List.
Complete Code:
import com.afcomponents.events.FlowList3DEvent;
// Handle previous image button
function prevImgClick(event:MouseEvent):void {
myFlow.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
// Handle next image button
function nextImgClick(event:MouseEvent):void {
myFlow.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
// Handle previous image button
function prevImgClick(event:MouseEvent):void {
myFlow.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
// Handle next image button
function nextImgClick(event:MouseEvent):void {
myFlow.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
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 Flow list component using XML. Also make sure that you give your 3d Flow list has an instance name of myFlow
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 Flow list.
- 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 Flow list 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 Flow list 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 Flow list which selects the next item and a property that makes sure the directions is forward.
// Handle next image button
function nextImgClick(event:MouseEvent):void {
myFlow.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
function nextImgClick(event:MouseEvent):void {
myFlow.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
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 previous image button
function prevImgClick(event:MouseEvent):void {
myFlow.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
function prevImgClick(event:MouseEvent):void {
myFlow.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
Other Tutorials
