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

  • snake Oct 14, 2008 at 1:50 am

    great tutorial, exactly what i was looking for

  • april Oct 17, 2008 at 3:53 am

    yes i was looking for this too. what program do you use?thanks

  • Luka Oct 20, 2008 at 10:22 am

    Flash 8 and Flash CS3.

  • nawabz Oct 22, 2008 at 3:22 pm

    wicked helped alot.

  • theberber Oct 26, 2008 at 5:30 am

    good tutorial ,smart explaining thank you

  • Priscilla Nov 7, 2008 at 5:33 pm

    love your tutorials. They’re detailed very well and extremely simple to follow. How do you change the appearance (the skin) of a UIScrollBar?

  • Meng Nov 8, 2008 at 10:32 pm

    Cool! This tutorial works for pure text only if you have other stuff with your text it’ll give you syntax errors.

  • Luka Nov 9, 2008 at 10:31 am

    Priscilla: That deserves a separate tutorial, I can’t explain it quickly :)

    Meng: Yes that’s correct!

  • fedaa Nov 10, 2008 at 10:15 am

    yes that’s great

  • mr_byeng Nov 11, 2008 at 3:01 am

    i have to agree, your walkthrough is very detailed indeed. i have a question though if you don’t mind.

    how do you put “assorted” fonts into the dynamic text field?
    because i noticed that when you put a different font other than the standard, all in the same text field EVERYTHING changes to the new font. even when i try to “Bold” the fonts everything is bold as well.
    i would like the text field to have at least one word that is bold and the others are not.

  • Flash Tutorials Nov 18, 2008 at 6:04 am

    It is not easy to make UIScrollBar component in Flash for a beginner but whit the help of this sort of good article and tutorial one may be able to create good animation and desired work. Nice post

  • Luka Nov 18, 2008 at 10:19 am

    mr_byeng: Through the TextFormat object, but I will explain that in detail in some other tutorial – a whole new chapter can be devoted to this.

    Flash Tutorials, fedaa: Thanks.

  • Mkumar Nov 25, 2008 at 7:11 am

    Its OK. I wanna know how to scroll a movie clip which has bullets and text para and some link buttons as well.

  • prismpics Nov 28, 2008 at 3:31 am

    thanks for your help!

  • Peter Manning Nov 28, 2008 at 5:32 pm

    Is there anyway of using the UIScrollbar to appear only when there is too much text within the textfield?

  • Dhana Dec 1, 2008 at 7:12 pm

    Great tutorial – time saver and some ppl on other forums said this was not possible.

  • Bryant Dec 6, 2008 at 9:06 pm

    This is super cool but here is my question. How can I like copy my resume and keep the format onto my action script with out getting errors.

    This works great as long as the texts is a paragraph it seems.

  • Ruchir Dec 9, 2008 at 9:51 am

    gud explanation and very easy to follow for the beginners too.
    Gud work

  • ktsixit Dec 11, 2008 at 1:47 pm

    that was really helpfull! thank you!

  • Biju Subhash Dec 29, 2008 at 8:38 am

    Nice Tutorial :D
    Thank You,

    Biju Subhash

  • arnel abanilla Jan 8, 2009 at 11:09 am

    salamat….

  • Gerard Garcia Jan 9, 2009 at 12:47 pm

    Thank you. This was easy to use.

  • Alex Jan 11, 2009 at 7:42 am

    Hi Luka,

    Can I load scroll bar components onto stage with actionScript like creating text field?

    Thanks!

  • wOwie Jan 31, 2009 at 2:06 pm

    Nice tutorial, “user friendly”. keep it up. =)

  • jake Jan 31, 2009 at 5:08 pm

    many thanks for this you make me a happy man

  • Rick Feb 8, 2009 at 5:43 am

    Great Tutorial! Alas a QUESTION ….
    When I copy and paste Word documents into the Action Script, I get errors referring to and involving Page Breaks … and no text is visible when I Test the swf.
    Any ideas?
    Thanks again ….
    RIck

  • C Phillips Feb 25, 2009 at 12:57 am

    I am also interested in changing the skin color of the UI scrollbar. Any luck with a tutorial? The one on Adobe Live docs did not work.

    Any help you could give would be great.

    I love your tutorial. Was very easy to follow.

  • carlos Mar 10, 2009 at 5:39 pm

    Do you have a tutorial where you have thumbnails of pictures instead of text inside a box that you can also scroll vertically?

  • Fuad Jun 12, 2009 at 4:39 am

    I got these 2 errors after write the action scripts code and go for test movie.

    1095: Syntax error: A string literal must be terminated before the line break.
    1083: Syntax error: end of program is unexpected.

    i end with this “; what’s wrong here.

  • Fuad Jun 12, 2009 at 4:50 am

    I typed these in action script panel

    myText.text = “Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is “;

    and my instance name myText.

    i couldn’t findout what’s wrong here.

  • el Jun 24, 2009 at 5:09 pm

    wow!
    fantastic!
    clear and straight to the point.
    its not just a copy paste thing, you actually EXPLAIN the “why’s” and the “how’s”.
    Thanks!!!

  • [...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Saturday, June 27th, 2009 at 8:16 am and is filed under Adobe Flash Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

  • Vicky Jul 12, 2009 at 11:21 pm

    What if I want to add this text field into a page/KeyFrame in an already in-progress website? Currently, I have an Actions layer with ” stop(); ” posted in each KeyFrame to keep the website from scrolling through the pages out of control. How would I add in this code?

    I’m completely new to this, learning bit by bit, and any help is appreciated.
    Thanks!

  • damanjeet Jul 24, 2009 at 10:11 am

    thanx bro…
    i have a ques. how can v make a movie clip scrollable using this UIScroller….?

  • AC Jul 25, 2009 at 2:11 am

    Vicky – Right under the ” stop(); ”
    In a new line.

  • Robin Aug 31, 2009 at 2:12 pm

    I want to make a gallery where there are 10 images on a page, and then on either side there are arrows. When you rollover the arrows i want the gallery to shift left and have new images slide in from the right, can you help?

  • David Sep 18, 2009 at 3:25 pm

    I have a text file linked to a dynamic text field which is in a movieclip in flash. I dropped the UIScrollBar on it and when I test the movie it only works some of the time? Sometimes I’ll flick between scenes on my project and it will appear, other times in won’t? Arrrrgh! Why is there no consistancy???

  • Richard Oct 3, 2009 at 6:59 am

    Great tutorial, it’s clear, and works really well! Thanks, and for the download example

  • Blackie Nov 2, 2009 at 1:36 pm

    I’m using flash8 and after copying some lorem ipsum text, I too kept getting errors, Once I removed the quotation marks from “de Finibus Bonorum et Malorum” and used single quote marks ‘de Finibus Bonorum et Malorum’, it worked. Your finished example I noticed works the same way, is this how it should be? what if you want to use “correct” quotation marks. Aside from this small hurdle I like the tutorial very much and find your steps to be clear and concise. Very helpful, thank you.

  • dinesh Dec 26, 2009 at 7:32 am

    how to load images withtext in uiscrollbar in flash

  • Brett Dec 30, 2009 at 12:33 pm

    Is there anyway of inserting a uiscrollbar afterwards, for example i have created pages in flash , and now i want to add the scrollbar with more content

    Thanks

  • Louise Feb 26, 2010 at 4:41 pm

    My text was vertical. help

  • suresh Mar 15, 2010 at 8:23 am

    Very clear Example i Really thank to you

  • Srs Bsns Apr 20, 2010 at 6:15 pm

    That’s all very nice, but what about doing it entirely from the actionscript side?

  • Anup Apr 27, 2010 at 9:30 am

    Thanks !
    Very easy & perfect tutorial.

    Can I give me additional styles to scrollbar.

  • derekcfoley Jun 9, 2010 at 11:49 am

    I have a text box that has content added dynamically, yet the scrollbar button never appears, how can I make the scrollbar UI sense when its needed (if content goes off the edge of the text box)?

  • aj Jun 16, 2010 at 8:21 pm

    How do you change the color of the scroll bar? and how do you make paragraph breaks with a 5 space indent with out the dam thing coming up with syntax errors?

  • aj Jun 16, 2010 at 8:22 pm

    if some one could help me on the above question that would be wonderful! here is my email : itsamj@gmail.com

  • aesha soni Jun 21, 2010 at 11:59 am

    pl can u help me ? can you give me this ope\n file .

  • Siva Aug 5, 2010 at 11:10 am

    Thanks a lot. This what I’m exactly looking for..!

  • 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.

Leave a comment