I love the gallery here (in the ‘best of’, I think), but it was a bit too much for me to re-engineer to fit my design.
I searched and found one that seems like it will fit the bill. I’ve since lost the link, but I’m still digging and can hopefully find and post if it winds up being necessary.
There’s a function in the gallery that calls and moves both a mask/transition for the images and thumbs AND for the preloader bar. I love the fade in and out, but cringe at them moving.
I’ve tried replacing values in the code, but I’m obviously doing something wrong, because I either break it (nothing loads) or the movement remains.
If you have a moment to take a look and point me to what I need to adjust or remove I’ll start footworking with happy feet and much thanks!!
Here’s the script:
portfolioInfo = new XML();
portfolioInfo.ignoreWhite = true;
timeline = this;
var set_interval = 1;// This value must not be changed!
var thumbs_per_set=5;// Here you can set the number of images per page. Dont use 1, any other number ok!
var from_image=0;
var to_image=thumbs_per_set;
previous.enabled=false;
previous._visible=false;
next.enabled=false;
next._visible=false;
//trace(this);
this.createEmptyMovieClip("mask", 2);
//trace(image_mc._x);
mask._x = image_mc._x;
mask._y = image_mc._y;
mask.beginFill (0xFF0000, 100);
mask.lineStyle(0, 0, 0);
mask.lineTo(image_mc._width, 0);
mask.lineTo(image_mc._width, image_mc._height);
mask.lineTo(0, image_mc._height);
mask.lineTo(0, 0);
endFill();
image_mc.setMask(mask);
MovieClip.prototype.useHandCursor = true;
//loaderHolder.loadBar.setMask(mask3);
// Function when xml is done loading:
portfolioInfo.onLoad = function() {
menu_mc.attachMovie("loading_set_clip","loading_set_clip", 1);
menu_mc.loading_set_clip._y = 10;
portfolioTag = this.firstChild;
count=portfolioTag.childNodes.length;
remaindar_testing = count % thumbs_per_set;
if (remaindar_testing == 0){total_sets = count / thumbs_per_set;}
else {total_sets = Math.floor(count / thumbs_per_set)+1};
timeline.createEmptyMovieClip("contain",1);
for (child=0;child<count;child++){
currentPicture = portfolioTag.childNodes[child];
Thumb = contain.createEmptyMovieClip("thumb"+child, child);
pic = Thumb.createEmptyMovieClip("thumb_image"+child, 0);
pic.loadMovie(currentPicture.attributes.THUMB);
Thumb._visible=false;
if (child == count - 1){initial_set_preload(pic);}
}
};
movieClip.prototype.initial_set_preload = function (mc) {
this.onEnterFrame = function() {
var l = mc.getBytesLoaded();
var t = mc.getBytesTotal();
if (l>0 && l>=t) {
contain.removeMovieClip();
loading_set_clip.easeTo(0, 20, 15, "leaving",0);
menu_mc.loading_set(from_image,to_image);
Set = set_interval+" / "+total_sets;
if (count<=thumbs_per_set){
next._visible=false;
}else{
next._visible=true;
next.enabled=true;
}
delete this.onEnterFrame;
}
};
};
next.onPress = next.onDragOver=function () {
previous.enabled=true;
previous._visible=true;
set_interval++;
Set = set_interval+" / "+total_sets;
menu_mc.removing_set(from_image,to_image);
if (to_image < count){
var temp = count - to_image;
if (temp < thumbs_per_set) {
from_image = to_image;
to_image += temp;
menu_mc.loading_set(from_image,to_image);
}
else {
from_image = to_image;
to_image += thumbs_per_set;
menu_mc.loading_set(from_image,to_image);
}
}
if (to_image == count){
next.enabled=false;
next._visible=false;
}
};
previous.onPress = previous.onDragOver=function () {
next.enabled=true;
next._visible=true;
set_interval--;
Set = set_interval+" / "+total_sets;
menu_mc.removing_set(from_image,to_image);
if (from_image > 0){
to_image = from_image;
from_image -= thumbs_per_set;
menu_mc.loading_set(from_image,to_image);
}
if (from_image == 0) {
previous.enabled=false;
previous._visible=false;
}
};
MovieClip.prototype.loading_set= function(from,to) {
var counter = 0; //distance..location
for (child=from; child<to; child++) {
currentPicture = portfolioTag.childNodes[child];
currentThumb = menu_mc.createEmptyMovieClip("thumbnail"+child, child);
currentThumb._x = (counter*40);
currentThumb._y = (child*0)+40;
image = currentThumb.createEmptyMovieClip("thumbnail_image", 0);
image.loadMovie(currentPicture.attributes.THUMB);
currentThumb.NAME = currentPicture.attributes.NAME;
currentThumb.IMAGE = currentPicture.attributes.IMAGE;
currentThumb.TEXT = currentPicture.attributes.TEXT;
currentThumb.onRollOver = currentThumb.onDragOver=function () {
showName_txt.text = this.Name;
this.attachMovie("blink","blink",1001);
this.blink._height=24;
this.blink._width=32;
};
currentThumb.onRollOut = currentThumb.onDragOut=function () {
showName_txt.text = "";
this.blink.removeMovieClip();
this.blinkRelease.removeMovieClip();
};
currentThumb.onPress = currentThumb.onDragOver=function () {
if (current_thumb != this) {
current_thumb = this;
to_x=image_mc._x;
to_y=250;
image_mc.easeTo_image(to_x,to_y,7,0, this.image, "down");
this.attachMovie("blinkRelease","blinkRelease",1000);
this.blinkRelease._height=24;
this.blinkRelease._width=32;
info_txt.text = "Text Loading...";
timeline.loadVariables(this.TEXT);
}
};
menu_mc["thumbnail"+child].easeTo(40*counter, 15, 7, "coming",100);
counter++;
}
};
MovieClip.prototype.removing_set= function(from,to) {
var counter=0;
for (child=from; child<to; child++) {
menu_mc["thumbnail"+child].easeTo(40*counter, 40, 15, "leaving",0);
counter++;
}
};
loadPic = function (pic) {
image_mc.loadMovie(pic);
mask._visible=false;
preload(image_mc,1);
};
MovieClip.prototype.preload = function(mc, location) {
var loader_x=223;
var loader_y=0;
status=false;
this.onEnterFrame = function() {
var l = mc.getBytesLoaded();
var t = mc.getBytesTotal();
var getPercent = l/t;
var percent = getPercent*100;
LoaderHolder.loadBar._width += (percent - LoaderHolder.loadBar._width) / 20;
if (l>0 && l>=t) {
LoaderHolder.loadBar._width = 100;
LoaderHolder.easeTo(loader_x, 170, 15, "leaving",0);
image_mc.setMask(mask);
mask._visible=true;
mc.easeTo_image(to_x,0,7,100,image,"up");
mc._visible = 1;
delete this.onEnterFrame;
}
else {
if (status==false) {
status=true;
this.attachMovie("LoaderHolder", "LoaderHolder", 1);
LoaderHolder._alpha=0;
LoaderHolder._x=loader_x;
LoaderHolder._y=loader_y+20;
LoaderHolder.loadBar._width = 0;
LoaderHolder.easeTo_image(loader_x,loader_y,6,100,image,"up");
}
}
};
};
MovieClip.prototype.easeTo_image = function(x, y, speed, fading_to, image, dir) {
//image_mc.setMask(mask2);
if (dir == "down"){
this.onEnterFrame = function() {
//set move to location
//this.enabled=false;
this.eX = Math.round(x-this._x);
this.eY = Math.round(y-this._y);
//ease to location
this._alpha = this._alpha+(fading_to-this._alpha)/6;
this._x += this.eX/speed;
this._y += this.eY/speed;
//if the eX and eY variables are both equal to 0
if (!this.eX && !this.eY) {
//place the clip at the final destination point
this._x = x;
this._y = y;
loadPic(image);
//stop running the onEnterFrame
delete this.onEnterFrame;
//this.removeMovieClip();
}
};
}else if (dir == "up") {
this.onEnterFrame = function() {
//set move to location
//this.enabled=false;
this.eX = Math.round(x-this._x);
this.eY = Math.round(y-this._y);
//ease to location
this._alpha = this._alpha+(fading_to-this._alpha)/6;
this._x += this.eX/speed;
this._y += this.eY/speed;
//if the eX and eY variables are both equal to 0
if (!this.eX && !this.eY) {
//place the clip at the final destination point
this._x = x;
this._y = y;
//stop running the onEnterFrame
delete this.onEnterFrame;
//this.removeMovieClip();
}
};
}
};
MovieClip.prototype.easeTo = function(x, y, speed, where_to, fading_to) {
if (where_to=="leaving"){
this.onEnterFrame = function() {
//set move to location
this.enabled=false;
this.eX = Math.round(x-this._x);
this.eY = Math.round(y-this._y);
//ease to location
this._alpha = this._alpha+(fading_to-this._alpha)/6;
this._x += this.eX/speed;
this._y += this.eY/speed;
//if the eX and eY variables are both equal to 0
if (!this.eX && !this.eY) {
//place the clip at the final destination point
this._x = x;
this._y = y;
//stop running the onEnterFrame
delete this.onEnterFrame;
this.removeMovieClip();
}
};
}
else {
this._alpha=0;
this.enabled=false;
this.onEnterFrame = function() {
//set move to location
this.eX = Math.round(x-this._x);
this.eY = Math.round(y-this._y);
//ease to location
this._alpha = this._alpha+(fading_to-this._alpha)/6;
this._x += this.eX/speed;
this._y += this.eY/speed;
//if the eX and eY variables are both equal to 0
if (!this.eX && !this.eY) {
//place the clip at the final destination point
this._x = x;
this._y = y;
//stop running the onEnterFrame
this.enabled=true;
delete this.onEnterFrame;
}
};
}
};
portfolioInfo.load("xmlstuff/portfolio_config.xml");
//stop();
