You can create mask for the movieclip as exactly as in your tutorial. and use below code (I think this is what you want).
For using the below code you should create some user defined components.
For Horizontal Scroll Bar: create hscrollBG for scrollbar background and hscroller for scroller.
For Vertical Scroll Bar: create vscrollBG for scrollbar background and vscroller for scroller.
mask_mc is mask movieclip and content_mc is which the content you want to scroll.
/**** code ****/
var hscrollbar:MovieClip;
var vscrollbar:MovieClip;
if (content_mc.height > mask_mc.height)
{
drawVScrollBar();
}
if(content_mc.width > mask_mc.width)
{
drawHScrollBar();
}
private function drawVScrollBar():void
{
try
{
removeChild(vscrollbar);
}
catch (e:Error)
{
}
vscrollbar = new MovieClip();
addChild(vscrollbar);
vscrollbar.x = mask_mc.width + 5; //set scrollbar position
var bg:vscrollBG = new vscrollBG();
bg.height = mask_mc.height;
vscrollbar.addChildAt(bg,0);
var scroller:vscroller = new vscroller();
scroller.x = 1;
scroller.y = 0;
vscrollbar.addChildAt(scroller,1);
scroller.addEventListener(MouseEvent.MOUSE_UP, sc_mouseup);
scroller.addEventListener(MouseEvent.MOUSE_DOWN, sc_mousedown);
stage.addEventListener(MouseEvent.MOUSE_UP, sc_mouseup);
}
private function sc_mousedown(e:MouseEvent):void
{
var scroller:MovieClip = vscrollbar.getChildAt(1) as MovieClip;
scroller.startDrag(false, new Rectangle(1, 0, 0,mask_mc.height- scroller.height));
scroller.addEventListener(Event.ENTER_FRAME, updateScrollPosition);
}
private function sc_mouseup(e:MouseEvent):void
{
stopDrag();
var scroller:MovieClip = vscrollbar.getChildAt(1) as MovieClip;
scroller.removeEventListener(Event.ENTER_FRAME, updateScrollPosition);
}
private function updateScrollPosition(e:Event):void {
var bg:MovieClip = vscrollbar.getChildAt(0) as MovieClip;
var scroller:MovieClip = vscrollbar.getChildAt(1) as MovieClip;
var perc:Number = scroller.y * 100 / (bg.height-scroller.height);
var ypos:Number = ( -perc * ((content_mc.height - mask_mc.height) / 100));
content_mc.y = ypos;
}
private function drawHScrollBar():void
{
try
{
removeChild(hscrollbar);
}
catch (e:Error)
{
}
hscrollbar = new MovieClip();
addChild(hscrollbar);
hscrollbar.y = mask_mc.height + 5;
var bg:hscrollBG = new hscrollBG();
bg.width = mask_mc.width;
hscrollbar.addChildAt(bg,0);
var scroller:hscroller = new hscroller();
scroller.x = 1;
scroller.y = 0;
hscrollbar.addChildAt(scroller,1);
scroller.addEventListener(MouseEvent.MOUSE_UP, hsc_mouseup);
scroller.addEventListener(MouseEvent.MOUSE_DOWN, hsc_mousedown);
stage.addEventListener(MouseEvent.MOUSE_UP, hsc_mouseup);
}
private function hsc_mousedown(e:MouseEvent):void
{
var bg:MovieClip = hscrollbar.getChildAt(0) as MovieClip;
var scroller:MovieClip = hscrollbar.getChildAt(1) as MovieClip;
scroller.startDrag(false, new Rectangle(bg.x, bg.y, bg.width - scroller.width,0));
scroller.addEventListener(Event.ENTER_FRAME, hupdateScrollPosition);
}
private function hsc_mouseup(e:MouseEvent):void
{
stopDrag();
var scroller:MovieClip = hscrollbar.getChildAt(1) as MovieClip;
scroller.removeEventListener(Event.ENTER_FRAME, hupdateScrollPosition);
}
private function hupdateScrollPosition(e:Event):void {
var bg:MovieClip = hscrollbar.getChildAt(0) as MovieClip;
var scroller:MovieClip = hscrollbar.getChildAt(1) as MovieClip;
var perc:Number = (scroller.x - bg.x) / (bg.width - scroller.width);
var xcounter:Number = ( -perc * (content_mc.width - mask_mc.width));
content_mc.x = xcounter;
}
This code is reusable for many applications where we want scrollbar. In this code we can dynamically assign the scrollbars based on the content width and height.
6
Replies
AdChoices