I used the above tutorial to make a simple photo gallery to be embeded in a html on my website. Everything seems to work fine except I can’t get the images to centre. I have photos of various different sizes but they all seem to align to the top left corner. I want them to align the photos centre to the photo of ‘picture’ (the movie clip in which they load in to).
I am new to this so I don’t understand the code enough to work it out (I have tried for hours).
I have searched through forums for days trying to find a solution. I found a solution on a forum which centred the photos after the next or previous button is pressed but then the image on startup still aligns to the top left corner.
Please can someone help me with this?
I have posted a scaled down version of the .fla and the xml file I am using.
Here is my action script code:
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
}
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;
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;
}
This is the code which centres the photo after the next or previous button is pressed:
next_btn.onPress = function(){
_root.createEmptyMovieClip(“picture”, _root.getNextHighestDepth());
// set the alpha to not see the picture loading…
_root.picture._alpha = 0;
_root.picture.loadMovie("");
onEnterFrame = function(){
if(_root.picture.getBytesLoaded() >= _root.picture.getBytesTotal() && _root.picture.getBytesLoaded() > 0){
_root.picture._x = Stage.width/2 - _root.picture._width/2;
_root.picture._y = Stage.height/2 - _root.picture._height/2;
delete onEnterFrame;
_root.picture._alpha = 100;
}
};
}
previous_btn.onPress = function(){
_root.createEmptyMovieClip(“picture”, _root.getNextHighestDepth());
// set the alpha to not see the picture loading…
_root.picture._alpha = 0;
_root.picture.loadMovie("");
onEnterFrame = function(){
if(_root.picture.getBytesLoaded() >= _root.picture.getBytesTotal() && _root.picture.getBytesLoaded() > 0){
_root.picture._x = Stage.width/2 - _root.picture._width/2;
_root.picture._y = Stage.height/2 - _root.picture._height/2;
delete onEnterFrame;
_root.picture._alpha = 100;
}
};
}
I’m sure there must be some simple solution but I just can’t work it out.
