The basic example uses very little ActionScript code, so we will experiment a little with the ScrollPane component parameters. To get started, find the ScrollPane component in Window > Components > UserInterface, and drag an instance onto the stage, as shown in the screenshot below:.

Using the Properties panel, give this instance a name such as spExample, and set its size and location as follows: x:10, y:25, width:450, height:350. With your ScrollPane still selected, click the appropriate tab to open the Parameters panel to see the options available. The following descriptions are paraphrased from the Flash documentation.

• horizontalLineScrollSize is the number of pixels scrolled horizontally when the user clicks an arrow on the horizontal scrollbar.
• horizontalPageScrollSize is the number of pixels scrolled horizontally when the user clicks on the track of the horizontal scrollbar.
• horizontalScrollPolicy is either "on", "off" or "auto" to dictate whether the horizontal scroll bar is there or not, or if it will be there automatically if needed.
• scrollDrag is either "true" or "false" to dictate whether the pane can be scrolled directly by mouse drag on the pane content.
• source is a string the specifies the URL for the image or swf file to be loaded as content for the ScrollPane.
• verticalLineScrollSize is the number of pixels scrolled vertically when the user clicks an arrow on the vertical scrollbar.
• verticalPageScrollSize is the number of pixels scrolled vertically when the user clicks on the track of the the vertical scrollbar.
• verticalScrollPolicy is either "on", "off" or "auto" to dictate whether the vertical scroll bar is there or not, or if it will be there automatically if needed.

We will leave all of these values at their default, except that we will set the value of source to "prep2008a.jpg," the URL of an image file in the same directory as our fla file. If you don't have your own image file on hand, you can obtain this one through the link under "Downloads" at the bottom of this page..

Finally, we place the following lines of code in the Actions panel. This will allow us to experiment with the ScrollPane parameters without having to revisit the Parameters panel.

spExample.horizontalLineScrollSize = 10;

spExample.horizontalPageScrollSize = 100;

spExample.horizontalScrollPolicy="auto";

spExample.scrollDrag = false;

spExample.verticalLineScrollSize = 10;

spExample.verticalPageScrollSize = 100;

spExample.verticalScrollPolicy= "auto";

The result is shown in the application below. (Shown in the picture are Flashandmath.com's Barbara Kaskosz and Dan Gries, as well as some of the participants in our 2008 summer workshop in the Mathematical Association of America's PREP program.)

As an experiment, change the scrollDrag parameter by modifying the appropriate line in the Actions panel to read as follows:

spExample.scrollDrag = true;

Control > Test Movie to see that the panel can now be scrolled by holding the mouse down on the picture and dragging. This behavior was also enabled in the example on the opening page of the tutorial! Go back and check it out if you did not notice this before.

Downloads

The source file for this example is SimpleScrollPane.fla and the image file used in the example is prep2008a.jpg.