Adding thumbnails to the Simple photo gallery 2.0

[Brendon]

Hi Papachan,

Again, thanks for your help regarding the preloader. That really worked out well. Unfortunately I am still struggling with a few issues before I can put this thing to bed.

As I mentioned in my first post I am trying to add thumbnail selection to your awesome photo gallery application. Of course with my limited understanding of classes and advanced AS 2, this is proving to be rather difficult. Do you think you can advise me on how to achieve this?

Ideally the way I would like it to work is by default the slide show will play as usual, however if the user clicks on a thumbnail in the main menu, the slideshow would advance to the selected slide, still executing the cross fade though.  To make things more difficult though, I have modified your original code in probably a rather crude manner to change the blur transition to a cross fade. That works perfectly now, but you may find it rather unorthodox. One thing that I have noticed with the way I have the code now, is that the next photo loads the minute the fade in is completed on the current photo. Then the current photo plays for the set time, and then the crossfade happens. If you click on my thumbnails now, there is a delay of one whole photo plus the play time of the current photo and the in between one before the selected photo plays. This results in the captions coming out of sync. How can i trigger all this to happen immediately when the user selects a thumbnail?

The thumbnails unfortunately are located in a parent movie of the website, as I wanted them to form part of an opening and closing menu interface for the website.

The final challenge would be to get a play pause button located in a parent movie to trigger the slides to pause.

I know this is probably asking for a lot, especially since it will be hard for you to imagine what my code structure looks like. Would I be allowed to add the modified files to this post for you to look at?

Thanking you kindly
Brendon

[papachan]

The thumbnails unfortunately are located in a parent movie of the website, as I wanted them to form part of an opening and closing menu interface for the website.

The thumbnails are loaded from the same data source, and will be at a _parent scope.
You can easily delegate the different event onCLick by an Listener Object at gallery, who received the actions to load a new image.

///////////////////////////
// CLICK FROM THUMBNAILS 
//////////////////////////

function onClicked ( evt:Object ) :Void
 

{

onPause(); // pause the loop function
 

loadimage(evt.image, true); // call a new image loading of gallery class
 

}

The onClicked eventlistener event is declared when you create each movieclip, at, for example a Library.as

[Brendon]

Thanks for the help once again. I am afraid to ask this, but do you have an explanation for dummies?    I am really sorry to be such a pain, but my understanding of classes etc is virtually non existent. I tried to read up on eventListeners, but seem to be missing something.

I don't know how and where to create the event listener so that the thumbnails will be linked to your onClicked funtion. The path to my thumbnails in my main menu is:

_root.menu.menuMC.thumbnails.galleria.thumb

The path to the container into which I am loading your gallery is

_root.container

At the moment when a thumbnail is clicked I am passing a variable called "quadrati" to identify the thumbnail number and photo number. The thumbnails are loaded totally seperately from the gallery, as they have their own animation function and they need to be nested in my opening and closing menu.

I am still using all the same AS files from your original gallery, however would you mind if I paste the code from the two files that I modified most. If it isn't too much trouble, could you then show me what to add where? My appologies if this is a rediculous request, as I am sure you have more important things to do.

Thanks
Brendon

[papachan]

It's not a problem brendon, i usually use eventlistener object to have events between classes. If you are passing a variable to a gallery, why you cant load the image? your next step is to pause the Interval object by adding a function like "onPause" where you must clear the interval cleanely

i promise help you more by posting codes, but try it first. and tell me your problem.

[Brendon]

Thanks. I have added the onClicked function to photogallery.as. I am not sure now how to create the event listener that monitors the thumbnails at the following location: _root.menu.menuMC.thumbnails.galleria , so I am reading up a bit on object orrientated programming. I need to figure out exactly what this object is and what goes where.

Please tell me if I can paste the code that I am working with from two of my .as files for you to look at. I am not sure of the do's and don'ts on the forum and don't want to cause any trouble.

[papachan]

brendon you can post your code, no problem. Its always a good practice to understand problems, and it help others persons in a similiar case.

[Brendon]

Hi Papachan,
Thanks for your patience so far. I have had a good crack at this thing applying all your tips so far, but I still seem to lack understanding and can't get my thumbnails to communicate with the gallery script. For this reason, i am going to try posting the two .as files that I have altered the most. Maybe then you can point me in the right direction. I really do want to learn and understand this.

My thumbnails are in the following loction:    _root.menu.menuMC.thumbnails.thumbGallery.thumbs

Your gallery loads into the following container:   _root.container

fotogallery.as & blurgallery.as will follow below.

[Brendon]

fotogallery.as


import flashdb.gallery.blurgallery;
import flashdb.utils.funcGallery;
import flashdb.gallery.timer;
import flashdb.gallery.preloader;
class flashdb.gallery.fotogallery extends flashdb.gallery.drawing {

   var root:MovieClip;
   var oldTarg:MovieClip;
   var targ:MovieClip;
   var sw:Number = 1;
   var count:Number = 0;
   var quadrati:Number = 0;
   var boundingBox:MovieClip;
   var listado:Array = new Array();
   public var timing:Boolean = false;
   var show:String;
   var FILE:String;
   var loadimage:Function;
   var begin:Boolean = true;
   var listenerMCL:MovieClipLoader;
   public var dispatchEvent:Function;
   private var preload_mc:MovieClip // a movieclip on the movieclip you need to instance it before use it
   
   var galleryeffect:blurgallery;
   public var playing:Boolean = true;

   function fotogallery(targ:MovieClip, e:MovieClip) {
      super(targ,e);
      listenerMCL = new MovieClipLoader();

      targ.createEmptyMovieClip("gallerymc",targ.getNextHighestDepth());
      root = targ.gallerymc;
      targ.createEmptyMovieClip("boundingBox",targ.getNextHighestDepth());
      boundingBox = targ.boundingBox;
      _global.thumbnails = "go";

      root.createEmptyMovieClip("c1",10);
      root.createEmptyMovieClip("c2",9);

      galleryeffect = new blurgallery();
      galleryeffect.addEventListener("toggleImage",this);
      listenerMCL.addListener(this);
      
//My event listener for my thumbnails
   _root.menu.menuMC.thumbnails.thumbGallery.thumbs.addEventListener("onClicked",this);
   }
   // --- --- //
   public function startview(list) {
      listado = list;
      toggleImage();
      //createMask(100,100);
   }
   // --- --- //
   
   ///////////////////////////
// CLICK FROM THUMBNAILS
//////////////////////////


function onClick ()
   {
      dispatchEvent({type:"onClicked", image:FILE});
      trace(_global.thumbnails);
   }

   function onClicked ( evt:Object ) :Void
    {
         onPause(); // pause the loop function
          loadimage(evt.image, true); // call a new image loading of gallery class
         
    }
   
   private function onLoadProgress (target:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
         //target._visible = false // if you want your image invisible
         _root.menu.menuMC.preloader._visible = true;
         var p:Number = Math.round(bytesLoaded/bytesTotal*100);
         _root.menu.menuMC.preloader.percent = (String(p).substr(1)==undefined)? "0"+p : p;
         _root.menu.menuMC.preloader.percent += " %"
         preload_mc.bar._xscale = p;// a bar progress
         
         if (p >= 100){
            _root.menu.menuMC.preloader._visible = false;
         }
   }
   function onLoadComplete(targ:MovieClip) {
      if (begin) {
         begin = false;
         toggleImage({target:oldTarg});
         targ._alpha = 0;
         _global.setTimeout(this["getEffect"],0,this,oldTarg,galleryeffect);
      } else {
         oldTarg.swapDepths(10);
         targ.swapDepths(9);
         targ._alpha = 0;
         if (playing) {
            _global.setTimeout(this["getEffect"],3000,this,targ,galleryeffect);
            _global.setTimeout(this["getEffectOut"],3000,this,oldTarg,galleryeffect);
            //_global.setTimeout(this["getEffectOut"], 0, this, targ, galleryeffect)
         } else {
            if (!timing) {
               timing = true;
            }
         }
      }
   }

   function getEffect(e, targ, targetObj) {
      if (!e.playing) {
         if (timing == false) {
            timing = true;
         }
      } else if (e.playing) {
         targetObj.startEffect(targ);
      }
   }
   function getEffectOut(e, targ, targetObj) {
      if (!e.playing) {
         if (timing == false) {
            timing = true;
         }
      } else if (e.playing) {
         targetObj.startEffectOut(targ);
      }
   }
   // --- --- //
   function toggleImage(evt:Object) {
      //My current method of loading from thumbnails, but this does not work well
      if (_global.thumbnails == "go") {
         if (!playing) {
            return;
         }
         var s:String = String(evt.target._name).substr(1, 1);
         var n:Number = funcGallery.switchNumber(Number(s));
         if (count == 0) {
            setText(listado[listado.length-1].date,listado[listado.length-1].title);
         } else {
            setText(listado[count-1].date,listado[count-1].title);
         }

         if (evt == undefined) {
            oldTarg = root.c2;
            root.c1._alpha = 100;
            //root.c2._alpha = 0;
            listenerMCL.loadClip(listado[count].path,root.c1);
         } else {
            oldTarg = root["c"+n];
            listenerMCL.loadClip(listado[count].path,root["c"+s]);
            root["c"+s]._alpha = 0;

         }
         count++;
         if (count == listado.length) {
            count = 0;
         }
      } else {
         if (!playing) {
            return;
         }
         var s:String = String(evt.target._name).substr(1, 1);
         var n:Number = funcGallery.switchNumber(Number(s));
         if (count == 0) {
            setText(listado[listado.length-1].date,listado[listado._global.thumbnails-1].title+"       coming up next...");
         } else {
            setText(listado[_global.thumbnails-1].date,listado[_global.thumbnails-1].title+"       coming up next...");
         }
         if (evt == undefined) {
            oldTarg = root.c2;
            root.c1._alpha = 100;
            //root.c2._alpha = 0;
            listenerMCL.loadClip(listado[_global.thumbnails-1].path,root.c1);
         } else {
            oldTarg = root["c"+n];
            listenerMCL.loadClip(listado[_global.thumbnails-1].path,root["c"+s]);
            root["c"+s]._alpha = 0;
         }
         _global.thumbnails = "go";
         //if (count==listado.length) {
         //count = _global.thumbnails;
         //count++;

      }
   }
   public function setPlaying(bool:Boolean) {
      playing = bool;
      if (bool == false) {
         timer.onTiming(this);
      }
   }
   public function replay() {
      toggleImage({target:oldTarg});
   }
}

[Brendon]

blurgallery.as


import ginner.GDispatcher;
import flash.display.BitmapData;
import flash.filters.BlurFilter;
class flashdb.gallery.blurgallery extends Object{
   public var addEventListener:Function
   public var removeEventListener:Function
   private var dispatchEvent:Function
   function blurgallery (  ) {
      GDispatcher.initialize(this)
   }
   public function startEffect (targ:MovieClip) {
      
         var count:Number=0;
         var alfa:Number = 0
   
         targ.callBackObj = this;
         
         targ.onEnterFrame = function  ()
         {
            if (count<50)
            {
               count+=4;
               
            }
               alfa+=3*.5
               this._alpha = alfa;
               if (this._alpha>=100) {
                  //this.callBackObj['dispatchEvent']({target:this, type:'toggleImage'});
                  delete this.onEnterFrame;
               }
         }
   }

public function startEffectOut (oldTarg:MovieClip) {
   
         var count:Number=0;
         var alfa:Number = 100
         
         oldTarg.onEnterFrame = function  ()
         {
            alfa-=3*.5
               this._alpha = alfa;
               if (this._alpha<=2) {
                  this.callBackObj['dispatchEvent']({target:this, type:'toggleImage'});
                  
                  delete this.onEnterFrame;
               }
         }
   }
}

[papachan]

the method onClick wont be at fotoGallery.as but on your thumbnails class, and its only in case if you instance eventlistener object at fotoGallery.as

step1
you can use the same syntax from blurgallery to instance your GDispatcher class.
step2
you instance your event listener
_root.menu.menuMC.thumbnails.thumbGallery.thumbs.addEventListener("onClicked",this);
step 3
you dispatch one event object from the onPress handler function from one thumbnail movieclip

[Brendon]

I still haven't managed to get this photo gallery working properly. I tried to follow your instruction where I could, but must admit I didn't understand exactly what you meant.

I have created a file called thumbs.as with the following code (borrowed from your latest script):

import mx.events.EventDispatcher;
import mx.transitions.Tween;
import mx.transitions.easing.*;
class  flashdb.gallery.thumbs extends MovieClip {
   
   var FILE:String
   var thumbs:MovieClip
   
    public var dispatchEvent:Function;
    public var addEventListener:Function;
    public var removeEventListener:Function;
    private static var eventDispatcherInitialized = EventDispatcher.initialize(thumbs.prototype);
      
   function thumbs ()
   {
      thumbs.onPress = mx.utils.Delegate.create(this, onClick)
   }
   function onClick ()
   {
      // aqui lo que le estoy pasando al eventlistener
      dispatchEvent({type:"onClicked", image:FILE});
      trace("clicked");
   }
}

I then try to import it into my main movie where my thumbnails are generated, like this:

import Photos.flashdb.gallery.thumbs;

But I get the following compiler error:
"The class being compiled, 'flashdb.gallery.thumbs', does not match the class that was imported, 'Photos.flashdb.gallery.thumbs'."

In fotogallery function of fotogallery.as, I have added this code so far, but doubt it is correct:

_root.menu.menuMC.thumbnails.thumbGallery.thumbs = new thumbs()
_root.menu.menuMC.thumbnails.thumbGallery.thumbs.addEventListener("onClicked",this);

I am not sure how to dispatch one event object from the onPress handler funtion from one thumbnail movieclip.

Any more help you can offer will be greatly appreciated.

Thanks
Brendon

[papachan]

this error show that you have a problem with the path from your class thumbs
the flash compiler dosen't find the correct classname in the correct path.
If you give me some files from your project i can correct them....