15 Replies Latest reply on Feb 19, 2013 1:06 PM by kglad

    Scroll bar moves when clicked on

    Cuwen Level 1

      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

          }

       

      }

        • 1. Re: Scroll bar moves when clicked on
          kglad Adobe Community Professional & MVP

          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

              }

           

          }

          • 2. Re: Scroll bar moves when clicked on
            Cuwen Level 1

            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.

            • 3. Re: Scroll bar moves when clicked on
              kglad Adobe Community Professional & MVP

              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

                  }

               

              }

              • 4. Re: Scroll bar moves when clicked on
                Cuwen Level 1

                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.

                • 5. Re: Scroll bar moves when clicked on
                  kglad Adobe Community Professional & MVP

                  what's line 25?

                  • 6. Re: Scroll bar moves when clicked on
                    Cuwen Level 1
                        var funkyVar = -this._parent.scrollbar._y*((this._height-this._parent.scrollbar._he ight)/(this._parent.scrollbarBG._height-this._parent.scrollbar._heigh t ))-1)
                    • 7. Re: Scroll bar moves when clicked on
                      kglad Adobe Community Professional & MVP

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

                      • 8. Re: Scroll bar moves when clicked on
                        Cuwen Level 1

                        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?

                        • 9. Re: Scroll bar moves when clicked on
                          kglad Adobe Community Professional & MVP

                          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?

                          • 10. Re: Scroll bar moves when clicked on
                            Cuwen Level 1

                            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.

                            • 11. Re: Scroll bar moves when clicked on
                              kglad Adobe Community Professional & MVP

                              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._he ight,mask._y-txt._height+mask._height);

                                  scrollbar.onMouseDown = function() {

                                      this.startDrag(false,scrollbarBG._x,scrollbarBG._y,scrollbarBG._x,scrollbarBG._y+scrollba rBG._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;

                              }

                              • 12. Re: Scroll bar moves when clicked on
                                Cuwen Level 1

                                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();

                                • 13. Re: Scroll bar moves when clicked on
                                  kglad Adobe Community Professional & MVP

                                  copy and paste the code i suggested and test.

                                  • 14. Re: Scroll bar moves when clicked on
                                    Cuwen Level 1

                                    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.

                                    • 15. Re: Scroll bar moves when clicked on
                                      kglad Adobe Community Professional & MVP

                                      what code did you test?