obably one of the most highly used components on any web page, is the scrollbar. It's far too difficult to fit that much text onto a single page, and it's even harder to do so into the smaller areas SWiSH sites have to work with. So, instead of dividing a large body of text into multiple pages, you can put it into a dynamic text field and add your own scrollbar!
Program:SWiSH Max Build Date: 2006.06.29 SWF Export: SWF6 (or higher)
Introduction
Probably one of the most highly used components on any web page, is the scrollbar. It's far too difficult to fit that much text onto a single page, and it's even harder to do so into the smaller areas SWiSH sites have to work with. So, instead of dividing a large body of text into multiple pages, you can put it into a dynamic text field and add your own scrollbar!
Setting Up
I am going to try to give specific instructions on re-creating the example shown above. In your own projects, you can obviously use any design style you want - change the positions, sizes, colors, etc. This scrollbar is designed specifically to work with Dynamic text objects. It will not work for scrolling Sprites or Static Text.
1) Start a new movie:
Width: 300
Height: 200
2) Create a Dynamic text object and open the Dimensions options on the Text Panel:
Name: textBox
Target: Yes
Font: _sans
Size: 10
Color: Black
Style: Bold
Width: 236
Lines: 12(disable Auto-Height)
Border: Yes(Advanced options -> Black border with white background)
3) Transform Panel
X: 24
Y: 27
Anchor point: Top-Left
4) Insert a lot of text into this dynamic textfield. If you want, you can generate a couple of paragraphs with the Lorem Ipsum generator.
5) Next, use the rectangle tool and draw a shape on the Stage. Use the transform panel to give it these properties (make sure the Resize option is enabled, not the Scale option):
X: 260
Y: 27
W: 16
H: 16
Anchor point: Top-Left
6) Copy this rectangle shape (Edit Menu -> Copy Object). Then paste it in place (Edit Menu -> Paste in Place).
7) Use the Transform panel to give it these properties:
X: 260
Y: 43
W: 16
H: 116
Anchor point: Top-Left
8) Use the Shape panel to name it track and select the 'Target' option (you can come back after Step 10 and give the track object a slightly darker color, if you'd like).
9) Copy this object and paste it in place. Use the transform panel to change its height to 24.
10) Use the Shape panel to change its name to thumb.
11) Next, copy the first rectangle shape (the smaller square) and paste it in place. Use the Transform panel to change its Y position to 159.
12) Optionally, add an up/down arrow icon to the first and last shapes (I used a bitmap font, but you can use the bezier tool or any dingbat font you want).
Grouping the Pieces
13) Select the first rectangle (smaller square at the top) and any arrow icon you may have placed over it. Group these as a Sprite (Modify Menu -> Grouping -> Group as Sprite). Then name it upScroll.
14) Repeat the last step for the bottom square and arrow icon, and name it downScroll on the Sprite panel.
15) Select the thumb object, group it by itself as a Sprite and name it slider on the Sprite panel.
16) Next, hold down the CTRL key and select both the slider Sprite and the track object. Group these as a Sprite and name it scrollBar.
Scripting the Scrollbar
17) Next, open the scrollBar and slider Sprites and select the thumb object. Open the Script panel and switch to Expert mode (if you see "Guided", click on it to select "Expert").
Explanation: Okay, without getting overly complicated ... SetInterval is a slightly more efficient way of writing an onEnterFrame Event. Instead of happening on every frame (which depends on the frame rate of the movie), the 'function' defined will execute on a set number of milliseconds. In this case, the code fires every 50 milliseconds (although, it's not an exact science). The code calculates the amount of scroll based on comparing the maximum scroll value with the available scroll area (while the user is dragging the slider). When the button is released, the interval is cleared (deleted).
Scripting the Scroll Buttons
19) Open the upScroll Sprite and select the rectangle shape (should be the bottom object inside the Sprite). This will be the 'hotspot' for the button. Open the Script panel, and enter the following code:
Explanation: This code is nearly the same as the slider's code; however, this works a little backward in comparison. The buttons will always scroll exactly 1 line of text on each Interval. At the same time, it takes the current scroll position and compares it with the maximum scroll value and calculates how much to move the slider.
20) Open the downScroll Sprite and select the rectangle shape (should be the bottom object inside the Sprite). This will be the 'hotspot' for the button. Open the Script panel, and enter the following code:
Explanation: This code is the same as the upScroll Sprite's code. The only difference is the first line inside the function - it scrolls +1 rather than -1.
Note: If you want either of those buttons (upScroll or downScroll) to scroll through the text faster or slower, you can adjust the "50" at the bottom of the SetInterval function. A lower number will scroll faster, while a higher number will scroll slower
At this point, you should have a fully functioning scrollbar component. You can take it a few steps further if you'd like; I just wanted to focus on the basics. You could make the height of the slider more dynamic by comparing the total lines of text and inversely altering the height of the slider (more text = smaller slider, and vice versa). You could also add script to the track object to make it act as a button, too (a "scroll here" effect). There are countless possibilities. This is by no means the only way to create a scrollbar component ... it's just the one I decided to write about =)
