Foto galerij met thumbnails en slideshow

[SplinterX86]

Hoi beste mensen,

Onlangs heb ik geprobeert een slideshow te maken in flash die foto's dynamisch laad mbv een xml file. Ik heb een tutorial gevolgd op kirupa.com en ben daarna wat gaan browsen op die forums voor verbeteringen en uitbreidingen. Uiteindelijk heb ik het zover gekregen dat de slideshow uit zichzelf loopt maar tevens te bedienen is met next/previous knoppen. Nu wilde ik eigenlijk onder de foto 3 thumbnails plaatsen en die tevens dynamisch aan laten roepen. In de 3 thumbnails moeten de vorige, huidige en volgende slide van de slideshow getoond worden. De middelste toont de huidige slide in het klein, de rechtse de volgende, de linkse de vorige. Mocht de slideshow op de eerste thumbnail staan dan moet de linkse thumbnail de laatste slide van de presentatie bevatten (zegmaar het oneindige menu effect). Het klinkt lastiger dan het is. Ik heb hieronder mijn actionscript neergezet alsmede een link naar een rarfile waarin alles zit wat nodig is om de app te runnen.

delay = 3000;
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");

previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};

p = 0;
pnext = p+1
pprev = [image.length-1]

this.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 += 10;
}
if (thumbnail1._alpha<100) {
thumbnail1._alpha += 10;
}
if (thumbnail2._alpha<100) {
thumbnail2._alpha += 10;
}
if (thumbnail3._alpha<100) {
thumbnail3._alpha += 10;
}
}
};
var myInterval;
function nextImage() {
p++;
p %= image.length;
if (p > image.length-1) {
pnext = 0;
} else {
pnext++;
}
pprev++
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
thumbnail1._alpha = 0;
thumbnail1.loadMovie(image[pprev], 1);
thumbnail2._alpha = 0;
thumbnail2.loadMovie(image[p], 1);
thumbnail3._alpha = 0;
thumbnail3.loadMovie(image[pnext], 1);
desc_txt.text = description[p];
picture_num();
clearInterval(myInterval);
slideshow();
}
}
function prevImage() {
clearInterval(myInterval);
slideshow();
if (p>0) {
p--;
pprev = image.length-1;
} else {
p = image.length-1;
pprev--;
}
ppnext--
picture._alpha = 0;
picture.loadMovie(image[p], 1);
thumbnail1._alpha = 0;
thumbnail1.loadMovie(image[pprev], 1);
thumbnail2._alpha = 0;
thumbnail2.loadMovie(image[p], 1);
thumbnail3._alpha = 0;
thumbnail3.loadMovie(image[pnext], 1);
desc_txt.text = description[p];
picture_num();
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
thumbnail1._alpha = 0;
thumbnail1.loadMovie(image[image.length-1], 1);
thumbnail2._alpha = 0;
thumbnail2.loadMovie(image[0], 1);
thumbnail3._alpha = 0;
thumbnail3.loadMovie(image[1], 1);
desc_txt.text = description[0];
picture_num();
clearInterval(myInterval);
slideshow();
}
}
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);
nextImage();
}
}

trace("pnext = "+pnext);
trace("pprev = "+pprev);

Hier (http://members.home.nl/nielskreijveld/exten/gallery.rar) staat de .rar file met de app erin.

Op dit moment werkt de slideshow prima, alleen de thumbnails werken niet naar behoren. Wie kan me helpen met het maken van deze thumbnails? Ik heb geprobeert met mijn hele basic actionscript skills dit te tweaken en aan te passen maar dit is me helaas niet gelukt.

Alvast bedankt!

[Mr. Black]

Verkeerde forum! Hoort in ActionScript 1.0 & 2.0. :)

[Erwinzzz]

Verkeerde forum! Hoort in ActionScript 1.0 & 2.0. :)
Klopt, verplaatst!

[SplinterX86]

Eigenlijk heb ik het als een CS3 bestand opgeslagen... Het is wellicht een oude tutorial maar weldegelijk Actionscript 3.0 als ik me niet vergis.

[Erwinzzz]

CS3 != AS3. In Flash CS3 kan je ook gewoon AS2 bestanden maken.

En je code is absoluut geen AS3. Als je dit in een AS3 bestand zet krijg je een hele hoop foutmeldingen ;)

[SplinterX86]

Ok excuses, daar had ik inderdaad geen rekening mee gehouden. In ieder geval: kan iemand me hiermee helpen misschien?

Alvast bedankt!

[SplinterX86]

Ok ik heb hem dan toch werkend gekregen op eigen kracht (met mijn zeer beperkte actionscript kennis). Echter heb ik een probleem: hij werkt niet met .png files! Ik neem aan dat dit aan loadMovie ligt. Echter weet ik nu niet hoe ik dit moet oplossen. Ik heb wat rond lopen rotzooien met loadClip maar de posities van alle elementen wordne dan weer op 0,0 gezet en ik krijg het niet goed gepositioneerd. Tevens weet ik echt niet hoe ik dit in de actionscript code moet verwerken:

delay = 3000;
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");

previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};

p = 0;
pnext = p+1;
pprev = image.length-1;

this.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 += 10;
}
if (thumbnail1._alpha<100) {
thumbnail1._alpha += 10;
}
if (thumbnail2._alpha<100) {
thumbnail2._alpha += 10;
}
if (thumbnail3._alpha<100) {
thumbnail3._alpha += 10;
}
}
};
var myInterval;
function nextImage() {
p++;
p %= image.length;
if (p<image.length-1) {
pnext++;
} else {
pnext=0;
}
if (p>0) {
pprev = p-1;
} else {
pprev = image.length-1;
}
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
thumbnail1._alpha = 0;
thumbnail1.loadMovie(image[pprev], 1);
thumbnail2._alpha = 0;
thumbnail2.loadMovie(image[p], 1);
thumbnail3._alpha = 0;
thumbnail3.loadMovie(image[pnext], 1);
// desc_txt.text = description[p];
// picture_num();
clearInterval(myInterval);
slideshow();
}
}

function prevImage() {
clearInterval(myInterval);
slideshow();
if (p>0) {
p--;
} else {
p = image.length-1;
}
if (p<image.length-1) {
pnext = p+1;
} else {
pnext = 0;
}
if (p>0) {
pprev = p-1;
} else {
pprev = image.length-1;
}

picture._alpha = 0;
picture.loadMovie(image[p], 1);
thumbnail1._alpha = 0;
thumbnail1.loadMovie(image[pprev], 1);
thumbnail2._alpha = 0;
thumbnail2.loadMovie(image[p], 1);
thumbnail3._alpha = 0;
thumbnail3.loadMovie(image[pnext], 1);
// desc_txt.text = description[p];
// picture_num();
}

function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
thumbnail1._alpha = 0;
thumbnail1.loadMovie(image[image.length-1], 1);
thumbnail2._alpha = 0;
thumbnail2.loadMovie(image[0], 1);
thumbnail3._alpha = 0;
thumbnail3.loadMovie(image[pnext], 1);
// desc_txt.text = description[0];
// picture_num();
clearInterval(myInterval);
slideshow();
}
}
/*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);
nextImage();
}
}

Hier (http://members.home.nl/nielskreijveld/exten/) staat een voorbeeld (met .jpg files ipv .png) en hier (http://members.home.nl/nielskreijveld/exten/voorbeeld.rar) staan de bestanden in een .rar