Hello everybody!
this is myt first post so i want to say hello to entire forum.
I found a nice tutorial about an XML driven gallery on Kirupa.com website:http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm
(i found another one with thumbnails but can’t remember URL)
both these tutoriasl use two images: one for thumbnail and one for full size images.
than i tought: why not implement the possibility to use only one image and let flash resize it for me?
you can see the result here: http://www.webalice.it/flottici/galleria/thumbnail_final_modificato.html
as you can see there are few problems
1-the first image is loading full size and not centered on the outlined area
2-you need to click twice on the thumbnail to see the righ size image
3-if i use the scale function for the first image, something weird happens.
i am spending a lot of time on that code and i think to be near the solution but i can’t solve the problem.
Is there anybody that can help me better understand where is the bug?
Here is the source code:
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
//thumbnails* = xmlNode.childNodes*.childNodes[2].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();
//trace(loaded);
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
//end IF
}
//Else
};
//end IF
function scala() {
picture._xscale = picture._yscale=100;
W = picture._width;
H = picture._height;
trace("W"+" "+W);
trace("H"+" "+H);
MaxW = 550;
MaxH = 300;
MaxP = MaxH*100/MaxW;
trace("maxP"+" "+MaxP);
theW = W;
theH = H;
theP = theH*100/theW;
trace("theP"+" "+theP);
if (W>MaxW) {
trace("W>MaxW");
if (H>MaxH) {
trace("H>MaxH");
if (theP<=MaxP) {
trace("theP<=MaxP");
theW = MaxW;
theH = MaxW*theP/100;
} else {
// 1
trace("theP>MaxP");
theW = MaxH/theP*100;
theH = MaxH;
}
//fine 1
} else {
// 2
trace("H<MaxH");
theW = MaxW;
theH = MaxW*theP/100;
}
// fine 2
} else {
//else 3
trace("W<MaxW");
//un controllo anche sull'altezza
if (H>MaxH) {
tracde("H>MaxH");
theW = MaxH/theP*100;
theH = MaxH;
} else {
//else 4
trace("H<MaxH");
}
//fine else 4
}
//fine else 3
theW = Math.floor(theW);
theH = Math.floor(theH);
trace("Scala X picture" + " " + picture._xscale);
trace("Scala Y picture" + " " + picture._yscale);
picture._width = theW;
picture._height = theH;
trace("width"+" "+picture._width);
trace("height"+" "+picture._height);
picture._x = ((big._x+big._width)-theW)/2;
trace("posx"+" "+picture._x);
picture._y = ((big._y+big._height)-theH)/2;
trace("posy"+" "+picture._y);
trace("Scala X picture" + " " + picture._xscale);
trace("Scala Y picture" + " " + picture._yscale);
}
function reset() {
picture._width=picture._height=0;
}
function nextImage() {
if (p<(total-1)) {
p++;
//trace("p"+" "+p);
picture._alpha = 0;
picture.loadMovie(image[p], 1);
if (loaded>1024 && loaded == filesize) {
//trace("picture name"+" "+image[p]);
scala();
desc_txt.text = description[p];
picture_num();
//delete this.onEnterFrame;
}
}
}
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);
//scala();
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
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;
}
};
}
/*con questa funzione carico i thumbnails e li distribuisco in base alla loro larghezza*/
function thumbnails_fn(k) {
//creo dei movieclip vuoti che riempirò con le immagini
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
//creo un oggetto
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
/*
this.larg = this.pic_box._width;
this.alt = this.pic_box._height;
this.pic_box._xscale = Math.floor(_level0.W_box_pic*100/this.larg);
this.pic_box._yscale = Math.floor(_level0.H_box_pic*100/this.alt);
target_mc._xscale = Math.floor(50 * 100 / target_mc._width);
*/
//distribuisco le immagini in base alla propria larghezza (target_mc._width)
target_mc._xscale = Math.floor(100*100/target_mc._width);
target_mc._yscale = Math.floor(70*100/target_mc._height);
target_mc._x = hit_left._x+(target_mc._width+5)*k;
//trace(target_mc._x);
//tengo traccia del thumbnail corrente
target_mc.pictureValue = k;
//carco la funzione nextimage ogni volta che clicco il thumbnail
target_mc.onRelease = function() {
p = this.pictureValue-1;
//trace("this.picturevalue"+" "+this.pictureValue);
//trace("p"+" "+p);
nextImage();
};
target_mc.onRollOver = function() {
this._alpha = 50;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
//image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
//devo caricare le immagini originali non i thumbnail
//quindi sostituisco thumbnails[k] con image[k]
image_mcl.loadClip(image[k], "thumbnail_mc.t"+k);
}
Thank you very much.
let me know if you need the .fla
