Flash Explained

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.

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.

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.

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 has a dual purpose:

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

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.

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

8 Call this new layer actions and lock it.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Comments

Submit a comment