Flash / XML fading slideshow

[andrewdx]

I need some HELP !?

i have a fade in & out slide show - works well. The slide show gets
the content var from an XML file e.g. _x _y pos of the images, fade
times and time between images etc...

However ontop of the images fading in & out i need to:

- add a single word for each image
(so the word has got to fade in and out with that specific image too)

- need to be able to change the colour of the word
(depending if its on a dark background or light background)

- and need to be able to change the position of the word on the image
(so the word is not over a part of the image that would make it hard to read)

all of this needs to be done in the XML file ! so the flash movie or images
never need to be touched again.

IS THIS POSSIBLE ??? any help pointers, tutorials etc... would be great
as my XML knowledge isn't good, nor my actionscript !

----------------------------------------------------------------------

THE CURRENT XML FILE READS LIKE THIS :

----------------------------------------------------------------------
<!--
"timer" -- Number of seconds between each image transition.
"order" -- How you want your images displayed. choose either 'sequential' or 'random'.
"looping" -- If the slide show is in sequential mode, this stops the show at the last image (use 'yes' for looping, 'no' for not).
"fadetime" -- Velocity of image crossfade. Increment for faster fades, decrement for slower. Approximately equal to seconds.
"xpos" -- _x position of all loaded clips (0 is default).
"ypos" -- _y position of all loaded clips (0 is default).
-->

<gallery timer="5" order="sequential" fadetime="2" looping="yes" xpos="0" ypos="0" >
<image path="images/slideshow_1.jpg" /> <!-- slideshow image 1 -->
<image path="images/slideshow_2.jpg" /> <!-- slideshow image 2 -->
<image path="images/slideshow_3.jpg" /> <!-- slideshow image 3 -->
<image path="images/slideshow_4.jpg" /> <!-- slideshow image 4 -->
<image path="images/slideshow_5.jpg" /> <!-- slideshow image 5 --> <!-- to add more images duplicate this line of code and paste below -->
</gallery>

----------------------------------------------------------------------

THE CURRENT ACTIONSCRIPT IN THE FIRST FRAM OF THE TIMELINE IS:
(actionscript in the first frame of the timeline)

----------------------------------------------------------------------

fscommand("allowscale", "false");
// set random # variables - each must be 0 for first 'while' loop below
var randomNum = 0;
var randomNumLast = 0;

// parent container
var container_mc = this.createEmptyMovieClip("container",0);
// movie clip containers
container_mc.createEmptyMovieClip("loader1_mc",2);
container_mc.createEmptyMovieClip("loader2_mc",1);

// preload watcher
this.createEmptyMovieClip("watcher_mc",100);

// load xml
images_xml = new XML();
images_xml.ignoreWhite=true;
images_xml.onLoad = parse;
images_xml.load("slideshow.xml");

function parse(success) {
if (success) {
imageArray = new Array();
var root = this.firstChild;
_global.numPause = Number(this.firstChild.attributes.timer * 1000);
_global.order = this.firstChild.attributes.order;
_global.looping = this.firstChild.attributes.looping;
_global.fadetime = Number(this.firstChild.attributes.fadetime);
_global.xpos = Number(this.firstChild.attributes.xpos);
_global.ypos = Number(this.firstChild.attributes.ypos);
_global.strapline = (this.firstChild.attributes.strapline);
var imageNode = root.lastChild;
var s=0;
while (imageNode.nodeName != null) {
imageData = new Object;
imageData.path = imageNode.attributes.path;
imageArray[s]=imageData;
imageNode = imageNode.previousSibling;
s++;
}
// place parent container
container_mc._x = _global.xpos;
container_mc._y = _global.ypos;
// parse array
imageArray.reverse();
imageGen(imageArray);
} else {
trace('problem');
}
}

// depth swapping
function swapPlace(clip,num) {
eval(clip).swapDepths(eval("container_mc.loader"+n um+"_mc"));
}

function loadImages(data,num) {
if (i==undefined || i == 2) {
i=2;
createLoader(i,data,num);
i=1;
} else if (i==1) {
createLoader(i,data,num);
i=2;
}
}
function createLoader(i,data,num) {
thisLoader=eval("container_mc.loader"+i+"_mc");
thisLoader._alpha=0;
thisLoader.loadMovie(data[num].path);
watcher_mc.onEnterFrame=function () {
var picLoaded = thisLoader.getBytesLoaded();
var picBytes = thisLoader.getBytesTotal();
if (isNaN(picBytes) || picBytes < 4) {
return;
}
if (picLoaded / picBytes >= 1) {
swapPlace("container_mc.loader2_mc",1);
alphaTween = new mx.transitions.Tween(thisLoader, "_alpha", mx.transitions.easing.Regular.easeOut,0,100,_globa l.fadetime,true);
timerInterval = setInterval(imageGen,_global.numPause,data);
delete this.onEnterFrame;
}
}
}
function imageGen(data) {
// random, or sequential?
if (_global.order=="random") {
// choose random # between 0 and total number of images
while (randomNum == randomNumLast) {
randomNum = Math.floor(Math.random() * data.length);
trace(randomNum);
}
loadImages(data,randomNum);
randomNumLast = randomNum;
} else if (_global.order=="sequential") {
// start at 0, increment to total number of images, then drop back to zero when done
if (p==undefined || p==data.length && _global.looping=="yes") { p=0; } else { break; }
loadImages(data,p);
p++;
} else {
trace ("order attribute in xml isn't correct - must specify either 'random' or 'sequential'");
}
clearInterval(timerInterval);
}
stop();

----------------------------------------------------------------------
Thanks !!! Thanks !!! Thanks !!! Thanks !!! Thanks !!!Thanks !!!
Thanks !!! Thanks !!! Thanks !!! Thanks !!! Thanks !!! Thanks !!!

[opensea]

allways same threads

[andrewdx]

so can you help me ?
Thanks

[andrewdx]

This can also be paid work, if anyone is intested ?

[oli99via]

I think this is exactly what I want too. Anyhow, I can settle with just a simple fade in & out slideshow. How did you do that? Is there any tutorial or books out there to show me step by step? Thanks!

[atomic]

http://www.kirupa.com/developer/mx20..._slideshow.htm

[oli99via]

Thanks atomic! That's the tutorial I used. Hmm... I think the images are fading in but not out. This is what my boss like: http://www.entheosweb.com/Flash/fade_in.asp

Instead of using motion tween, I believe we can use AS. I just don't know how? I read about the alpha feature in AS, but I have not figure it out yet. Any idea?

[atomic]

Well you can add a fade out function to Kirupa's tutorial above...

I've done it, and it works fine...

[oli99via]

Fade out function... How?! Hmm.. will research.... Thanks for the tip!

[atomic]

Here's my adapted code...

var delay:Number = 2000;
var init:Boolean = false;

//-----------------------
function loadXML(loaded) {
    if (loaded) {
        xmlNode = this.firstChild;
        image = [];
        description = [];
        total = xmlNode.childNodes.length;
        for (i=0; i<total; i++) {
            image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
            description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
        }
        firstImage();
    } else {
        content = "file not loaded!";
    }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
p = 0;

function fadeIn() {
    onEnterFrame = function() {
        filesize = picture.getBytesTotal();
        loaded = picture.getBytesLoaded();
        preloader._visible = true;
        if (loaded != filesize) {
            preloader.preload_bar._xscale = 100*loaded/filesize;
        } else {
            preloader._visible = false;
            if (picture._alpha < 100) {
                picture._alpha +=5;
            }else{
                delete onEnterFrame;
                slideshow();
            }
        }
    };
};

function fadeOut() {
    onEnterFrame = function() {
        if (picture._alpha > 5) {
            picture._alpha -=5;
        }else{
            picture._alpha = 0;
            delete onEnterFrame;
            nextImage();
        }
    };
};

function nextImage() {
    if (p<(total-1)) {
        p++;
        picture._alpha = 0;
        if (loaded == filesize) {
            picture.loadMovie(image[p], 1);
            desc_txt.text = description[p];
            picture_num();
            fadeIn();
        }
    }
};

function firstImage() {
        init = true;
        picture._alpha = 0;
        picture.loadMovie(image[0], 1);
        desc_txt.text = description[0];
        picture_num();
        fadeIn();
};

function picture_num() {
    current_pos = p+1;
    pos_txt.text = current_pos+" / "+total;
};

function slideshow() {
    myInterval = setInterval(pause_slideshow, delay);
        function pause_slideshow() {
        clearInterval(myInterval);
        if (p == (total-1) && !init) {
            p = 0;
            firstImage();
        } else if (p == (total-1) && init) {
            p = -1;
            fadeOut();
        }else{
            fadeOut();
        }
    }
};