I updated 2 files: ImageGallery.as and Thumbnail.as to allow for the display of the first large image (or any other image you assign as the CurrentIndex variable) in the xml file and to display an active/inactive state for the thumbnail images:
I will be the first to admit that these files need to be cleaned up and properly coded.. but this will be a good base for a clean future project.
package
{
import flash.display.Sprite;
import flash.display.Shape;
import flash.events.Event;
import flash.events.MouseEvent;
import caurina.transitions.*;
public class ImageGallery extends Sprite
{
private var ThumbArray:Array;
private var tobj:Array; // thumb object array
private var thumbMargin:Number = 5;
private var ThumbNavigation:Sprite; // this is to hold all the thumbnails
private var incrementArr:Array;
private var VisibleThumbnails:Number = 4; // this will set the number of thumbnails that will be visible.
private var MaskWidth:Number;
private var myMask:Shape;
private var maskHeight:Number = 100;
private var nb:Sprite;
private var bb:Sprite;
private var nbs:Shape; // next button
private var bbs:Shape; // back button
private var CurrentIndex:Number = 0;
private var ButtonIndex:Number;
private var ButtonCounter:Number = 0;
private var beginPoint:Number;
private var endPoint:Number;
private var destPoint:Number;
private var ThumbNavigationOffset:Number;
private var MainImage:LargeImage;
private var MainImageMask:Shape;
public function ImageGallery(iarr:Array)
{
// the array of the thumbnail images
ThumbArray = new Array();
for ( var g:uint = 0; g < iarr.length; g++ )
{
ThumbArray[g] = new Array ( iarr[g][0], iarr[g][1] );
}
addEventListener ( Event.ADDED_TO_STAGE, init );
ButtonIndex = VisibleThumbnails;
}
private function init(e:Event):void
{
// the holder movie to hold all the thumbnail images
ThumbNavigation = new Sprite();
addChild ( ThumbNavigation );
// put it off the stage
ThumbNavigation.y = stage.stageHeight + maskHeight;
// create the thumbnails
tobj = new Array;
for ( var c:uint = 0; c < ThumbArray.length; c++ )
{
// create a thumbnail image
tobj.push ( new Thumbnail( ThumbArray[c][0], c ) );
}
// set the event to make sure all images are loaded
addEventListener ( Event.ENTER_FRAME, checkLoadedThumb );
// THIS IS WHERE WE WILL SET THE DEFAULT LARGE IMAGE
DisplayLargeImage ( CurrentIndex ); // display the large image
}
private function checkLoadedThumb ( e:Event ):void
{
var loadCounter:Number = 0;
for ( var d:uint = 0; d < ThumbArray.length; d++ )
{
if ( tobj[d].myWidth > 0 )
{
loadCounter++;
}
}
if ( loadCounter == ThumbArray.length )
{
removeEventListener ( Event.ENTER_FRAME, checkLoadedThumb );
// position the thumbnails
positionThumbs();
}
}
private function positionThumbs():void
{
var totalWidth:Number = 0;
incrementArr = new Array();
for ( var v:uint = 0; v < ThumbArray.length; v++ )
{
tobj[v].x = totalWidth;
tobj[v].alpha = 0;
// set the increments for each slide position when moving left to right
incrementArr.push ( totalWidth );
trace ( incrementArr[v] );
// check for the width of the mask to go over thumbnail navigation
if ( v == VisibleThumbnails )
{
MaskWidth = totalWidth;
// create the mask
CreateThumbnailMask();
}
totalWidth += thumbMargin + tobj[v].myWidth;
// add the thumbnail to the stage
ThumbNavigation.addChild ( tobj[v] );
// thumbnail is alpha 0, let's fade it up to 80%
Tweener.addTween(tobj[v], {alpha: .8, time:.8, transition:"easeOut"});
// add the mouseevents
tobj[v].addEventListener ( MouseEvent.MOUSE_OVER, ThumbOver );
tobj[v].addEventListener ( MouseEvent.MOUSE_DOWN, ThumbDown );
tobj[v].addEventListener ( MouseEvent.MOUSE_OUT, ThumbOut );
}
// show the active state of the thumbnail:
tobj[CurrentIndex].activeState(); // set the look of the active thumbnail
}
private function CreateThumbnailMask():void
{
// Center the Menu
ThumbNavigation.x = (stage.stageWidth / 2) - (MaskWidth / 2);
ThumbNavigationOffset = ThumbNavigation.x;
// Create the Mask
myMask = new Shape();
myMask.graphics.beginFill(0x000000);
myMask.graphics.drawRect(ThumbNavigation.x, stage.stageHeight-maskHeight, MaskWidth, maskHeight);
myMask.graphics.endFill();
addChild ( myMask );
// set the mask
ThumbNavigation.mask = myMask;
// show the Menu on Y axis
Tweener.addTween(ThumbNavigation,{y:stage.stageHeight-maskHeight, time:.5, transition:"easeOut"});
// create the next button
NextButton();
// create the back button
BackButton();
// setupUI;
SetupUI();
}
private function ThumbOver (m:MouseEvent):void
{
if ( !m.currentTarget.getState() )
{
Tweener.addTween(m.currentTarget, {alpha: 1, time:.8, transition:"easeOutBack"});
Tweener.addTween(m.currentTarget, {y: -20, time:2, transition:"easeOut"});
}
}
private function DisplayLargeImage (n:int):void
{
if ( MainImage ) removeChild ( MainImage );
MainImage = new LargeImage ( ThumbArray[n][1] );
addChildAt ( MainImage, 0 );
// Create the Main Image Mask
MainImageMask = new Shape();
MainImageMask.graphics.beginFill(0x000000);
MainImageMask.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight-maskHeight-10);
MainImageMask.graphics.endFill();
addChild ( MainImageMask );
MainImage.mask = MainImageMask;
}
private function ThumbDown (m:MouseEvent):void
{
if ( !m.currentTarget.getState() )
{
// display the default State of the previous selected thumbnail
tobj[CurrentIndex].defaultState();
// re initialize the index value
CurrentIndex = m.currentTarget.myId;
// display the active state
m.currentTarget.activeState();
DisplayLargeImage ( CurrentIndex );
}
}
private function ThumbOut (m:MouseEvent):void
{
if ( !m.currentTarget.getState() ) Tweener.addTween(m.currentTarget, {alpha: .8, time:2, transition:"easeOutBack"});
Tweener.addTween(m.currentTarget, {y: 0, time:2, transition:"easeOut"});
}
private function NextButton():void
{
nbs = new Shape();
nbs.graphics.beginFill(0x000000);
nbs.graphics.drawRect(stage.stageWidth - 20, stage.stageHeight-maskHeight, 20, maskHeight);
nbs.graphics.endFill();
nb = new Sprite();
nb.name = "nextbutton";
addChild ( nb );
nb.addChild ( nbs );
nb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
}
private function BackButton():void
{
bbs = new Shape();
bbs.graphics.beginFill(0x000000);
//myMask.graphics.lineStyle(1, 0x000000);
bbs.graphics.drawRect(0, stage.stageHeight-maskHeight, 20, maskHeight);
bbs.graphics.endFill();
bb = new Sprite();
addChild ( bb );
bb.name = "backbutton";
bb.addChild ( bbs );
bb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
}
private function MoveThumbnails(m:MouseEvent):void
{
// check the current index and slide accordingly
if ( m.currentTarget.name == "nextbutton" && ButtonIndex < ThumbArray.length )
{
nb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
ButtonIndex++;
destPoint = ThumbNavigationOffset - incrementArr[++ButtonCounter];
Tweener.addTween(ThumbNavigation,{x:destPoint, time:.6, transition:"easeOut", onComplete:EnableButtons("nextbutton")});
}
else if ( m.currentTarget.name == "backbutton" && ButtonIndex > 0 )
{
bb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
ButtonIndex--;
destPoint = ThumbNavigationOffset - incrementArr[--ButtonCounter];
Tweener.addTween(ThumbNavigation,{x:destPoint, time:.5, transition:"easeOut", onComplete:EnableButtons("backbutton")});
}
SetupUI();
}
private function EnableButtons(btnId:String):void
{
if ( btnId == "nextbutton" ) nb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
if ( btnId == "backbutton" ) bb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
}
private function SetupUI():void
{
// this function is to control the visibility of the next and back buttons
trace ( "ButtonIndex: " + ButtonIndex + " " + VisibleThumbnails );
if ( ButtonIndex > VisibleThumbnails )
{
Tweener.addTween(bb, {alpha: 1, time:2, transition:"easeOut"});
// Tweener.addTween(nb, {alpha: 1, time:2, transition:"easeOut"});
bb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
}
else if ( ButtonIndex == VisibleThumbnails )
{
Tweener.addTween(bb, {alpha: 0, time:2, transition:"easeOut"});
bb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
}
if ( ButtonIndex == ThumbArray.length )
{
Tweener.addTween(nb, {alpha: 0, time:2, transition:"easeOut"});
nb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
}
else
{
Tweener.addTween(nb, {alpha: 1, time:2, transition:"easeOut"});
nb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
}
}
}
}
and the Thumbnail.as file
package
{
import flash.display.Sprite;
import flash.events.Event;
import caurina.transitions.*;
public class Thumbnail extends Sprite
{
private var thumb:LoadImage;
public var myWidth:Number;
public var myId:Number;
public var active:Boolean;
public function Thumbnail(img:String, id:Number)
{
// set this id
myId = id;
// load in the image
thumb = new LoadImage( img );
addChild ( thumb );
// check the image load
addEventListener ( Event.ENTER_FRAME, checkLoad );
}
private function checkLoad ( e:Event ):void
{
if ( thumb.setComplete() && thumb.w() > 0)
{
// remove the listener
removeEventListener ( Event.ENTER_FRAME, checkLoad );
// get the width
myWidth = thumb.w();
}
}
public function defaultState()
{
active = false;
Tweener.addTween(this, {alpha: 1, time:1, transition:"easeOut"});
}
public function activeState()
{
active = true;
Tweener.addTween(this, {alpha: .1, time:3, transition:"easeOut"});
}
public function getState()
{
return active;
}
}
}
All of your post are very interesting.