Error in Kirupa.com Scrolling Tutorial

Hi everyone,

Can anyone tell me what the error is in this ActionScript provided by Kirupa? I do the tutorial exactly and when I test it, the scrollface (bar) starts in the center of the scrolltrack and continues past the end point (It’s like the x and y postition is totally off!). The up and down buttons work great. Technically, this is a good tutorial, but there is a problem in the ActionScript somewhere. Can anyone help with this? Here is the link to get to Kirupa tutorial:

http://www.kirupa.com/developer/flash8/scrollbar3.htm

Here is the ActionScript provided. I used AS2, but if anyone has a better AS2 or AS3 code, I’d be happy to use it. THANKS!!


[COLOR=#000050]scrolling[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR] COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#006610]var[/COLOR] [COLOR=#000050]scrollHeight[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]scrollTrack[/COLOR].[COLOR=#0000d0]_height[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]contentHeight[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]contentMain[/COLOR].[COLOR=#0000d0]_height[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]scrollFaceHeight[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]_height[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]maskHeight[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]maskedView[/COLOR].[COLOR=#0000d0]_height[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]initPosition[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]_y[/COLOR][COLOR=#0000ff]=[/COLOR][COLOR=#000050]scrollTrack[/COLOR].[COLOR=#0000d0]_y[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]initContentPos[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]contentMain[/COLOR].[COLOR=#0000d0]_y[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]finalContentPos[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]maskHeight[/COLOR][COLOR=#0000ff]-[/COLOR][COLOR=#000050]contentHeight[/COLOR][COLOR=#0000ff]+[/COLOR][COLOR=#000050]initContentPos[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]left[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]scrollTrack[/COLOR].[COLOR=#0000d0]_x[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]top[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]scrollTrack[/COLOR].[COLOR=#0000d0]_y[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]right[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]scrollTrack[/COLOR].[COLOR=#0000d0]_x[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]bottom[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]scrollTrack[/COLOR].[COLOR=#0000d0]_height[/COLOR][COLOR=#0000ff]-[/COLOR][COLOR=#000050]scrollFaceHeight[/COLOR][COLOR=#0000ff]+[/COLOR][COLOR=#000050]scrollTrack[/COLOR].[COLOR=#0000d0]_y[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]dy[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#991010]0[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]speed[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#991010]10[/COLOR]; [COLOR=#006610]var[/COLOR] [COLOR=#000050]moveVal[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] COLOR=#0000ff/([/COLOR][COLOR=#000050]scrollHeight[/COLOR][COLOR=#0000ff]-[/COLOR][COLOR=#000050]scrollFaceHeight[/COLOR][COLOR=#0000ff])[/COLOR]; [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]onPress[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR]COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#006610]var[/COLOR] [COLOR=#000050]currPos[/COLOR][COLOR=#0000ff]:[/COLOR][COLOR=#0000d0]Number[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#0000d0]this[/COLOR].[COLOR=#0000d0]_y[/COLOR]; [COLOR=#0000d0]startDrag[/COLOR][COLOR=#0000ff]([/COLOR][COLOR=#0000d0]this[/COLOR], [COLOR=#006610]false[/COLOR], [COLOR=#000050]left[/COLOR], [COLOR=#000050]top[/COLOR], [COLOR=#000050]right[/COLOR], [COLOR=#000050]bottom[/COLOR][COLOR=#0000ff])[/COLOR]; [COLOR=#0000d0]this[/COLOR].[COLOR=#0000d0]onMouseMove[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR]COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#000050]dy[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#0000d0]Math[/COLOR].[COLOR=#0000d0]abs[/COLOR]COLOR=#0000ff[/COLOR]; [COLOR=#000050]contentMain[/COLOR].[COLOR=#0000d0]_y[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#0000d0]Math[/COLOR].[COLOR=#0000d0]round[/COLOR]COLOR=#0000ff[/COLOR];[COLOR=#0000ff]}[/COLOR];[COLOR=#0000ff]}[/COLOR]; [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]onMouseUp[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR]COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#0000d0]stopDrag[/COLOR]COLOR=#0000ff[/COLOR]; [COLOR=#006610]delete[/COLOR] [COLOR=#0000d0]this[/COLOR].[COLOR=#0000d0]onMouseMove[/COLOR];[COLOR=#0000ff]}[/COLOR]; [COLOR=#000050]btnUp[/COLOR].[COLOR=#0000d0]onPress[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR]COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#0000d0]this[/COLOR].[COLOR=#0000d0]onEnterFrame[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR]COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#006610]if[/COLOR] COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#006610]if[/COLOR] COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]_y[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]top[/COLOR];[COLOR=#0000ff]}[/COLOR] [COLOR=#006610]else[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]_y[/COLOR] [COLOR=#0000ff]-=[/COLOR] [COLOR=#000050]speed[/COLOR][COLOR=#0000ff]/[/COLOR][COLOR=#000050]moveVal[/COLOR];[COLOR=#0000ff]}[/COLOR] [COLOR=#000050]contentMain[/COLOR].[COLOR=#0000d0]_y[/COLOR] [COLOR=#0000ff]+=[/COLOR] [COLOR=#000050]speed[/COLOR];[COLOR=#0000ff]}[/COLOR] [COLOR=#006610]else[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]_y[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]top[/COLOR]; [COLOR=#000050]contentMain[/COLOR].[COLOR=#0000d0]_y[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]maskedView[/COLOR].[COLOR=#0000d0]_y[/COLOR]; [COLOR=#006610]delete[/COLOR] [COLOR=#0000d0]this[/COLOR].[COLOR=#0000d0]onEnterFrame[/COLOR];[COLOR=#0000ff]}[/COLOR][COLOR=#0000ff]}[/COLOR];[COLOR=#0000ff]}[/COLOR]; [COLOR=#000050]btnUp[/COLOR].[COLOR=#0000d0]onDragOut[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR]COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#006610]delete[/COLOR] [COLOR=#0000d0]this[/COLOR].[COLOR=#0000d0]onEnterFrame[/COLOR];[COLOR=#0000ff]}[/COLOR]; [COLOR=#000050]btnUp[/COLOR].[COLOR=#000050]onRollOut[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR]COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#006610]delete[/COLOR] [COLOR=#0000d0]this[/COLOR].[COLOR=#0000d0]onEnterFrame[/COLOR];[COLOR=#0000ff]}[/COLOR]; [COLOR=#000050]btnDown[/COLOR].[COLOR=#0000d0]onPress[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR]COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#0000d0]this[/COLOR].[COLOR=#0000d0]onEnterFrame[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR]COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#006610]if[/COLOR] COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#006610]if[/COLOR] COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]_y[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]bottom[/COLOR];[COLOR=#0000ff]}[/COLOR] [COLOR=#006610]else[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]_y[/COLOR] [COLOR=#0000ff]+=[/COLOR] [COLOR=#000050]speed[/COLOR][COLOR=#0000ff]/[/COLOR][COLOR=#000050]moveVal[/COLOR];[COLOR=#0000ff]}[/COLOR] [COLOR=#000050]contentMain[/COLOR].[COLOR=#0000d0]_y[/COLOR] [COLOR=#0000ff]-=[/COLOR] [COLOR=#000050]speed[/COLOR];[COLOR=#0000ff]}[/COLOR] [COLOR=#006610]else[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]_y[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]bottom[/COLOR]; [COLOR=#000050]contentMain[/COLOR].[COLOR=#0000d0]_y[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#000050]finalContentPos[/COLOR]; [COLOR=#006610]delete[/COLOR] [COLOR=#0000d0]this[/COLOR].[COLOR=#0000d0]onEnterFrame[/COLOR];[COLOR=#0000ff]}[/COLOR][COLOR=#0000ff]}[/COLOR];[COLOR=#0000ff]}[/COLOR]; [COLOR=#000050]btnDown[/COLOR].[COLOR=#0000d0]onRelease[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR]COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#006610]delete[/COLOR] [COLOR=#0000d0]this[/COLOR].[COLOR=#0000d0]onEnterFrame[/COLOR];[COLOR=#0000ff]}[/COLOR]; [COLOR=#000050]btnDown[/COLOR].[COLOR=#0000d0]onDragOut[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]function[/COLOR]COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#006610]delete[/COLOR] [COLOR=#0000d0]this[/COLOR].[COLOR=#0000d0]onEnterFrame[/COLOR];[COLOR=#0000ff]}[/COLOR]; [COLOR=#006610]if[/COLOR] COLOR=#0000ff[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]_visible[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]false[/COLOR]; [COLOR=#000050]btnUp[/COLOR].[COLOR=#0000d0]enabled[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]false[/COLOR]; [COLOR=#000050]btnDown[/COLOR].[COLOR=#0000d0]enabled[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]false[/COLOR];[COLOR=#0000ff]}[/COLOR] [COLOR=#006610]else[/COLOR] [COLOR=#0000ff]{[/COLOR] [COLOR=#000050]scrollFace[/COLOR].[COLOR=#0000d0]_visible[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]true[/COLOR]; [COLOR=#000050]btnUp[/COLOR].[COLOR=#0000d0]enabled[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]true[/COLOR]; [COLOR=#000050]btnDown[/COLOR].[COLOR=#0000d0]enabled[/COLOR] [COLOR=#0000ff]=[/COLOR] [COLOR=#006610]true[/COLOR];[COLOR=#0000ff]}[/COLOR][COLOR=#0000ff]}[/COLOR]; [COLOR=#000050]scrolling[/COLOR]COLOR=#0000ff[/COLOR];