Flash Explained

Learn Flash easily.

How to use the UIScrollBar component in Flash

October 11th, 2008 | Author: Luka | Category: Basics


In this easy and detailed Flash lesson, I will show you how to use the scrollbar component that it is ready-made for use in Flash. This can save you a lot of coding — why create a scrollbar from scratch when you have one at your disposal? You will learn the following:

  • How to set up a dynamic text field,
  • How to display text in a dynamic text field via some really simple ActionScript code,
  • How to set up an instance of the UIScrollBar component and link it to your text field and more.

Below is a live Flash example that displays a text field with a scrollbar attached next to it. Try pressing the up and down arrow buttons on the scrollbar or clicking the scroller and dragging it up and down. The text inside the field will scroll flawlessly.

How to make a dynamic text field

1 Open a new Flash document.

2 Select the Text tool (T). Go to the Property inspector panel below the scene and make the following choices (the list numbers correspond to the ones seen in the screenshot below):

  1. In the menu that defines the type of your text field, on the left, select Dynamic Text. This is necessary for a text field that will have its text displayed via ActionScript.
  2. Choose the _sans font family, which can be found on top of the fonts list.
  3. Select a standard font size for this exercice: 12 is a good choice.
  4. Choose black for the text color or any other you like.
  5. Make the text field left-aligned by clicking on the appropriate icon.
  6. In the menu that governs the rendering of your text, select the Use device fonts option. This choice, together with the _sans font family that you chose earlier, will make your SWF file very small in file size, because you don't have to embed any font information inside your SWF movie. The user's system will automatically pick the default sans serif font (which is Arial on a Windows machine and Helvetica on a Mac).
  7. This is optional: if you wish, you can turn on the Selectable option. This will enable your users to select the text in your text field.
  8. In the Line type menu, select the Multiline option. This is an understandable choice: since your text field will be scrollable, it must be multiline and not single line.

Setting up the Text tool before the creation of a text field in Flash.

3 Click anywhere on the stage and start dragging your mouse (see the image on left below). When you have made a rectangle of a reasonable size, release the mouse button (see the image on the right below). The handles for resizing the text field will appear, along with a blinking cursor inside it.

Making a dynamic text field in Flash.

4 Press Esc on your keyboard to exit from the text field-editing mode. A blue border will appear, delineating your dynamic text field. You don't need to type anything in this field, since you will make the text appear dynamically — via ActionScript code.

The dynamic text field with the blue border.

5 Go to the Property inspector again and find the Instance name option on its left side. Type myText inside it and press Enter.

The instance name of the dynamic text field.

The Instance name has a dual purpose:

  • It will serve to manipulate the text field via ActionScript,
  • It will link the text field to the UIScrollBar component.

Instance names serve to manipulate and change the properties of Movie clips, Buttons and Text fields programmatically via ActionScript. Without an Instance name, you wouldn't be able to do that at all.

Top of page

Inserting ActionScript code into your document

6 Double-click on the label (name) of the first (and only, so far) layer to change it. It is called Layer 1. Change that to content. Press Enter to exit the layer name-editing mode (see 1 in the image below).

Next, click the small dot beneath the padlock icon (see 2 in the image below). The layer will now become locked, which prevents you from accidentally inserting content inside it. Make this a habit — I always lock the layers which I don't use at the moment.

Renaming and locking the first layer.

7 Click the Insert Layer icon to create a new layer.

Making a new layer in Flash.

8 Call this new layer actions and lock it.

The second layer was labeled and locked.

9 Click on the first keyframe of the actions layer to select it.

Selecting a keyframe.

10 Select Window > Actions to open the Actions panel.

Make sure that the Script Assist button in the panel's upper right corner is turned off, to be able to write code manually, without any hindrance.

Setting up the Actions panel for manual code input.

11 Insert the following code into the ActionScript pane (just copy and paste it there):

myText.text = "dummy text here";

12 Replace the text between the quotation marks (dummy text here) with about 10 to 12 sentences of some dummy text. The point is that you must have a length of text that surpasses the dimensions of your text field, otherwise the scrollbar will be of no use — there would be nothing to scroll through if all the text fits inside the field.

The Actions panel with some simple code inside it.

13 Test your movie by selecting Control > Test Movie. The window with a preview of your SWF will appear. You'll see the text appear in the dynamic text field, but only a portion of it. The scrollbar will make possible to visualize all the content.

The preview window in Flash.

Now, before I move onto explaining the use of an UIScrollBar component, let me show you first how this code works. When wanting to use ActionScript to insert some text into a dynamic text field, you have to:

  1. Write the Instance name of the text field exactly the same as you entered it into the Property inspector — ActionScript is a case-sensitive programming language, meaning that myText and mytext are two different instance names.
  2. Write a dot (.) after the Instance name, which separates it from whatever it is that you are going to order it to do.
  3. Write the ActionScript keyword text, which tells Flash that you are going to order it what text to show in the field.
  4. Next, you place an assignment operator (=) after that and what is on the right side of it, between quotation marks (" and ") will appear in the text field.
  5. After the quotation marks you have to place a semicolon (;) which indicates the end of this piece of code.

myText.text = "dummy text here";

Fine. You will now place a scrollbar next to your text field to make it scrollable. Close the preview window to return to your document.

Top of page

Adding a scrollbar to the dynamic text field

14 Click on the content layer to select it and then unlock it.

Selecting and unlocking a layer in Flash.

15 Select the Selection tool (V).

16 Go to the Tools panel and make sure that the Snap to Objects option is turned on (see the little magnet icon in the screenshot below). This will make it easier for you to position the scrollbar exactly next to your text field.

The snapping to objects is turned on.

17 Select Window > Components to open the Components panel.

18 Click on the little plus icon next to the User Interface section to expand it.

Opening the User Components section in the Components window.

19 Click on the UIScrollBar component and drag it out onto the stage, over the text field. Once that you are over it, release your mouse button. The scrollbar will automatically become associated with the dynamic text field and its height will match that of the text field.

Selecting the UIScrollBar component.

Attaching a UIScrollBar component to a dynamic text field.

Cool! Test your movie (Control > Test Movie) and try your newly made scrollbar! It will work seamlessly. Note that you wouldn't be able to this if the Snap to Objects option hadn't been turned on!

I want to show you something here. Go back to your document and click on the scrollbar to select it. In the Property inspector, click the Parameters tab.

The parameters of the UIScrollBar component.

See the _targetInstanceName parameter? Its value is myText. Because you have turned the Snap to Objects option on and dragged and released the UIScrollBar component over the text field, Flash has automatically linked the scrollbar to your text field! Flash rules!

If you hadn't followed this exact procedure, you would have had to manually type the Instance name of your text field inside the _targetInstanceName parameter and position the scrollbar manually next to your text field. Now you know how this works.

If you plan to use this or any other component in your Flash creations, remember that components are always being loaded before any other content of your SWF movie, even that which is placed in the movie's first frame. So if you place an internal preloader into your movie, it will not appear until the component has been fully loaded. The user will see a blank screen for a few seconds, because components tend to add significantly to a file size of a SWF movie. To solve that problem, you should make a separate SWF movie with a preloader, which will load your main SWF — the one with the components inside it.

Well, that was pretty easy, wasn't it? Take a look at other beginner Flash tutorials made by me and also don't forget that you can download the source document for this lesson below.

Download the .fla source file

Be Sociable, Share!

Comments

Submit a comment

  • Hannah Aug 14, 2010 at 2:49 pm

    HI for some reason when im implementing this into my website the text doesn’t show up? just a blank text box.. i put the scrip in the action-script layer underneath my “stop” script.. any ideas?

  • kANNAN Sep 20, 2010 at 3:40 am

    HOW TO CHANGE THE COLOR OF SCROLLERBAR

  • youtube Sep 24, 2010 at 5:05 pm

    great tutorial. worked perfect

  • deepak Oct 7, 2010 at 8:29 am

    can u tell me how to make a particular word BOLD or COLOURISE in the scrolling text?
    As, the moment I try to make a particular word BOLD or COLOURISE , whole text becomes BOLD,PLEASE HELP

  • Harry Kooner Oct 29, 2010 at 11:10 am

    Nice tutorial. But what if my text data contains superscript and subscript style.

  • Matthew Hayes Nov 2, 2010 at 12:16 pm

    Brilliant tutorial.

    I know someone else has asked how to make particular words bold and change their font but where can I find this tutorial?

    Thanks

  • jerry Nov 14, 2010 at 9:46 am

    thanks bro! saved me a major problem

  • MarkinBNA Nov 18, 2010 at 1:20 am

    Can anyone tell me how to add a paragraph into my text?

  • […] TextInput component Instance Programmatically How to use the scrollbar component in Flash and attach it to a dynamic text field. | Flash Explained Dynamically adding styles to TextField Component with TextFormat class in Flash using ActionScript […]

  • angelica Dec 29, 2010 at 12:19 pm

    hi! I think i have a problem with my scroll.. you see I dd everything you said but theres one function missing with my scrollbar compared to yours?
    when I use the mouse scroll button to scroll down/up to the scrollbar,yours work fine, but mine doesn’t work, hmmm did I miss something? I am using FLash Cs4, As2.0, and yes before scrolling I click on the textbox first.

    beyond that I think this is a great tutorial thank you very much 🙂

  • michael Jan 12, 2011 at 4:48 am

    this did not work for me….PLEASE HELPPPPPPPPPPP! Like angelica…. I did this tutorial 6 times step for step….do not know what I am doing wrong I am also using Flash cs4, As2! Thank you!

  • shamith Jan 21, 2011 at 5:15 pm

    thanks a lot. this helped me..

  • Sarah Smith Jan 26, 2011 at 1:15 am

    That was a great tutorial – thank you! It worked just like you said.
    I have one question though. How do I make it so that the scrollbar only shows up when there is too much text in the text field?

  • Ranjita Feb 4, 2011 at 5:28 pm

    good one. very useful. thanks

  • Ajay Kumar Mar 28, 2011 at 6:53 am

    Thanks a lot.

  • Chuck Jones Sep 30, 2011 at 6:19 pm

    Great tutorial I have had problems with figuring this out before. Really concise.

  • Bruno Nunes Oct 30, 2011 at 4:00 pm

    Hello.

    That’s amazing! A Great tutorial!

    But. I need to insert an object into my text field, can be a movie clip, button or an image. How can I do it?

    Thanks.

  • Bhupendra singh Dec 7, 2011 at 4:31 am

    Dear sir

    How can use to on display live scrollingbar move for teblet&laptop,desktop

    plz just reply

  • Kiran pandey Feb 28, 2012 at 7:53 am

    Marvellous….

    Thanks….

  • Laila Jun 12, 2012 at 7:12 pm

    I so appreciate your help! You are the only one (and I’ve search A LOT referring flash) that has found a perfect way not only to help people to do something but also to explain the reasons the things have to be done that way, which is more than a tutorial, u are teaching! I thank u so bad!! you’ve became one of my favorites sites!

  • Good day! Do you use Twitter? I’d like to follow you
    if that would be okay. I’m definitely enjoying your blog and look forward to new posts.

You must log in to post a comment.