A Flash Developer Resource Site

Results 1 to 7 of 7

Thread: Continuous Side Scrolling Gallery

  1. #1
    Junior Member
    Join Date
    May 2010
    Posts
    4

    Continuous Side Scrolling Gallery

    Hi peeps,

    I'm trying to create the look at the following website:

    http://www.johnwrightphoto.com/

    Once it's loaded click the screen and at the bottom left go to portfolios. Click on one of them and you'll see a slow continuous side scrolling gallery. I've got everything working apart from when I mouse off it continues at the speed at which I left it. I would like it to slow to a default speed and continue scrolling as in the example I've given.

    I should mention I followed tutorial here:

    http://tutorials.flashmymind.com/200...#comment-32816

    It's been a while since I dabbled with Flash and especially AS3! Here is the code I'm using so far. What do I need to add to achieve what I'm after?

    Code:
    import gs.*;
    
    var centerX:Number = stage.stageWidth / 2;
    
    var galleryWidth:Number = images.width;
    
    var speed:Number = 0;
    
    addEventListener(Event.ENTER_FRAME, move);
    
    function move(e:Event):void {
        speed = -(0.01 * (mouseX - centerX));
    
        images.x+=speed;
    
        if (images.x>0) {
            images.x= (-galleryWidth/2);
        }
    
        if (images.x<(-galleryWidth/2)) {
            images.x=0;
        }
    }

    Any help would be much appreciated, thanks!

  2. #2
    Junior Member
    Join Date
    May 2010
    Posts
    4
    Any ideas here please guys?

    I'm thinking it's probably another "if statement" within my move function?

    Or is it a Mouse Event?

    Basically just want the horizontal scrolling images to start at a slow speed from right to left when loaded. I've got it so when I mouse over the left or right it scrolls on a loop at a faster speed. Then I just want it so when I mouse off the scrolling image bar it goes back to it's original slow speed going from right to left.

    Thanks!

  3. #3
    :
    Join Date
    Dec 2002
    Posts
    3,518
    Code:
    var speedval:Number=0.01;
    images.addEventListener(MouseEvent.MOUSE_OVER, goFast);
    images.addEventListener(MouseEvent.MOUSE_OUT, goSlow);
    function goFast(e:Event):void {
    	speedval=0.1;
    }
    function goSlow(e:Event):void {
    	speedval=0.01;
    }
    function move(e:Event):void {
    	speed = -(speedval * (mouseX - centerX));
                 // rest of code is the same...

  4. #4
    Junior Member
    Join Date
    May 2010
    Posts
    4
    Ah thanks a lot dawsonk! Works like a charm!

    I thought it was probably a new MouseEvent but I'm so new to this AS3 and AS in general that I don't know what to add.

    If you don't mind, what would I add to that new code so that when reverting to its previous speed it isn't so abrupt? I could be wrong in saying this but I think I might be talking about an inertia effect?

  5. #5
    :
    Join Date
    Dec 2002
    Posts
    3,518
    Code:
    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    
    var centerX:Number=stage.stageWidth/2;
    var galleryWidth:Number=images.width;
    var speed:Number=0;
    images.addEventListener(Event.ENTER_FRAME, move);
    
    var obj:Object = new Object();
    obj.easeval=0.01;
    var myTween:Tween=new Tween(obj,"easeval",Strong.easeOut,obj.easeval,0.01,10,true);
    
    images.addEventListener(MouseEvent.MOUSE_OVER, goFast);
    images.addEventListener(MouseEvent.MOUSE_OUT, goSlow);
    
    function goFast(e:Event):void {
    	myTween.continueTo(0.1, 10)
    }
    function goSlow(e:Event):void {
    	myTween.continueTo(0.01, 10)
    }
    function move(e:Event):void {
    	speed = -(obj.easeval * (mouseX - centerX));
    	images.x+=speed;
    	if (images.x>0) {
    		images.x= (0-galleryWidth/2);
    	}
    	if (images.x<(0-galleryWidth/2)) {
    		images.x=0;
    	}
    }

  6. #6
    Junior Member
    Join Date
    May 2010
    Posts
    4
    Awesome, works perfectly!

    I just changed a few of the values for speed and the easing and it's working exactly how I wanted it.

    Thanks so much!

  7. #7
    Junior Member
    Join Date
    Mar 2010
    Posts
    2
    Any idea how I can make this work with any resolution?
    I made this http://www.dominicchapman.co.uk/infinitescroll.html but firstly, it scrolls way too fast and secondly, unless the users resolution is below 1024px in width, when scrolling left a glitch occurs when the sea gull photo comes onto the screen..

    Any fixes? Thanks.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center