Making a Great Photo Stacker App Better !!!

[ibex]

Hi,

I was wondering if someone could help me make a small modification to a great photo stacker app:

Below is the code I found for a XML driven photo stacker......at present you have to click each photo to move through the photo stack but I want modify the code to perform the following:

1. Keep the click photo to progress to the next photo feature (Lets calls this Normal Mode).

2. Allow the user to click anywhere on the screen (NOT) the photo which then puts the photo stack app into (lets call it Slideshow mode) with a 4 second pause between photos.

3. Once in slideshow mode, cycle through all the photos until the end of the photo stack then stop at the first photo allowing the user to repeat the above process.

In effect I want to add a slideshow function along with allowing the freedom to click through the photo stack.

Actionscript on Frame1 (Updated):


MovieClip.prototype.addProperty("onLoad", function () {
return __onLoadHandler__[this];
}, function (f) {
if (__onLoadHandler__ == undefined) {
_global.__onLoadHandler__ = {};
}
__onLoadHandler__[this] = f;
});
Math.easeInQuad = function(t, b, c, d) {
return c*(t /= d)*t+b;
};
Math.easeOutQuad = function(t, b, c, d) {
return -c*(t /= d)*(t-2)+b;
};
Stage.scaleMode = "noScale";
myXML = new XML();
myXML.ignoreWhite = true;
myXML.onLoad = function() {
nodes = myXML.childNodes;
// ----------------------
// find first image
// ----------------------
if (topimage.length) {
for (var i = 0; i<nodes.length; i++) {
if (nodes[i].attributes.src == topimage) {
var insert = nodes.slice(0, i);
nodes.splice(0, i);
nodes = nodes.concat(insert);
}
}
}
_root.gotoAndStop(2);
};

// if (_url.indexOf("http")>-1) {
// myXML.load("gallery.php");
// } else {
myXML.load("gallery.xml");
// }

stop();




Actionscript on Frame2 (Updated):


function drawOutline(mc, width, height) {
// border 15
var wallx = width/2+15;
var wally = height/2+15;
// shadow offset
var offset = 5;
// Shadow colour and transparency
mc.beginFill(0x000000, 20);

mc.moveTo(-wallx+offset, -wally+offset);
mc.lineTo(wallx+offset, -wally+offset);
mc.lineTo(wallx+offset, wally+offset);
mc.lineTo(-wallx+offset, wally+offset);
mc.lineTo(-wallx+offset, -wally+offset);
// Outline border colour
mc.beginFill(0xffffff, 100);
// mc.lineStyle(2, 0x333333, 100);
mc.lineStyle(1, 0xcccccc, 100);
mc.moveTo(-wallx, -wally);
mc.lineTo(wallx, -wally);
mc.lineTo(wallx, wally);
mc.lineTo(-wallx, wally);
mc.lineTo(-wallx, -wally);
mc.endFill();
}
// ----------------------
// build placeholders
// ----------------------
loads = [];
stack = [];
depth = 9999;
for (i=0; i<nodes.length; i++) {
attrs = nodes[i].attributes;
img = _root.createEmptyMovieClip("image"+i, depth--);
drawOutline(img, attrs.width, attrs.height);
img.createEmptyMovieClip("imgholder", 1);
img.imgholder._x = -attrs.width/2;
img.imgholder._y = -attrs.height/2;
img.imgholder.src = attrs.src;
totalw += img._width;
totalh += img._height;
coverw = (img._width>coverw) ? img._width : coverw;
coverh = (img._height>coverh) ? img._height : coverh;
img._rotation = (Math.random()*16)-8;
img._visible = false;
img._alpha = 0;
stack.push(img);
loads.push(img);
}
stack[0]._rotation = 0;
gox = (totalw/nodes.length)*0.9;
goy = (-totalh/nodes.length)*0.4;
// ----------------------
// load images
// ----------------------
function loadimage(id) {
if (loads[id]) {
loads[id]._visible = true;
loads[id].imgholder.loadMovie(loads[id].imgholder.src);
loads[id].imgholder.onLoad = function() {
loads[id].imgholder.onEnterFrame = function() {
if (this._parent._alpha<75) {
this._parent._alpha += 25;
} else if (this._parent._alpha<100) {
this._parent._alpha += 25;
loadimage(id+1);
} else {
delete this.onEnterFrame;
}
};
};
}
}
loadimage(0);
// ----------------------
// handle swap
// ----------------------
_root.createEmptyMovieClip("Cover", 10000);
Cover.beginFill(0xFFFFFFF, 0);
Cover.moveTo(-coverw/2, -coverh/2);
Cover.lineTo(coverw/2, -coverh/2);
Cover.lineTo(coverw/2, coverh/2);
Cover.lineTo(-coverw/2, coverh/2);
Cover.lineTo(-coverw/2, -coverh/2);
Cover.endFill();
Cover.onRelease = function() {
// Shuffle the top image to the side
stack[0].t = 0;
stack[0].rot = stack[0]._rotation;
stack[0].changerot = (Math.random()*16)-8-stack[0].rot;
stack[0].onEnterFrame = function() {
this.t++;
this._x = Math.easeInQuad(this.t, 0, gox, 6);
this._y = Math.easeInQuad(this.t, 0, goy, 6);
this._rotation = Math.easeInQuad(this.t, this.rot, this.changerot, 6);
if (this.t == 7) {
this.swapDepths(depth--);
this.t = 0;
this.onEnterFrame = function() {
this.t++;
this._x = Math.easeOutQuad(this.t, gox, -gox, 6);
this._y = Math.easeOutQuad(this.t, goy, -goy, 6);
if (this.t == 6) {
delete this.onEnterFrame;
}
};
}
};
// Rotate the next image into view
stack[1]._x = stack[1]._y=0;
stack[1].t = 0;
stack[1].rot = stack[1]._rotation;
stack[1].onEnterFrame = function() {
this.t++;
this._rotation = Math.easeOutQuad(this.t, this.rot, -this.rot, 6);
if (this.t == 6) {
delete this.onEnterFrame;
}
};
// Move top image to the back of the stack array
var addback = stack.shift();
stack.push(addback);
};

[ibex]

Hi,

If someone is prepared to help with modifying the code.....I have included some screenshots of what I want to achieve, with a little more explanation including images.

Process as follows:

1. Default, start photostacker in Slideshow Mode (Auto switch photos at 4 second intervals)
2. When user enters mouse over photo the play/pause button is displayed.
3. Once the user clicks the pause button the slideshow stops and the user can manually click throught the photos or click 'play' button to start the slideshow again.

Screenshots:

[ayumilove]

why use this kind of variable naming? _loc1, _loc2... etc
would like to help, but need to deal with school assignments first >_<

[ibex]

why use this kind of variable naming? _loc1, _loc2... etc
would like to help, but need to deal with school assignments first >_<

Hi,

I have no idea why _loc1, _loc2 are used as variable names I found this code, I did not write the code.

I would appreciate someones help with this.......

[Krilnon]

Those sorts of variable names are usually generated by decompilers. _loc1 is the first local variable that the decompiler ran across, etc.

[ibex]

Hi,

I now have the original flash file......can some one help with at least removing the click to switch photos and have a pause of 4 seconds and automatically switch the photos.

Frame1 Code:


MovieClip.prototype.addProperty("onLoad", function () {
return __onLoadHandler__[this];
}, function (f) {
if (__onLoadHandler__ == undefined) {
_global.__onLoadHandler__ = {};
}
__onLoadHandler__[this] = f;
});
Math.easeInQuad = function(t, b, c, d) {
return c*(t /= d)*t+b;
};
Math.easeOutQuad = function(t, b, c, d) {
return -c*(t /= d)*(t-2)+b;
};
Stage.scaleMode = "noScale";
myXML = new XML();
myXML.ignoreWhite = true;
myXML.onLoad = function() {
nodes = myXML.childNodes;
// ----------------------
// find first image
// ----------------------
if (topimage.length) {
for (var i = 0; i<nodes.length; i++) {
if (nodes[i].attributes.src == topimage) {
var insert = nodes.slice(0, i);
nodes.splice(0, i);
nodes = nodes.concat(insert);
}
}
}
_root.gotoAndStop(2);
};

// if (_url.indexOf("http")>-1) {
// myXML.load("gallery.php");
// } else {
myXML.load("gallery.xml");
// }

stop();


Frame2 Code:


function drawOutline(mc, width, height) {
// border 15
var wallx = width/2+15;
var wally = height/2+15;
// shadow offset
var offset = 5;
// Shadow colour and transparency
mc.beginFill(0x000000, 20);

mc.moveTo(-wallx+offset, -wally+offset);
mc.lineTo(wallx+offset, -wally+offset);
mc.lineTo(wallx+offset, wally+offset);
mc.lineTo(-wallx+offset, wally+offset);
mc.lineTo(-wallx+offset, -wally+offset);
// Outline border colour
mc.beginFill(0xffffff, 100);
// mc.lineStyle(2, 0x333333, 100);
mc.lineStyle(1, 0xcccccc, 100);
mc.moveTo(-wallx, -wally);
mc.lineTo(wallx, -wally);
mc.lineTo(wallx, wally);
mc.lineTo(-wallx, wally);
mc.lineTo(-wallx, -wally);
mc.endFill();
}
// ----------------------
// build placeholders
// ----------------------
loads = [];
stack = [];
depth = 9999;
for (i=0; i<nodes.length; i++) {
attrs = nodes[i].attributes;
img = _root.createEmptyMovieClip("image"+i, depth--);
drawOutline(img, attrs.width, attrs.height);
img.createEmptyMovieClip("imgholder", 1);
img.imgholder._x = -attrs.width/2;
img.imgholder._y = -attrs.height/2;
img.imgholder.src = attrs.src;
totalw += img._width;
totalh += img._height;
coverw = (img._width>coverw) ? img._width : coverw;
coverh = (img._height>coverh) ? img._height : coverh;
img._rotation = (Math.random()*16)-8;
img._visible = false;
img._alpha = 0;
stack.push(img);
loads.push(img);
}
stack[0]._rotation = 0;
gox = (totalw/nodes.length)*0.9;
goy = (-totalh/nodes.length)*0.4;
// ----------------------
// load images
// ----------------------
function loadimage(id) {
if (loads[id]) {
loads[id]._visible = true;
loads[id].imgholder.loadMovie(loads[id].imgholder.src);
loads[id].imgholder.onLoad = function() {
loads[id].imgholder.onEnterFrame = function() {
if (this._parent._alpha<75) {
this._parent._alpha += 25;
} else if (this._parent._alpha<100) {
this._parent._alpha += 25;
loadimage(id+1);
} else {
delete this.onEnterFrame;
}
};
};
}
}
loadimage(0);
// ----------------------
// handle swap
// ----------------------
_root.createEmptyMovieClip("Cover", 10000);
Cover.beginFill(0xFFFFFFF, 0);
Cover.moveTo(-coverw/2, -coverh/2);
Cover.lineTo(coverw/2, -coverh/2);
Cover.lineTo(coverw/2, coverh/2);
Cover.lineTo(-coverw/2, coverh/2);
Cover.lineTo(-coverw/2, -coverh/2);
Cover.endFill();
Cover.onRelease = function() {
// Shuffle the top image to the side
stack[0].t = 0;
stack[0].rot = stack[0]._rotation;
stack[0].changerot = (Math.random()*16)-8-stack[0].rot;
stack[0].onEnterFrame = function() {
this.t++;
this._x = Math.easeInQuad(this.t, 0, gox, 6);
this._y = Math.easeInQuad(this.t, 0, goy, 6);
this._rotation = Math.easeInQuad(this.t, this.rot, this.changerot, 6);
if (this.t == 7) {
this.swapDepths(depth--);
this.t = 0;
this.onEnterFrame = function() {
this.t++;
this._x = Math.easeOutQuad(this.t, gox, -gox, 6);
this._y = Math.easeOutQuad(this.t, goy, -goy, 6);
if (this.t == 6) {
delete this.onEnterFrame;
}
};
}
};
// Rotate the next image into view
stack[1]._x = stack[1]._y=0;
stack[1].t = 0;
stack[1].rot = stack[1]._rotation;
stack[1].onEnterFrame = function() {
this.t++;
this._rotation = Math.easeOutQuad(this.t, this.rot, -this.rot, 6);
if (this.t == 6) {
delete this.onEnterFrame;
}
};
// Move top image to the back of the stack array
var addback = stack.shift();
stack.push(addback);
};