Evening,
I am pretty new to actionscript and was trying to build a gallery based on the Kirupa xml gallery tutorial, with thumbnails. I am wanting to load larger images into the movie clip and then dynamically, porportionally scale it based on the container frame size. Later I want to add a zoom button that will enlarge the pic to its full size so that the user can scroll around it with their mouse. Kind of like this:
For now I am just trying to get the scaling code to work. I have attached my code, but as you master coders probably see, it produces unpredictable results. The images scale different sizes and are located in different positions. Here is the code
var frame_pos_x = this.img_frame._x;
var frame_pos_y = this.img_frame._y;
var maxWidth = this.img_frame._width;
var maxHeight = this.img_frame._height;
//
function sizer() {
var myWidth = this.picture._width;
var myHeight = this.picture._height;
// Calculate percentage by which image will need to change to fit
if (myWidth>maxWidth) {
var xscalePercent = (myWidth*100)/maxWidth;
}
if (myHeight>maxHeight) {
var yscalePercent = (myHeight*100)/maxHeight;
}
// Multiply both height and width by the bigger percentage
if (xscalePercent>yscalePercent) {
this.picture._width /= (xscalePercent/100);
this.picture._height /= (xscalePercent/100);
} else {
this.picture._width /= (yscalePercent/100);
this.picture._height /= (yscalePercent/100);
}
// centers jpg on stage
this.picture._x = frame_pos_x+((maxWidth-this.picture._width)/2);
this.picture._y = frame_pos_y+((maxHeight-this.picture._height)/2);
}
///////////////////////////////////////////////////////////////////
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();
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);
sizer();
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
sizer();
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
sizer();
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 ((this._ymouse>=thumbnail_mc._y) && (this._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
if ((this._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((this._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = hit_left._x+(target_mc._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
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);
}
Any help would be GREAT. I have been trying to get it to work for DAYS. Thanks for all your help!
Sincerely,
JD