Flash Vertical Scroller Tutorial

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Pin
  • Email
Flash Vertical Scroller Tutorial
Use the Flash ScrollPane component to choose games pieces for your Flash games. (Comstock/Comstock/Getty Images)

Flash vertical scrollers are often used as a central building block for Flash games. They can be used to scroll through libraries of selectable game boards, pieces and backgrounds. They also can be set to scroll automatically and continually display a variety of images. One of the most flexible scrolling components in Flash is the ScrollPane component. It can scroll images, text and movie clips. It comes complete with a large number of methods and properties that allow you to customise its appearance and functionality.

Skill level:

Other People Are Reading

Things you need

  • Adobe Flash Professional CS3, CS4 or CS5

Show MoreHide


  1. 1

    Start the Flash program. Click the file type "Flash File (ActionScript 3.0)" from the Flash display screen to create a new Flash project that uses the Flash ActionScript 3 (AS3) programming language.

  2. 2

    Click "Tools" from the Window menu to display the drawing tools panel, "Components" to show the Components Library panel and "Component Inspector" to open the Component Inspector panel.

  3. 3

    Press and release the "R" key on your keyboard (or select the Rectangle tool in the drawing toolbar) to activate the rectangle drawing tool. Position your mouse cursor on the stage, then click and drag the mouse to draw a rectangle. Release when the rectangle is about 1 inch by 2 inches. Draw four more rectangles directly below the first rectangle so that a column of rectangles is formed.

  4. 4

    Press the "V" key on your keyboard (or use the Selection tool in the drawing toolbar) to activate the selection tool. Click and drag a selection rectangle so it completely encloses the column of rectangles you have drawn. Release the mouse button.

  5. 5

    Position your mouse over the selected column of rectangles, right-click and select the "Convert to Symbol" option from the context menu to access the Convert to Symbol dialogue box.

  6. 6

    Make the following selections in the Convert to Select dialogue box: Select the "MovieClip" option from the "Type" list box; click the centre check box in the "Registration" point icon to align the rectangles to the upper left corner of the ScrollPane; click the "Export for ActionScript" check box; and enter the name "imageCollection" in the Class text box to set the Class name that will be used to access this movie clip in the ActionScript code. Click "OK." Click "OK" again when the ActionScript Class Warning dialogue box appears.

  7. 7

    Click the "ScrollPane" component from the Components Library and drag it to the stage. Type the name "firstScroll" in the instance name box of the Components Inspector to set a name that the ActionScript code will use to access the ScrollPane component.

  8. 8

    Press the "F9" key on your keyboard to open the Actions editor. Position you mouse cursor on the first line of the editor, click and type the code below to import the ScrollPane utility into Flash, import the first Scroll movie clip (symbol) into the first Scroll ScrollPane and set the ScrollPane's width and height to 100 pixels each.

    import fl.containers.ScrollPane;

    firstScroll.source = image Collection;

    firstScroll.setSize(100, 100);

  9. 9

    Depress the "Ctrl" key on your keyboard, then press and release the "Enter" key and the "Ctrl" key on your keyboard to play the ScrollPane Flash movie. Click in the horizontal and vertical scroll bars in the ScrollPane to view the other rectangles in the ScrollPane.

Tips and warnings

  • If you don't set the registration point in the upper left-hand corner when you convert the rectangles to a movie clip (symbol), you won't be able to scroll the entire movie clip. If you set the size of the ScrollPane larger than the size of the movie clip, the scroll bars won't be visible (since you will be able to see the entire movie clip in the ScrollPane).

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.