Fading "day passing" photogallery with slider bar question

programming flash
1

Hi,
I have a bunch of photos of the same place at different times of the day, and I want to make a Flash program that will show these pictures as if a day is passing. I want the user to be able to control a slider bar at the bottom. When the slider bar is moved to the right, the 8 or so photos will fade into each other so it looks like a movie of a day passing. The different times of day will be marked under the slider bar so the user can see what time of day it is at that particular point. I used the Kirupa tutorial to get the slider bar working and I know how to make pictures appear one by one as the slider bar moves along, but I’m having trouble getting the fading effect to work in an efficient way. The photos are taken from an XML file.

Currently, my plan is to have separate code for each region of the slider bar, for example, 8AM to 9AM. For this reason, I should keep the 8AM image on top, starting at alpha=100 and gradually transitioning to alpha=0 by the 9AM spot. The 9AM image itself can stay at alpha=100 for the entire 8AM to 9AM block, but underneath the 8AM image. When the 8AM image reaches alpha=0, the 9AM image will be fully visible in the correct spot. Whatever code I have here I will basically repeat for the 9AM to 10AM section, and so on.

Any advice? I am relatively new to this so there is probably an easyway I don’t even know about.

Thanks!

This is what I have for code but as you can see I sort of got stuck.

function loadXML(loaded) {

if (loaded) {

xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
imageloaded=[];
for (i=0; i<total; i++) {

image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
imageloaded* = false;

}
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load(“images_rosie.xml”);

//myslider.onPress = function() {
this.onEnterFrame=function(){

if ((0<=myslider.ratio) && (myslider.ratio<30) && (imageloaded[0] == false)) {
//picturespot0._alpha=100; //should go before the loadMovie
//picturespot1._alpha=100;
//how to specify layer? picturespot1 is on top
//picturespot0.swapDepths(picturespot1);
//picturespot0.loadMovie(image[0]); //0 is on top
//picturespot1.loadMovie(image[1]); //1 is below
for (var i = 0; i<image.length; i++) {
imageloaded* = false;
}
imageloaded[0] = true;
//imageloaded[1]=true;
if ((0<=myslider.ratio) && (myslider.ratio<10)) && (Imageloaded[0]==false) and (Imageloaded[1]==false){
picturespot0._alpha=100;
picturespot1._alpha=100;
picturespot0.swapDepths(picturespot1);
picturespot0.loadMovie(image[0]);
picturespot1.loadMovie(image[1]);
} else if ((10<=myslider.ratio) && (myslider.ratio<20)){
picturespot0._alpha=60;
picturespot0.loadMovie(image[0]);
} else if ((20<=myslider.ratio) && (myslider.ratio<30)){
picturespot0._alpha=30;
picturespot0.loadMovie(image[0]);
}
//ratio.text=description[0];
//for (var myslider.ratio=0; myslider.ratio<30; myslider.ratio++){
//picturespot[0]._alpha+=10 //something like this?
//}

2

Hi Rosie, I’m doing something similar as well… did you manage to get you photo loading according to time of day?

would love to piggy-back oyur script… :slight_smile: :sen: