Hey,
I’m trying to make a fullscreen flash scroll bar and have been making some progress, in terms of adjusting a scrollbar to a fullscreen. Anyway, I’ve hit a bit of a stumble. In my function Stage.onResize I’m trying to make the scrollbar dragger a percentage of the amount of content which is shown on the screen as the picture below shows.
The problem is that when you scroll down for some reason the _y position of the scroller is creating a gap, which seems to become bigger the more you drag the scroller down (make sure you have the content displayed in a box like the picture, otherwise the scroller won’t show because all the content is on screen… like a scroller should do!).
So the red line is aligning to the scroll dragger’s y position to show my point.
What I want to be able to do is when you drag the scroll dragger I want it to stop when you get to the bottom, at the moment it seems to be going to the bottom and beyond. I want it to stop when you get to the bottom of the content (all content shown on screen) like a normal html scroller.
It might be important to note that I have changed the registration points a little, as you’ll see in the fla.
Any help on this would be greatly appreciated.
Here are a couple of pictures to illustrate the problems and source files and code.
//import for mac scrollwheel operation
import com.pixelbreaker.ui.MouseWheel;
stop();
//Align at top left?
Stage.align = "TL";
Stage.scaleMode = "noScale";
// Padding between top of stage and content **MAKE THIS A PERCENTAGE**
var contentPadding = 30;
//Set the position of the content in the middle of the screen upon movie load
content_mc._x = Stage.width/2;
content_mc._y = contentPadding;
//Position the scroller to the right and to the height of the stage upon movie load
scroller_mc._x = Stage.width-scroller_mc._width/2;
scroller_mc._y = 0;
scroller_mc._height = Stage.height;
// y position on top of the content box
var topContentBox = content_mc._y;
//Create new listener object to listen to stage resize
var stageResizeListener:Object = new Object();
//Everytime the stage is resized...
stageResizeListener.onResize = function() {
// Amount of content in pixels displayed on screen
var contentOnScreen = Stage.height-topContentBox;
// Percentage of content shown on screen
var pctContentOnScreen = contentOnScreen/content_mc._height;
//Position the scroller to the right and to the height of the stage
scroller_mc._x = Stage.width-scroller_mc._width/2;
//scroller_mc._y = Stage.height/2
//Set the position of the content in the middle of the screen
content_mc._x = Stage.width/2;
//scroller_mc.scrollerBar_mc._height = Stage.height;
scroller_mc.scrollerBar_mc._height = Stage.height;
//trace(Stage.height);
scroller_mc.scrollerDragger_mc._y = 0;
if (pctContentOnScreen<1) {
scroller_mc.scrollerDragger_mc.enabled = true;
scroller_mc.scrollerDragger_mc._visible = true;
scroller_mc.scrollerDragger_mc._height = pctContentOnScreen*(Stage.height-100)/2;
scroller_mc.scrollerDragger_mc._y = 0;
} else {
scroller_mc.scrollerDragger_mc.enabled = false;
scroller_mc.scrollerDragger_mc._visible = false;
}
//pctDraggerOnScreen = scroller_mc.scrollerDragger_mc._height / Stage.height;
//trace(pctDraggerOnScreen);
//this.scroller_mc.scrollerDragger_mc._y = topContentBox;
};
//create a listener for when the stage is altered
Stage.addListener(stageResizeListener);
scroller_mc.scrollerDragger_mc.onPress = function() {
//**WORKING ON THIS!!**//
this.startDrag(false,this._x,0,this._x,scroller_mc.scrollerDragger_mc._height+Stage.height);
};
scroller_mc.scrollerDragger_mc.onRelease = scroller_mc.scrollerDragger_mc.onReleaseOutside=function () {
this.stopDrag();
};
onEnterFrame = function () {
holder_mc._y = scroller_mc.scrollerDragger_mc._y;
};