Flash CS3 scroll bar

[Clemec]

Hi,

To start, I am just a beginner in Flash, so please be patient. I am trying to create a scroll bar for a website in Flash. I went through different forums and combined different scripts, but the results weren't favourable. There were also many errors. Would someone please help me check my script to see what is the problem?

Here it is below.

MovieClip(txt).mask=MovieClip(txtmask);
import flash.events.MouseEvent;
scrolltab.buttonMode=true;
scrolltab.addEventListener (MouseEvent.MOUSE_DOWN, scrolldown);
function scrolldown (e:MouseEvent) {
        
        if (txt.height>txtmask.height && this.hitTestPoint(MovieClip(root).mouseX, MovieClip(root).mouseY,false)  ) 
    {
        var range:Rectangle = new Rectangle(scrolltabback.X, scrolltabback.Y, scrolltabback.X, scrolltabback.height- this.height);
        this.startDrag(false,range);
        addEventListener(Event.ENTER_FRAME, scrolltxt);
    }
}

function scrolltxt() {
    
    var scrollpos:Number = (-(root as MovieClip).scrolltab.Y*(((this.height-(root as MovieClip).scrolltab.height)/((root as MovieClip).scrolltabback.height-(root as MovieClip).scrolltab.height))-1))
    this.Y = (scrollpos-this.Y)*.2;
    this.Y += this.Y;
    if(Math.abs(scrollpos-this.Y)<1){
    removeEventListener(Event.DEACTIVATE,scrolltxt);
    }

}

import flash.events.MouseEvent;
scrolltab.buttonMode=true;
scrolltab.addEventListener (MouseEvent.MOUSE_UP, scrollstop);

function scrollstop (e:MouseEvent) {
    stopDrag();
    scrolltab.removeEventListener(MouseEvent.MOUSE_UP,scrollstop);
}

Thankyou so much,
Clemec

[moagrius]

there are a few problems with the above.

first, property names are lowercase - there is no "this.Y" - it's "this.y"

second, it looks like you're trying to scroll "this" - and i'm assuming you're doing this from the timeline - so "this" would be everything visible - including the scrolling mechanism.

next, it looks like you're using a startDrag on "this" (to move everything on the stage), then assigning an enterframe to move something else - not sure what the goal is there, but doesn't look promising. you're draggin "this" while tyring to set the y position of "this" at the same time - that's definitely not going to work - which coordinate should the program respect? the drag coordinates or the assignment? (that's rhetorical - i don't need an answer - just illustrating it'll fail).

it looks like you're not trying to "scroll" something by the traditional interpretation - it looks like you just want to move something onclick, not drag a bar along a path - is that correct? if not, detail (in english, not code) what you're trying to achieve and i'll try to give you some boilerplate code to achieve what you want.

[Clemec]

Thank you for your message.

Since I am just a beginner and I sort of compiled the code from various sources, I am not really sure what my code is exactly doing. So, I will try to explain what I am trying to do. I am trying to create a scroll bar that will drag the text up and down. I hope it functions similarly to the scroll bar of this website. I have a tab, which we drag and that tab is called "scrolltab". The tab is placed upon a background, which is called "scrolltabback". The background will form a rectangle which limits how the tab is moved. i.e. up and down and between the upper and lower limits of the rectangle. This is similar to the scroll bar of the website. The scroll tab is aimed to manipulate a text box, called "txt". A mask is placed upon the "txt" and it is called "txtmask". The "txt" is supposed to move up and down, such that the mask will only reveal the framed area. To better envisage the situation, I would use the webpage as an example. The scrollbar moves the entire webpage up and down, so that a particular area would be revealed in the center of the screen.

Thankyou and sorry if any part is unclear.

[moagrius]

this assumes you have everything on the stage in different layers, positioned manually, and none of the elements you mentioned (txt, txtmask, scrolltab, scrolltabback) are nested in other movieclips or each other.

// set the mask
txt.mask = txtmask;

// on MOUSE_DOWN of tab, start all operations
scrolltab.addEventListener(MouseEvent.MOUSE_DOWN, beginScroll, false, 0, true);

// get the initial position of the target to be scrolled
var initialOffset:Number = txt.y;

function beginScroll(event:MouseEvent):void{
    
    // create the boundaries of the tab's drag
    var top:Number = scrolltabback.y;
    var bottom:Number = scrolltabback.height - scrolltab.height;
    var left:Number = scrolltabback.x;
    var right:Number = 0;
    var rect:Rectangle = new Rectangle(left, top, right, bottom);
    scrolltab.startDrag(false, rect);
    
    // setup content dragging
    stage.addEventListener(MouseEvent.MOUSE_MOVE, executeDrag, false, 0, true);
    
    // if mouseup happens anywhere, stop drag operations
    stage.addEventListener(MouseEvent.MOUSE_UP, endDrag, false, 0, true);
}

function executeDrag(event:MouseEvent):void{
    // move the txt layer relative to the updated position of the scrolltab
    txt.y = initialOffset + int( -(txt.height - txtmask.height) * ((scrolltab.y - scrolltabback.y) / (scrolltabback.height - scrolltab.height) ) );
}

function endDrag(event:MouseEvent):void{
    scrolltab.stopDrag();
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, executeDrag);
    stage.removeEventListener(MouseEvent.MOUSE_UP, endDrag);
} 

[Clemec]

Thankyou so much, it worked really well, except for one part. My scrolltab seem to disappear after I dragged it and would not appear again.

[moagrius]

as mentioned, i had to make some assumptions - i presumed all assets were present on the stage, and not nested. if there's any deviation from that, you'll need to make changes to the math to accomodate.