View Full Version : xml photo burn effect, this works
shakesula
01-27-2006, 09:01 PM
I spent time gathering code from different places online, and I created this XML driven photo gallery with a "burn" effect transition. This also has an animated preloader.
Check it out for yourself, and then download the zip for your reusing pleasure.
XML Photo Gallery Online Demonstration (http://www.diecastframe.com/XMLPhotoBurnIn/)
Download Zip file (http://www.diecastframe.com/XMLPhotoBurnIn.zip)
Thanks for sharing, its very appreciated.
xtinarox26
01-28-2006, 12:14 AM
shakesule this is my code for my XML gallery...and i've been looking for th burn effect but i'm not quite sure where to put it into the code...will you help me ? its the last thing i need to do to complete my gallery.:o
dest1 = dest2 = dest3 = dest4 = dest5 = gal1_btn._y;
var tnNr;
spacing = 10;
container._alpha = 0;
var curLength;
easeAmount = 7;
MovieClip.prototype.loadPic = function(pic, id) {
info.text = "";
this._alpha = 0;
this.loadMovie(pic);
temp = this._parent.createEmptyMovieClip("temp2", 998);
temp.onEnterFrame = function() {
var t = container.getBytesTotal(), l = container.getBytesLoaded();
if (Math.round(l/t) == 1 && container._width != 0 && container._height != 0) {
var w = container._width+spacing, h = container._height+spacing;
border.resizeMe(w, h, id);
delete this.onEnterFrame;
}
};
};
MovieClip.prototype.resizeMe = function(w, h, id) {
var speed = 3;
container._alpha = 0;
this.onEnterFrame = function() {
this._width += (w-this._width)/speed;
this._height += (h-this._height)/speed;
if (Math.abs(this._width-w)<1 && Math.abs(this._height-h)<1) {
this._width = w;
this._height = h;
container._x = this._x-this._width/2+spacing/2;
container._y = this._y-this._height/2+spacing/2;
info._y = Math.round(this._y+this._height/2+spacing/2);
container._alpha += 5;
if (container._alpha>90) {
info.text = id;
container._alpha = 100;
delete this.onEnterFrame;
}
}
};
};
function galleryChoice(q) {
pArray = new Array();
tArray = new Array();
iArray = new Array();
my_xml = new XML();
for (var j = 0; j<curLength; j++) {
this.scroll.th_nav["thmb"+j].removeMovieClip();
}
my_xml.ignoreWhite = true;
my_xml.onLoad = function(loaded) {
if (loaded) {
gallery = this.firstChild.childNodes[q];
curLength = gallery.childNodes.length;
for (var i = 0; i<gallery.childNodes.length; i++) {
pArray.push(gallery.childNodes[i].attributes.source);
tArray.push(gallery.childNodes[i].attributes.thumb);
iArray.push(gallery.childNodes[i].attributes.title);
}
}
delay = setInterval(makeButtons, 50);
};
my_xml.load("gallery.xml");
}
function makeButtons() {
tnNr = 0;
clearInterval(delay);
for (var i = 0; i<tArray.length; i++) {
var thb = scroll.th_nav.thmb.duplicateMovieClip("thmb"+i, 1000+i);
thb.id = i;
thb._x = i%3*50;
thb._y = Math.floor(i/3)*50;
}
loadButtons();
}
function loadButtons() {
var tbox = scroll.th_nav["thmb"+tnNr].box;
tbox.loadMovie(tArray[tnNr]);
temp = this.createEmptyMovieClip("tmp"+tnNr, 999);
temp.onEnterFrame = function() {
bt = tbox.getBytesTotal();
bl = tbox.getBytesLoaded();
if (bt == bl && bt>4) {
nextButton();
delete this.onEnterFrame;
}
};
}
function nextButton() {
if (tnNr<tArray.length-1) {
tnNr++;
loadButtons();
} else {
activateButtons();
}
}
function activateButtons() {
mainButtons();
for (var i = 0; i<pArray.length; i++) {
var but = scroll.th_nav["thmb"+i];
but.id = i;
but.onRelease = function() {
container.loadPic(pArray[this.id], iArray[this.id]);
disButtons2(this.id);
}
}
container.loadPic(pArray[0], iArray[0]);
disButtons2(0);
}
butArray = new Array();
butArray = ["gal1_btn", "gal2_btn", "gal3_btn", "gal4_btn", "gal5_btn", "gal6_btn"];
function mainButtons() {
for (var i = 0; i<butArray.length; i++) {
this[butArray[i]].id = i;
this[butArray[i]].onRelease = function() {
galleryChoice(this.id);
disButtons(this.id);
}
}
}
function disButtons2(d) {
for (var i = 0; i<tArray.length; i++) {
if (i != d) {
this.scroll.th_nav["thmb"+i].enabled = 1;
this.scroll.th_nav["thmb"+i].box._alpha = 100;
} else {
this.scroll.th_nav["thmb"+i].enabled = 0;
this.scroll.th_nav["thmb"+i].box._alpha = 35;
}
}
}
function disButtons(d) {
for (var i = 0; i<butArray.length; i++) {
if (i != d) {
this[butArray[i]].enabled = 1;
this[butArray[i]]._alpha = 100;
} else {
this[butArray[i]].enabled = 0;
this[butArray[i]]._alpha = 50;
}
}
}
disButtons(0);
galleryChoice(0);
shakesula
01-28-2006, 04:01 PM
MovieClip.prototype.loadPic = function(pic, id) {
info.text = "";
this._alpha = 0;
this.loadMovie(pic);
temp = this._parent.createEmptyMovieClip("temp2", 998);
temp.onEnterFrame = function() {
var t = container.getBytesTotal(), l = container.getBytesLoaded();
if (Math.round(l/t) == 1 && container._width != 0 && container._height != 0) {
var w = container._width+spacing, h = container._height+spacing;
border.resizeMe(w, h, id);
delete this.onEnterFrame;
}
};
};
MovieClip.prototype.resizeMe = function(w, h, id) {
var speed = 3;
container._alpha = 0;
this.onEnterFrame = function() {
this._width += (w-this._width)/speed;
this._height += (h-this._height)/speed;
if (Math.abs(this._width-w)<1 && Math.abs(this._height-h)<1) {
this._width = w;
this._height = h;
container._x = this._x-this._width/2+spacing/2;
container._y = this._y-this._height/2+spacing/2;
info._y = Math.round(this._y+this._height/2+spacing/2);
container._alpha += 5;
if (container._alpha>90) {
info.text = id;
container._alpha = 100;
delete this.onEnterFrame;
}
}
};
};
I would remove all your _alpha code, and just add this function:
MovieClip.prototype.animateBrightness = function(ori) {
this.ori=ori;
this.jj = new Color(this);
this.col = this.jj.getTransform();
this.col.rb = this.col.gb=this.col.bb=this.val=this.ori;
this.jj.setTransform(this.col);
this.onEnterFrame = function() {
if (container.getBytesTotal == container.getBytesLoaded){
this.val = 0;
}
if (this.col.bb != this.val) {
this.col.rb = this.col.gb=this.col.bb += (this.val-this.col.bb)/11;
//The higher the number '11' is, the slower the brightness animation
}
this.jj.setTransform(this.col);
};
};
And then on your container MC, add:
onClipEvent(Load){
this.animateBrightness(255);
}
I can't necessarily guarantee that it will work, but give it a shot. And then if you want, you can have the photos fade back to white when you hit the next button, and give it a delay to wait for the fade to white. For example:
this.val = this.ori;
//This returns it to the value it started at.
delay = setInterval(nextButton, 500);
shakesula
01-28-2006, 09:32 PM
Spent a few minutes tweaking my code, although I'm sure it still needs to be cleaned up a bit. I added a variable that says the photo needs to be turned back to white, as you can see on the link. It's pretty simple, and now the images fade back to white before loading the next image.
XML Photo Gallery Online Demonstration, new version (http://www.diecastframe.com/XMLPhotoBurnIn)
Download new zip file (http://www.diecastframe.com/XMLPhotoBurnIn.zip)
goliatone
01-28-2006, 10:07 PM
shakesula, tnxs for sharing...good work.
drexle
01-28-2006, 10:09 PM
Indeed, I really like what you've done here.
xtinarox26
01-30-2006, 07:38 PM
shake,
i deleted evry line of code that had the _alpha...is this correct? and i added that piece of code to the MC and my pics started to load off of the page..:(
so i really thought i got it. this is a never ending battle.
my gallery is resizable & includes thumbnails w/ different galleries..if that makes any difference.:confused:
**if you want to take a look at my .FLA ...let me know :O)
shakesula
01-31-2006, 02:20 PM
**if you want to take a look at my .FLA ...let me know :O)
Yeah, why dont you send me your FLA, I tried to recreate your code, but I think having the FLA would be easier for me to see the big picture. I dont know if you can link to a zip file or send me an email, but I can receive bigger files at this email address (mark.goldsmith@clevermethod.com).
xtinarox26
02-01-2006, 08:04 PM
hey Shake!
I figured it out! it works beautifully! it's kind of slow.
thanks sooo much!
keep in touch.
Cris-
p.s. i posted a new thread ...any ideas on how to achieve that?
bmx_2000
04-18-2006, 06:36 AM
Thanks!
Works great, exactly what I was looking for.
Have just tested it locally and found just one issue: when modifing the xml and referring to images on a server, it loads the image but hangs on the first fade-in step …
Does anyone know how to solve this?
enigma
09-07-2006, 07:26 PM
Good work - really cool script
The only problem is if you double click everything goes out of whack :(
vBulletin® v3.7.1, Copyright ©2000-2009, Jelsoft Enterprises Ltd.