Scrollpane AS3 tutorial

Download source Files AS3 Scrollbar

Step 1

• Create New Flash File ActionScript 3.0
• Select the Selection Tool V
• Go to Properties tab and press Edit button and set the width of your document to 680 pixels and the height to 340 pixels, set frame rate to 28 fps.
• Change the layer name to background ( double click on it ).
• Select the RectAngle Tool ( R) and draw an rectangle 678 x 348
• Add another layer and double click on it to change his name to scrollpane
• Add other layer and change the name to AS3
• Lock the background and AS3 layers.

Step 2

• Select the scrollpane layer
• Press Ctrl+F7 to open Components panel .
• Select the ScrolPane ,place it on top left corner

• Create a movieClip W: 540 px H: 914 px
• Change the background ( this will be the scroll background )
• Take the Rectangle Tool (R) and draw an custom rectangle, i use 85×85 px.
• Add  text to the right, and after use copy/paste to create more rectangles, see the picture below.

• Select all rectangles , right click and convert it to movie clip , change the name to myContent.
• Go to Library Panel right click on the movieclip myContent  and do the adjustments as follow in the picture below.

• Select the ScrollPane and change the instance name to scrollPane
  

Step 3

• Go to AS3 layer , and press F9 to open the as3 panel.
• Copy / Paste the following code:

scrollPane.source = myContent;

scrollPane.setSize(556, 300);