Tutorial for the Side Scroller in Flash

Written by william harrel
  • Share
  • Tweet
  • Share
  • Pin
  • Email
Tutorial for the Side Scroller in Flash
Creating a scrollable content box in Flash. (Brand X Pictures/Brand X Pictures/Getty Images)

A side scroller, more commonly known as a "vertical scrollbar," allows the viewer of a document to scroll up and down on a page --- to see more of the contents of the page. Some Web page and Flash movie designers also create scrollable content within a document, such as a scrollable text box, that requires scrollbars. In Flash, to create scrolling text boxes, you can use Flash's built-in UIScrollBar component.

Skill level:

Other People Are Reading

Things you need

  • Adobe Flash CS3 or later

Show MoreHide


    Creating Scrollable Text Box in Flash

  1. 1

    Open an existing Flash movie (FLA) file in which you want to create a scrolling text box, or start a new Flash movie: Click the "File" menu and choose "New," to open the New Document dialogue. Select "ActionScript 3.0," and then click "OK."

  2. 2

    Go to the frame and layer in the Timeline panel where you want to put your scrollable text box, right-click the frame and choose "Insert Keyframe."

  3. 3

    Make sure you are in the frame with the new keyframe, select the Text Tool from the Tools panel and drag out a text box on the stage. Make the box the approximate size you want. You can use the "W" and "H" (width and height) fields in the Position and Size section of the Properties panel to make the box the exact size you want. Depending on your version of Flash, the Properties panel is located on the right or the bottom of the application window.

  4. 4

    Go to the "Paragraph" section of the Properties panel, click the "Behavior" drop-down list and then choose "Multiline." This tells Flash to wrap the text in the text box, rather than treat it as one continuous line.

  5. 5

    Click the "Window" menu and choose "Components" to open the Components panel.

  6. 6

    Double-click the "User Interface" folder in the Components panel to open the folder, and then drag the UIScrollBar component onto the stage and drop it on the text box, just inside the right border. This associates the scrollbar with the box and resizes it to fit the box. The component should also align itself to the right outer edge of the box. If it doesn't, you can drag it to the right outer edge, or, if you want the scrollbar on the left edge, you can drag it there. The component should snap to the edge of the box.

  7. 7

    Fill the box with text. You can type the text or copy and paste it from a text or word processor document. To type text in the box, click the Text Tool inside it and start typing. To copy and paste the text: Select the text in the text application, and then press "CTRL + C" ("COMMAND + C" on a Mac) to copy it, and then, in Flash, click the Text Tool in the text box, and then press "CTRL + A" ("COMMAND + A" on a Mac) to paste the text in the box.

  8. 8

    Test the movie by clicking the "Control" menu and choosing "Test Scene." Your text box should display with a scrollbar and the box should be scrollable.

Tips and warnings

  • You can create a scrollable box containing images with Flash's ScrollPane component. To do so, import your images to the Library, and then drag them onto the stage, aligning them vertically. Select all of the images and convert them to a Movie Clip symbol. Drag the ScrollPane component to the stage, and, in the Component Inspector ("Component Parameters" in Flash CS5 and CS5.5), type the name for the Movie Clip symbol containing the images in the "Source" field.
  • You can change the colour of the various scrollbar parts -- the button, the bar itself, and so on --- by double-clicking the part you want to change. This places Flash in edit mode for the selected part. You can now edit it as you would any other object in Flash.
  • If you don't enter enough text in the text box to flow beyond the bottom of the box, your text box will not be scrollable.

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.