Flashlite buttons- Problem with rollout

George-TCC
George-TCC used Ask the Experts™
on
Hi,
I have a 7 buttons that are exactly next to each other. (No space in between them)
When the buttons are clicked on the colour is to tween to grey. It is supposed to stay grey even when you roll over the other buttons. Unfortunately when the button next to it gets rolled over it changes from grey back to the original colour.
You can see my fla here.
The buttons are in the bottom black bar.
hiimmark.com/scroller/scroller.zip
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2009

Commented:
You have to post the whole source otherwise the .fla will not export.

Author

Commented:
Ok i've updated the zip file
http://www.hiimmark.com/scroller/scroller.zip

Top Expert 2009
Commented:
I do not want to repost the .fla, but anyway you should know where this code should go.
Just replace your whole code of that frame with this.

// Scaling Mode
Stage.scaleMode = "noScale";
Stage.align = "TL";
 
// Total width and height of this movieclip
movieClipWidth = Stage.width;
movieClipHeight = Stage.height;
 
// Import Tween and Easing classes and Blur filters
#include "lmc_tween.as"
import gs.TweenLite;
import mx.transitions.Tween;
import mx.transitions.easing.*;
import flash.filters.BlurFilter;
 
OverwriteManager.init(); 
 
// Hide everything until the XML has been loaded
this._visible = false;
 
b1.isRolledOver = false; // Set all to not rolled over
b2.isRolledOver = false;
b3.isRolledOver = false;
b4.isRolledOver = false;
b5.isRolledOver = false;
b6.isRolledOver = false;
b7.isRolledOver = false;
 
// Initialise the functions and variables
function initialise() {
	if (scrollerOn == "false") {
		scroller._visible = false;
	}
	this._visible = true;
 
	if (easingType == "Elastic") {
		easingType = Elastic.easeOut;
	} else if (easingType == "Strong") {
		easingType = Strong.easeOut;
	} else if (easingType == "Regular") {
		easingType = Regular.easeOut;
	} else if (easingType == "Bounce") {
		easingType = Bounce.easeOut;
	} else if (easingType == "Back") {
		easingType = Back.easeOut;
	} else if (easingType == "None") {
		easingType = None.easeOut;
	} else {
		easingType = Strong.easeOut;
	}
	itemNum = 0;
 
 
 
 
	// SCROLLER
	scroller.scroll_btn._width = scroller.scroll_area._width/(content.myWidth/mask._width);// The scroll_btn is sized based on the amount of content
	maxMove = scroller.scroll_area._width-scroller.scroll_btn._width;// The distance the scroll_btn can move
	maxScroll = Math.ceil(maxMove);	
	
	function movecontent() {
		targetX = -scroller.scroll_btn._x*((content.myWidth-mask._width)/maxMove);// The movement of the content is calculated based on the movement of the scroll_btn
		oldX = content._x;
		content._x += Math.round(targetX-content._x);
 
		if (blurOn == "true") {// Applies Blur
			movement = oldX-content._x;
			blur = new BlurFilter(15, 0, 1);
			blur.blurX = Math.floor(Math.abs((movement*blurAmount)/3));// adjusts the blur based on the distance
 
			for (i=0; i<item.length; i++) {
				content["clip"+i].filters = [blur];//the blur is applied to each item individually
			}
		}
		//If scroll bar is at certain position make bottom images grey
		if (!b1.isRolledOver) {
			if (itemNum == 0) {
				TweenLite.to(b1,0.6,{tint:0xC5C5C5});
			} else {
				TweenLite.to(b1,0.6,{tint:0x000000});
			}
		}
		if (!b2.isRolledOver) {
			if (itemNum == 1) {
				TweenLite.to(b2,0.6,{tint:0xC5C5C5});
			} else {
				TweenLite.to(b2,0.6,{tint:0x000000});
			}
		}
		if (!b3.isRolledOver) {
			if (itemNum == 2) {
				TweenLite.to(b3,0.6,{tint:0xC5C5C5});
			} else {
				TweenLite.to(b3,0.6,{tint:0x000000});
			}
		}
		if (!b4.isRolledOver) {
			if (itemNum == 3) {
				TweenLite.to(b4,0.6,{tint:0xC5C5C5});
			} else {
				TweenLite.to(b4,0.6,{tint:0x000000});
			}
		}
		if (!b5.isRolledOver) {
			if (itemNum == 4) {
				TweenLite.to(b5,0.6,{tint:0xC5C5C5});
			} else {
				TweenLite.to(b5,0.6,{tint:0x000000});
			}
		}
		if (!b6.isRolledOver) {
			if (itemNum == 5) {
				TweenLite.to(b6,0.6,{tint:0xC5C5C5});
			} else {
				TweenLite.to(b6,0.6,{tint:0x000000});
			}
		}
		if (!b7.isRolledOver) {
			if (itemNum == 6) {
				TweenLite.to(b7,0.6,{tint:0xC5C5C5});
			} else {
				TweenLite.to(b7,0.6,{tint:0x000000});
			}
		}
	}
 
	
	this.onEnterFrame = function() {
		movecontent();
	};
 
	function scrollandpause() {
		if (itemNum<item.length) {
			itemNum = 1-Math.floor(content._x/itemWidth);// Calculates which is the next item to scroll to
		} else {
			itemNum = 0;
		}
		pos1 = scroller.scroll_btn._x;// current position of scroll_btn
		endPos = (scroller.scroll_area._width/item.length)*itemNum;// new position of scroll_btn
 
		if (endPos>maxScroll) {
			itemNum = 0;
			endPos = (scroller.scroll_area._width/item.length)*itemNum;// new position of scroll_btn
		}
		myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
 
	}
 
	function myInterval() {
		if (autoScroll == "true") {
			intervalID = setInterval(this, "scrollandpause", pauseAmount);
		}
	}
 
	myInterval();
 
	// This snaps the content to the closest image when you finish scrolling
	function scrollToClip() {
		if (snapOn == "true") {
			itemNum = -Math.round(content._x/itemWidth);
			pos1 = scroller.scroll_btn._x;
			endPos = (scroller.scroll_area._width/item.length)*itemNum;
 
			if (itemNum<item.length) {
				myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, snapSpeed, true);
			}
		} else {
			itemNum = -Math.ceil(content._x/itemWidth);
		}
	}
 
	// scroll_btn
	scroller.scroll_btn.onPress = function() {
		this.gotoAndStop(2);
		myTween.stop();
		clearInterval(intervalID);
		scroller.scroll_btn.startDrag(0,maxMove,0,0);
	};
 
	scroller.scroll_btn.onRelease = scroller.scroll_btn.onReleaseOutside=function () {
		this.gotoAndStop(1);
		stopDrag();
		scrollToClip();
		myInterval();
	};
 
	// prev button
	scroller.prev.onPress = function() {
		clearInterval(intervalID);
		if (itemNum>0) {
			itemNum--;
		}
		pos1 = scroller.scroll_btn._x;
		endPos = (scroller.scroll_area._width/item.length)*itemNum;
 
		myTween.stop();
		myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
 
		myInterval();
 
	};
 
	// next button
	scroller.next.onPress = function() {
		clearInterval(intervalID);
		if (itemNum<(item.length-1)) {
			itemNum++;
		}
		pos1 = scroller.scroll_btn._x;
		endPos = (scroller.scroll_area._width/item.length)*itemNum;
		if (endPos>maxScroll) {
			itemNum--;
		} else {
			myTween.stop();
			myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
		}
		myInterval();
	};
}
 
// Image Preloader
myClip = new MovieClipLoader();
preload = new Object();
myClip.addListener(preload);
 
preload.onLoadStart = function(targetMC) {
	targetMC._parent.preloader._visible = true;
};
 
preload.onLoadProgress = function(targetMC, lBytes, tBytes) {
	//targetMC._parent.p_txt.text = "loading..."+Math.round((lBytes/tBytes)*100)+"%";
};
 
preload.onLoadComplete = function(targetMC) {
	targetMC._parent.preloader._visible = false;
};
 
preload.onLoadInit = function(targetMC) {
	targetMC._x = itemWidth/2-targetMC._width/2;
	targetMC._y = itemHeight/2-targetMC._height/2;
};
 
// loadXML function
function loadXML(loaded) {
	if (loaded) {
 
		item = this.firstChild.childNodes;// This collects the items from the xml into the item variable
 
		// Assign the variables from the XML
		autoScroll = this.firstChild.attributes.autoScroll;
		pauseAmount = this.firstChild.attributes.pauseAmount;
		snapOn = this.firstChild.attributes.snapOn;
		snapSpeed = this.firstChild.attributes.snapSpeed;
		speed = this.firstChild.attributes.speed;
		blurOn = this.firstChild.attributes.blurOn;
		blurAmount = this.firstChild.attributes.blurAmount;
		scrollerOn = this.firstChild.attributes.scrollerOn;
		easingType = this.firstChild.attributes.easingType;
		urlTarget = this.firstChild.attributes.urlTarget;
		itemsPerScreen = this.firstChild.attributes.itemsPerScreen;
 
		// Set the sizes and positions
		if (scrollerOn == "true") {
			mask._height = movieClipHeight-20;
		} else {
			mask._height = movieClipHeight;
		}
		mask._width = movieClipWidth;
 
		itemWidth = mask._width/itemsPerScreen;
		itemHeight = mask._height;
 
		content.myWidth = itemWidth*item.length;
		if (content.myWidth<mask._width) {
			scroller._visible = false;
			scrollerOn = "false";
			mask._height = movieClipHeight;
			itemHeight = mask._height;
		}
		//scroller.scroll_area._width = mask._width-40;  
		//scroller.next._x = mask._width-22;
		scroller.scroll_area._width = 850;//change width of scroll bar here
		scroller.prev._x = 122;
		scroller.prev._y = 240;
		scroller.next._x = 827;
		scroller.next._y = 260;
		scroller._y = 100;
		scroller._x = 50;
 
		//Previous & Next rollover buttons 
		scroller.prev.onRollOver = function() {
			TweenLite.to(scroller.prev.prev2, 0.8,{_alpha:100});
		};
		scroller.prev.onRollOut = function() {
			TweenLite.to(scroller.prev.prev2, 0.6,{_alpha:0});
		};
		scroller.next.onRollOver = function() {
			TweenLite.to(scroller.next.next2, 0.8,{_alpha:100});
		};
		scroller.next.onRollOut = function() {
			TweenLite.to(scroller.next.next2, 0.6,{_alpha:0});
		};
		//width & position of bottom row buttons
		//Making each button an equal length of the scroll bar depending on how many items there are. In this case 7 items
		b1._width = scroller._width/7;
		b2._width = scroller._width/7;
		b3._width = scroller._width/7;
		b4._width = scroller._width/7;
		b5._width = scroller._width/7;
		b6._width = scroller._width/7;
		b7._width = scroller._width/7;
 
		/*
		b1._height = 4;
		b2._height = 4;
		b3._height = 4;
		b4._height = 4;
		b5._height = 4;
		b6._height = 4;
		b7._height = 4;
		*/
 
		//Moving the position to start all buttons 50px from the left then moving each button from there on over the width of 1 button
		b1._x = 50;
		b2._x = b1._width+50;
		b3._x = b1._width*2+50;
		b4._x = b1._width*3+50;
		b5._x = b1._width*4+50;
		b6._x = b1._width*5+50;
		b7._x = b1._width*6+50;
 
		b1._y = 587;
		b2._y = 587;
		b3._y = 587;
		b4._y = 587;
		b5._y = 587;
		b6._y = 587;
		b7._y = 587;
 
		// Attach images
		for (var i = 0; i<item.length; i++) {
			var item_mc = content.attachMovie("clip", "clip"+i, i);
			item_mc.mask._width = itemWidth;
			item_mc.mask._height = itemHeight;
			item_mc._x = itemWidth*i;
 
			item_mc.preloader._y = item_mc.mask._height/2;
			item_mc.preloader._x = item_mc.mask._width/2;
			item_mc.preloader.inner.colour.cacheAsBitmap = true;
			item_mc.preloader.inner.mask.cacheAsBitmap = true;
			item_mc.preloader.inner.colour.setMask(item_mc.preloader.inner.mask);
 
			item_mc.link = item[i].attributes.link;
			item_mc.image = item[i].attributes.image;
 
			item_mc.image_mc._lockroot = true;
 
			myClip.loadClip(item_mc.image,item_mc.image_mc);// Loads the image
 
			item_mc.onRelease = function() {
				getURL(this.link, urlTarget);
			};
		}
		initialise();
	}
}
 
 
 
//This loads the xml data, then calls the loadXML function.    
myXml = new XML();
myXml.ignoreWhite = true;
myXml.onLoad = loadXML;
 
if (_root.xmlURL == undefined) {
	_root.xmlURL = "items.xml";
}
function isLocalPlayback() {
	return _url.indexOf("file") == 0;
}
if (isLocalPlayback()) {
	cacheRefresh = "";
} else {
	cacheRefresh = "?"+Math.random();
}
myXml.load(_root.xmlURL+cacheRefresh);
 
 
// b2 next button
b1.onRelease = function() {
	clearInterval(intervalID);
	itemNum = 0;
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*0;//Move scroll bar and gallery this many items over
	myTween.stop();
	myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	myInterval();
	this.isRolledOver = false;
};
 
 
// b2 next button
b2.onRelease = function() {
	clearInterval(intervalID);
	itemNum = 1;
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length*1)*1;//Move scroll bar and gallery this many items over
	myTween.stop();
	myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	myInterval();
	this.isRolledOver = false;
};
 
 
 
// b3 next button
b3.onRelease = function() {
	clearInterval(intervalID);
	itemNum = 2;
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*2;//Move scroll bar and gallery this many items over
	myTween.stop();
	myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	myInterval();
	this.isRolledOver = false;
};
 
 
// b4 next button
b4.onRelease = function() {
	clearInterval(intervalID);
	itemNum = 3;
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*3;//Move scroll bar and gallery this many items over
	myTween.stop();
	myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	myInterval();
	this.isRolledOver = false;
};
 
 
// b5 next button
b5.onRelease = function() {
	clearInterval(intervalID);
	itemNum = 4;
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*4;//Move scroll bar and gallery this many items over
	myTween.stop();
	myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	myInterval();
	this.isRolledOver = false;
};
 
 
// b6 next button
b6.onRelease = function() {
	clearInterval(intervalID);
	itemNum = 5;
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*5;//Move scroll bar and gallery this many items over
	myTween.stop();
	myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	myInterval();
	this.isRolledOver = false;
};
 
 
// b7 next button
b7.onRelease = function() {
	clearInterval(intervalID);
	itemNum = 6;
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*6;//Move scroll bar and gallery this many items over
	myTween.stop();
	myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	myInterval();
	this.isRolledOver = false;
};
 
 
b1.onRollOver = function() {
	this.isRolledOver = true;
	TweenLite.to(b1,0.6,{tint:0xC5C5C5});
};
 
b1.onRollOut = function() {
	this.isRolledOver = false;
	TweenLite.to(b1,0.6,{tint:0x000000});
};
 
b2.onRollOver = function() {
	this.isRolledOver = true;
	TweenLite.to(b2,0.6,{tint:0xC5C5C5});
};
 
b2.onRollOut = function() {
	this.isRolledOver = false;
	TweenLite.to(b2,0.6,{tint:0x000000});
};
b3.onRollOver = function() {
	this.isRolledOver = true;
	TweenLite.to(b3,0.6,{tint:0xC5C5C5});
};
b3.onRollOut = function() {
	this.isRolledOver = false;
	TweenLite.to(b3,0.6,{tint:0x000000});
};
b4.onRollOver = function() {
	this.isRolledOver = true;
	TweenLite.to(b4,0.6,{tint:0xC5C5C5});
};
b4.onRollOut = function() {
	this.isRolledOver = false;
	TweenLite.to(b4,0.6,{tint:0x000000});
};
b5.onRollOver = function() {
	this.isRolledOver = true;
	TweenLite.to(b5,0.6,{tint:0xC5C5C5});
};
b5.onRollOut = function() {
	this.isRolledOver = false;
	TweenLite.to(b5,0.6,{tint:0x000000});
};
b6.onRollOver = function() {
	this.isRolledOver = true;
	TweenLite.to(b6,0.6,{tint:0xC5C5C5});
};
b6.onRollOut = function() {
	this.isRolledOver = false;
	TweenLite.to(b6,0.6,{tint:0x000000});
};
b7.onRollOver = function() {
	this.isRolledOver = true;
	TweenLite.to(b7,0.6,{tint:0xC5C5C5});
};
b7.onRollOut = function() {
	this.isRolledOver = false;
	TweenLite.to(b7,0.6,{tint:0x000000});
};

Open in new window

Author

Commented:
Thanks, that's great.
Can you explain your solution to me please?
Top Expert 2009

Commented:
I simply made each button handle it's own rollover event.
Then clashes will not happen when one button control another button's roll over state.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial