This is a 3 part series of articles:

• Part 1: Use ActionScript to read an XML file
• Part 2: Build a Photo Detail View and Slide Show
• Part 3: Build a Scrollable MovieClip

Demo of the SimplePhotoBox Gallery

The Scrollable MovieClip contains 2 main parts:

1. ThumbBase Class - Container for the ThumbScroll (scrollable thumbnail photo buttons), and the ScrollPrevious, ScrollNext buttons. ThumbBase controls the visible portion of the ThumbScroll object.
2. ThumbScroll Class holds the individual thumbnails. It extends beyond the borders of the visible area.

Here’s how FlashPhotoGallery creates ThumbBase and ThumbScroll.

thumbBase = new ThumbBase();
thumbBase.x = thumbBaseX;
thumbBase.y = thumbBaseY;
addChild(thumbBase);
 
thumbScroll = new ThumbScroll();
thumbScroll.x = thumbScroll.y = 0;
thumbScroll.scrollRect = new Rectangle(0, 0, canvasW, canvasH);
var maxWidth:Number = 0;
maxWidth = createThumbs();
selectedItem = thumbs[0];
 
thumbBase.addChild(thumbScroll);
thumbBase.setScroll(thumbScroll);

THUMBSCROLL CLASS
ThumbScroll provides a container to place the thumbnails. Since the thumbnails may go beyond the viewable screen space, ThumbScroll handles positioning of visible thumbnails. The scrollRect property of the movieclip defines this section of the ThumbScroll area that is visible.

The ThumbScroll Class is defined as a movie clip within the library. Here’s how to define the ThumbScroll Movie Clip:

• Right-mouse click on the ThumbScroll movie clip in the library and select Properties.
• Class: ThumbScroll
• Base Class: fpg.ThumbScroll

This links the ThumbScroll with the fpg package.

When the mouse is over the scroll buttons, the ThumbScroll time line starts at frame 1 and continues looping until the scrollingNext and scrollingPrevious.

Here’s how to setup the timeline for scrolling:

• Select Frame 1, and bring up the action window.
• Here’s the code to add into the action window:
  

  if (scrollingNext || scrollingPrevious)
     play();
  else
     stop();

• Select Frame 10 and add this code: gotoAndPlay(1);

Each time a frame is entered, the event handler onEnterFrame is called and the ThumbScroll window changes vertical position. Here’s the code:

private function onEnterFrame(e:Event):void
{
	var rect:Rectangle = scrollRect;
 
	if (scrollingNext && !isScrollAtBottom(rect.y + dy))
		rect.y += dy;
	else if (scrollingPrevious && rect.y > dy)
		rect.y -= dy;
 
	scrollRect = rect;				
}