Scroller triggered by button.

[lazerbrains]

I am trying to create a controllable scrolling MovieClip, but am not sure how to code it.

This is an image of what I want to build. example.jpg


How can I have the Content MovieClip scroll to the top or the bottom when the buttons are pressed. Pressing the down button right now would scroll it to the bottom, and pressing the up button would scroll it all the way to the top. I am unsure how to code this. Any ideas?

[fruitbeard]

Hi,

Maybe this will help you out, mess around with it. CS6 - AS3

Heres the code I used in it too, but you might want to use the clips etc.

import flash.events.Event;

var scrollButtons:Array = new Array(uButton,dButton);
var directions:Array = new Array("up","down");
var movement:String;

var scrollAmount:Number = 5;
var padding:Number = 0;
var i:Number;

// *** Placement of mask,content and scroller buttons;
scrollMask.x = 10;
scrollMask.y = 10;

scrollMask.width = scrollContent.width + padding;

scrollContent.x = scrollMask.x;
scrollContent.y = scrollMask.y;

scrollButtons[0].x = scrollMask.x + scrollMask.width;
scrollButtons[0].y = scrollMask.y;

scrollButtons[1].x = scrollMask.x + scrollMask.width;
scrollButtons[1].y = scrollMask.y + scrollMask.height - scrollButtons[1].height;

// *** Obtain min and max scroll values;
var scrollMin:Number = scrollMask.y;
var scrollMax:Number = scrollContent.height - scrollMask.height - scrollMask.y;

// *** Assign commands to scroll buttons;
for (i = 0; i < scrollButtons.length; i++)
{
    var button:Object = scrollButtons[i];
    button.value = directions[i];
    button.buttonMode = true;
    button.addEventListener(MouseEvent.MOUSE_DOWN, doScroll);
    button.addEventListener(MouseEvent.MOUSE_UP, noScroll);
    button.addEventListener(MouseEvent.MOUSE_OUT, noScroll);
}

// *** Determine scroll function;
function doScroll(e:MouseEvent):void
{
    movement = e.currentTarget.value;
    if (movement != "")
    {
        addEventListener(Event.ENTER_FRAME, doMove);
    }
}

// *** End scroll function;
function noScroll(e:MouseEvent):void
{
    movement = "";
    removeEventListener(Event.ENTER_FRAME, doMove);
}

// *** Do scroll function using switch;
function doMove(e:Event):void
{
    switch (movement)
    {
        case "down" :
            if (scrollContent.y <=  -  scrollMax)
            {
                scrollContent.y =  -  scrollMax;
            }
            else
            {
                scrollContent.y -=  scrollAmount;
            }
            break;

        case "up" :
            if (scrollContent.y >= scrollMin)
            {
                scrollContent.y = scrollMin;
            }
            else
            {
                scrollContent.y +=  scrollAmount;
            }
            break;

        default :
            scrollContent.y = scrollContent.y;
            break;
    }
} 

There are numerous ways to place everything and I'm sure you can find your own possibly better methods.