combining xml image gallery with slideshow functionality ?

[guermantes]

Hello,

I have been helping a friend with an image gallery for his paintings. We are loading the images from an XML-file.

I am new to ActionScript, so I have been using this tutorial (and adapted it a little bit to suit my friend's wishes): http://www.oman3d.com/tutorials/flash/xmlimagegallery/

The movie opens with thumbnails only. Clicking a thumbnail loads a full sized image, which stays on screen until another thumbnail is clicked. Scrolling thumbnails is done by means of reading the mouse position on screen.

I/we would like to build on this design but I am not sure if it is possible/advisable. I would be very grateful if someone would share their thoughts on this subject.

1) Is it possible - at the start of the movie - to have the full sized images display one by one in an eternal loop, which ends only when a thumbnail is clicked (and the corresponding full image loads in place of the looping images)? So that someone who chooses to not click any thumbnails still gets to see all the images? Can this functionality be incorporated in the main ActionScript that governs the image gallery?

2) If 1) is possible, and we assume that the loop has been stopped because a thumbnail was clicked, is it also possible to get the loop to start again by clicking the full sized image currently displayed?

Or am I trying to combine things that can't be achieved in ActionScript and that calls for a traditional Flash movie with hundreds of frames and jumps back and forth.

Thanks a lot!

/g

This is the ActionScript for the image gallery:

PHP Code:

import mx.transitions.Tween;
import mx.transitions.easing.*;


var myGalleryXML = new XML();
myGalleryXML.ignoreWhite = true;
myGalleryXML.load("gallery.xml");




myGalleryXML.onLoad = function() {

_root.gallery_x = myGalleryXML.firstChild.attributes.gallery_x;
_root.gallery_y = myGalleryXML.firstChild.attributes.gallery_y;
_root.gallery_width = myGalleryXML.firstChild.attributes.gallery_width;
_root.gallery_height = myGalleryXML.firstChild.attributes.gallery_height;

_root.myImages = myGalleryXML.firstChild.childNodes;
_root.myImagesTotal = myImages.length;

_root.thumb_height = myGalleryXML.firstChild.attributes.thumb_height;
_root.thumb_width = myGalleryXML.firstChild.attributes.thumb_width;

_root.full_x = myGalleryXML.firstChild.attributes.full_x;
_root.full_y = myGalleryXML.firstChild.attributes.full_y;


callThumbs();
createMask();
scrolling();



};




function callThumbs() {
_root.createEmptyMovieClip("container_mc",_root.getNextHighestDepth());
container_mc._x = _root.gallery_x;
container_mc._y = _root.gallery_y;

var clipLoader = new MovieClipLoader();
var preloader = new Object();
clipLoader.addListener(preloader);

for (i=0; i<myImagesTotal; i++) {
thumbURL = myImages[i].attributes.thumb_url;

myThumb_mc = container_mc.createEmptyMovieClip(i, container_mc.getNextHighestDepth() );
myThumb_mc._y = _root.thumb_height*i;
clipLoader.loadClip("thumbs/"+thumbURL,myThumb_mc);

preloader.onLoadStart = function(target) {
target.createTextField("my_txt",target.getNextHighestDepth,0,0,100,20);
target.my_txt.selectable = false;
};

preloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
};

preloader.onLoadComplete=function(target){
new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
target.my_txt.removeTextField();
target.onRelease=function(){
callFullImage(this._name);
}

target.onRollOver=function(){
this._alpha=50;
};

target.onRollOut=function(){
this._alpha=100;
};


}
}
}







function callFullImage(myNumber) {

myURL = myImages[myNumber].attributes.full_url;
myTitle = myImages[myNumber].attributes.title;

_root.createEmptyMovieClip("fullImage_mc",_root.getNextHighestDepth());
fullImage_mc._x = _root.full_x;
fullImage_mc._y = _root.full_y;

var fullClipLoader = new MovieClipLoader();
var fullPreloader = new Object();
fullClipLoader.addListener(fullPreloader);

fullPreloader.onLoadStart = function(target) {
target.createTextField("my_txt",fullImage_mc.getNextHighestDepth,0,0,200,20);
target.my_txt.selectable = false;
};

fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
};

fullPreloader.onLoadComplete = function(target) {
new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
target.my_txt.text = myTitle;
};
fullClipLoader.loadClip("full_images/"+myURL,fullImage_mc);

}






function createMask() {

_root.createEmptyMovieClip("mask_mc",_root.getNextHighestDepth());

mask_mc._x = _root.gallery_x;
mask_mc._y = _root.gallery_y;

mask_mc.beginFill(0x000000,100);
mask_mc.lineTo(_root.gallery_width,0);
mask_mc.lineTo(_root.gallery_width,_root.gallery_height);
mask_mc.lineTo(0,_root.gallery_height);
mask_mc.lineTo(0,0);

container_mc.setMask(mask_mc);

}


function scrolling() {

_root.onEnterFrame = function() {
if (mask_mc._ymouse<(mask_mc._height*(1/3)) || mask_mc._ymouse>(mask_mc._height*(2/3))) {
container_mc._y += Math.cos(((mask_mc._ymouse)/mask_mc._height)*Math.PI)*15;
if (container_mc._y>mask_mc._y) {
container_mc._y = mask_mc._y;
}
if (container_mc._y<(mask_mc._y-(container_mc._height-mask_mc._height))) {
container_mc._y = mask_mc._y-(container_mc._height-mask_mc._height);
}
}
};
} 


[guermantes]

I have looked a bit more at tutorials trying to patch those pieces of knowledge together for my situation.

Would it be an option to create a separate SWF to cover the animated loop and then through my main ActionScript load that swf in the beginning, having it unload when thumbnails are clicked, and reload it when full sized images are clicked?

/g

[gani]

Do you think you could narrow down your question to something a bit less complicated? No one will have time to go through that chunk of code for you. Narrow down your problems. One question at a time and as little code as possible... maybe then we can help

[gnomeontherun]

Lets stick with one swf, I prefer that in most situations unless your content requires a lot of special flash stuff (I'm using stuff as a technical term for 'fancy things')

Quick answers:
#1 Yes it is possible
#2 Yes it is possible

How:

We have most of the functions already written to help us, what we need now is something that will display the images in a loop. Here is some code that is not tested and just shows the logic, not necessarily the exact code. Please do not just plug it in, but test it and make sure you understand how it works!

This is some code which will hopefully be our function to call the main image when we need

function slideshow(current) { // current should be the most recent image displayed, if called for the first time pass 0
  callFullImage(current); // Display current image
  current++; // Increase current to queue for next image
  if (_root.myImagesTotal == current) { current = 0; } // If increasing makes current equal to the total number, we have reached the end and start from 0
}

We shall use setInterval on load to start the slideshow, so put this

myGalleryXML.onLoad = function() {

_root.gallery_x = myGalleryXML.firstChild.attributes.gallery_x;
_root.gallery_y = myGalleryXML.firstChild.attributes.gallery_y;
_root.gallery_width = myGalleryXML.firstChild.attributes.gallery_width;
_root.gallery_height = myGalleryXML.firstChild.attributes.gallery_height;

_root.myImages = myGalleryXML.firstChild.childNodes;
_root.myImagesTotal = myImages.length;

_root.thumb_height = myGalleryXML.firstChild.attributes.thumb_height;
_root.thumb_width = myGalleryXML.firstChild.attributes.thumb_width;

_root.full_x = myGalleryXML.firstChild.attributes.full_x;
_root.full_y = myGalleryXML.firstChild.attributes.full_y;


callThumbs();
createMask();
scrolling();
autoplay = setInterval(slideshow, 5000, 0); // Calls the slideshow function every 5 seconds (5000 milliseconds) and passes the arguement of 0 to the function


};

When the thumbnails are clicked on, we must stop the slideshow function

preloader.onLoadComplete=function(target){
new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
target.my_txt.removeTextField();
target.onRelease=function(){
clearInterval(autoplay); // Clears the interval before calling the next image
callFullImage(this._name);
}

When the main image is clicked we want to resume the slideshow function

_root.fullImage_mc.onRelease = function() {
   autoplay = setInterval(slideshow, 5000, _root.current); // We reset the interval and pass the variable 'current' to resume
}

So that is a quick attempt without testing. Let me know if this helps.

[guermantes]

Thanks Jeremy,

I'll start to lab around with that code as soon as I get home from work this evening. I'll keep you posted.



/g

(And I agree, I also prefer to keep things in one SWF if possible. Was just thinking that perhaps my second suggestion would have been an easier solution.)

[guermantes]

Jeremy,

It took me three hours to figure it all out, but I feel really glad at having done so, and even improved upon your code a little bit.

I'll post a little bit of code so other beginners in my situation hopefully can learn something from it all as well.

The slideshow function you posted would advance 'current' by one but then reset it again, but it all worked fine once I changed

PHP Code:

function slideshow(current) 


to

PHP Code:

function slideshow() 


and adapted the

PHP Code:

autoplay = setInterval(slideshow, 5000, 0); 


to

PHP Code:

current = 0;
    autoplay = setInterval(slideshow, 5000); 


Now the slideshow would loop through all the images.
The 'stop slideshow' code was perfect.
The 'start slideshow again' code was great once I understood where to put it. I am not quite sure why it should go inside the fullPreloader.onLoadComplete section, but I think that has more to do with the fact that I find the FullPreloader.onLoadComplete formula a bit awkward. Preloader to me signifies something that happens before something has loaded and onLoadComplete signifies that loading is over, so which state is monitored? Yes, after loading is complete, I know, but I still have to think 25 times before I grasp it.... I am also unsure about why those '_root.' are needed but I think I can remedy that by reading up on the topic a little bit.

Anyway, I found that turning your code into the following made it work a bit more smoothly:

PHP Code:

/*pick up click on main image and if so restart slideshow (load one image immediately while waiting for slideshow to kick in)*/
        _root.fullImage_mc.onRelease = function() {
            clearInterval(autoplay);/*Needed to prevent movie mayhem when people try to doubleclick large images repeatedly*/
            callFullImage(current);
            current++;
            if (_root.myImagesTotal == current) {
                current = 0;
            }
            autoplay = setInterval(slideshow, 5000, _root.current);
        }; 


Thanks again and very much, Jeremy! You've been a great teacher.

/g

[gnomeontherun]

Great thanks for the contribution, and glad to help. I wrote all of that code without testing, and without Flash around so it was a stab in the dark. I don't really have all of the functions memorized, as I don't develop with Flash all that often, in fact helping around here is really how I keep my knowledge from rotting.

I knew there would be a better method, but I'm glad you did it and not me since you clearly learned a lot in the process. Without the full program at my disposal its hard to see exactly how the data is manipulated, even with the program it can be tricky!

The _root helps to access the variable scope, so _root.variable is different from just variable. Often inside of a function, the variable is limited to just that function but adding _root. prefix set it like a global variable. That might not be the best explanation, but in essence that's whats happening.

[bk123456]

First, thanks for the great job on these tutorials!

I have tried to follow guermantes and jeremy's tutorials for combining xml image gallery with slideshow functionality --- but I am not sure where to put the final changes Jeremy made to the code and it is not working correctly for me.

If I could get the whole code complete with the slideshow changes, I would really appreciate it.

Thanks,
Bk123456

[gnomeontherun]

I believe you look at the tutorial in the first post, and then at guermantes last post for the final code. I didn't add anything after that post.