Creating a Login Sequence with Variables

In this section, we show you how to use variables to create an interactive form in Flash that accepts or rejects user input. You will create two input text fields into which Web visitors will type a username and password. Using ActionScript, you will check the values of the entered data with predefined name/value pairs.

Caution 

Do not use the following example for secure information over the Web. You could use a logon sequence like this in a Flash adventure game, or modify it to work in a Flash quiz. The logon information is not secure within the confines of a Flash movie file (.swf). This example is intended to demonstrate using conditional statements in a Flash movie.

1. Open a new Flash document.

2. Create two text fields on one layer called text fields. Make each text field long enough to accommodate a single first name and/or password. For demonstration purposes, make the text in the text fields large — around 24 points. Make sure that you use a nonwhite fill color for the text.

3. Access the properties for each text field by selecting the text field (with the Selection tool) and opening the Property inspector, shown in Figure 24-5. In the Text Type drop down menu, select the Input Text option for both fields. For the top text field, assign the instance name tUserEnter. For the other text field, assign the instance name tPasswordEnter, enable the Password option, and restrict the text length to eight characters. Do not assign a Var name to either text field.

4. Create a new layer and name it static text. Create text blocks that describe the two text fields, as shown in Figure 24-6. For example, make a text block with the word Login: and another one with the word Password:. Align these text blocks to the left of the text fields. Note that these text blocks do not need the Input text behavior; they should be Static text blocks.

5. Create a new Movie Clip symbol (Ctrl+F8 or z+F8), called errorMessageClip, that displays an error message, such as INVALID or LOGIN ERROR. Rename Layer 1 of its time line to actions. On that layer, the first frame of the Movie Clip should be blank with a stop(); frame action.

6. Create another layer called labels. On frame 2 of this layer, make a keyframe and assign it the label start in the <Frame Label> field of the Property inspector.

7. Then, create a new layer called anim and move it underneath the actions layer. On this layer, create a tweening animation of your message fading in and out (or scaling up and down, and so on). Start the Motion tween on frame 2 of the anim layer, underneath the start label of the actions layer. You'll need to make the message a Graphic symbol of its own in order to tween the alpha state. Add enough frames and keyframes to cycle this message animation twice. The very last frame of the animation should have a frame action (on the actions layer) gotoAndStop(1);. When you are finished with this step, your Movie Clip timeline should resemble the one shown in Figure 24-7.

8. In the main movie timeline (Scene 1), create a new layer called mcError. Drag the errorMessageClip symbol from the Library on to the Stage. Position it underneath the user and password text fields. Select the Movie Clip instance on the Stage and access its settings in the Property inspector. Assign the instance name of mcError.

   Tip 

   In the Property inspector, you can temporarily change the symbol type of the mcError instance to a Graphic instance, and specify frame number 5 in the first field. This technique enables you to more accurately place a symbol that has an empty first frame. When you are finished positioning the instance, make sure you switch the instance behavior back to Movie Clip and rename the instance. Do not change the behavior of the symbol in the Library panel; this method only applies to the symbol behavior on an instance level.

9. Create another layer named labels. Assign a frame label of start to frame 1 of the labels layer. Add a keyframe to frame 10 of the labels layer, and label it success. Make sure all other layers on frame 10 have empty keyframes.

10. Extend all the layers to frame 20 by selecting frame 20 across all of the layers and pressing F5.

11. Make a new layer called success and place a text block and/or other graphics suitable for a successful login entry. It should only appear on frame 10, so if necessary, move its initial keyframe to that frame. When you're finished with the step, your Stage and Main Timeline should resemble Figure 24-8.

12. Create a new layer on the Main Timeline called button, and make a Button symbol on it. You can make one of your own, or use one from Flash's Button library (Window ð Common Libraries ð Buttons). Place it to the right of or underneath the user and password fields. Select the Button symbol instance, and open the Actions panel. Add the following ActionScript code in the Script pane (note that the character indicates a continuation of the same line of code; do not type or insert this character into your actual code):

     on (release){   if (tUserEnter.text == "Sandra" &&      tPasswordEnter.text == "zebra24"){       this.gotoAndStop("success");   } else {       this.mcError.gotoAndPlay("start");   } } 

    You can change the compared values for the tUserEnter.text and tPasswordEnter. text values to whatever string value you desire.

13. Add an empty keyframe (F7) on frame 10 of the button layer.

14. On the Main Timeline, create an actions layer, and place it at the top of the layer order. On the first frame, add a stop(); frame action.

15. Save the Flash document as login_100.fla. Test the movie's functionality with the Test Movie command (Control ð Test Movie).

Figure 24-5: The tPasswordEnter instance will be an input text field with the password option enabled and a restricted character length of eight characters.

Figure 24-6: Here you have four text areas— two Static text blocks on the left, and two Input text fields on the right. The Static text cannot be altered and/or "read" by ActionScript.

Figure 24-7: The errorMessageClip symbol contains an empty first frame and an animation that begins on the start label. This animation will play only if the user enters an incorrect login.

Figure 24-8: Your Main Timeline should have three key elements — a login frame, an error message Movie Clip, and a success frame.

Most login forms like this work with the Return or Enter key active to submit the information. However, this key press also has functionality in the Test Movie environment, so assign a key press to the Button symbol instance only after you have tested the initial ActionScript code. You can also choose Control ð Disable Keyboard Shortcuts in Test Movie mode to avoid any key press conflicts.

As you'll learn later in Chapter 26, a Button instance is not a great place to store a lot of code — it's usually better to place the majority of your code in a keyframe, contained within a function, or better yet, in a separate .as file that is specified in an #include directive. For now, however, as you're learning the basics of the ActionScript programming, don't feel pressured to take on too much too fast; make sure you understand the core principles of logic and conditions before you move on to additional programming topics.

Cross-Reference 

See Chapter 32, "Managing and Troubleshooting Flash Movies" for more coverage of code debugging. You'll also find more information about using the Debugger panel and other useful features, such as breakpoints.

On the CD-ROM 

You can find the completed example, login_100.fla, in the ch24 folder of this book's CD-ROM. You will also find other logon examples that use different methods to make the user name and password comparisons.

Web Resource 

We'd like to know what you think about this chapter. Visit www.flashsupport.com/feedback to send us your comments.