I know it’s a ton of code but the problem lies only near the bottom
/*
Changing this file:
Change the pictures and thumbs arrays to match whatever images you want displayed
*/
// this include installs all available tweening prototypes found at http://laco.wz.cz/tween/
// these prototypes are installed via the Macromedia Extension Manager (which should have been installed with Flash)
// INITIAL SETUP
#include "lmc_tween_as1.as"
stop();
//======================================================================
// OBJECTS
// create an empty array menuElements
var menuElements = new Array();
// this array should hold the library linkage names of all photos to be used in the movie
var pictures = new Array();
pictures[0] = "pic1";
pictures[1] = "pic2";
// pictures[2] = "image3_import.jpg";
// pictures[3] = "image4_import.jpg";
// this array should hold the library linkage names of all thumbs to be used in the movie
var thumbs = new Array();
thumbs[0] = "th1";
thumbs[1] = "th2";
// thumbs[2] = "thumb3.jpg";
// thumbs[3] = "thumb4.jpg";
//======================================================================
// CONSTANTS
// CENTER_X returns the x coordinate of the middle of the stage
var CENTER_X = Stage.width / 2;
// CENTER_Y returns a y coordinate 50 pixels less than the bottom of the stage
var CENTER_Y = Stage.height - 50;
// MENU_SIZE returns the amount of photos used in our pictures array, in this case we have 10 photos
var MENU_SIZE = pictures.length;
//======================================================================
// VARIABLES
_global.depthCount = 0;
// set the spacing between each thumbnail
var menuSpacing = 6;
//======================================================================
// PROTOTYPES
// this prototype (drawRoundRect) will create the mask area which will house our photos
MovieClip.prototype.drawRoundRect = function(w, h, r, st, sc, fc) {
if(st != 0) this.lineStyle(st, sc);
this.beginFill(fc);
this.moveTo(r, 0);
this.lineTo(w-r, 0);
this.curveTo(w, 0, w, r);
this.lineTo(w, h-r);
this.curveTo(w, h, w-r, h);
this.lineTo(r, h);
this.curveTo(0, h, 0, h-r);
this.lineTo(0, r);
this.curveTo(0, 0, r, 0);
this.endFill();
}
//======================================================================
// FUNCTIONS
//this function figures out where to load the photos based on where the tool bar is placed on the stage
function position(){
var barX = _root.preview_bar._x;
var barY = _root.preview_bar._y;
imageHolder._x = -barX;
imageHolder._y = -barY;
trace("toolbar x is "+barX+" , "+"toolbar y is "+barY);
}
//var stageX = Stage.width;
//var stageY = Stage.height;
// this function uses the pre-determined global variable depthCount to increment depths for movieclips by 1
function nextDepth() {
_global.depthCount++;
return _global.depthCount;
}
function loadImage(imageName) {
// the following will alpha in each photo into the imageHolder movieclip when a thumb is clicked
with(imageHolder) {
_alpha = 0;
// this is one of the lacos tweening prototypes used to fade in the photos when loaded from the library
alphaTo(100, 0, "easeOutQuad", 0);
}
// the next line commented out below is the old version of loading the images externally
//imageHolder.loadMovie(imageName);
// now here we are actually attaching the movieclip to be used from the library instead of loading externally
imageHolder.attachMovie(imageName,imageName,nextDepth());
// the rest of the code in this function isn't really being used, since no visual loader is being presented to the user. Also since the movieclips are being attached from the library as opposed to loaded externally, it renders this code useless.
imageHolder._parent.onEnterFrame = function() {
var total = Math.round(imageHolder.getBytesTotal() / 1024);
var loaded = Math.round(imageHolder.getBytesLoaded() / 1024);
if(total != 0 && loaded >= total) {
imageHolder.setMask(imageMask);
delete this.onEnterFrame;
}
};
}
//======================================================================
// GENERAL CODE
// create an empty movieclip named imageMask - this will mask off the loaded photos from the library
createEmptyMovieClip("imageMask", nextDepth());
// create an empty movieclip named imageHolder - this will hold the loaded photos from the library
createEmptyMovieClip("imageHolder", nextDepth());
//trigger function "position" so the photos are loaded at the correct x/y coordinates
position();
// create the actual shape of the mask to be used in the movieclip created above (imageMask)
imageMask.drawRoundRect(550, 320, 0, 0, 0xFFFFFF, 0x000000);
// initially set the mask opacity to 0%
imageMask._alpha = 0;
// load in the first photo from the pictures array using the above loadImage function
loadImage(pictures[0]);
// create a variable that will hold the location of the thumbnail container clip
menuHolder = tool_bar.thumb_ctr;
// this function is what controls the rollover movement of the thumbnail menu - basically it's just scaling up the size of whatever thumbnail the mouse is over depending on how close it is to the center of that particular thumbnail
menuHolder.onEnterFrame = function() {
var width = 0;
for(i = 0; i < MENU_SIZE; i++) {
var xxm = menuElements*._xmouse;
var yym = menuElements*._ymouse;
var xm = Math.sqrt(xxm * xxm + yym * yym);
if(xm < 50) {
menuElements*._xscale = menuElements*._yscale += ((200 - xm) - menuElements*._yscale) / 3;
} else {
menuElements*._xscale = menuElements*._yscale += (100 - menuElements*._yscale) / 3;
}
width += menuElements*._width;
}
width += (MENU_SIZE - 1) * menuSpacing;
var xpos = Math.round(CENTER_X - width / 2);
for(i = 0; i < MENU_SIZE; i++) {
xpos += menuElements[i - 1]._width / 2 + menuSpacing + menuElements*._width / 2;
menuElements*._x = xpos;
}
};
// loop through this as many times as there are photos in the pictures arrary
for(i = 0; i < MENU_SIZE; i++) {
var activebtn:MovieClip;
this.onEnterFrame = function(){
trace("hello");
}
// attach the menuItem movieclip from the library - this serves as the place holder for each thumbnail photo
menuItem = menuHolder.attachMovie("menuItem", "menu" + i, i);
// position each thumbnail accordingly
menuItem._x = CENTER_X - ((MENU_SIZE - 1) * menuSpacing) + i;
// the commented out line below is the old version where the thumbs were loaded externally
//menuItem.holder_mc.loadMovie(thumbs*);
// attach each thumbnail movieclip as there are in the thumbs array - this replaces the above method of external loading
menuItem.holder_mc.attachMovie(thumbs*,thumbs*,nextDepth());
// create a unique id for each thumbnail so it knows which photo to load with what thumbnail
menuItem.id = i;
// play menuitem rollover effect
menuItem.onRollOver = function() {
this._parent.selected = this;
this.gotoAndPlay("over");
};
// play menuitem rollout effect
menuItem.onRollOut = function() {
if (this != activeBtn);
this.gotoAndPlay("out");
};
// on release trigger the imageHolder function and pass in the unique id argument
menuItem.onRelease = function() {
imageHolder.alphaTo(0, 0.5, "easeOutQuad", 0, {func: loadImage, args: [pictures[this.id]]});
//update variable activeBtn to show which thumb has been clicked
trace(this.id);
activebtn = this;
trace("active button is "+activebtn);
if(this==activebtn){
activebtn.attachMovie("border","border",99,{_x:-25,_y:-15});
}else{
this.border.removeMovieClip();
}
};
// append however many menuItems were created to the menuElements array (used for the menuHolder function)
menuElements.push(menuItem);
}
tool_bar.swapDepths(100);
//=========================
When clicking on “menuItem” it attaches a border mc to it (which I’m using as the clicked on button indicator). Problem is any thumb i click on attaches this border to itself. I want it so say i click button 1 it appends a border to it, then if i click on button 2 the border appends to that button and is removed from the button 1.
Thx
