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/
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
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<item.length; i++) {
content["clip"+i].filters = [blur];//the blur is applied to each item individually
}
}
}
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._y = mask._height+2;
scroller._x = 20;
// 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*.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<(item.length-1)) {
itemNum++;
scrollToClip
}
pos1 = scroller.scroll_btn._x;
endPos = (0);//Move scroll bar and gallery this many items over
if (endPos>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<(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>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<(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>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<(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>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<(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>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<(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>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<(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>maxScroll) {
itemNum--;
} else {
myTween.stop();
myTween = new Tween(scroller.scroll_btn, "_x", easingType, pos1, endPos, speed, true);
}
myInterval();
};