Scrollbars for Dynamic Text

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!

IMPORTANT

Changes in the way SWiSH Max2 handles text objects will either require a change to the actionscript, a change in the export settings, or both. Textfield properties such as scroll, maxscroll, and bottomScroll can be accessed either by using the _text property (eg. myText._text.maxscroll) or by exposing SWF6 properties in the export settings.

So, before continuing with the tutorial, be sure to make this change:

Modify Menu -> Movie Properties -> Export Settings for Movie -> SWF -> Expose SWF6 Properties
Modify Menu -> Movie Properties -> Export Settings for Movie -> SWF -> SWF version to export: SWF6 (or higher)

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 MovieClips or Static Text.

1) Start a new movie (Modify menu | Movie Properties):
Width: 300
Height: 200

2) Modify menu | Movie Properties | Export Settings for Movie
Expose SWF6 Properties

3) Draw a text object on the Stage, then open the Properties panel (it may help to switch to the Selection Tool before changing the object's properties):
Name: textBox
Target: Yes
Font: _sans
Size: 10
Color: Black
Style: Bold
Type: Dynamic
Width: 236
Lines: 12 (disable Auto-size height)
Border: Yes (Black border with white background)



4) Transform Panel
X: 24
Y: 27
O=X: Yes
Transformation point (anchor): Top-Left



Note: Changing an object's _width and/or _height properties on the Transform panel will also change its _xscale and/or _yscale values as well. To maintain 100% scale, use the Reshape panel to alter its unscaled width/unscaled height.

5) Insert a lot of text into this dynamic textfield. If you want, you can generate a couple of paragraphs with the Lorem Ipsum generator.

6) Next, use the rectangle tool and draw a shape on the Stage. Use the Reshape panel to give it these properties:
X: 260
Y: 27
Unscaled Width: 16
Unscaled Height: 16
Transformation Point: Top-Left
O=X: Yes



7) Copy this rectangle shape (Edit Menu -> Copy Object). Then paste it in place (Edit Menu -> Paste in Place).

8) Use the Reshape panel to give it these properties:
X: 260
Y: 43
Unscaled Width: 16
Unscaled Height: 116
Transformation Point: Top-Left
O=X: Yes

9) Use the Properties panel to name it track and select the 'Target' option (you can come back after Step 10 and give the track object a different color, if you'd like).



10) Copy this object and paste it in place. Use the Reshape panel to change its height to 24.

11) Use the Properties panel to change its name to thumb.



12) Next, copy the first rectangle shape (the smaller square) and paste it in place. Use the Reshape panel to change its Y position to 159.



13) 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

14) Select the first rectangle (smaller square at the top) and any arrow icon you may have placed over it. Group these as a MovieClip (Modify Menu -> Grouping -> Group as MovieClip ). Then name it upScroll on the Properties panel.



15) Repeat the last step for the bottom square and arrow icon, and name it downScroll on the Properties panel.



16) Select the thumb object, group it by itself as a MovieClip and name it slider on the Properties panel.



17) Next, hold down the CTRL key and select both the slider MovieClip and the track object. Group these as a MovieClip and name it scrollBar on the Properties panel.



Scripting the Scrollbar

18) Next, open the scrollBar and slider MovieClips and select the thumb object. Open the Script panel and enter this script:
on (press) {
this.startDragUnlocked(0,0,0,_parent.track._y + (_parent.track._height - this._height));
this.doScroll = setInterval(
function() {
var scrollFactor:Number = _parent._parent.textBox.maxscroll / (_parent.track._height - _height);
_parent._parent.textBox.scroll = Math.ceil(_y * scrollFactor);
updateAfterEvent();
}, 50
);
}
on (release,releaseOutside) {
stopDrag();
clearInterval(doScroll);
}


Explanation: Okay, without getting overly complicated ... setInterval is a slightly more efficient way of writing an onSelfEvent(enterFrame) 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 MovieClip and select the rectangle shape (should be the bottom object inside the MovieClip). This will be the 'hotspot' for the button. Open the Script panel, and enter the following code:
on (press) {
this.doScroll = setInterval(
function() {
_parent.textBox.scroll -= 1;
var scrollPercent:Number = _parent.textBox.scroll / _parent.textBox.maxscroll;
if (_parent.textBox.scroll == 1) {
_parent.scrollBar.slider._y = 0;
} else if (_parent.textBox.scroll == _parent.textBox.maxscroll){
_parent.scrollBar.slider._y = _parent.scrollBar.track._height - _parent.scrollBar.slider._height;
} else {
_parent.scrollBar.slider._y = (_parent.scrollBar.track._height - _parent.scrollBar.slider._height) * scrollPercent;
}
updateAfterEvent();
}, 50
);
}
on (release,releaseOutside) {
clearInterval(doScroll);
}


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 MovieClip and select the rectangle shape (should be the bottom object inside the MovieClip). This will be the 'hotspot' for the button. Open the Script panel, and enter the following code:
on (press) {
this.doScroll = setInterval(
function() {
_parent.textBox.scroll += 1;
var scrollPercent:Number = _parent.textBox.scroll / _parent.textBox.maxscroll;
if (_parent.textBox.scroll == 1) {
_parent.scrollBar.slider._y = 0;
} else if (_parent.textBox.scroll == _parent.textBox.maxscroll){
_parent.scrollBar.slider._y = _parent.scrollBar.track._height - _parent.scrollBar.slider._height;
} else {
_parent.scrollBar.slider._y = (_parent.scrollBar.track._height - _parent.scrollBar.slider._height) * scrollPercent;
}
updateAfterEvent();
}, 50
);
}
on (release,releaseOutside) {
clearInterval(doScroll);
}


Explanation: This code is the same as the upScroll MovieClip'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 =)