The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 9 of 9

Thread: Horizontal scroll with onmouseover

  1. #1

    Horizontal scroll with onmouseover

    Hello,

    I currently have a document set up with a large movie clip (about 2000px wide) and have created 2 buttons - left and right. I would like for when you mouse over the left or right button, the movieclip would slide across the screen horizontally.

    Can someone point me in the right direction? Any help is appreciated,

    Kevin

  2. #2
    Here is a very basic example using an enter frame loop to scroll the clip.

    The left and right buttons are movieclips: "leftButton" and "rightButton".
    The 2000 pixel movieclip has an instance name of "slider_mc".
    Everything including the following script is on frame1 of the main timeline.
    Adjust the speed of the scrolling by changing the value of "rate".
    Code:
    leftButton.addEventListener(MouseEvent.MOUSE_OVER, moveClip);
    rightButton.addEventListener(MouseEvent.MOUSE_OVER, moveClip);
    leftButton.addEventListener(MouseEvent.MOUSE_OUT, stopClip);
    rightButton.addEventListener(MouseEvent.MOUSE_OUT, stopClip);
    leftButton.buttonMode = rightButton.buttonMode = true;
    
    var sliderX:Number = slider_mc.x;
    var rate:Number = 10;// higher numbers result in faster scrolling
    var targetButton:MovieClip;
    
    function moveClip(e:MouseEvent):void
    {
    	targetButton = MovieClip(e.currentTarget);
    	addEventListener(Event.ENTER_FRAME, onLoop);
    }
    
    function stopClip(e:MouseEvent):void
    {
    	removeEventListener(Event.ENTER_FRAME, onLoop);
    }
    
    function onLoop(e:Event):void
    {
    	switch (targetButton.name)
    	{
    		case "leftButton" :
    			sliderX += rate;
    			break;
    		case "rightButton" :
    			sliderX -= rate;
    			break;
    	}
    	slider_mc.x = sliderX;
    }
    I used to be a paranoid-psychotic-schizophrenic, but don't worry, he's dead now.

  3. #3
    Hi Snickelfritz,

    Thanks so much for the reply. Is this AS2 or AS3? When I try it with AS2 I get these errors:

    1119: Access of possibly undefined property buttonMode through a reference with static type flash.display:SimpleButton.
    1119: Access of possibly undefined property buttonMode through a reference with static type flash.display:SimpleButton.

    In AS2 I get these errors:
    The class or interface 'MouseEvent' could not be loaded.
    The class or interface 'MouseEvent' could not be loaded.
    The class or interface 'Event' could not be loaded.

    am I missing something obvious? Thanks again,

    Kevin

  4. #4
    For anyone interested I found a solution using AS2. The Movie clip is reffered to as clip and the code is for the left/right buttons.

    on(press){
    this.onEnterFrame=function(){
    speed=10;
    rlimit=400;//right limit
    if(clip._x<rlimit){
    clip._x+=speed;
    }}
    }
    on(release,releaseOutside){
    delete onEnterFrame;
    }

    for the left:

    on(press){
    this.onEnterFrame=function(){
    speed=10;
    llimit=-400;//right limit
    if(clip._x>llimit){
    clip._x-=speed;
    }}
    }
    on(release,releaseOutside){
    delete onEnterFrame;
    }

    To make it as a rollover instead of a press just change the code to "rollOver" and "rollOut".

  5. #5
    It's AS3.
    I used to be a paranoid-psychotic-schizophrenic, but don't worry, he's dead now.

  6. #6
    I was just wondering is there a way to set boundaries so that the movie clip doesn't slide off the stage?
    thanks

  7. #7
    Take a look a startDrag. One of the parameters described by a rectangle will limit the movement of the slider.

  8. #8
    Let me start by saying yes, I just dug up this really old thread. But rather than start a new one with the same questions, I'll piggy back this one.



    I'm using CS5 AS3 and I am getting the following error:

    Line 5 1119: Access of possibly undefined property buttonMode through a reference with static type flash.display:SimpleButton.

    So it does not like the following:
    leftButton.buttonMode = rightButton.buttonMode = true;


    Also, Pancho stated to set boundaries look at startDrag. Can anyone explain that?

    Or is there any easier way then the method above. Basically I just want to scroll a movieclip to the left or right on mouseover and stop at the beginning and end?
    Last edited by elabdesigns; August 26th, 2010 at 04:08 PM.

  9. #9
    elabdesigns:

    First, SimpleButtons don't have a buttonMode property - they don't need one. The original example was assuming you were using a Sprite (or Sprite-derived class) for the buttons. For those objects buttonMode controls whether the object gets the finger cursor on mouseover and whether they dispatch click events.

    Long story short, just remove that line of code if you are using SimpleButtons.

    Pancho's comment about boundaries in startDrag is a little misleading. That's a method you can call on a Sprite (or MovieClip, etc.) to let the user drag the object around the screen using the mouse. The scrolling in the example doesn't use that way, instead the code does it. However, you might want to look into startDrag as an alternative - it's quick and easy, if it meets your requirements. Basically you would pass in a bounds with a zero height so that the user couldn't drag it up and down, only side to side.

    See http://help.adobe.com/en_US/AS3LCR/F...tml#startDrag()

    Another way you could make it scrollable within a boundary would be to use a ScrollPane (this is a Flash component - I'm assuming you're using straight Flash here, no Flex). That will give you scroll bars so you don't even need to do the mouse over a button trick if you don't want to. However, you can also hide the scroll bars by setting the scroll bar policies to off, and use code like the above but set the ScrollPane's "horizontalScrollPosition" property instead of the movie clip's "x" property. Also set the "maxHorizontalScrollPosition" property to limit how far it could scroll.

    See http://help.adobe.com/en_US/AS3LCR/F...crollPane.html

    Finally if you want to stick with the original example, the way to set boundaries is to establish constants or variables for minX and maxX, then check against that in the onLoop method and don't set sliderX higher or lower. Depending on what kind of bounds you want you may have to calculate this value. For example

    Code:
    // min and max to allow slider_mc to be moved halfway
    // off the stage (on either side)
    var minX:Number = slider_mc.width * 0.5;
    var maxX:Number = stage.width + slider_mc.width * 0.5;
    
    //...
    
    function onLoop(e:Event):void
    {
    	switch (targetButton.name)
    	{
    		case "leftButton" :
    			sliderX += rate;
    			break;
    		case "rightButton" :
    			sliderX -= rate;
    			break;
    	}
    	sliderX = Math.min(sliderX, maxX);
    	sliderX = Math.max(sliderX, minX);       
    	slider_mc.x = sliderX;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012