JUICE690
12-10-2008, 05:59 PM
Hi all, new here, after numerous hours googling I came across this forum and it looks as if someone may be abl to help me.
I'm Trying to add the Lightbox effect to my Flash movie but I just keep hitting a brick wall (metaphorically speaking, things haven't got that bad...yet)
Anyway to cut to the chase here's how my site works, brace yourselves
my_xml_data.xml >loads into> my_flash_portfolio.swf >loads into> my_dynamic_php_content.inc loads into>mywebsite.php
I think he .inc file can be ignored really as a stumbling block as it just contains the .swf's which I have working fine.
Here's the current build:- http://proofing.freeline-gfx.co.uk/portfolio_pages/brochures_print.php ignore the silly button lol
What I'd like to add is the lightbox function when people click on the main image. I've read a few posts here explaining how to go about this but i'm still not able to get it working... well to be honest I'm not really sure how to implement it into my code.
Here's my Actionscript:- (well action script I purchased, jigged around to suit my design so it's probably a right mess, but it works!) Followed by my xml & php
// The following is for the thumbnails and big image
var myXML2:XML = new XML();
myXML2.ignoreWhite = true;
myXML2.load("portfolio.xml");
var Name:Array = Array();
var description:Array = Array();
var subdescription:Array = Array();
var imagenumber:Array = Array();
var clientdescription:Array = Array();
var imagedescriptiontwo:Array = Array();
var thumbPath:Array = Array();
var picPath:Array = Array();
var linkURL:Array = Array();
_root.currentCatID = 1;
_root.gapH = 0;
// horizontal space
myXML2.onLoad = function(success) {
displayPage();
};
function displayPage() {
mc_thumbnail._x=0;
delete rightBtn.onEnterFrame;
delete leftBtn.onEnterFrame;
//remove existing thumbnails
for (var i = 0; i<_root.numberOfItems; i++) {
removeMovieClip(mc_thumbnail["img"+i]);
}
xml = myXML2.firstChild;
_root.numberOfItems = xml.childNodes.length;
_root.numberInCategory = 0;
var itemsInThisCat:Array = Array();
for (var i = 0; i<_root.numberOfItems; i++) {
if (xml.childNodes[i].childNodes[9].childNodes[0].nodeValue == _root.currentCatID) {
_root.numberInCategory++;
itemsInThisCat.push(i);
}
}
var numberOfImgs:Number = itemsInThisCat.length;
var integer:Number = Math.floor(numberOfImgs/10);
var remainder:Number = numberOfImgs%10;
var maxRightClickTime:Number = 0;
//if total imgs over 10
if (remainder == 0) {
maxRightClickTime = integer-1;
} else {
maxRightClickTime = integer;
}
var leftClickTime:Number = 0;
var rightClickTime:Number = 0;
var currentTarget:Number = 0;
leftBtn._visible = false;
//if total imgs less than 10 or equal 10
if (numberOfImgs<11) {
rightBtn._visible = false;
} else {
rightBtn._visible = true;
}
currentTarget = 0;
rightBtn.onRelease = function() {
leftBtn._visible = true;
rightClickTime++;
if (rightClickTime == maxRightClickTime) {
rightBtn._visible = false;
}
currentTarget = 0-(mask._width+2)*rightClickTime;
this.onEnterFrame = function() {
diff = currentTarget-mc_thumbnail._y;
mc_thumbnail._y += diff/4;
};
};
leftBtn.onRelease = function() {
rightBtn._visible = true;
rightClickTime--;
leftClickTime++;
if (rightClickTime == 0) {
leftBtn._visible = false;
}
currentTarget = 0-(mask._width+6)*rightClickTime;
this.onEnterFrame = function() {
diff = currentTarget-mc_thumbnail._y;
mc_thumbnail._y += diff/4;
};
};
for (var i = 0; i<itemsInThisCat.length; i++) {
Name[i] = xml.childNodes[itemsInThisCat[i]].childNodes[0].childNodes[0].nodeValue;
description[i] = xml.childNodes[itemsInThisCat[i]].childNodes[1].childNodes[0].nodeValue;
subdescription[i] = xml.childNodes[itemsInThisCat[i]].childNodes[2].childNodes[0].nodeValue;
imagenumber[i] = xml.childNodes[itemsInThisCat[i]].childNodes[3].childNodes[0].nodeValue;
clientdescription[i] = xml.childNodes[itemsInThisCat[i]].childNodes[4].childNodes[0].nodeValue;
imagedescriptiontwo[i] = xml.childNodes[itemsInThisCat[i]].childNodes[5].childNodes[0].nodeValue;
thumbPath[i] = xml.childNodes[itemsInThisCat[i]].childNodes[6].childNodes[0].nodeValue;
picPath[i] = xml.childNodes[itemsInThisCat[i]].childNodes[7].childNodes[0].nodeValue;
linkURL[i] = xml.childNodes[itemsInThisCat[i]].childNodes[8].childNodes[0].nodeValue;
mc_thumbnail.img.duplicateMovieClip("img"+i, i);
mc_thumbnail.img0._x = 0;
mc_thumbnail.img0._y = 80;
mc_thumbnail.img1._x = 100;
mc_thumbnail.img1._y = 80;
mc_thumbnail.img2._x = 200;
mc_thumbnail.img2._y = 80;
mc_thumbnail.img3._x = 0;
mc_thumbnail.img3._y = 140;
mc_thumbnail.img4._x = 100;
mc_thumbnail.img4._y = 140;
mc_thumbnail.img5._x = 200;
mc_thumbnail.img5._y = 140;
if (thumbPath[i] == "undefined") {
mc_thumbnail["img"+i].enabled = false;
} else {
mc_thumbnail["img"+i].enabled = true;
mc_thumbnail["img"+i].img_mc.loadMovie(thumbPath[i]);
}
mc_thumbnail["img"+i].theImageName = Name[i];
mc_thumbnail["img"+i].theLinkURL = linkURL[i];
mc_thumbnail["img"+i].thePicPath = picPath[i];
mc_thumbnail["img"+i].theImageDesc = description[i];
mc_thumbnail["img"+i].theImageSubdesc = subdescription[i];
mc_thumbnail["img"+i].theImageNum = imagenumber[i];
mc_thumbnail["img"+i].theImageClientdesc = clientdescription[i];
mc_thumbnail["img"+i].theImageDesctwo = imagedescriptiontwo[i];
mc_thumbnail["img"+i].theWidth = imageWidth[i];
mc_thumbnail["img"+i].theHeight = imageHeight[i];
}
//load the first big image
getFirst(picPath[0], linkURL[0], Name[0], description[0], subdescription[0], imagenumber[0], clientdescription[0], imagedescriptiontwo[0]);
}
//for loading first big image
function getFirst(thePicPath:String, theLinkURL:String, theImageName:String, theImageDesc:String, theImageSubdesc:String, theImageNum:String, theImageClientdesc:String, theImageDesctwo:String) {
_root.main.big_mc.big_mc_image.textLoader._visible=false;
//define empty movieclip, my_mc and preloader object
var empty = _root.main.big_mc.big_mc_image.createEmptyMovieClip("container", "100");
empty._x = 0;
empty._y = 0;
_root.main.big_mc.big_mc_image.my_mc = new MovieClipLoader();
preload = new Object();
_root.main.big_mc.big_mc_image.my_mc.addListener(preload);
// here preload begins
preload.onLoadStart = function(targetMC) {
_root.main.big_mc.big_mc_image.container._alpha =0;
_root.main.big_mc.big_mc_image.textLoader._visible=true;
};
preload.onLoadProgress = function(targetMC, lBytes, tBytes) {
percentage = int((lBytes / tBytes) * 100);
_root.main.big_mc.big_mc_image.textLoader.loader.gotoAndStop(percentage);
_root.main.big_mc.big_mc_image.textLoader.loader.autoSize=true;
_root.main.big_mc.big_mc_image.textLoader.loader.text = Math.round((lBytes/tBytes)*100);
};
preload.onLoadComplete = function(targetMC) {
changeColor();
_root.main.big_mc.big_mc_image.container._alpha =100;
_root.main.big_mc.big_mc_image.textLoader._visible = false;
};
//load image
_root.main.big_mc.big_mc_image.my_mc.loadClip(thePicPath, "_root.main.big_mc.big_mc_image.container");
_root.main.big_mc.onRelease = function() {
getURL(theLinkURL, "_blank");
};
var alfa:Number = 0;
var percentage:Number = 0;
var amountLoaded:Number = 0;
if (theImageName != undefined) {
_root.main.txtImageTitle.text=theImageName;
} else {
_root.main.txtImageTitle.text="";
}
if (theImageDesc != undefined) {
_root.main.txtImageDescription.text=theImageDesc;
} else {
_root.main.txtImageDescription.text="";
}
if (theImageSubdesc != undefined) {
_root.main.txtImageSubdescription.text=theImageSubdesc;
} else {
_root.main.txtImageSubdescription.text="";
}
if (theImageNum != undefined) {
_root.main.txtImageNumber.text=theImageNum;
} else {
_root.main.txtImageNumber.text="";
}
if (theImageClientdesc != undefined) {
_root.main.txtImageClientdescription.text=theImageClientdesc;
} else {
_root.main.txtImageClientdescription.text="";
}
if (theImageDesctwo != undefined) {
_root.main.txtImageDescriptiontwo.text=theImageDesctwo;
} else {
_root.main.txtImageDescriptiontwo.text="";
}
}
function changeColor():Void {
var colorComponent:Number = 500;
onEnterFrame = function () {
myColor = new Color(_root.main.big_mc.big_mc_image.container);
myColTr = new Object();
colorComponent += (100-colorComponent)/10;
myColTr = {ra:colorComponent, ga:colorComponent, ba:colorComponent};
myColor.setTransform(myColTr);
if (Math.round(colorComponent) == 100) {
delete this.onEnterFrame;
colorComponent=500;
}
};
}
I'm Trying to add the Lightbox effect to my Flash movie but I just keep hitting a brick wall (metaphorically speaking, things haven't got that bad...yet)
Anyway to cut to the chase here's how my site works, brace yourselves
my_xml_data.xml >loads into> my_flash_portfolio.swf >loads into> my_dynamic_php_content.inc loads into>mywebsite.php
I think he .inc file can be ignored really as a stumbling block as it just contains the .swf's which I have working fine.
Here's the current build:- http://proofing.freeline-gfx.co.uk/portfolio_pages/brochures_print.php ignore the silly button lol
What I'd like to add is the lightbox function when people click on the main image. I've read a few posts here explaining how to go about this but i'm still not able to get it working... well to be honest I'm not really sure how to implement it into my code.
Here's my Actionscript:- (well action script I purchased, jigged around to suit my design so it's probably a right mess, but it works!) Followed by my xml & php
// The following is for the thumbnails and big image
var myXML2:XML = new XML();
myXML2.ignoreWhite = true;
myXML2.load("portfolio.xml");
var Name:Array = Array();
var description:Array = Array();
var subdescription:Array = Array();
var imagenumber:Array = Array();
var clientdescription:Array = Array();
var imagedescriptiontwo:Array = Array();
var thumbPath:Array = Array();
var picPath:Array = Array();
var linkURL:Array = Array();
_root.currentCatID = 1;
_root.gapH = 0;
// horizontal space
myXML2.onLoad = function(success) {
displayPage();
};
function displayPage() {
mc_thumbnail._x=0;
delete rightBtn.onEnterFrame;
delete leftBtn.onEnterFrame;
//remove existing thumbnails
for (var i = 0; i<_root.numberOfItems; i++) {
removeMovieClip(mc_thumbnail["img"+i]);
}
xml = myXML2.firstChild;
_root.numberOfItems = xml.childNodes.length;
_root.numberInCategory = 0;
var itemsInThisCat:Array = Array();
for (var i = 0; i<_root.numberOfItems; i++) {
if (xml.childNodes[i].childNodes[9].childNodes[0].nodeValue == _root.currentCatID) {
_root.numberInCategory++;
itemsInThisCat.push(i);
}
}
var numberOfImgs:Number = itemsInThisCat.length;
var integer:Number = Math.floor(numberOfImgs/10);
var remainder:Number = numberOfImgs%10;
var maxRightClickTime:Number = 0;
//if total imgs over 10
if (remainder == 0) {
maxRightClickTime = integer-1;
} else {
maxRightClickTime = integer;
}
var leftClickTime:Number = 0;
var rightClickTime:Number = 0;
var currentTarget:Number = 0;
leftBtn._visible = false;
//if total imgs less than 10 or equal 10
if (numberOfImgs<11) {
rightBtn._visible = false;
} else {
rightBtn._visible = true;
}
currentTarget = 0;
rightBtn.onRelease = function() {
leftBtn._visible = true;
rightClickTime++;
if (rightClickTime == maxRightClickTime) {
rightBtn._visible = false;
}
currentTarget = 0-(mask._width+2)*rightClickTime;
this.onEnterFrame = function() {
diff = currentTarget-mc_thumbnail._y;
mc_thumbnail._y += diff/4;
};
};
leftBtn.onRelease = function() {
rightBtn._visible = true;
rightClickTime--;
leftClickTime++;
if (rightClickTime == 0) {
leftBtn._visible = false;
}
currentTarget = 0-(mask._width+6)*rightClickTime;
this.onEnterFrame = function() {
diff = currentTarget-mc_thumbnail._y;
mc_thumbnail._y += diff/4;
};
};
for (var i = 0; i<itemsInThisCat.length; i++) {
Name[i] = xml.childNodes[itemsInThisCat[i]].childNodes[0].childNodes[0].nodeValue;
description[i] = xml.childNodes[itemsInThisCat[i]].childNodes[1].childNodes[0].nodeValue;
subdescription[i] = xml.childNodes[itemsInThisCat[i]].childNodes[2].childNodes[0].nodeValue;
imagenumber[i] = xml.childNodes[itemsInThisCat[i]].childNodes[3].childNodes[0].nodeValue;
clientdescription[i] = xml.childNodes[itemsInThisCat[i]].childNodes[4].childNodes[0].nodeValue;
imagedescriptiontwo[i] = xml.childNodes[itemsInThisCat[i]].childNodes[5].childNodes[0].nodeValue;
thumbPath[i] = xml.childNodes[itemsInThisCat[i]].childNodes[6].childNodes[0].nodeValue;
picPath[i] = xml.childNodes[itemsInThisCat[i]].childNodes[7].childNodes[0].nodeValue;
linkURL[i] = xml.childNodes[itemsInThisCat[i]].childNodes[8].childNodes[0].nodeValue;
mc_thumbnail.img.duplicateMovieClip("img"+i, i);
mc_thumbnail.img0._x = 0;
mc_thumbnail.img0._y = 80;
mc_thumbnail.img1._x = 100;
mc_thumbnail.img1._y = 80;
mc_thumbnail.img2._x = 200;
mc_thumbnail.img2._y = 80;
mc_thumbnail.img3._x = 0;
mc_thumbnail.img3._y = 140;
mc_thumbnail.img4._x = 100;
mc_thumbnail.img4._y = 140;
mc_thumbnail.img5._x = 200;
mc_thumbnail.img5._y = 140;
if (thumbPath[i] == "undefined") {
mc_thumbnail["img"+i].enabled = false;
} else {
mc_thumbnail["img"+i].enabled = true;
mc_thumbnail["img"+i].img_mc.loadMovie(thumbPath[i]);
}
mc_thumbnail["img"+i].theImageName = Name[i];
mc_thumbnail["img"+i].theLinkURL = linkURL[i];
mc_thumbnail["img"+i].thePicPath = picPath[i];
mc_thumbnail["img"+i].theImageDesc = description[i];
mc_thumbnail["img"+i].theImageSubdesc = subdescription[i];
mc_thumbnail["img"+i].theImageNum = imagenumber[i];
mc_thumbnail["img"+i].theImageClientdesc = clientdescription[i];
mc_thumbnail["img"+i].theImageDesctwo = imagedescriptiontwo[i];
mc_thumbnail["img"+i].theWidth = imageWidth[i];
mc_thumbnail["img"+i].theHeight = imageHeight[i];
}
//load the first big image
getFirst(picPath[0], linkURL[0], Name[0], description[0], subdescription[0], imagenumber[0], clientdescription[0], imagedescriptiontwo[0]);
}
//for loading first big image
function getFirst(thePicPath:String, theLinkURL:String, theImageName:String, theImageDesc:String, theImageSubdesc:String, theImageNum:String, theImageClientdesc:String, theImageDesctwo:String) {
_root.main.big_mc.big_mc_image.textLoader._visible=false;
//define empty movieclip, my_mc and preloader object
var empty = _root.main.big_mc.big_mc_image.createEmptyMovieClip("container", "100");
empty._x = 0;
empty._y = 0;
_root.main.big_mc.big_mc_image.my_mc = new MovieClipLoader();
preload = new Object();
_root.main.big_mc.big_mc_image.my_mc.addListener(preload);
// here preload begins
preload.onLoadStart = function(targetMC) {
_root.main.big_mc.big_mc_image.container._alpha =0;
_root.main.big_mc.big_mc_image.textLoader._visible=true;
};
preload.onLoadProgress = function(targetMC, lBytes, tBytes) {
percentage = int((lBytes / tBytes) * 100);
_root.main.big_mc.big_mc_image.textLoader.loader.gotoAndStop(percentage);
_root.main.big_mc.big_mc_image.textLoader.loader.autoSize=true;
_root.main.big_mc.big_mc_image.textLoader.loader.text = Math.round((lBytes/tBytes)*100);
};
preload.onLoadComplete = function(targetMC) {
changeColor();
_root.main.big_mc.big_mc_image.container._alpha =100;
_root.main.big_mc.big_mc_image.textLoader._visible = false;
};
//load image
_root.main.big_mc.big_mc_image.my_mc.loadClip(thePicPath, "_root.main.big_mc.big_mc_image.container");
_root.main.big_mc.onRelease = function() {
getURL(theLinkURL, "_blank");
};
var alfa:Number = 0;
var percentage:Number = 0;
var amountLoaded:Number = 0;
if (theImageName != undefined) {
_root.main.txtImageTitle.text=theImageName;
} else {
_root.main.txtImageTitle.text="";
}
if (theImageDesc != undefined) {
_root.main.txtImageDescription.text=theImageDesc;
} else {
_root.main.txtImageDescription.text="";
}
if (theImageSubdesc != undefined) {
_root.main.txtImageSubdescription.text=theImageSubdesc;
} else {
_root.main.txtImageSubdescription.text="";
}
if (theImageNum != undefined) {
_root.main.txtImageNumber.text=theImageNum;
} else {
_root.main.txtImageNumber.text="";
}
if (theImageClientdesc != undefined) {
_root.main.txtImageClientdescription.text=theImageClientdesc;
} else {
_root.main.txtImageClientdescription.text="";
}
if (theImageDesctwo != undefined) {
_root.main.txtImageDescriptiontwo.text=theImageDesctwo;
} else {
_root.main.txtImageDescriptiontwo.text="";
}
}
function changeColor():Void {
var colorComponent:Number = 500;
onEnterFrame = function () {
myColor = new Color(_root.main.big_mc.big_mc_image.container);
myColTr = new Object();
colorComponent += (100-colorComponent)/10;
myColTr = {ra:colorComponent, ga:colorComponent, ba:colorComponent};
myColor.setTransform(myColTr);
if (Math.round(colorComponent) == 100) {
delete this.onEnterFrame;
colorComponent=500;
}
};
}