23 Replies Latest reply on May 3, 2009 2:43 PM by Ned Murphy

# Horizontal Scrollbar in AS2

Hi Forum,

I am new to ActionScript, and I have been given this project where the code is in AS2.  That being said, here's my problem:

I am trying to code up the scrollbar I have created so that it moves and makes the content on top to pan with it.  I just can't seem to wrap my head around it though.  I've been able to make the buttons and content work well, but no luck with the scrollbar.  If anybody could provide some help, it would really be appreciated.  Here is the link to what I am talking about so that you can get a visual idea.

http://www.wilsonrosariojr.com/city/flash.html

Again, this project is in ActionScript 2.0

I have been trying to see if this topic has already been posted, but couldn't find anything.  If a thread does exist, could someone point me there?  Thanks in advance.

Wilson-

• ###### 1. Re: Horizontal Scrollbar in AS2

the basis of a scrollbar is that:

1.  when the dragger is at one extreme position, the item scrolled will be at an extreme position

2.  when the dragger is at the other extreme position, the scrolled item will be at the other extreme position.

3.  you're going to create a linear equation that determines the scrolled items position as a function of the dragger's position.

those 3 facts gives you 2 equations in 2 unknowns.  you solve for the unknowns and you have your linear equation and can, for each position of the dragger, determine the corresponding position of the scrolled item.

scrolledItem._x = unknown1 * dragger._x + unknown2;

to solve for unknown1 and unknown2, use 1 and 2:

findParamsF(draggerPosX1,scrolledItemPosX1,draggerPosX2,scrolledItemPosX2);

function findParamsF(x1,y1,x2,y2){

unknown1 = (y1-y2)/(x1-x2);

unknown2 = y1 - unknown1*x1;

}

• ###### 2. Re: Horizontal Scrollbar in AS2

If this is a homemade scrollbar, then for starters you need to get it so that the scroll handle can be dragged back and forth.  To do that you can turn it into a movieclip (if not already) and assign it some code, such as...

scrollHandle.onPress = function(){
startDrag(scrollHandle, false,0,0,100,0);   // the 100 you adjust to the length of the scrollable distance.

}

scrollHandle.onRelease = scrollHandle.onReleaseOutside = scrollHandle.onRollOut =function(){
stopDrag();

}

Where scrollHAndle is the instance name you assign to that movieclip.

For some added info that might move you along, look at the following posting... it's similar, being a volume control, and you may be able to adapt it.

(Just noticed kGlad beat me to the punch... his info will be very useful)

• ###### 3. Re: Horizontal Scrollbar in AS2

the basis of a scrollbar is that:

1.  when the dragger is at one extreme position, the item scrolled will be at an extreme position

2.  when the dragger is at the other extreme position, the scrolled item will be at the other extreme position.

3.  you're going to create a linear equation that determines the scrolled items position as a function of the dragger's position.

those 3 facts gives you 2 equations in 2 unknowns.  you solve for the unknowns and you have your linear equation and can, for each position of the dragger, determine the corresponding position of the scrolled item.

scrolledItem._x = unknown1 * dragger._x + unknown2;

to solve for unknown1 and unknown2, use 1 and 2:

findParamsF(draggerPosX1,scrolledItemPosX1,draggerPosX2,scrolledItemPosX2);

function findParamsF(x1,y1,x2,y2){

unknown1 = (y1-y2)/(x1-x2);

unknown2 = y1 - unknown1*x1;

}

Hi kglad, I have been trying to understand the logic in your code and explanation.  Forgive me if I sound a bit confused.  Where I am supposed to put the initial positions for the scrolleditem (being my reel) and my dragger (my scrubber) if at all?  Also I am not clear as to what x1,y1,x2,y2 are supposed to represent.  Are they numerical values that I must try out or are they instance names.  Again, thank you for the explanation but I seem to be a little confused.

• ###### 4. Re: Horizontal Scrollbar in AS2

extreme positions of both dragger and the corresponding extreme positions of the scrolled item are put in the function call to findParamsF().  check the parameter names and you can see which parameters go where.

nothing needs to be changed in the function definition itself.  x1,y1,x2,y2 represent the parameters you pass when you make the function call.  just leave that stuff alone.  the only thing you need to do is use the correct numbers instead of draggerPosX1,scrolledItemPosX1,etc in that function call.

• ###### 5. Re: Horizontal Scrollbar in AS2

extreme positions of both dragger and the corresponding extreme positions of the scrolled item are put in the function call to findParamsF().  check the parameter names and you can see which parameters go where.

nothing needs to be changed in the function definition itself.  x1,y1,x2,y2 represent the parameters you pass when you make the function call.  just leave that stuff alone.  the only thing you need to do is use the correct numbers instead of draggerPosX1,scrolledItemPosX1,etc in that function call.

I am not understanding still.  Here's what I have after your second reply:

reel._x = unknown1 * scrubber._x + unknown2;

findParamsF(731,-1950,70,108);

function findParamsF(x1,y1,x2,y2){

unknown1 = (y1-y2)/(x1-x2);

unknown2 = y1 - unknown1*x1;

}

I am still not sure what unknown1 or unknown2 should be.  I am lost..............

• ###### 6. Re: Horizontal Scrollbar in AS2

unknown1 and unknown2 are defined in the findParamsF() function.  after your call, you can trace unknown1 and unknown2 and see they are defined.

also, you shouldn't be hard-coding those numbers in the findParamsF() function call.  generally, you'll use something like:

findParamsF(0,0,scubber._parent._width-scrubber._width,Stage.width-scrolledItem._width);

• ###### 7. Re: Horizontal Scrollbar in AS2

Wilson, if you're still lost, don't be afraid to say so.  What I provided establishes the basic mechanics of making things move, and what kGlad provided was a means for determining what value the x property of the moviereel should be relative to the slider x value.

His x1 and x2 values represent the two extremes of the scroller x values, left end to right end, respectively.  Similarly, the y1 and y2 values are the extremes for the moviereel x values, though they work opposite from the scroller... as the scroller moves right, the moviereel moves left, so there may need to be a negative sign involved somewhere along the line for the moviereel.

As far as the unknowns go, they are slope/constant (m/b) values that make up the linear equation (mX + b) that represents the relationship between the scroller and moviereel positions.  So using his function you can determine them, and then use them to find out what the moviereel x value needs to be for the scroller X value.

Since your movie reel may change in size, you can utilize width properties rather than hardcoding a values, which is what he shows in his last response.  Similarly, you make it more completely self-adapting by using the width properties for all the pieces rather than hardcoding values for them.  Where he uses Stage.width, you probably want to use the width of the viewing area you allow for the moviereel instead.

• ###### 8. Re: Horizontal Scrollbar in AS2

I still seem to not be getting the proper movement in place.  Here is my code, thank you both again kglad & Ned Murphy.

findParamsF(0,0,scrubber._parent._width-scrubber._width,Stage.width-reel._width);

function findParamsF(x1,y1,x2,y2){
unknown1 = (y1-y2)/(x1-x2);
unknown2 = y1 - unknown1*x1;
}

scrubber.onPress = function(){
startDrag(scrubber, false,0,0,100,0);

}

scrubber.onRelease = scrubber.onReleaseOutside = scrubber.onRollOut =function(){
stopDrag();
}

Here's the link again to see what's going on so far, the scrubber seems to disappear:

http://www.wilsonrosariojr.com/city/flash.html

• ###### 9. Re: Horizontal Scrollbar in AS2

The values I provided aren't going to help.  The scrubber likely flew off somewhere relative to those numbers.

You need to design the scrubber relative to the white area behind it, which is easiest done by creating a movieclip that contains both that white area and the scrubber.  The upper left corner of that white area would lie at the 0,0 coordinate inside that movieclip.  The scrubber would be a movieclip unto itself, inside that movieclip with its upper left corner lying at the 0,0 coordinates of its stage.

The value you specify in place of the 100 value I showed would be the length of that white area minus the width of the scrubber.  This is so that the scrubber can't be dragged beyond the right end of the white area.  So if your scrubber is 100 pixels wide, and the white area is 800 pixels wide, the startDrag arguments would be ordered 0,0,700,0.

The drag code as shown would be on the timeline inside the movieclip that contains the white area and the scrubber.

When it comes to the moviereel, the left edge where the moviereel hides behind would mark its x = 0 point.  This can be realized by doing something similar to what is done for the scrubber, where you have a movieclip to hold the moviereel with its x=0 position at that edge.  Or you could use the offset from the edge of the stage itself, so instead of 0, its origin would be its distance from the movie edge.  Personally, I'd go with the movieclip container option to keep the math less confusing.

Work on getting the scrubber to scrub properly first, then you can move on to making the moviereel react to it.

I'm attaching a quick example CS3 file for the scrubber.  Rename the file with an fla extension to open it in Flash (let me know if you need an earlier version).  But try to understand how it works based on what I've described above... that will be key to getting thru this.

• ###### 10. Re: Horizontal Scrollbar in AS2

I am so close.  Your textfile was corrupt for some reason, but I did implement your ideas and am now able to move the scrubber.  I tried applying a second line in that function to them move the reel with some success, but then it disables the movement of the scrubber.  I reverted it back to show you the progress.  The following code is what I tried to use including the reel in the function.

scrubberBackground.scrubber.onPress = function(){
startDrag(scrubberBackground.scrubber, false,0,0,660,0);

startDrag(reel, false,0,0,660,0);
}

I assume I'm canceling out the first startDrag which is why my reel can move but not the scrubber.

Anyway, here is the link again:

http://www.wilsonrosariojr.com/city/flash.html

This success alone is amazing thanks again.  Your help is really appreciated, really.  I am really noticing the slight differences AS2 and AS3.  I am excited to go into these projects but I just feel lost at times (like I do now).

Update**

I just want you to know that I am aware that I have made no change to the 660 value in the second line.  I just used it to see if any change would occur to the reel, and although it still made the reel move the scrubber was disabled as stated before.

• ###### 11. Re: Horizontal Scrollbar in AS2

Yes, you only want to have one thing being manhandled by the drag activity, the scrubber.  Moving the moviereel is where kGlad's stuff comes in, along with another element.  While dragging, you want something constantly checking the _x position of the scrubber and adjusting the _x position of the moviereel.

If you follow the link I provided early on it gives an explanation of one approach for doing this (not the only one, but one).  It involves changing your scrubber movieclip into a two frame movieclip, where when you start dragging, it moves to the second frame, where an onEnterFrame event is assigned which you can use to continually update the moviereel _x property.  When you stop dragging it moves back to frame 1 so that the onEnterFrame event ends.  The code/explanation in that other posting involves a volume control, so you'll need to finagle it to deal with position control, utilizing kGlad's equations.

• ###### 12. Re: Horizontal Scrollbar in AS2

I have been trying to interpret the logic of both of your strategies and I just cannot seem to be progressing.  Perhaps it is because I am thrown off with the code kglad has provided.  I have substituted the names in his function with my own objects but nothing seems to work.  I also have been trying to use Ned's volume control help and use it in my own situation but again I am confusing myself with replacement of object names and parameter inputs.

• ###### 13. Re: Horizontal Scrollbar in AS2

At this point, you need to start showing what you are using for code where.  The scrubber will generate a value of x that you can feed to a function.  That function will be used to change the moviereel position.  That function can live in the main timeline and be called from inside the scrubber by a _parent reference (ex: _parent.moveReel(scrubber._x); ).

You need to try to logically realize what needs to be done, then create the pieces of code to do it... I believe you used the phrase "wrap my head around it" at the start of this.  Reason it out on paper if it helps... it often does for me.

• ###### 14. Re: Horizontal Scrollbar in AS2

Here is my .fla file.

You can change the file to .fla like you did before.

• ###### 15. Re: Horizontal Scrollbar in AS2

NedWebs wrote:

At this point, you need to start showing what you are using for code where.  The scrubber will generate a value of x that you can feed to a function.  That function will be used to change the moviereel position.  That function can live in the main timeline and be called from inside the scrubber by a _parent reference (ex: _parent.moveReel(scrubber._x); ).

You need to try to logically realize what needs to be done, then create the pieces of code to do it... I believe you used the phrase "wrap my head around it" at the start of this.  Reason it out on paper if it helps... it often does for me.

Still no results here is the code I have used, again the only problem is getting the reel to respond when the scrubber is dragged.

function findParamsF(x1,y1,x2,y2){
unknown1 = (y1-y2)/(x1-x2);
unknown2 = y1 - unknown1*x1;
}

scrubberBackground.scrubber.onPress = function(){
startDrag(scrubberBackground.scrubber, false,0,0,660,0);

}

scrubberBackground.scrubber.onRelease = scrubberBackground.scrubber.onReleaseOutside = scrubberBackground.scrubber.onRollOut =function(){
stopDrag();
}

I know I need to create a function that will make the reel respond to this but I can't make it work and here's why I can't:

My logic is telling me that I must insert some code in "scrubberBackground.scrubber.onPress = function" in order for the reel object to respond when the scrubber is dragged (in fact I know it must be relative to when the scrubber is dragged and not pressed).

I have also tried a conditional statement where if the startDrag is true for the scrubber, then the reel object must move.  This is what I am lost in.  Everything works except for the reel responding to the movement to the scrubber.  Any help?  Thanks again, forgive for my novice thinking.

• ###### 16. Re: Horizontal Scrollbar in AS2

Go back to the posting I linked at the start of this.  Take your scroller and turn it into a two-framed movie clip and have it mimic what the volume control code does.  The difference for your case will be that when the scroller moves to frame 2 (via onPress) Your onEnterFrame function in frame 2 will be commanding the reel to move based on the current _x value of the scrubber handle, possibly thru calling another function.  Just see if you can get the scrubber to work with that example as a basis, and make the reel move, just move, no special direction or distance... just move.  Once you get that far, then maybe you can start to reason out how the reel has to move based on the scrubber handle position.

Honestly, I wouldn't have provided what kGlad did as far as how to determine the reel position--I'm not that good with recalling math stuff.  Whenever I do these types of things I end up drawing diagrams to get my head around what determines where the controlled object should be based on the control position--I have to think it thru.  Maybe that will help you in this case.

What you need to understand has been explained already, at least in every way I can do without straight out doing it for you (which won't happen).

• ###### 17. Re: Horizontal Scrollbar in AS2

Okay, I tried out the lesson and finally have been able to set it up correctly, at least I think so.  The only piece that confuses me is this:

currentVolume = volume_mc.volumeBtn._x;
s.setVolume(currentVolume);
}

Where are you referencing currentVolume from?  What should s.setVolume be substituted for in my case?

After setting everything up, I tested to see if the reel would at least move by doing:

function moveReel(){

reel._x += 10;

}

And indeed the reel finally moved.  I tried using:

function moveReel(){

reel._x = scrubber._x

}

to see if moving the scrubber would cause the reel to move but instead it just changed their x positions and the scrubber would no longer work.

• ###### 18. Re: Horizontal Scrollbar in AS2

You probably still don't have the scroller set up properly.  So keep going with getting that settled.  Also, In the enterFrame function on frame 2 of the scroller, have it calling that moveReel function... that will be what keeps the reel moving when the scrubber is moved.  the second function you showed should be sufficient for that for this phase of making it work--it won't be what you want, but if you get it to move with the scrubber, you're past getting the scroller working right.

PS - expect to struggle with Flash.  That's the best way to learn it.

• ###### 19. Re: Horizontal Scrollbar in AS2

Thanks Ned, I will try to use this and make it work.  As frustrating as it might be for me now I know that it's only a matter of time until I get the Zen moment and hopefully see the answer clearly.

• ###### 20. Re: Horizontal Scrollbar in AS2

Well I have been able to make the reel respond to the scrubber, however the animation is now lost when I click on the arrows.  So this must mean that there is a conflict in code.  Here is the code I am using to perform the animation:

stop();

//Variables
var currentSet:Number;
var setPos:Array=new Array();
setPos[0]='108';
setPos[1]='-578';
setPos[2]='-1263';
setPos[3]='-1948';

rightArrow.onRelease=function():Void{
if(currentSet<3){
getSet(currentSet+1);
}
}
leftArrow.onRelease=function():Void{
if(currentSet>0){
getSet(currentSet-1);
}
}
function getSet(id:Number):Void{
reel.targy=setPos[id];
reel.onEnterFrame=moveMe;
reel.speed=4;
currentSet=id;
}

getSet(0);
function moveMe():Void{
//declare targx, targy & speed (all optional)
//trace("moveMe: "+this);
if(this.targy==undefined){
this.targy=this._y;
}
if(this.targx==undefined){
this.targx=this._x;
}
if(this.speed==undefined){
this.speed=2;
}
this._y=this._y+((this.targx-this._y)/this.speed);
this._x=this._x+((this.targy-this._x)/this.speed);
if(Math.abs(this.targx-this._y)<1 && Math.abs(this.targy-this._x)<1){
this._y=this.targx;
this._x=this.targy;
this.onEnterFrame=null;
}
}

I KNOW THERE ARE FUNCTIONS THAT ARE USED THAT I AM ALSO USING WITH THE SCRUBBER AFFECT SO HERE IS THE CODE FOR THAT UP TO THIS POINT:

THIS IS FOR FRAME 1 ON THE SCRUBBER MOVIECLIP:

_parent.scrubber.onPress = function(){
startDrag(_parent.scrubber, false,0,0,660,0);
gotoAndStop(2);
}

_parent.scrubber.onRelease = _parent.scrubber.onReleaseOutside = _parent.scrubber.onRollOut =function(){
stopDrag();
gotoAndStop(1);
}

THIS IS FOR FRAME 2 ON THE SCRUBBER MOVIECLIP:

stop();
this.onEnterFrame = function(){
_parent._parent.moveReel();
}

THIS IS ON THE MAIN TIMELINE TO MAKE THE REEL MOVE WITH THE SCRUBBER:

function moveReel()
{
reel._x = scrubberBackground.scrubber._x;

}

Since I am telling flash to move the reel in the "getSet" function and in the "moveReel" function the "moveReel" function is cutting off the animation.  Is there somehow going about this where I can possibly insert something in the "Click this button to move the current set of stories" code or adding another function to where I can have both the animation and scrubber affect?

I think it is likely that the above example code in moveReel should not be used but I'm posting it to show that I'm getting some feedback in Flash.  I assume the linear equation piece comes to play here, but will it also sacrifice the animation the reel has when pressing the "Click this button to move the current set of stories" buttons?

I hate to post something so long, so if Ned or anybody reads and replys, I say to you thank you for being patient with me.  This is not easy for me and the fact that I am being helped is an amazing experience.

• ###### 21. Re: Horizontal Scrollbar in AS2

Based on looking at the button-related code, I assume this isn't your own code, but something you acquired from somewhere... otherwise, the scroller probably wouldn't have been so much of a problem to understand and you would have been able to create it with just a single frame approach.  If so, that's the trouble with using borrowed code... if you need to revise it, or change it entirely, you need to understand it.

You may have to rethink the way you control the reel with the buttons. Rather than having fixed positions, maybe the buttons should be designed to simply shift the reel one viewing area distance at a time, or one reel item if they're of equal widths...  and less if near an end of the reel.

And the scroller should be designed to react to use of the buttons, so that it always reflects the reel position... meaning if you move the reel with the buttons, you also have to move the scroller.

One of the problems you face is having one control (buttons) that relies on fixed values to work and another that doesn't (scroller).  The button controls depend on an index value (currentSet), which can end up being out of synch when you use the scroller and then switch to the buttons.  The scroller doesn't change the index, so you can move things to the other end of the reel with it and the button code thinks the reel is still where it left it.  So getting rid of that idex basis for the buttons would be helpful.

• ###### 22. Re: Horizontal Scrollbar in AS2

NedWebs wrote:

Based on looking at the button-related code, I assume this isn't your own code, but something you acquired from somewhere... otherwise, the scroller probably wouldn't have been so much of a problem to understand and you would have been able to create it with just a single frame approach.  If so, that's the trouble with using borrowed code... if you need to revise it, or change it entirely, you need to understand it.

You may have to rethink the way you control the reel with the buttons. Rather than having fixed positions, maybe the buttons should be designed to simply shift the reel one viewing area distance at a time, or one reel item if they're of equal widths...  and less if near an end of the reel.

And the scroller should be designed to react to use of the buttons, so that it always reflects the reel position... meaning if you move the reel with the buttons, you also have to move the scroller.

One of the problems you face is having one control (buttons) that relies on fixed values to work and another that doesn't (scroller).  The button controls depend on an index value (currentSet), which can end up being out of synch when you use the scroller and then switch to the buttons.  The scroller doesn't change the index, so you can move things to the other end of the reel with it and the button code thinks the reel is still where it left it.  So getting rid of that idex basis for the buttons would be helpful.

This code was given to me by my professor in one of my classes.  I think I'm way over my head with this one.  This project is too sophisticated for my understanding as of now, and since I thought making the reel respond to the scroller wouldn't be so difficult to resolve, it looks like I'm going to have to change a lot of what I already don't know.

Thanks for the help, I will see what I can do.

• ###### 23. Re: Horizontal Scrollbar in AS2

You're welcome.  Having multiple types of controls can be a handful to manage.  Some of the seemingly simplest things can require lengthy code once you start finding new bases that need to be covered.