XML Image Gallery w/ Crossfades?

programming flash
1

I’ve got a good working XML gallery up and running finally. However, I want to make the images crossfade, going forwards and backwards. I can’t seem to work my way around it, the images just disappear and then fade in from 0. Anyone point me the right way?

2

Thanks so much scotty, i’ve learned so much from your posts! I just have one more quick question. I’ve been spending all week trying to get my photos to load centered horizontally. I’ve looked at probably every post on this site trying to incorporate other people’s suggestions, but its not working. Could you suggest a way to get them to load horizontally. Thanks!

3

Just found this post … that’s pretty cool scotty.

How would one do the same thing - but instead of preloading all the images at the beginning … have the images preloaded as they are requested?

ie:

  1. have the preloader bar show up over the current image as the next image is being loaded.

  2. when the new image is fully loaded, hide the preloader bar

  3. cross fade to the next image

4

Sorry to bring this back up, but I am still unable to get this thing centered. I have tried all kinds of different approaches, but none are working with the crossfade. Its going to be full screen and the pictures are going to be all kinds of different sizes. I just want to be able to choose a y value for the top of the image, and let the images center themselves on the screen. Any help incorporating this code? Thanks!

5 
function preloadPic() {
	clearInterval(id);
	var con = picture.duplicateMovieClip("con"+k, 9984+k);
	con.loadMovie(image[k]);
	var temp = _root.createEmptyMovieClip("temp"+k, 99+k);
	temp.onEnterFrame = function() {
		var total = con.getBytesTotal();
		var loaded = con.getBytesLoaded();
		percent = Math.round((loaded/total*100)/image.length);
		preloader.preload_bar._xscale = loadTot+percent;
		info.text = "Loading picture "+k+" of "+image.length+" total";
		if (con._width) {
			//center your pics:
			con._x = Stage.width/2-con._width/2
			con._y = Stage.height/2-con._height/2
			con._visible = 0;
			nextPic();
			loadTot += percent;
			delete this.onEnterFrame;
		}
	};
}

scotty(-:

6

you’re a life saver scotty, i was ready to start pulling hair. i had the code kinda right, just no where near the right spot!

7

I would love to see this.

8

download the fla?

scotty(-:

9

scotty … does your code above address my question above or jbn’s? thx :slight_smile:

10

it’s addressed to jbn’s post, I overlooked your question…
this will answer yours?

scotty(-:

11

Wow, seriously scotty, you are awesome. I like this one even better. With the other one if you click the next or previous buttons too fast the last image doesn’t quite fade out all the way and is stuck over the other images until you go back to it. This totally solves the problem and even makes the gallery a little more user friendly!

12

no problem =)

13

Hi Scotty,

Care to help me for post #15 with option to run the slide automatically and have option to loop/not?

Thanks

14

You want it to start as a slideshow or have an option to start it?
edit, in the as you’ll find a variable ‘slide’ it is set to 1, this will start with the slideshow, if you don’t want that, set it to 0 :slight_smile: edit

scotty(-:

15

Thanks a lot, Scotty. I have 2 other further questions, I hope you don’t mind.

  1. I have read the code, but I can’t find where to change the option, wether the slideshow is loop or not?

So I have 62 images for this slideshow :

  1. How to disable the play/pause/prev/next button to prevent they are clicked during the slideshow is running? - so that they only appear on the last image number 62?
16

It’s in line 3, but you can leave it as it is if you wnat to start with the slideshow.
Because kirupa used buttons, I can’t use the enabled property, but you can do this, change the nextImage function like

function nextImage() {
	p<total-1 ? p++ : (enableControl(), p=0);
	desc_txt.text = description[p];
	picture_num();
	preloadPic();
}

and add this to make the buttons invisble (and disabled) untill the last picture has shown


previous_btn._visible = next_btn._visible=play_btn._visible=pause_btn._visible=0;
function enableControl() {
	previous_btn._visible = next_btn._visible=play_btn._visible=pause_btn._visible=1;
}

Another way is to convert the buttons to mc’s and replace the visible property with enabled property:)

scotty(-:

17

Life saver! thanks alot , but …

  1. Still about the loop , I guess I did not explain my post well. What I mean by loop is that after image number 62 finish being loaded the slideshow is stop. So user has to click play button in order to fire up the slideshow again.

This boolean on line 3, is that only to make the slideshow start automatically/not, right?

2 Quote “Another way is to convert the buttons to mc’s and replace the visible property with enabled property” - yes, I like this idea, and I’ll make it as my homework.

18

ok, then you have to set slide to false after the last picture has loaded:)

function enableControl() {
    slide = 0;
    previous_btn._visible = next_btn._visible=play_btn._visible=pause_btn._visible=1;
}

scotty(-:

19

Nearly there…It stops and the control appear, but the slideshow does not stop at image number 62, it stops at number 1???

Thanks alot

20

LOL, try it this way

function nextImage() {
    p<total-1 ? p++ : (enableControl(), slide=0);
    desc_txt.text = description[p];
    picture_num();
    preloadPic();
}

BTW I was wrong about the enabled property, off course it works for buttons :trout:

scotty(-: