So, a little more functionality to our Image Gallery project – I just wanted to add more functionality by allowing the user to toggle between different sets of Image Galleries. For this example you can toggle between 2 galleries by hitting ‘1′ or ‘2′ on your keyboard.
I made some slight modifications to the classes. First, I created a new class that will represent our Main Document class named Main.as and took out the array of images in the ImageGallery.as file so that the Main.as file could pass in a new array to have a gallery populated. Here are the two classes:
package
{
import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;
import flash.events.KeyboardEvent;
public class Main extends Sprite
{
private var GalleryImagesArr:Array;
private var CatGallery:ImageGallery;
private var theater:Sprite;
public function Main()
{
theater = new Sprite();
addChild ( theater );
// set the stage
categoryOne();
// set the listener
stage.addEventListener ( KeyboardEvent.KEY_DOWN, changeCategory );
}
private function categoryOne():void
{
GalleryImagesArr = new Array();
GalleryImagesArr[0] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon0.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge0.jpg");
GalleryImagesArr[1] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon1.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge1.jpg");
GalleryImagesArr[2] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon2.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge2.jpg");
GalleryImagesArr[3] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon3.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge3.jpg");
GalleryImagesArr[4] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon4.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge4.jpg");
GalleryImagesArr[5] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon5.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge5.jpg");
GalleryImagesArr[6] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon6.jpg","http://manewc.com/projects/flash/i/imagegallery/avon6.jpg");
GalleryImagesArr[7] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon7.jpg","http://manewc.com/projects/flash/i/imagegallery/avon7.jpg");
GalleryImagesArr[8] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon8.jpg","http://manewc.com/projects/flash/i/imagegallery/avon8.jpg");
GalleryImagesArr[9] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon9.jpg","http://manewc.com/projects/flash/i/imagegallery/avon9.jpg");
CatGallery = new ImageGallery ( GalleryImagesArr );
theater.addChild ( CatGallery );
}
private function categoryTwo():void
{
GalleryImagesArr = new Array();
GalleryImagesArr[0] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0123.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0123.jpg");
GalleryImagesArr[1] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0220.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0220.jpg");
GalleryImagesArr[2] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0222.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0222.jpg");
GalleryImagesArr[3] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0239.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0239.jpg");
GalleryImagesArr[4] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0263.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0263.jpg");
GalleryImagesArr[5] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0268.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0268.jpg");
GalleryImagesArr[6] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0289.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0289.jpg");
GalleryImagesArr[7] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0983.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0983.jpg");
GalleryImagesArr[8] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0989.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0989.jpg");
GalleryImagesArr[9] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0998.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0998.jpg");
CatGallery = new ImageGallery ( GalleryImagesArr );
theater.addChild ( CatGallery );
}
private function changeCategory ( k:KeyboardEvent ):void
{
if ( k.keyCode == 49 )
{
cleanChildren();
categoryOne();
}
else if ( k.keyCode == 50 )
{
cleanChildren();
categoryTwo();
}
}
private var theaterArr:Array;
private var childrenArr:Array;
private function cleanChildren()
{
// get children
theaterArr = traceChildren ( theater );
// find children, if exist then delete
for ( var t:uint = 0; t < theaterArr.length; t++ )
{
if ( theaterArr[t] == "[object ImageGallery]" )
{
theater.removeChild( theaterArr[t] );
theaterArr[t] = null;
}
}
}
private function traceChildren(d:Sprite)
{
childrenArr = new Array();
for ( var k:uint; k < d.numChildren; k++ )
{
var o:DisplayObject = d.getChildAt(k);
if ( o is DisplayObjectContainer )
{
childrenArr.push ( o );
}
else
{
// childrenArr.push ( "" );
}
}
return childrenArr;
}
}
}
and the ImageGallery.as
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 );
}
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 );
}
}
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
{
Tweener.addTween(m.currentTarget, {alpha: 1, time:.8, transition:"easeOutBack"});
Tweener.addTween(m.currentTarget, {y: -20, time:2, transition:"easeOut"});
}
private function ThumbDown (m:MouseEvent):void
{
// re initialize the index value
CurrentIndex = m.currentTarget.myId;
if ( MainImage ) removeChild ( MainImage );
MainImage = new LargeImage ( ThumbArray[CurrentIndex][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 ThumbOut (m:MouseEvent):void
{
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 );
}
}
}
}
once again, this is a great example. Do you think you will take this another set and use XML to pass in the array of images and thumbs?
Thanks Yaz. Yes – XML loading will be my next demo, then I was thinking the addition of captions.
Hi
I’m new to Flex, can you add the mxml to help me understand how this works?
Thank you
Hi Mem,
I need your small help,
1. Is there’s a way that we can show that this particular image is selected in the image scroller?
2. Is there’s a way so that i can show the 8th or any other pic as a default view instead of 1st one everytime in the scroller?
Thanks
Kanu