Scrollbar issue on child MovieClips
Posted by Flashscaper on August 14th, 2008 filed in Actionscript 3, Components, Flash CS3, TutorialsFirst of all I would like to apologise for not responding to the comments in the blog post. I started my new job 3 months ago and it had my time pack fully.
Nonetheless, I read the comments posted. One main issue that kept coming up was the problem of the scrollbar in loaded movieclips.
There is a simple solution to it and maybe I will explain the details next time. Basically, the problem is caused by the stage listener in the Scrollbar constructor.
Take the 2 listeners and shift them down to the init() function and the scrollbar will work.
Hope this post is helpful.
January 12th, 2009 at 8:57 am
Hi.
I’m very new to this whole action script malarkey. I’m in college with handups due, moan moan!
Anyway, when you say take the 2 listeners and shift them down to the init() function, where exactly are these listeners to be found? and how do I move them?
I had to nest the scrollbar in a movie clip because it threw out the stop function on the main website’s code.
If you could help me I would greatly appreciate it.
Your code is wicked! I tilt my cap to anyone who can do it.
Thanks.
January 22nd, 2009 at 7:25 am
Hello Flashscaper,
thank you for your scrollbar tutorial !!
could you please show us exactly were to put the 2 listeners in the Scrollbar Package so that the scrollbar can work in a nested swf ?
I’ve tried every position in the init() function but the stage listener still isn’t working; meaning that once I clicked on the scroller, clicking outside the scroller will not activate the stopscroll function…
It does work with the Up and Down arrow listeners (if I clik on an arrow than the scroller movement is stopped), but not with the stage listener…
I can’t figure out why the stage event aren’t taken into account…
Please help !
Best regards,
Olivier
February 26th, 2009 at 2:03 am
What should we change “stage” to?
February 26th, 2009 at 5:06 am
Nevermind
March 3rd, 2009 at 1:44 pm
Please, Has someone figured out where the code event listeners must be moved to? And can that someone show me exactly where it goes. This script is just what I need, but this little snag is a problem.
Funny thing is, when I open his FLA file and try to publish a new SWF, it won’t work. IS there a publishing setting I should change?
thanks.
March 17th, 2009 at 8:09 am
Hello Flashscaper,
i load external swf with your scrollbar in most of them.
i’ve just shift down the two listerners to the init func but it still pops the same error.(TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Scrollbar/stopScroll())
Could you point me out some ideias for resolving this issue?
thanks man..
April 19th, 2009 at 12:23 pm
first of all thanks so much flashscraper your scrollbar is too nice
Alex , I was getting the #1009 error too, wasn’t a problem in opera, firefox and safari but gave me a headache with I.E 7
I tried moving the listeners to the init func but it didn’t work so i tried this instead and it seems ok, heres the Scrollbar.as i’m using, i took out the mask so if you want to keep the mask compare this with the original file
package {
import caurina.transitions.*;
import flash.display.*;
import flash.events.*;
import flash.geom.*;
public class Scrollbar extends MovieClip {
private var target:MovieClip;
private var top:Number;
private var bottom:Number;
private var dragBot:Number;
private var range:Number;
private var ratio:Number;
private var sPos:Number;
private var sRect:Rectangle;
private var ctrl:Number;//This is to adapt to the target’s position
private var trans:String;
private var timing:Number;
private var isUp:Boolean;
private var isDown:Boolean;
private var isArrow:Boolean;
private var arrowMove:Number;
private var upArrowHt:Number;
private var downArrowHt:Number;
private var sBuffer:Number;
public function Scrollbar():void {
upArrow.buttonMode = true;
downArrow.buttonMode = true;
scroller.buttonMode = true;
addEventListener(Event.ADDED_TO_STAGE, addedToStage, false, 0 , true);
}
public function addedToStage (_e:Event) {
this.addEventListener(MouseEvent.MOUSE_DOWN, dragScroll, false, 0, true);
this.addEventListener(MouseEvent.MOUSE_UP, stopScrolling, false, 0, true);
this.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelHandler, false, 0, true);
}
//
public function init(t:MovieClip, tr:String,tt:Number,sa:Boolean,b:Number):void {
target = t;
trans = tr;
timing = tt;
isArrow = sa;
sBuffer = b;
if (target.height top) {
scroller.y-=arrowMove;
if (scroller.y < top) {
scroller.y = top;
}
startScroll();
}
}
}
//
public function downArrowHandler(event:Event):void {
if (isDown) {
if (scroller.y dragBot) {
scroller.y = dragBot;
}
startScroll();
}
}
}
//
public function dragScroll(event:MouseEvent):void {
scroller.startDrag(false, sRect);
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, moveScroll);
}
//
public function mouseWheelHandler(event:MouseEvent):void {
if (event.delta < 0) {
if (scroller.y dragBot) {
scroller.y = dragBot;
}
startScroll();
}
} else {
if (scroller.y > top) {
scroller.y-=(event.delta*2);
if (scroller.y < top) {
scroller.y = top;
}
startScroll();
}
}
}
//
public function stopScrolling(event:MouseEvent):void {
isUp = false;
isDown = false;
scroller.stopDrag();
this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveScroll);
}
//
public function moveScroll(event:MouseEvent):void {
startScroll();
}
public function startScroll():void {
//ratio = (target.height – range)/range;
ratio = (target.height – range)/range;
sPos = (scroller.y * ratio)-ctrl;
Tweener.addTween(target, {y:-sPos, time:timing, transition:trans});
}
}
}
its not perfect as the drag gets a bit stuck if you don’t click but at least the errors gone for now until someone finds a better way of doing it
April 19th, 2009 at 12:31 pm
actually forget that , now its playing up in safari lol, sorry :/
May 13th, 2009 at 10:59 am
Hi, thanks for the scroller.
I’m having the same problem as Alex, I get the following error:
(TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Scrollbar/stopScroll())
It’s possibly due to the fact that I have the scroller only in 1 frame, among the many other frames which have different text and is navigated by two buttons that tracks mouse events as well. The two buttons is used to jump to previous and next frames. The problem only happens after the frame containing the scrollbar script have been loaded, and then the two buttons is clicked.
This is part of the AS I have loaded when the scroller AS loads:
arrow_left_end.addEventListener(MouseEvent.CLICK,frame_prev_stop3);
function frame_prev_stop3(me:MouseEvent){
this.stop();
}
arrow_right.addEventListener(MouseEvent.CLICK,frame_next3);
function frame_next3(me:MouseEvent){
this.nextFrame();
}
I’m a total noob when it comes to actionscript, as you can see, so I’m not too sure how to fix the problem.
I have tried many different scroller, and yours is the easiest to use, I just gotta get pass this one little problem.
May 31st, 2009 at 8:29 pm
Wonderful scrollbar, muchos gracias!!
June 20th, 2009 at 4:48 pm
Good man, this is actually an issue I’ve had with other scrollbars you are the only who addressed it. It makes sense that listeners added to the stage should be added in the init() instead of the constructor, that way the stage property isn’t null. Great job man. AS3 is a beast.
July 12th, 2009 at 6:54 pm
Hi,
thanks a lot for this scrollbar, i’m new in AS3 and i’m learning from scratch with books, etc…
I have a little issue with this scrollbar, it’s only show me something like 3 eachs of text and i have space for 5 eachs. I just try to find where i can change the value of the text area from this scrollbar.
Exemple:
My stage is 850 x 697
i have place to show the text area like 480 x 600 with the scrollbar and the text height is 1267
The scrollbar show me only 280 x 600
_________
thanks a lot for your help.
Gerry
August 7th, 2009 at 12:55 am
Hi!
First of all, sorry for my poor english, and THANKS FOR THIS WONDERFUL SCROLL
The solution for the stopScroll issue is simply put an try catch finally in the function stopScroll.
public function stopScroll(event:MouseEvent):void {
isUp = false;
isDown = false;
scroller.stopDrag();
try{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveScroll);
}
catch(error:Error){}
finally{}
}
September 22nd, 2009 at 11:53 pm
Line 45-54 should look like this to solve the child MC issue:
public function init(t:MovieClip, tr:String,tt:Number,sa:Boolean,b:Number):void {
target = t;
trans = tr;
timing = tt;
isArrow = sa;
sBuffer = b;
if (target.height <= track.height) {
this.visible = false;
stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
stage.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelHandler);
September 22nd, 2009 at 11:56 pm
The last 2 lines were removed (moved) from line 42 I think. Hence the “Take the 2 listeners and shift them down to the init() function and the scrollbar will work.”
I know zero code and I imagine lots of people here too are limited. A more thorough explanations would have saved a lot of agro and time for all. But thx for the scroller just the same.
October 26th, 2009 at 6:03 pm
Ok I think this is it! Not too tough, thank the maker. This is what you code should look like from lines 40-57. Please note the commented-out lines so you can see what needs to be changed:
public function Scrollbar():void {
scroller.addEventListener(MouseEvent.MOUSE_DOWN, dragScroll);
//stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
//stage.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelHandler);
}
public function init(t:MovieClip, tr:String,tt:Number,sa:Boolean,b:Number):void {
//scroller.addEventListener(MouseEvent.MOUSE_DOWN, dragScroll);
stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
stage.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelHandler);
target = t;
trans = tr;
timing = tt;
isArrow = sa;
sBuffer = b;
if (target.height <= track.height) {
this.visible = false;
}