This is a 2 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

1. The PhotoDetail Class: displays an enlarged view of the photo when a thumbnail is selected.
2. Slide Show Functionality within the PhotoDetail Class. One photo gradually dissolves into the next.
3. Slide Show Intervals: Allow for automatic operation of the slideshow with a timer interval of 5 seconds.

Demo of the SimplePhotoBox Gallery

1. PHOTODETAIL CLASS
   PhotoDetail provides an enlarged view of the photo. The sideshow is active when the PhotoDetail object is created. Function displayPicture gets everything started: Takes the photo file name from the thumbnail array, loads the image file from the server and calls imgLoaded when complete.
   

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

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

   This links the PhotoDetail movie clip within the library with the PhotoDetail Class in the fpg package.

   imgLoaded
   Each photo can have a different set of dimensions. Landscape photos are maximized for width and portrait photos are maximized for height. the currentChild object holds the photo. drawBg uses graphics routines to create a white border around the picture.

   GoToAndPlay(2) runs a timeline that gradually fades the old photo and displays the new photo.

    
   /******************************
   * PhotoDetail class:   Extends MovieClip to act to display the selected photo. */
   public class PhotoDetail extends MovieClip 
   {
   //***************************
   // Properties:
   public var data				:Object;
   public var leftMargin			:Number;
   public var topMargin			:Number;	
   protected var pictLdr			:Loader;
   protected var pictURL			:String;
   protected var bgColor			:uint = 0x000000;
   protected var frameColor		             :uint = 0xffffff;				
   protected var currentChild		             :*;
   protected var canvasW			:Number = 925;
   protected var canvasH			:Number = 510;
   protected var wait				:Wait;
   protected var flashPhotoGallery	             :FlashPhotoGallery;
    
   //***************************
   // Public methods:
   public function displayPicture(o:Object):void
   {
   	wait.visible = true;
    
   	// Save values
   	data = o;
    
   	pictLdr = new Loader();
   	pictURL= data.@img;
   	pictLdr.load(new URLRequest(pictURL));
   	pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);	
   }
    
   //***************************
   // Event handlers:
   protected function imgLoaded(event:Event):void
   {	
   	alpha = 0;
   	graphics.clear();
    
   	if (currentChild != undefined)
   		removeChild(currentChild);
    
   	currentChild = pictLdr.content;
    
   	// Scale
   	var pictWidth: uint = currentChild.width;
   	var pictHeight: uint = currentChild.height;
   	var pictScale: Number = 1;
    
   	pictScale = (canvasH+leftMargin)/pictHeight;
    
   	currentChild.scaleX = currentChild.scaleY = pictScale;
   	var newLeftMargin: Number = ((canvasW-leftMargin) -(pictWidth * pictScale)) / 2;
   	x = newLeftMargin > 0 ? (newLeftMargin + leftMargin) : leftMargin;			
   	y = topMargin;
    
   	// Add a Clipping Region
   	var square:Sprite = new Sprite();
   	square.graphics.beginFill(0x000000, 0);
   	square.graphics.drawRect(0, 0, canvasW-25, canvasH+leftMargin);
   	addChild(square);
   	currentChild.mask = square;
   	// End of Clipping Region
    
   	wait.visible = false;
   	addChild(pictLdr.content);
    
   	drawBg(pictLdr.content.height, pictLdr.content.width);
   	gotoAndPlay(2);
   }

2. SLIDE SHOW
   The sideshow is active when the PhotoDetail object is created. There are 2 main parts to the slideshow functionality: the dissolve transition and the interval timing.

   PhotoDetail Class is a movie clip defined within the Flash library. Each time a new picture is displayed, the old movie clip is removed and a new movie clip is displayed by gradually increasing the alpha. A timeline within the movie clip starts with the call gotoAndPlay(2). Starting at frame 2 in the timeline, the movie clip plays until it encounters stop().

   Here’s how to add actions to the timeline. Bring up the PhotoDetail movie Clip on the stage. Click in frame 1. Bring up the actions window (Window -> Actions).

   Frame 1 Action:
        alpha = 1;
        stop();
   Frame 40 Action:
        gotoAndPlay(1);

   So far, I haven’t described where the alpha changes. The alpha changes each time a new frame is entered. The PhotoDetail constructor calls: addEventListener(Event.ENTER_FRAME,onEnterFrame). onEnterFrame changes the alpha by +.025. Across 40 frames this makes the alpha = 1.

   public function PhotoDetail()
   {
                // Construct!
   	buttonMode = true;			
    
   	// Event Handlers
   	addEventListener(Event.ENTER_FRAME,onEnterFrame);
   	addEventListener(MouseEvent.CLICK, detailClickHandler);
   }
    
   private function onEnterFrame(e:Event):void
   {
   	if (currentFrame != 1){
   		if (currentFrame == 2)
   			this.alpha = 0;
   		this.alpha += .025;
   	}
   }

3. SLIDE SHOW INTERVALS

   SimplePhotoBox Class, the top most movie clip holds all of the other movie clips, symbols and buttons. SimplePhotoClass controls the slide show interval. intervalDuration is defined as 5000 miliseconds. Each photo should be visible for 5 seconds. Every 5 seconds slideShowNext is called to bring up the next photo in the list.

   public function nextSlide():void
   {
   	var currentPhoto: Number = selectedItem.index + 1;		
   	clearInterval(intervalId);
   	intervalId = setInterval(slideShowNext, intervalDuration);
   	if (currentPhoto >= thumbs.length)
   		currentPhoto = 0;
   	displayPicture(thumbs[currentPhoto]);
   }