Out of the box, all you need to navigate ThumbGrid's interface is a mouse. Simply rollover the component and move the mouse pointer left-and-right (or up-and-down, if Direction has been changed), and you can browse/select album content. In addition to the mouse, you can also create your own external buttons that control ThumbGrid, as well as add Flash's UIScrollbar component for a scrolling interface.
When using the mouse, there are two scrolling animation styles to choose from: "Scroll Slow" (the default) and "Scroll Fast". Both can be selected using the NAVIGATION/Interactivity parameter. If using the "Fast" option, the NAVIGATION/Blur parameter applies a motion blur effect to the scroll. If you don't want the blur, change the parameter to "Off".
You can easily create your own buttons that control ThumbGrid's interface. Simply setup an listener for a button's click event, then call the method you want to control. For example: if you wanted to create a button that displayed ThumbGrid's Gallery screen, you'd do the following:
1) Create a button (or Movie Clip)
2) Place the button on the stage and assign an instance name in the Properties panel (e.g, "gallery_btn")
3) Create a new timeline layer in your FLA, and in that new layer's first empty keyframe copy/paste the following:
gallery_btn.addEventListener("click",afterGalleryButtonClick);
function afterGalleryButtonClick(e:MouseEvent):void {
my_tg.displayGallery();
}
Publish a movie, click your button, and ThumbGrid should display the Gallery screen!
So, what other kind of buttons can you create? Glad you asked. Here are the methods you can setup buttons/listeners for:
displayCurrentAlbum() Displays the Album screen for the album currently in view in the SlideShowPro Player component.
displayGallery() Displays the Gallery screen.
nextThumb() Selects the next thumbnail.
previousThumb() Selects the previous thumbnail.
nextThumbGroup() Slides the grid to show the next group of thumbnails.
previousThumbGroup() Slides the grid to show the previous group of thumbnails.
When calling nextThumbGroup() and previousThumbGroup() the grid will animate using a motion tween. To control the tween's style, adjust the NAVIGATION/Easing parameter. Options include "None", "Back", "Bounce", "Elastic", "Regular" and "Strong" (the default). For further customization, there's the NAVIGATION/Method parameter, which controls at which point of the animation (start, end, or both) the aforementioned easing style is applied. Lastly there's NAVIGATION/Duration which controls the length (in seconds) of the scroll effect. Play around with all three to create a wide variety of scrolling styles.
ThumbGrid allows you to use the UIScrollbar component that's bundled with every copy of Flash to navigate its layout. To use, open the Components panel (Window > Components) and drag a copy of "UIScrollbar" to the Stage. Position the scrollbar component wherever you like, and resize it too. When complete, and with it still selected, open the Properties panel (Window > Properties). Assign an instance name to the component (e.g., "my_sb").
Next, click on the ThumbGrid instance the stage. Open the Properties panel (CS5) or the Component Inspector panel (CS3/CS4), and scroll down until you see NAVIGATION/Scroll Bar Name. Type "my_sb" (no quotes) into that field.
Publish a movie, and you should be able to scroll your thumbnail grid in the assigned layout direction (see Layout for more info).