Hi all,

I've ran through and can understand Kirupa's tutorial

Scrolling Dynamically Loaded Text
http://www.kirupa.com/developer/mx/dynamic_scroller.htm

My question is how do I go about modifying it so that when I drag the
scrollthumb there is a bit of delay and slingyness in the movement of the text.
So that is slowly slides into place?

I am trying to replicate the feeling of the scrollbar at this site:
http://www.markesephotography.com/index_flash.html

If anyone can show me how to change Kirupa's tutorial to produce this effect I
would be very grateful.

Any help would be much appreciated

use an ease-in for the scroll property of the textfield. for example, if
targetScroll is the scroll property of the textfield tf, determined by the
slider's position:

tf.scroll=Math.round(.5*(tf.scroll+targetScroll));

Thanks Kglad, do you have any good tutorials on how to build scroll boxes from
the ground up, without having to use a flash component?.

The best one I have found so far is and it seems to work ok, although it seems
a little complicated and cluttered:
http://www.mediasparkles.com/resume/scrollbar.html#

Trying to fit your code into the scroll functions, but Im not sure exactly how
and where I would adapt this. This is the functions of my scroller: Could you
please show me Kglad?


// scrolls text field up or down
function scrollIt() {
w_field.scroll += pressed;
// make sure that scroll thumb always stays on track
if (!dragging) {
if (w_field.scroll<=1) {
scroll_thumb._y = scroll_thumb.min_y;
} else if (w_field.scroll>=w_field.maxscroll) {
scroll_thumb._y = scroll_thumb.max_y;
} else {
scroll_thumb._y += scroll_thumb.increment*pressed;
scroll_thumb.checkPos();
}
}
}


// called when pressing stops
function stopScroll() {
still_pressed = false;
isPressed = false;
}
// up arrow code:
up_arrow.onEnterFrame = function() {
if (this.mouseIsPressing == true) {
if (w_field.scroll>1) {
w_field.scroll--;
scroll_thumb._y -= scroll_thumb.increment;
}
if(w_field.scroll ==1){
scroll_thumb._y = 14;
}
} else {
stopScroll();
}
};
up_arrow.onPress = function() {
this.mouseIsPressing = true;
};
up_arrow.onRelease = up_arrow.onReleaseOutside = function () {
this.mouseIsPressing = false;};

// down arrow code
down_arrow.onEnterFrame = function() {
if (this.mouseIsPressing == true) {
if (w_field.scroll < w_field.maxscroll) {
w_field.scroll++;
scroll_thumb._y += scroll_thumb.increment;
}
if (w_field.scroll == w_field.maxscroll) {
scroll_thumb._y = scroll_thumb.max_y;
}
} else {
stopScroll();
}
};
down_arrow.onPress = function() {
this.mouseIsPressing = true;
};
down_arrow.onRelease = down_arrow.onReleaseOutside = function () {
this.mouseIsPressing = false;};

// initialize scroll thumb by setting some variables
scroll_thumb.initiate = function() {
this._y = 14;
this.initiated = true;
this.min_y = this._y;
this.max_y = scroll_track._height - (this._height + up_arrow._height);
this.increment = Math.floor((this.max_y - this.min_y) / w_field.maxscroll);
};
// scroll thumb drag function
scroll_thumb.drag = function() {
this.startDrag(false, this._x, this.min_y, this._x, this.max_y);
if (!this.org_y) {
this.org_y = this._y;
}
dragging = true;
this.onEnterFrame = whileDragging;
};
// scroll thumb button functions:
scroll_thumb.onPress = function() {
this.drag();
};
scroll_thumb.onRelease = function() {
dragging = false;
isPressed = false;
still_pressed = false;
stopDrag();
scroll_thumb.onEnterFrame = null;
};
// make sure scroll thumb never goes beyond its max or min spots
scroll_thumb.checkPos = function() {
if (this._y > this.max_y) {
this._y = this.max_y;
} else if (this._y < this.min_y) {
this._y = this.min_y;
}
};
// scroll thumb enterFrame function while being dragged
function whileDragging() {
if (dragging) {
var moved = this._y-this.org_y;
if (Math.abs(moved)>this.incrementrement) {
if (moved>0) {
pressed = 1;
} else {
pressed = -1;
}
this.org_y = this._y;
scrollIt();
// make sure text field is in tune with thumb
if (Math.abs(this._y-this.max_y)<1) {
w_field.scroll = w_field.maxscroll;
} else if (Math.abs(this._y-this.min_y)<1) {
w_field.scroll = 1;
}
} else {
pressed = 0;
}
this.checkPos();
}
}
// scroll track parameters & functions
scroll_track.useHandCursor = false;
scroll_track.onPress = function() {
rec_y = _root._ymouse-this._parent._y;
if (rec_y>scroll_thumb._y) {
pressed = 9;
} else {
pressed = -9;
}
scrollIt();
checkIfPressed = setInterval(callBack, 100);
};
scroll_track.onRelease = scroll_track.onReleaseOutside=function () {
stopScroll();};


Im trying to find a tutorial which would show me line for line extacly how to
do something like above and what it exactly all means.

that's pretty complex coding for a scrollbar and buttons. the code below
appears more succinct and is pretty standard for scrolling a textfield tf with
a dragbar dbar that's a movieclip in the scrollbar movieclip sbar that's on the
main timeline and has up and down buttons.

anyway, no coding for a textfield is going to yield an ease-in effect. i was
wrong in my message above. the scroll property of textfields can only assume
integer values and cannot be made to appear to scroll continuously (unless you
use a very very small font size).

you must use a movieclip and scroll its _y property, for example. movieclips
can't scroll continuously either, but they appear to because of the smaller
increments that you can control. so, create a movieclip of your text and ease
that in just like you would ease any movieclip with actionscript.

sbarH = sbar._height;
sbar.dbar.onPress = function() {
this.startDrag(0, this._x, 0, this._x, sbarH);
dbScrollI = setInterval(dbScrollF, 70);
};
sbar.dbar.onRelease = sbar.dbar.onReleaseOutside=function () {
this.stopDrag();
clearInterval(dbScrollI);
};
/* as sbar.dbar varies from 0 to sbar._height you want your textfield to
scroll from a scroll property of 1 to maxscroll and vice versa. this yields 2
equations in 2 unknowns for a scroll that varies linearly with the sbar.dbar _y
property. specifically,
tf.scroll=a*sbar.dbar._y+b, solve for a and b
*/
upBtn.onPress = function() {
btnScrollI = setInterval(btnScrollF, 70, -1);
};
upBtn.onRelease = function() {
clearInterval(btnScrollI);
};
downBtn.onPress = function() {
btnScrollI = setInterval(btnScrollF, 70, 1);
};
downBtn.onRelease = function() {
clearInterval(btnScrollI);
};
function dbScrollF() {
tf.scroll = Math.round(sbar.dbar._y*(tf.maxscroll-1)/sbarH+1);
}
function btnScrollF(dir) {
tf.scroll += dir;
/* using the equation in dbScrollF() you can find the dbar._y from the scroll
property */
sbar.dbar._y = (tf.scroll-1)*sbarH/(tf.maxscroll-1);
}

yes, here's a file that contains nothing but that code and a textfield, up and down buttons and a scrollbar. oh, and a for-loop to populate the textfied:

kglad can you please check that link again, when I go to it I am kicked to:

http://www.gladstien.com/404loader.html

oops, my bad:

Thanks Kglad, still searching for an example online.

that website is strictly for our current patients. it's not intended to
attract more patients or help expand our patient base beyond our normal
word-of-mouth and local doctor recommendations.

we get about 300 unique hits per week. for a 2 doctor practice that should
have no more than 4000 patients, i think that's a pretty high usage by our
patients. between 10 and 30 of those hits are patients making appointments.

Was the aim of that site/appointment system to reduce your patients making
phone calls to you, or your secretary and to help reduce that time and to make
it easier for your pateints to make an appointment?

it was to eliminate the need for any human interaction for making appointments
on the weekends and holidays.

the scheduling is very simple and easy to understand. but i gave up trying
to teach the scheduling to a group of telephone answerers after about 6 months.
they just couldn't get it.

the biggest problem was i couldn't convince them that i would be working every
saturday, every sunday and every holdiay. if i didn't call them every week or
two to remind them that i was still seeing patients, they would just assume
that i was no longer seeing patients on sat and on sun and on holidays. it's
just too different from normal doctor hours.

first, i tried to create a telephony-type program that would schedule
appointment automatically via telephone when patients answered. but i didn't
get very far with that. i then tried the internet. this was in 1998, so about
1/2 the people in my community had access to the internet from home. almost
noone had broadband.

my first web sites were html-based with no server-side interaction. in fact,
my first web site was on geocities. but as i learned more and my patients
started using my website more, i rented space on a server and wrote some
server-side scripts that allowed me to create an effective scheduler. it was
just a matter of time before i started using flash. about 4 years ago i
created the website as it looks now. my scripting skills were primitive but
like most newbies that work with flash, i develped work-arounds to make things
work the way i wanted them to work.

i've come close to updating the site on one occassion when i created a dynamic
menu system for the entire site. but the prospect of changing all the external
swfs so they would have a consistant look was just too unsavory for me to
complete the change-over. (it is a nice looking menu system, though:
<bragging> one of the best i've ever seen </bragging>.)

ok, that's probably a lot more than you wanted to know. :)

Im sure there is a few doctors around my city that could benefit from having a
little website to interact with their patients, your appointment system idea
could be a small selling point.

Apart from the obvious benefits that a website brings, what areas or ideas do
you think I, (the webdesigner/developer) should focus on when pitching the sale
of a website to a doctor, and professionals like yourself?


By the way I found a nice tutorial that creates that easing effect in the
scrollbar.
http://www.tutorialoutpost.com/count/2761

You can adjust the speed of the moviement which is nice. Somthing for me to
deconstruct and try and implement in my own scroller anyhow.

even better:

What would we do without Urami I don't know!

it will be difficult to sell anything related the the internet to doctors:

most doctors don't need more patients/business so the usual marketing upside
of a business website is lost on doctors.

most doctors don't want to allow their patients more access to themselves,
though i think the email form on my website is one of the best parts of it.
the asynchronous nature of email communication is a big plus: the patient
sends their message when they have time, i answer when i have time and they
read the answer when they have time. noone is interrupted. but this
availability scares doctors the most. they will fear being swamped with emails
and having their professional life intrude even more than it already does on
their personal time.

the easiest thing to sell and the most unimaginative part of our practice
website is the information that can be posted for patients to read. any doctor
that's been in practice for more than a few years has developed a repertoire of
responses to commonly discussed topics. these can be placed on their website
and used to save time in the office. a brief verbal outline can be given to a
patient in the office and they can be referred to the website for details and
further explaination. that's a time saver and doctore REALLY like that.

Thanks for the feedback Kglad, if I get around to approaching doctors Ill try
and focus on how a website can be used as a reference point for their patients
to help further their understanding of whatever is concerning them.

Another thoughts was that with flash animation skills I could provide them
with the services to create visual demonstations and animations to help better
communicate what they are trying to get across.

Back on the topic of the scrollbar, Im trying to use Urami's but her scroll
setup didnt have any up or down buttons. Am trying to figure out out to setup
these buttons so that it functions like a traditional up, down thumb scroller,
if you get a chance to have a look at the code or have any idea on how to do
this with her code let me know:

Ill try emailing her aswell

Here's her code:

dragger.useHandCursor = false;
targY = 0;
dragger._x = theMask._width;
dragger.onPress = function () {
var _local1 = this;
startDrag (_local1, false, _local1._x, 0, _local1._x, theMask._height
- _local1._height);
};
dragger.onRelease = (dragger.onReleaseOutside = function () {
stopDrag();
});
theText.setMask(theMask);
theText.onEnterFrame = function () {
var _local1 = this;
scrollAmount = (_local1._height - (theMask._height / 1.3)) /
(theMask._height - dragger._height);
targY = (-dragger._y) * scrollAmount;
_local1._y = _local1._y - ((_local1._y - targY) / 5);
};

that's not very efficient coding on urami's part. must be coding from early in
her flash career. anyway, i think you can just add the following:

downBtn.onPress = function() {
dragger._y -= theMask._height/theText._height;
};
upBtn.onPress = function() {
dragger._y += theMask._height/theText._height;
};

i'm not sure how that will look. you might want Math.ceil of that ratio or
Math.ceil(1+that ratio). see what looks good. the buttons may be reversed,
too.

actually, i don't think that ratio is the correct increment/decrement for
dragger's _y property. try using:

Math.max((theText._height-theMask._height)/steps,1);

where steps are the number button presses required to go from top to bottom of
that movieclip theText.

Ended up swaping the - / + around for the buttons, this is the result, 1 click
moves it about 1 pxiel.

http://203.147.169.226/test/scrollDelay_updownbtnstest.swf

Im not sure what I am meant to do with your
Math.max((theText._height-theMask._height)/steps,1);

I know that it is the ratio for how far the click scrolls down or up but how
do I implement it in the handlers?

I tried just adding it into the handler but it didnt do anything.

those buttons don't move the dragger far enough and they're moving dragger
beyond an allowable range. try:

draggerUpperLimit=dragger._y;
draggerLowerLimit=theMask._height+theMask._y;
downBtn.onPress = function() {
if(dragger._y<=draggerLowerLimit-10){
dragger._y += 10;
} else {
dragger._y=draggerLowerLimit;
}
};
upBtn.onPress = function() {
if(dragger._y>=draggerUpperLimit+10){
dragger._y -= 10;
} else {
dragger._y=draggerUpperLimit;
}
};

you might want to use:

draggerUpperLimit=dragger._y;
draggerLowerLimit=theMask._height+theMask._y;
downBtn.onPress = function() {
scrollI=setInterval(scrollF,70,1);
};
downBtn.onRelease=function(){
clearInterval(scrollI);
}
upBtn.onPress = function() {
scrollI=setInterval(scrollF,70,-1);
};
upBtn.onRelease = function() {
clearInterval(scrollI);
};

function scrollF(dir){
if(dir){
if(dragger._y<=draggerLowerLimit-10){
dragger._y += 5;
} else {
dragger._y=draggerLowerLimit;
clearInterval(scrollI);
}
} else {
if(dragger._y>=draggerUpperLimit+10){
dragger._y -= 5;
} else {
dragger._y=draggerUpperLimit;
clearInterval(scrollI);
}
}
}

Kglad I have implemented you code and here is the result.

http://203.147.169.226/test/scrollDelay_updownbtnstest.swf

For some reason your up button isnt functioning anymore and the scrollbutton
scroll down past where it should.


dragger.useHandCursor = false;
targY = 0;
dragger._x = theMask._width;
dragger.onPress = function () {
var _local1 = this;
startDrag (_local1, false, _local1._x, 0, _local1._x, theMask._height
- _local1._height);
};
dragger.onRelease = (dragger.onReleaseOutside = function () {
stopDrag();
});
theText.setMask(theMask);
theText.onEnterFrame = function () {
var _local1 = this;
scrollAmount = (_local1._height - (theMask._height / 1.3)) /
(theMask._height - dragger._height);
targY = (-dragger._y) * scrollAmount;
_local1._y = _local1._y - ((_local1._y - targY) / 5);
};

draggerUpperLimit=dragger._y;
draggerLowerLimit=theMask._height+theMask._y;

downBtn.onPress = function() {
scrollI=setInterval(scrollF,70,1);
};
downBtn.onRelease=function(){
clearInterval(scrollI);
}
upBtn.onPress = function() {
scrollI=setInterval(scrollF,70,-1);
};
upBtn.onRelease = function() {
clearInterval(scrollI);
};

function scrollF(dir){
if(dir){
if(dragger._y<=draggerLowerLimit-10){
dragger._y += 5;
} else {
dragger._y=draggerLowerLimit;
clearInterval(scrollI);
}
} else {
if(dragger._y>=draggerUpperLimit+10){
dragger._y -= 5;
} else {
dragger._y=draggerUpperLimit;
clearInterval(scrollI);
}
}
}

Hi Kglad ok I found out that we have to change our line 36 from

if(dir){

to

if(dir>0){

to get our up button working. My only problem now is that when click on the
down button, it scrolls about 30pixels down too far. If you grab the scroll
thumb and drag that down you will see it lock to stops at the correct place,
but if you use the down button it scrolls roughly 30pixels to far.

How do I correct this?

sorry, i didn't see your 6/1 or 6/6 messages. here's your corrected file:

the buttons are fixed but now there seems to be a bug in the scroll thumb. If
you click and hold the thumb and scroll down all the way down and then wait for
the text to catchup and slide into position, you then cannot scroll the text
up. The thumb moves up but the text does not follow and the same in reverse,
clicking and holding the thumb and scrolling down?

it's fixed and torture-tested:

Hi Kglad if you have a spare minute could you please head over to another post
of mine. Im having difficulty with a basic if statement.


http://www.macromedia.com/cfusion/webforums/forum/messageview.cfm?catid=288&thre
adid=1019403&CFID=6259021&CFTOKEN=f049ff1a1941b3fa-BD1C80EF-DC93-A376-6B1E541087
48643C&jsessionid=4830236d2f7633661933

I know its something stupidly simple but I just cant see the solution. Any
help with this would be great.