ScrollBox can someone help me with some math?

[webguy]

Hello,
I'm making a scrollBar and I really really suck at math, I was hoping someone could help me figure what to do. I've attached the file so you can see what I'm working with.

this is the math I got so far :D

scroller.onEnterFrame = function () {
_parent.info._y = -this._y-30;
}


Heheh.. yeah I really suck at math. What I am trying to figure out is a way to stop scrolling when the bottom of the text field or the top of the text field is within view of the mask (is visible). The text field is dynamic and autoSize=true and it is populated with text from a variable for testing. So it can scale to any height. How can I determine if the top or bottom bounds have been reached in order to stop the content from being able to slide?

I'll explain it further if needed. It is probably some fairly simple math, but once again my math skills do not exist.

Thanks!
web
499 posts...

[snapple]

File ?

snapple :)

[webguy]

I'm such a goof..

[webguy]

Dang.. I'm still stuck. I tried real hard this weekend to come up with an answer, and I ended up with a headache so bad I couldn't look at the computer :mad:

Anyway I figured out what I need, I just don't know how to get it. What is the formula I am looking for? It seems so easy on paper, then I try to get some numbers together and everything goes haywire.

I made an illustration to try to help me figure it out, maybe it will help illustrate what I am trying to acheive.

http://www.ifae.com/scroller.jpg

thank you again!
web

[annexion]

You could do something as follows:


heightDif = info._height-mask._height;
posDif = mask._y-info._y;
percentage = (posDif/heightDif)*100;

heightDif essentially sets the distance the info box needs to travel. In practice, this tells us that in order for the info box to have reached it's max scroll, it must've travelled the distance of the difference in height between the two movies.

posDif tells us what the difference in position is between the two movie clips, or, how far the info clip has travelled in relation to the position of the mask movie clip.

percentage is obviously the output of the percentage. A small number (50) divided by a large number (100) will yield a result of .5, or the actual decimal value of what will become a percent. You should remember this from early math in school:p Now we just multiply that by 100 to get the actual percent of the scroll of the info clip in relation to the mask clip.

So that tells us how to get the percentage of how "scrolled" the info box is. I bet you're wondering now how you'd SET the position of the info box according to the percentage of the scroller right? Well, I'll explain that right now.

I'll go ahead and assume you've got the code done for the scroller to be able to get a percentage. If not I will tell you after you've replied. I don't want to muck up this single post with a dictionary's worth of text.

To SET the position of the info box in relation to the mask you'll use a derivative of the code above. Something like the following:

percentage = percentFromScroller;
heightDif = info._height-mask._height;
info._y = mask._y-((percentage/100)*heightDif);

percentage is obviously the percentage from the scroller that you have.

heightDif is again the difference in height between the mask and the info clips. This give us the distance to travel, or scroll.

Now we set the info clips position. To do this and get the correct scrolling behavior we have to move the info clip UP when the scroller goes DOWN. So we'll be subtracting a number from the Y position of the mask clip to set the Y position of the info clip. Essentially we just multiply the decimal equivalent of the percentage times the difference in height. This gives us the "portion" of heightDif we are going to move up from the mask clip. So, now we just subtract that "portion" from the mask Y value and BAM, we have scroll action.


This all assumes that the registration points for your mask and info clips is set to the tops of their respective bounding boxes. I assumed this because in your math you simply used _y+_height. Otherwise you would've used _y+(_height/2);

I hope that explains some things better to you and more importantly to anyone else that wants to know the HOW behind scrolling.

Good luck.

[webguy]

annexion thanks man that is awesome, that is exactly what I was looking for. I was able to get the percentages for both the scroller and the info box, however I am having trouble relating the percentage of the distance to the infoBox.


scroller.onEnterFrame = function () {
// here I get the percentage of movement for the slider
// its upper bound limit is 14, and lower bound limit is 115
// when I trace it, it seems accurate
per = (this._y-14)/101*100;
// this is the heightDif code
heightDif = _parent.info._height-_parent.mask._height;
// and here is the code that is setting it to its position
_parent.info._y = _parent.mask._y-(per*heightDif);
}


the problem is that the number returned for _parent.info._y is way off. It starts out close, but one click of a button sends it off screen.

Thanks again..

[annexion]

If you upload the fla I'll punch the code in and comment it for you. It's hard to tell exactly where the error might be. It might be the order of operations in how you're getting the percentage from the scroller. Anyhow, go ahead and upload it and I'll get back to you.

[webguy]

it's right up there in my third post.. here is the version I am working on now that has your changes made.

In case I was unclear before, you will be able to tell from the fla that I am trying to have the position of the scroller control the position of the info.. this way the up and down buttons only have to move the scroller, and that in turn effects the info. Because I also allow them to click in the scroller to move the scroller to that position, blah, blah blah. You will be able to tell from the fla, it is pretty basic.

Thanks again annexion!!

web

[webguy]

yep..yep yep..I'm an idiot..here is the zip..

:confused:

[webguy]

anyone? I feel like I am so close.. I can taste it.. if I stick my tongue out I can taste it.. like its right in front of my...

[annexion]

Sorry about that. Hectic schedule. I did the work for you, but I fully expect you to look at it and understand/learn how to do it on your own.:p

Good luck.

[webguy]

annexion that is awesome! I guess startDrag() - stopDrag() is not very effecient? I know how to do everything in your code but the math :) But I will learn it by applying it to my actual project. :p

[annexion]

That's the BEST way to do it:cool: