Jump to content
GreenSock

sorciereus

Infinite Image Gallery Scroller controlled by left/right arrows

Recommended Posts

Hello GreenSock community! I have a question for you. I've been working on a image scroller of some images, and got this working how'd I'd like. However my client has now requested an infinite scrolling gallery. I've done some research and found a script that seems to have the potential to do what I want to do, however it would need some modifications to behave as the client has requested. So right now this script auto scrolls a row of images, adding the appropriate image on to the end of the row with each scroll. I'd like to modify this to have it not auto scroll, but be controlled by a left and right arrow, and be scrollable to either the left or right. If anyone could help me out that would be great. 

 

Here is the code I have so far:

 

import com.greensock.*;


var startX:Number=parent_mc.x;
var distanceToScroll:Number = 44;
var lastItemX:Number = parent_mc.width








function scrollIt() {
TweenMax.to(parent_mc, .54, {x:String(distanceToScroll), onComplete:resetDelay});
}




function resetDelay(){
TweenLite.delayedCall(.5, reset);
}




function reset() {
//move all clips over to the right


for each (var mc in parent_mc) {


mc.x+=distanceToScroll;
if (mc.x >= lastItemX) {


mc.x-= lastItemX;


}
}
//shift the parent so it looks like nothing moved
parent_mc.x = startX
//scroll it again after 1 second
TweenLite.delayedCall(.2, scrollIt);
}


btn.addEventListener(MouseEvent.CLICK, toggleMask)


function toggleMask(e:Event = null):void{
parent_mc.mask = (parent_mc.mask) ? null : mask_mc


}


toggleMask();


TweenLite.delayedCall(1, scrollIt);

Here is it moving backward

 

import com.greensock.*;


var startX:Number=mask_mc.x;
var distanceToScroll:Number = 44;
var lastItemX:Number = parent_mc.width


parent_mc.x = startX




function scrollIt() {
TweenMax.to(parent_mc, .54, {x:String(-distanceToScroll), onComplete:resetDelay});
}




function resetDelay(){
TweenLite.delayedCall(.5, reset);
}




function reset() {
//move all clips over to the right


for each (var mc in parent_mc) {


mc.x-=distanceToScroll;
if (mc.x < 0) {


mc.x+=lastItemX;


}
}
//shift the parent so it looks like nothing moved
parent_mc.x = startX
//scroll it again after 1 second
TweenLite.delayedCall(.2, scrollIt);
}


btn.addEventListener(MouseEvent.CLICK, toggleMask)


function toggleMask(e:Event = null):void{
parent_mc.mask = (parent_mc.mask) ? null : mask_mc


}


toggleMask();


TweenLite.delayedCall(1, scrollIt);

Let me know how to make this scroll on onclick only and left and right - I feel like it's close... 

Link to comment
Share on other sites

well the reason it is scrolling automatically is because of the delayedCall()'s that are calling the scrollIt() function like:

TweenLite.delayedCall(1, scrollIt);

To trigger it with buttons you could do something like: 

next_btn.addEventListener(MouseEvent.CLICK, next)

function next(e:MouseEvent):void {
  scrollIt()
}

As for making it work with next and previous and going any further with this you'll have to explore some more. Its just not feasible for us to be working on your project in this capacity.

Link to comment
Share on other sites

Here is the solution in case anyone wants to use it - pretty nifty little infinite scrolling gallery

 

 

import com.greensock.*;


var startX:Number=parent_mc.x;
var distanceToScroll:Number = 345;
var lastItemX:Number = parent_mc.width


parent_mc.x = startX




function scrollIt() {
TweenMax.to(parent_mc, .54, {x:String(distanceToScroll), onComplete:resetDelay});
}




function resetDelay(){
TweenLite.delayedCall(.1, reset);
}




function reset() {
//move all clips over to the right


for each (var mc in parent_mc) {


mc.x+=distanceToScroll;
if (mc.x >= lastItemX) {


mc.x-= lastItemX;


}
}
//shift the parent so it looks like nothing moved
parent_mc.x = startX
//scroll it again after 1 second
//TweenLite.delayedCall(.2, scrollIt);
}




function resetDelay1(){
TweenLite.delayedCall(0, reset1);
}




function reset1() {
//move all clips over to the right


for each (var mc in parent_mc) {


mc.x-=distanceToScroll;
if (mc.x < 0) {


mc.x+=lastItemX;


}
}
//shift the parent so it looks like nothing moved
parent_mc.x = startX
//scroll it again after 1 second
//TweenLite.delayedCall(.2, scrollIt);
}


btn.addEventListener(MouseEvent.CLICK, toggleMask)


function toggleMask(e:Event = null):void{
parent_mc.mask = (parent_mc.mask) ? null : mask_mc


}


function scrollItr() {
TweenMax.to(parent_mc, .54, {x:String(-distanceToScroll), onComplete:resetDelay1});
}


toggleMask();


next_btn.addEventListener(MouseEvent.CLICK, next)


function next(e:MouseEvent):void {
  scrollIt()
}


previous_btn.addEventListener(MouseEvent.CLICK, next1)


function next1(e:MouseEvent):void {
  scrollItr()
}
Link to comment
Share on other sites

Hi. One more question.. Any clue why it seems to add/loose pixels after clicking the arrows for awhile? 

Link to comment
Share on other sites

Nvrmind I resolved that issue as well - it's just important that your movieclips within parent_mc are exactly to the pixel edge to edge. 

Link to comment
Share on other sites

It looks like you're using relative values to move your parent_mc there; I would expect it to break if you click the next/previous button quickly (i.e. less than .54 second gap between clicks). It's the same problem referred to in your other topic.

Link to comment
Share on other sites

Here is my cleaned up code. I saw about the relative tweens, however was a bit confused how to pass a non relative tween as a variable to the function? 

 

Also is it possible to implement this to have a seperate movieclip vertical infinite scrolling from the same button click? You would think it's as easy as changing x values to y and width to height and creating a vertical movieclip, but it isn't. I feel like I've seen ways to do this utilizing timelinelite or timelinelite as well. Any links to threads? 

 

You'll have to forgive me I'm only less than a year doing Advanced AS3 and is my first Object Oriented programming language that I've learned. I appreciate the assistance I receive on these forums.  

 

That said, Could BlitMask be a good solution to this? 

 

var startX:Number=parent_mc.x;
var distanceToScroll:Number = 345;
var lastItemX:Number = parent_mc.width
var tweenFlag:Boolean = false;

parent_mc.x = startX;


function scrollIt() {
TweenMax.to(parent_mc, .54, {x:String(distanceToScroll), onComplete:reset});
}


function reset() {
//move all clips over to the right
for each (var mc in parent_mc) {

mc.x+=distanceToScroll;
if (mc.x >= lastItemX) {

mc.x-= lastItemX;


}
}
//shift the parent so it looks like nothing moved
parent_mc.x = startX
var tweenFlag:Boolean = false;

}

function reset1() {
//move all clips over to the right


for each (var mc in parent_mc) {


mc.x-=distanceToScroll;
if (mc.x < 0) {


mc.x+=lastItemX;


}
}
//shift the parent so it looks like nothing moved
parent_mc.x = startX;
var tweenFlag:Boolean = false;
}

function scrollItr() {
TweenMax.to(parent_mc, .54, {x:String(-distanceToScroll), onComplete:reset1});
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×