Flash MX Hands On Training: Working with Text

1.    Open the inputText.fla file from the chap_12 folder. Notice that this file has one layer with a background image on it.

2.    Click the Insert Layer button and add five new layers above the background layer. You will be adding content, actions, and labels to these layers in the next few steps.

3.    Name the layer above the background layer static text. Continuing from bottom to top, name the remaining layers input text, enter btn, labels, and actions, respectively. Your layers should look like the picture above.

4.    Select the static text layer and, with the Text tool, add three Static Text boxes, one at a time, to the Stage. In the first text block, add the text Welcome. Please enter your user name and password. In the second block, add the text user name:. In the third block, add the text password:. Your Stage should look similar to the picture above. Feel free to use any character attributes you wish for each of these Static Text boxes (font, font height, etc.).

5.    In the Property Inspector, make sure the Text Type option is set to Static Text (the default setting) for each text block. Lock the static text layer to avoid editing anything on that layer by accident.

6.    Click on the input text layer to select it. Select the Text tool. In the Property Inspector, choose Input Text for the Text Type. Create a text box to the right of the user name text on the Stage.

7.    Using the Arrow tool, select the Input Text box on the Stage. In the Property Inspector, choose Input Text and select black for the Font Color and Single Line for the Line Type. Click the Show Border Around Text button, and set the Maximum Characters to 20. In the Var field, type the word name to give this Input Text box the variable name name. The Property Inspector should look just like the picture above.

Note | Naming Variables

According to the ActionScript Coding Standards, variable names can contain only letters, numbers, and underscores. However, when you name variables in Macromedia Flash MX, they should begin with a lowercase letter and cannot begin with numbers or underscores. Additionally, words that are used by ActionScript, such as scroll, should not be used as variable names.

Note | Input Text Options

Clicking the Show Border Around Text button creates a border and background around the Input Text box. If the button is not selected, a dotted line will surround the text box in the .fla file, although when you publish the movie, there will be no border or background.

The Maximum Characters setting allows you to set the maximum number of characters that can be typed in the text box. The default is set to 0, meaning that there is no maximum number of characters. This allows the user to type forever in this box, so entering a value here is usually a good idea.

The Line Type option allows you to set the text box to either Single Line (displaying the text on one line), Multiline (displaying the text in multiple lines), or Password (automatically turns all characters into asterisks as they are typed in the field of either the .swf file or the executable).

The Variable setting (Var) enables you to assign a variable name to the text box.

8.    Make sure you still have the input text layer selected and, using the Text tool, create a text box to the right of the password text on the Stage.

You have just created two Input Text fields, which will allow users to enter their user name and password. In a few steps, you will add ActionScript to have Macromedia Flash MX check to see if the user name and password are correct.

10. Lock the input text layer and select the enter btn layer. Open the Library and, with the enter btn layer selected, drag an instance of the btnEnter symbol onto the Stage. When you are finished, lock the enter btn layer so you dont accidentally edit anything.

11. On the labels and actions layers, add a keyframe (F6) at Frames 10 and 20.

Note | The Hidden Label

In the Timeline, you can clearly see the pass label, although the fail label seems to be hiding. Why?

This is because there are no frames after the fail label. To see the whole label, you can add frames if you wish. Doing so will not affect your movie; it will simply allow you to see the whole word fail. You can also use the Frame View drop-down menu in the Timeline to change the frame view to Large. This will allow you to see the whole fail label in the Timeline.

Even if you can't see the whole frame label in the Timeline, the label does exist, and you can always check it by selecting the frame label in the Timeline and making sure the label name appears in the Property Inspector.

13. On the actions layer, add a Stop frame action (in the Actions panel, choose Actions > Movie Control > stop) to Frames 1, 10, and 20. When you are finished, lock the labels and actions layers.

14. Select Frame 20 on the background layer and press F5 to add frames. This way you will be able to see the background of the movie for all of the frames.

15. Unlock the static text layer and add a blank keyframe (F7) to Frames 10 and 20. On Frame 10 of the static text layer, create a Static Text box that reads Enjoy the ride! Your user name and password are right on the money. On Frame 20 of the static text layer, create a Static Text box that reads Bummer. Your user name and password are incorrect. Dont forget to select Static Text in the Property Inspector for both of these new text blocks. Feel free to adjust the settings in the Property Inspector, such as font name and font color. When you are finished, lock the static text layer.

You have just added messages and a button that your movie will display, depending on whether the user name and password are correct or not. You will add ActionScript shortly that will send the user to Frame 10 if the user name and password are correct and to Frame 20 if they are incorrect.

17. With the enter btn layer still unlocked, click on the Enter button on the Stage in Frame 1 to select it. Choose Window > Actions or press F9 to open the Actions panel if it is not already open.

Tip: This will work with many other keys on the keyboard, such as the Backspace key or Tab key. The ActionScripting you added tells Macromedia Flash MX that when the user clicks on the button and releases the mouse, or presses Enter/Return on the keyboard, something is about to happen.

This step tells Macromedia Flash MX that if the user name is equivalent to kymberlee and the password is equivalent to gotSnow, it should do something. You will add the something in the next step.

Tip | Using the = or == Signs

In ActionScripting, when you use name=''kymberlee'', it means that the variable name becomes kymberlee. When you use name == kymberlee, it means that Macromedia Flash MX will check for equivalency  that is, it will check whether the value that is entered matches the value given after the == symbol.

Tip: In order for the user name and password to be correct when the user enters them, they must be typed exactly as they appear inside the quotes in the Script pane, since these values are case sensitive.

}

You have only one more ActionScript to create.

22. In Frame 20, on the enter btn layer, select the Try Again? button on the Stage. In the Actions panel, choose Actions > Movie Control > on and double-click on the on action to add it to the Script pane. Select the event Release. Choose Actions > Movie Control > goto and add goto to the Script pane. For Type, select Frame Number; for Frame, type 1; and select Go to and Stop. This tells Macromedia Flash MX that when the user clicks on the button and releases the mouse, it should go back to Frame 1 and stop.

Caution! If you don't see any text as you type in the user name or password field, check and make sure that the Text Color in the Input Text boxes is set to black. If it is set to white, you will not be able to see your text!

If you type in the user name and password correctly, you will get the Enjoy the ride message.

If you type in the user name and password incorrectly, you will get the Bummer message.

24. When you are finished, save and close this file.

You have successfully made it though the text chapter! Time to take a quick break and get amped up (pun intended) for the sound chapter next!