Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Scroll bar moves when clicked on

Explorer ,
Feb 04, 2013 Feb 04, 2013

Hello.  I have a custom scroll bar that was made using AS2.  It works fine except that when you click on the bar and move it, the image shifts slightly and then doesn't line up correctly.  I don't know what's causing it to shift.  All registration points are in the upper left hand corner.  I was really hoping someone could help me with this.  Here is the code:

txt.setMask(mask)

scrollbar.onMouseDown = function() {

    if (this.hitTest(_root._xmouse, _root._ymouse) && txt._height>mask._height) {

        this.startDrag(false, scrollbarBG._x, scrollbarBG._y, scrollbarBG._x, scrollbarBG._height-this._height)

        txt.onEnterFrame = scrollThumbs;

        dragging = true

    }

};

scrollbar.onMouseUp = function() {

    stopDrag()

    dragging = false

    delete this.onEnterFrame;

};

function scrollThumbs() {

    var funkyVar = -this._parent.scrollbar._y*(((this._height-this._parent.scrollbar._height)/(this._parent.scrollbarBG._height-this._parent.scrollbar._height))-1)

    this.Y = (funkyVar-this._y)*.2;

    this._y += this.Y;

    if(Math.abs(funkyVar-this._y)<1 && !dragging){

        delete this.onEnterFrame

    }

}

TOPICS
ActionScript
2.0K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 04, 2013 Feb 04, 2013

use:

txt.setMask(mask)

scrollbar.onMouseDown = function() {

    if (this.hitTest(_root._xmouse, _root._ymouse) && txt._height>mask._height) {

        this.startDrag(false, scrollbarBG._x, scrollbarBG._y, scrollbarBG._x, scrollbarBG._height-this._height)

        txt.onEnterFrame = scrollThumbs;

        dragging = true

    }

};

scrollbar.onMouseUp = function() {

    stopDrag()

    dragging = false

    delete this.onEnterFrame;

};

function scrollThumbs() {

    var funkyVar = -this._parent.scrollbar._y*(((this._height-this._parent.scrollbar._he ight)/(this._parent.scrollbarBG._height-this._parent.scrollbar._height ))-1)

    this.Y = (funkyVar-this._y)*.2;

    this._y += this.Y;

    if(Math.abs(funkyVar-this._y)<1 && !dragging){

this._y=funkyVar;

        delete this.onEnterFrame

    }

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 04, 2013 Feb 04, 2013

Thank you for responding.  It still shifts, though.  Was the only thing I was supposed to change was the part that was in bold?  I just added it into my original script.  Was that right or did I need to copy and paste all you wrote and rewrite my original script?  When i did that, it said that it was missing a ' somewhere.

But, the main thing is, the bar still shifts like it did before.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 04, 2013 Feb 04, 2013

then get rid of that dragging variable and retry.  if that fails, you'll need to redo funkyVar

txt.setMask(mask)

scrollbar.onMouseDown = function() {

    if (this.hitTest(_root._xmouse, _root._ymouse) && txt._height>mask._height) {

        this.startDrag(false, scrollbarBG._x, scrollbarBG._y, scrollbarBG._x, scrollbarBG._height-this._height)

        txt.onEnterFrame = scrollThumbs;

    }

};

scrollbar.onMouseUp = function() {

    stopDrag()

    delete this.onEnterFrame;

};

function scrollThumbs() {

    var funkyVar = -this._parent.scrollbar._y*(((this._height-this._parent.scrollbar._he ight)/(this._parent.scrollbarBG._height-this._parent.scrollbar._heigh t ))-1)

    this._y += (funkyVar-this._y)*.2;

    if(Math.abs(funkyVar-this._y)<1){

this._y=funkyVar;

        delete this.onEnterFrame

    }

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 05, 2013 Feb 05, 2013

Again, thank you very much for the reply.  However, I'm still getting the same problem I was earlier.  The scroll bar no longer moves at all and I get this message in the output area:

Symbol=scrollpane, layer=Layer 3, frame=1, Line 25')' expected

I tried deleting one of the (, but that didn't help.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 05, 2013 Feb 05, 2013

what's line 25?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 05, 2013 Feb 05, 2013
    var funkyVar = -this._parent.scrollbar._y*((this._height-this._parent.scrollbar._he ight)/(this._parent.scrollbarBG._height-this._parent.scrollbar._heigh t ))-1)
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 05, 2013 Feb 05, 2013

i didn't change anything on that line.  use whatever you were using before.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 05, 2013 Feb 05, 2013

Ah!  I changed that line only to what I had before and it's moving again.  However, the bar still shifts like it was originally.  Anything else I can change to keep it from doing that?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 05, 2013 Feb 05, 2013

again, if that fails, you'll need to redo funkyVar.

that code is screwy.  is it supposed to do anything other than add easing to your scroll?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 06, 2013 Feb 06, 2013

I copy and pasted the code from a tutorial.  I'm not that good with more advanced AS.  I only know the basics.  I wanted a custom vertical scrollbar for a video player I've created.  This scrollbar was just supposed to move up and down.  In the pane, I have buttons connected to different videos.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 06, 2013 Feb 06, 2013

well, that's pretty bad coding.

if you want easing in your scroll use:

txt.setMask(mask);

var speed:Number = .8;

var scrollVar:Boolean;

if (txt._height>mask._height) {

    paramsF(scrollbar,scrollbarBG._y,mask._y,scrollbarBG._y+scrollbarBG._height-scrollbar._height,mask._y-txt._height+mask._height);

    scrollbar.onMouseDown = function() {

        this.startDrag(false,scrollbarBG._x,scrollbarBG._y,scrollbarBG._x,scrollbarBG._y+scrollbarBG._height-this._height);

        this.onEnterFrame = scrollThumbs;

        scrollVar = true;

    };

    this.onMouseUp = function() {

        stopDrag();

        scrollVar = false

    };

}

function scrollThumbs() {

    txt._y = speed*txt._y+(1-speed)*(this.m*this._y+this.b);

    if (Math.abs(txt._y-this.m*this._y-this.b)<1 && !scrollVar) {

        delete this.onEnterFrame;

    }

}

function paramsF(mc:MovieClip, x1:Number, y1:Number, x2:Number, y2:Number):Void {

    mc.m = (y1-y2)/(x1-x2);

    mc.b = y1-mc.m*x1;

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 06, 2013 Feb 06, 2013

Thank you very much for the code.  After what you said, though, I went to find different code.  I used kirupa this time.  I just finished testing it out.  I typed in the code and it went a lot smoother.  However, the scroll bar top is STILL shifting to the side.  So it must mean it's not the code that is messing up?  All the registration points are in the upper left hand corner.  Should the points be somewhere else to stop the shifting?  Here's the code:

scrolling = function () {

var scrollHeight:Number = scrollTrack._height;

var contentHeight:Number = contentMain._height;

var scrollFaceHeight:Number = scrollFace._height;

var maskHeight:Number = maskedView._height;

var initPosition:Number = scrollFace._y=scrollTrack._y;

var initContentPos:Number = contentMain._y;

var finalContentPos:Number = maskHeight-contentHeight+initContentPos;

var left:Number = scrollTrack._x;

var top:Number = scrollTrack._y;

var right:Number = scrollTrack._x;

var bottom:Number = scrollTrack._height-scrollFaceHeight+scrollTrack._y;

var dy:Number = 0;

var speed:Number = 10;

var moveVal:Number = (contentHeight-maskHeight)/(scrollHeight-scrollFaceHeight);

scrollFace.onPress = function() {

var currPos:Number = this._y;

startDrag(this, false, left, top, right, bottom);

this.onMouseMove = function() {

dy = Math.abs(initPosition-this._y);

contentMain._y = Math.round(dy*-1*moveVal+initContentPos);

};

};

scrollFace.onMouseUp = function() {

stopDrag();

delete this.onMouseMove;

};

btnUp.onPress = function() {

this.onEnterFrame = function() {

if (contentMain._y+speed<maskedView._y) {

if (scrollFace._y<=top) {

scrollFace._y = top;

} else {

scrollFace._y -= speed/moveVal;

}

contentMain._y += speed;

} else {

scrollFace._y = top;

contentMain._y = maskedView._y;

delete this.onEnterFrame;

}

};

};

btnUp.onDragOut = function() {

delete this.onEnterFrame;

};

btnUp.onRollOut = function() {

delete this.onEnterFrame;

};

btnDown.onPress = function() {

this.onEnterFrame = function() {

if (contentMain._y-speed>finalContentPos) {

if (scrollFace._y>=bottom) {

scrollFace._y = bottom;

} else {

scrollFace._y += speed/moveVal;

}

contentMain._y -= speed;

} else {

scrollFace._y = bottom;

contentMain._y = finalContentPos;

delete this.onEnterFrame;

}

};

};

btnDown.onRelease = function() {

delete this.onEnterFrame;

};

btnDown.onDragOut = function() {

delete this.onEnterFrame;

};

if (contentHeight<maskHeight) {

scrollFace._visible = false;

btnUp.enabled = false;

btnDown.enabled = false;

} else {

scrollFace._visible = true;

btnUp.enabled = true;

btnDown.enabled = true;

}

};

scrolling();

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 06, 2013 Feb 06, 2013

copy and paste the code i suggested and test.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 19, 2013 Feb 19, 2013

Sorry it's taken me awhile to reply.  I got swamped with work.  I just tested the code, and the  head on the scrollbar still shifts from before.  Maybe it's just my version of Flash that's making it wonky?  I'm using CS5.5.  I'm pretty sure it can't be how I structured everything b/c I took the exact same file from Flashkit.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 19, 2013 Feb 19, 2013
LATEST

what code did you test?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines