So, at this point we have the scrolling menu with our thumbnail images and now I have added an event listener so when the user clicks the thumbnail it will display the related larger image. Please note that at the moment I don’t have the large images for all the thumbnails, that is why a thumbnail image is being used to represent a large image.
In addition to the Tweener class library, here are my classes:
The Main Document Class:
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()
{
init();
ButtonIndex = VisibleThumbnails;
}
private function init():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;
// the array of the thumbnail images
ThumbArray = new Array();
ThumbArray[0] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon0.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge0.jpg");
ThumbArray[1] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon1.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge1.jpg");
ThumbArray[2] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon2.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge2.jpg");
ThumbArray[3] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon3.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge3.jpg");
ThumbArray[4] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon4.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge4.jpg");
ThumbArray[5] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon5.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge5.jpg");
ThumbArray[6] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon6.jpg","http://manewc.com/projects/flash/i/imagegallery/avon6.jpg");
ThumbArray[7] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon7.jpg","http://manewc.com/projects/flash/i/imagegallery/avon7.jpg");
ThumbArray[8] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon8.jpg","http://manewc.com/projects/flash/i/imagegallery/avon8.jpg");
ThumbArray[9] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon9.jpg","http://manewc.com/projects/flash/i/imagegallery/avon9.jpg");
// 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 );
}
}
}
}
The new LargeImage.as class file:
package {
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.net.URLRequest;
import flash.filters.BlurFilter;
import flash.filters.BitmapFilterQuality;
import flash.events.Event;
import flash.events.ProgressEvent;
import caurina.transitions.Tweener
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
public class LargeImage extends Sprite {
private var loStatus:TextField;
private var loImageLoader:Loader = new Loader();
private var lnDistance:Number = 10;
//public var loTimer:Timer = new Timer(10); //default interval
private var filter:BlurFilter;
private var filtersArray:Array;
public function LargeImage(imgURL:String){
this.Blur(imgURL);
}
private function Blur(imgURL:String):void {
CreateTextField(); // preloader text box
try {
this.loImageLoader.load(new URLRequest(imgURL));
} catch (loError:Error) {
this.loStatus.text = "Unable to load requested document.";
}
this.loImageLoader.contentLoaderInfo.addEventListener(Event.OPEN, this.openEvents);
this.loImageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, this.progressEvents);
this.loImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, this.loadCompleteEvents);
}
public function openEvents(loEvent:Event):void
{
this.loStatus.text = "Opening File";
}
public function progressEvents(loEvent:ProgressEvent):void
{
this.loStatus.text = "loading: " + loEvent.bytesLoaded + " bytes out of " + loEvent.bytesTotal;
}
public function loadCompleteEvents(loEvent:Event):void
{
this.loStatus.text = "";
this.loImageLoader.y = 0;
this.loImageLoader.x = (stage.stageWidth / 2) - (this.loImageLoader.width / 2);
addChild(this.loImageLoader); //display image
var filter:BlurFilter=new BlurFilter(10,10,BitmapFilterQuality.MEDIUM);
var filters_array:Array=new Array();
filters_array.push(filter);
loImageLoader.filters=filters_array;
Tweener.addTween(this.loImageLoader,{_blur_blurX:0,_blur_blurY:0, time:.5});
}
private function CreateTextField():void
{
this.loStatus = new TextField();
this.loStatus.autoSize = TextFieldAutoSize.LEFT;
this.loStatus.background = false;
this.loStatus.border = false;
var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.color = 0xffffff;
format.size = 10;
format.underline = false;
this.loStatus.defaultTextFormat = format;
addChild(this.loStatus);
}
}
}
The class to load images:
package {
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.IEventDispatcher;
import flash.net.URLRequest;
public class LoadImage extends Sprite {
private var url:String;
private var imageHolder:Sprite;
public var LoadImageArray:Array = new Array();
public var bits:Number;
public var bitsLoaded:Number;
public var totalBits:Number;
private var loader:Loader;
private var completeStatus:Boolean = false;
public function LoadImage(url:String) {
var loader:Loader = new Loader();
configureListeners(loader.contentLoaderInfo);
var request:URLRequest = new URLRequest( url );
loader.load(request);
imageHolder = new Sprite();
addChild ( imageHolder );
imageHolder.addChild(loader);
}
private function configureListeners(dispatcher:IEventDispatcher):void {
dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
addEventListener(Event.COMPLETE, completeHandler);
}
private function completeHandler(event:Event):void {
removeEventListener(Event.COMPLETE, completeHandler);
setComplete();
}
public function setComplete()
{
completeStatus = true;
return ( completeStatus );
}
public function getBits()
{
return ( bits );
}
public function getBitsLoaded()
{
return ( bitsLoaded );
}
public function w()
{
return this.width;
}
private function progressHandler(event:ProgressEvent):void {
bitsLoaded = event.bytesLoaded;
bits = event.bytesTotal;
}
}
}
and my Thumbnail.as class file
package
{
import flash.display.Sprite;
import flash.events.Event;
public class Thumbnail extends Sprite
{
private var thumb:LoadImage;
public var myWidth:Number;
public var myId:Number;
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();
}
}
}
}
Hi Morgan….
Great work……Thanks for sharing your knowledge with us…
Regards,
Rasika