# Horizontal gallery scroller

**URL:** <https://forum.kirupa.com/t/horizontal-gallery-scroller/291266>\
**Category:** flash\
**Created:** [June 26, 2009, 11:32pm UTC](https://forum.kirupa.com/t/horizontal-gallery-scroller/291266 "2009-06-26T23:32:53Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![carbone6](https://avatars.discourse-cdn.com/v4/letter/c/41988e/32.png) [@carbone6](https://forum.kirupa.com/u/carbone6)\
**Post date:** [June 26, 2009, 11:32pm UTC](https://forum.kirupa.com/t/horizontal-gallery-scroller/291266/1 "2009-06-26T23:32:53Z")

</div>

Hi,  
I’ve got a horizontal gallery scroller that works great.  
The scroll bar snaps the animation to the closest image. You can view an example here:  
[http://hiimmark.com/scroller/](http://hiimmark.com/scroller/)  
I’ve added the blue buttons to try and scroll directly to individual images which works fine. But once i have arrived at the image the Left & Right buttons don’t function correctly to scroll to the next and previous image.  
You can download my fla here:  
[http://hiimmark.com/scroller/HorizontalScrollerSlideshow.fla](http://hiimmark.com/scroller/HorizontalScrollerSlideshow.fla)  
Below is the AS.

// 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  
import mx.transitions.Tween;  
import mx.transitions.easing.\*;  
import flash.filters.BlurFilter;

// Hide everything until the XML has been loaded  
this.\_visible = 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&lt;item.length; i++) {
			content["clip"+i].filters = [blur];//the blur is applied to each item individually
		}
	}
}

this.onEnterFrame = function() {
	movecontent();
};

function scrollandpause() {
	if (itemNum&lt;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&gt;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&lt;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&gt;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&lt;(item.length-1)) {
		itemNum++;
	}
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*itemNum;
	if (endPos&gt;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&lt;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._y = mask._height+2;
	scroller._x = 20;

	// Attach images
	for (var i = 0; i&lt;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*.attributes.link;
		item_mc.image = item*.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);

```
// b1 next button
b1.onPress = function() {
	clearInterval(intervalID);
	if (itemNum&lt;(item.length-1)) {
		itemNum++;
		scrollToClip
	}
	pos1 = scroller.scroll_btn._x;
	endPos = (0);//Move scroll bar and gallery this many items over
	if (endPos&gt;maxScroll) {
		itemNum--;
	} else {
		myTween.stop();
		myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	}
	myInterval();
};

// b2 next button
b2.onPress = function() {
	clearInterval(intervalID);
	if (itemNum&lt;(item.length-1)) {
		itemNum++;
		scrollToClip
	}
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*1;//Move scroll bar and gallery this many items over
	if (endPos&gt;maxScroll) {
		itemNum--;
	} else {
		myTween.stop();
		myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	}
	myInterval();
};

// b3 next button
b3.onPress = function() {
	clearInterval(intervalID);
	if (itemNum&lt;(item.length-1)) {
		itemNum++;
		scrollToClip
	}
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*2;//Move scroll bar and gallery this many items over
	if (endPos&gt;maxScroll) {
		itemNum--;
	} else {
		myTween.stop();
		myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	}
	myInterval();
};

	// b4 next button
b4.onPress = function() {
	clearInterval(intervalID);
	if (itemNum&lt;(item.length-1)) {
		itemNum++;
		scrollToClip
	}
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*3;//Move scroll bar and gallery this many items over
	if (endPos&gt;maxScroll) {
		itemNum--;
	} else {
		myTween.stop();
		myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	}
	myInterval();
};

	// b5 next button
b5.onPress = function() {
	clearInterval(intervalID);
	if (itemNum&lt;(item.length-1)) {
		itemNum++;
		scrollToClip
	}
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*4;//Move scroll bar and gallery this many items over
	if (endPos&gt;maxScroll) {
		itemNum--;
	} else {
		myTween.stop();
		myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	}
	myInterval();
};

	// b6 next button
b6.onPress = function() {
	clearInterval(intervalID);
	if (itemNum&lt;(item.length-1)) {
		itemNum++;
		scrollToClip
	}
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*5;//Move scroll bar and gallery this many items over
	if (endPos&gt;maxScroll) {
		itemNum--;
	} else {
		myTween.stop();
		myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	}
	myInterval();
};

	// b7 next button
b7.onPress = function() {
	clearInterval(intervalID);
	if (itemNum&lt;(item.length-1)) {
		itemNum++;
		scrollToClip
	}
	pos1 = scroller.scroll_btn._x;
	endPos = (scroller.scroll_area._width/item.length)*6;//Move scroll bar and gallery this many items over
	if (endPos&gt;maxScroll) {
		itemNum--;
	} else {
		myTween.stop();
		myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
	}
	myInterval();
};
```