Hi everyone this is my first post to Kirupa, I have been busy trying to learn as much as I can about Action Script, Flash and XML before I posted, I couldn’t find anywhere on how to get your code in a little box when posting, so if someone could give me a pointer on that fist I will clear up this messy post!
My real question is:
I have designed the following gallery:
What I would like is for an image with a photoshopped glass bar to appear when the user clicks on the “i” button in the bottom right. Like this:
So the base code I have used is from the Kirupa Thumbnail Tutorial. I have already modified it to use links, but now I’m a bit stumped as I’m new to action script. I have added in the node information for an alternative image at the top, but don’t know how to write the action script to change the photo on a button release.
The information button is named: “info”, but I don’t know where and what action script to use to switch the main photo, to it’s alternative with the information pane.
Here is my action script so far:
[SIZE=1]function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
info = [];
description = [];
thumbnails = [];
links = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
info* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
thumbnails* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
links* = xmlNode.childNodes*.childNodes[3].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
} else {
content = “file not loaded!”;
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load(“images.xml”);
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
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;
picture.onRelease = function() {
getURL(links[p], “_blank”);
};
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p–;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function thumbNailScroller() {
this.createEmptyMovieClip(“tscroller”, 1000);
scroll_speed = 9;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}[/SIZE]
and the xml Data file:
[SIZE=1]<?xml version=“1.0” encoding=“utf-8” standalone=“yes”?>
<images>
<pic>
<image>1.jpg</image>
<info>1i.jpg</info>
<caption>anina</caption>
<thumbnail>1t.jpg</thumbnail>
<link>http://www.yahoo.com</link>
</pic>
<pic>
<image>2.jpg</image>
<info>2i.jpg</info>
<caption>anina_02</caption>
<thumbnail>2t.jpg</thumbnail>
<link></link>
</pic>
<pic>
<image>3.jpg</image>
<info>3i.jpg</info>
<caption>archi_01</caption>
<thumbnail>3t.jpg</thumbnail>
<link></link>
</pic>
<pic>
<image>4.jpg</image>
<info>4i.jpg</info>
<caption>suitcase</caption>
<thumbnail>4t.jpg</thumbnail>
<link></link>
</pic>
</images>[/SIZE]
Please note that the alternative version of the file has an i after the name.
Thank you so much for your help, always makes me smile that there are so many helpful people out there,
Ben:crazy:
