A Flash Developer Resource Site

Results 1 to 5 of 5

Thread: Creating a Custom Horizontal Scrollbar in AS2

  1. #1
    Registered User
    Join Date
    Jun 2011
    Posts
    8

    Creating a Custom Horizontal Scrollbar in AS2

    Hello,

    I would like to know how can I make a horizontal scroll bar in AS2?

    I have make a vertical one already and using the below script, what should I change then let the scrollbar become left to right?




    var scrollUpper:Number = 9;
    var scrollLower:Number = 158;

    var textLower:Number = 0
    var textUpper:Number = -140;

    var scrollRange:Number = scrollLower - scrollUpper;
    var textRange:Number = textLower - textUpper;

    function scroll () {
    var moved:Number = scroller_mc._y - scrollUpper;
    var pctMoved:Number = moved/scrollRange;
    var textMove:Number = pctMoved*textRange;
    text_mc._y = textLower - textMove;
    }

    scroller_mc.onPress = function () {
    this.startDrag (false, this._x, scrollUpper, this._x, scrollLower) ;
    this.onMouseMove = scroll;
    }

    scroller_mc.onRelease = scroller_mc.onReleaseOutside = function () {
    this.stopDrag () ;
    this.onMouseMove = null;
    }

  2. #2
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Actionscript Code:
    var scrollLeft:Number = 100; // Left most limit
    var scrollRight:Number = 300; // Right most limit

    var textLower:Number = 0
    var textUpper:Number = -140;

    var scrollRange:Number = scrollLower - scrollUpper;
    var textRange:Number = textLower - textUpper;

    function scroll () {
    var moved:Number = scroller_mc._y - scrollUpper;
    var pctMoved:Number = moved/scrollRange;
    var textMove:Number = pctMoved*textRange;
    text_mc._y = textLower - textMove;
    }

    scroller_mc.onPress = function () {
    this.startDrag (false, scrollLeft, this._y, scrollRight, this._y) ;
    this.onMouseMove = scroll;
    }

    scroller_mc.onRelease = scroller_mc.onReleaseOutside = function () {
    this.stopDrag () ;
    this.onMouseMove = null;
    }
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  3. #3
    Registered User
    Join Date
    Jun 2011
    Posts
    8
    Quote Originally Posted by Nig 13 View Post
    Actionscript Code:
    var scrollLeft:Number = 100; // Left most limit
    var scrollRight:Number = 300; // Right most limit

    var textLower:Number = 0
    var textUpper:Number = -140;

    var scrollRange:Number = scrollLower - scrollUpper;
    var textRange:Number = textLower - textUpper;

    function scroll () {
    var moved:Number = scroller_mc._y - scrollUpper;
    var pctMoved:Number = moved/scrollRange;
    var textMove:Number = pctMoved*textRange;
    text_mc._y = textLower - textMove;
    }

    scroller_mc.onPress = function () {
    this.startDrag (false, scrollLeft, this._y, scrollRight, this._y) ;
    this.onMouseMove = scroll;
    }

    scroller_mc.onRelease = scroller_mc.onReleaseOutside = function () {
    this.stopDrag () ;
    this.onMouseMove = null;
    }
    Hi Nig,


    It works and thanks so much!!

    But the script you give me just only work in the scroller but the text didn't move when I moving the scroller..how can I make it work!?

  4. #4
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Something like this, perhaps?

    Actionscript Code:
    var scrollUpper:Number = 100;
    var scrollLower:Number = 300;

    var textLower:Number = scrollUpper*2;
    var textUpper:Number = scrollLower*-0.1;

    var scrollRange:Number = scrollLower - scrollUpper;
    var textRange:Number = textLower - textUpper;

    function scroll () {
    var moved:Number = scroller_mc._x - scrollUpper;
    var pctMoved:Number = moved/scrollRange;
    var textMove:Number = pctMoved*textRange;
    text_mc._x = textLower - textMove;
    }

    scroller_mc._x = scrollLower;

    scroller_mc.onPress = function () {
    this.startDrag (false, scrollUpper, this._y, scrollLower, this._y) ;
    this.onMouseMove = scroll;
    }

    scroller_mc.onRelease = scroller_mc.onReleaseOutside = function () {
    this.stopDrag () ;
    this.onMouseMove = null;
    }
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  5. #5
    Registered User
    Join Date
    Jun 2011
    Posts
    8
    Yup!! This time can move the scroller and the text both, but can you please tell me what is the *2 & *-0.1 stand for?

    Because I don't know how to control the text move limit through the numbers!!

    Quote Originally Posted by Nig 13 View Post
    Something like this, perhaps?

    Actionscript Code:
    var scrollUpper:Number = 100;
    var scrollLower:Number = 300;

    var textLower:Number = scrollUpper*2;
    var textUpper:Number = scrollLower*-0.1;

    var scrollRange:Number = scrollLower - scrollUpper;
    var textRange:Number = textLower - textUpper;

    function scroll () {
    var moved:Number = scroller_mc._x - scrollUpper;
    var pctMoved:Number = moved/scrollRange;
    var textMove:Number = pctMoved*textRange;
    text_mc._x = textLower - textMove;
    }

    scroller_mc._x = scrollLower;

    scroller_mc.onPress = function () {
    this.startDrag (false, scrollUpper, this._y, scrollLower, this._y) ;
    this.onMouseMove = scroll;
    }

    scroller_mc.onRelease = scroller_mc.onReleaseOutside = function () {
    this.stopDrag () ;
    this.onMouseMove = null;
    }

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