ScrollPane Component

ScrollPane Component

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add Pre-Built ScrollPane Component to Your Flash File

 

 

Flash ships with several Components. Components are pre-packaged objects that allow you to quickly add elements, such as scroll bars, text boxes and buttons.

Components can be added to the stage using the drag and drop method from the Components panel or added with ActionScript. The Component parameters are altered with the Component Inspector or ActionScript.

This example shows how to add a ScrollPane Component using the drag and drop method and with ActionScript. It also describes changing the Component parameters with the Component Inspector and ActionScript. To talk to a Component with ActionScript, it must first be added to the Library.

Components are actually Movie Symbol objects regardless of the Component. If you are developing in ActionScript 2.0, you will see a different set of Components available.

For more information on the other Components, see topics, Button Component, CheckBox Component, ColorPicker Component, ComboBox Component, DataGrid Component, Label Component, List Component, NumericStepper Component, ProgressBar Component, RadioButton Component, Slider Component, TextArea Component, TextInput Component, TileList Component, UILoader Component and UIScrollBar Component.

Tutorial Elements

ScrollPane Component with instance name pane01_mc

A text Movie Symbol in the Library with a Class name of ScrollText

 

Step One

Open a new Flash document and add a new layer.

Step Two

Name the upper layer Actions and the lower one Content.

Step Three

Select the first frame of the Content layer and open the Components panel (Window > Components).

Step Four

Double-click the ScrollPane Component icon to a add a ScrollPane to the center of the stage. The ScrollPane and it's assets are also added to the Library.

Step Five

With the ScrollPane selected open the Properties panel and change it's x and y settings to 100 and 20 and width (w) and height (h) values to 190 and 250 respectively.

Step Six

With the ScrollPane still selected, open the Component Inspector (Window > Component Inspector).

Step Seven

Click the blank area in the Value column next to the word source and enter ScrollText, then press Enter.

Step Eight

With the ScrollPane still selected, open the Properties panel and assign it an instance name of pane01_mc.

Step Nine

With frame one of the Content layer selected, Select the Text tool and set it to 36 pt Static text in the Properties panel.

Step Ten

Add the following text to the stage, This is some very exciting text that goes on forever.

Step Eleven

Select the text and click the Selectable text icon in the Properties panel.

Step Twelve

Set the text box width to 170 pixels in the Properties panel.

Step Thirteen

With the text box selected, press F8 to convert it to a Movie Symbol.

Step Fourteen

Enter ScrollText for the symbol name and set the registration to the upper left corner.

Step Fifteen

Open the Advanced portion of the create Movie Symbol dialog box and click Export for ActionScript. The class name of ScrollText is automatically entered. Press OK.

Step Sixteen

Select the text box with the Select tool and press Delete to remove it from the stage.

Step Seventeen

Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.

Step Eighteen

Copy/Paste the following code in the ActionScript Panel:

import fl.containers.ScrollPane;

var pane02_mc:ScrollPane=new ScrollPane();

pane02_mc.source=ScrollText;

pane02_mc.x=320;

pane02_mc.y=20;

pane02_mc.width=190;

pane02_mc.height=250;

addChild(pane02_mc);

Step Nineteen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two ScrollPanes appear on the stage.

Dissecting the Code

The first line of the code at Step Seventeen imports the code necessary to talk to the ScrollPane class. Line two establishes a new ScrollPane variable named pane02_mc. This is the second ScrollPane that we are adding to the stage with ActionScript. It's source, location and size are set with the next few lines of code.

The final line of code adds the new ScrollPane to the stage.

More Component Options

In this example we showed how to change the ScrollPane source. You can use this same method to change the other ScrollPane values shown in the Component Inspector (i.e., enabled, horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, scrollDrag, verticalLineScrollSize, verticalPageScrollSize, verticalScrollPolicy and visible).

ScrollPane Graphic Objects and External Files

ScrollPanes also work with graphics (swf, gif, jpg, png) and external files. To display an external file that is located in a folder named External, you would replace the source line with the following:

pane02_mc.source="External/Image01.jpg"

This will work provided that the External folder is located next to the main.fla file.

 

Royalty-Free Stock Video at Pond5