Task: Full-Featured Text Scrolling

I l @ ve RuBoard

Now let's go all out and create a full scrollbar. This would include the four elements mentioned earlier in this chapter.

A script this big needs some planning before we get into building the movie step-by-step. First, we'll want to figure out how the movie is put together. In this case, all four scrollbar elements will be buttons. All these buttons will be grouped together in a single movie clip named scrollBarMovieClip. The dynamic text field, however, will remain at the root level. It will be identical to the field used in the last task.

This time you need to create four buttons. These look like the four parts of the scrollbar from Figure 14.1. The two arrow buttons will have an up and down state, but no rollover state. The other two elements will only have an up state, so they will not change as the user rolls over them or clicks them.

Figure 14.4 shows the complete scrollbar with the text. You can see this in the movie 14complexscroll.fla.

Figure 14.4. The complete scrollbar solution.

graphics/14fig04.jpg

So where will the scripts go? Certainly some scripts need to be on the buttons. A script should also be on the movie clip itself so that enterFrame events can be used to trigger scrolling while the user is holding down the mouse over a button.

However, button scripts and movie clip scripts can all call functions in the timeline. By placing the core code in functions in the timeline, we can keep all of our more difficult code together. This code will not be on the main timeline but also on the first and only frame of the scrollBarMovieClip timeline.

graphics/book.gif

This is the most complex movie in this book. If you would rather not go into so much detail right now, just open 14complexscroll.fla and follow along by looking at where all the scripts go. Try to understand the basic concepts, but don't worry too much about the specific calculations.


  1. Open the movie 14complexscroll-noscripts.fla. This movie contains some text and the scrollbar elements.

  2. Take a tour of the scrollbar elements. First, open the movie clip scrollBarMovieClip. Look at the four buttons inside it. They are named upArrow, downArrow, slider, and bar. I've placed a single comment in the scripts for each that simply states that a script must go here. There is also such a comment in the first frame of this movie clip.

    Back at the root level, notice that the text field is named scrollText. The scrollBarMovieClip also has a single-line comment where the script should go.

  3. Start adding the scripts. On the scrollBarMovieClip, you'll need this script. It simply calls a function inside the movie clip each and every frame.

     onClipEvent(enterFrame) {     sbFrame(); } 

    That is all that is needed at the root level, although technically a movie clip script is not at the root level, but one level down. The rest of the scripts are inside the scrollBarMovieClip.

  4. Let's start with the upArrow button script. It calls a function named pressArrow when the button is first pressed, and then releaseArrow when the mouse is released. It calls releaseArrow regardless of whether the mouse is released inside or outside the button.

     on (press) {     pressArrow(-1); } on (release, releaseOutside) {     releaseArrow(); } 
  5. The script on the downArrow button is nearly the same, except that a 1 instead of a -1 is passed into the pressArrow function. This number is used to determine the direction of the scroll.

  6. The slider has a similar script on it. It calls pressSlider and releaseSlider when it is clicked.

     on (press) {     pressSlider(); } on (release, releaseOutside) {     releaseSlider(); } 
  7. The bar has another script like these that calls pressBar and releaseBar .

     on (press) {     pressBar(); } on (release, releaseOutside) {     releaseBar(); } 
  8. That takes care of all the buttons. Now all that is left is to build the functions that handle the button actions. This will all be put into the frame script on the first and only frame inside the scrollBarMovieClip; they are at the same level as the buttons.

    The first function is pressArrow . In the preceding task, this function simply increased or decreased scroll . However, this time we want to allow the user to click and hold down the button to scroll several lines.

    To do this, we will set a variable mode to a string that indicates that scrolling is taking place. Then, every frame that goes by, one line will scroll. When the user releases the arrow button, the mode is changed so that scrolling no longer takes place.

     // start line-by-line scrolling function pressArrow(d) {     mode = "scroll";     // remember direction     amount = d;    // do it at least once     sbFrame(); } // stop scrolling function releaseArrow(d) {     mode = "none"; } 

    Notice a few more things. The parameter d is the -1 or 1 that we pass into the function from the upArrow and downArrow buttons. We'll record that in the variable amount so that the scrolling goes in the desired direction.

    The actual scrolling does not take place here but in the sbFrame function. This function looks at the mode variable and determines what needs to be done at that moment.

    Notice that the pressArrow function calls the sbFrame as well. This is to force the action to take place one time immediately.

  9. The pressBar function is similar to the pressArrow function except that the amount variable is not set to -1 or 1, but instead to the number of lines visible in the text fielda page of lines. It is set to negative if the scrolling is to be up rather than down. This is determined by whether the click takes place above or below the slider.

    A variable called limit is set to the exact line indicated by where the user clicked on the bar. This is done with a function named getSlider , which we will look at later.

     // start page-by-page scrolling function pressBar() {     mode = "page";     // remember location of click and compute limit of paging     clickLoc = _ymouse;     limit = getSlider(_ymouse);     // compute number of lines in page     amount = (_parent.scrollText.bottomScroll - _parent.scrollText.scroll);     // scroll the other way?     if (clickLoc < slider._y) amount *= -1;     // do it at least once     sbFrame(); } // stop paging function releaseBar() {     mode = "none"; } 
  10. The pressSlider and releaseSlider functions are the simplest because all the work is done in the sbFrame function. Only the mode needs to be set so that the sbFrame function knows what to do.

     // signal to follow slider function pressSlider() {     mode = "slide"; } // stop following slider function releaseSlider() {     mode = "none"; } 
  11. Finally, here is the much-talked-about sbFrame function. What it does depends on the value of mode : either "scroll" , "slide" , or "page" .

    If "scroll" , the scroll property of the scrollText field is changed by amount , which is either -1 or 1. Then a function named setSlider is called to change the position of the slider to reflect the text now visible.

    The "page" is similar to the "scroll" mode, except that the amount variable will be a larger number. In addition, the new value of scroll is checked to see whether it has passed the limit variable set in pressBar . If it has, the mode is changed, and scroll is set to exactly limit .

     // code to perform once per frame function sbFrame() {     if (mode == "scroll") {         // scroll one line         _parent.scrollText.scroll += amount;         setSlider();     }  else if (mode == "slide") {         // compute new line and scroll to it         line = getSlider(_ymouse);         _parent.scrollText.scroll = line;         setSlider();     }  else if (mode == "page") {         // scroll by page         _parent.scrollText.scroll += amount;         // stop scrollng when limit reached         if (((amount > 0) and (_parent.scrollText.scroll > limit)) or ((amount < 0) and  (_parent.scrollText.scroll < limit))) {             mode = "none";             _parent.scrollText.scroll = limit;         }         setSlider();     } } 
  12. Now we have the setSlider function. This sets the vertical position of the slider button to the position along the bar that represents where the reader is in the text. It computes the height of the bar, minus the height of the slider, to get the total available area of the bar. Then it compares scroll with maxscroll to get the amount along the body of text that the visible portion represents. Finally, it sets the vertical location of the slider.

     // set the slider position according to the scroll function setSlider() {     sbHeight = bar._height - slider._height;     sbAmount = (_parent.scrollText.scroll-1)/ (_parent.scrollText.maxscroll-1);     slider._y = bar._y + sbHeight*sbAmount; } 
  13. The getSlider function is the opposite of setSlider . It uses the vertical position of the slider to compute the line of the text that should be at the top of the field. It does this by calculating pos as the percentage along the bar that the slider is located. It then applies this percentage to the total number of lines. Some adjustments are needed to get it just rightsuch as subtracting half the height of the slider and subtracting 1 from maxscroll .

     // get the scroll according to the slider position function getSlider(y) {     sbHeight = bar._height - slider._height;     pos = (y-bar._y-slider._height/2)/sbHeight;     line = Math.ceil(pos*(_parent.scrollText.maxscroll-1));     return(line); } 

This completes the scrolling bar scripts, the most complex script in this book. You can use the 14complexscroll.fla file to see it all in action. Even if you don't build this entire movie from scratch, you'll want to make sure that you understand how each part works.

I l @ ve RuBoard


Sams Teach Yourself Flash MX ActionScript in 24 Hours
Sams Teach Yourself Flash MX ActionScript in 24 Hours
ISBN: 0672323850
EAN: 2147483647
Year: 2002
Pages: 272

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net