Make a Login Sequence with Variables Flash

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, we will check the values of the entered data with predefined name/value pairs.

  1. Open a new Flash movie. Assign a frame rate of 20 fps, using the default width and height. Use your preferred background color.
  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 36 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 Arrow Tool) and opening the Text Options Panel, shown below. In the top drop-down menu, select the Input Text option for both fields. For the top text field, assign the variable name userEnter. For the other text field, assign the variable name passwordEnter, enable the Password option, and restrict the text length to 8 characters.
  4. The password Enter variable will be an Input Text field with the Password option enabled and a restricted character length of 8 characters.

    The password Enter variable will be an Input Text field with the Password option enabled and a restricted character length of 8 characters.

  5. On a separate layer in the Main Timeline, create text blocks that describe the two text fields, as shown below. 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.
  6. Here we have four text areas: two Static Text blocks on the left, and two Input Text fields on the right.

    we have four text areas: two Static Text blocks on the left, and two Input Text fields on the right.

  7. Create a new Movie Clip symbol (Ctrl+F8 or Command+F8), called errorMessage, that displays an error message, such as INVALID or LOGIN ERROR. Rename Layer 1 of its timeline to actions. On that layer, the first frame of the Movie Clip should be blank with a stop() frame action.
  8. Create another layer called labels. On frame 2 of this layer, make a keyframe and assign it the label start in the Frame Panel.
  9. 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 below.
  10. The errorMessage Movie Clip symbol contains an empty first frame, and an animation that begins on the start label. This animation will only play if the user enters an incorrect login.

    animation will only play if the user enters an incorrect login.

  11. In the main movie timeline (Scene 1), create a new layer called errorMessage. Drag the Movie Clip 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 Instance Panel. Assign the instance name of errorMessage.
  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 Actions tab (note that the ¬ character indicates a continuation of the same line of code; do not type or insert this character into your actual code):
  13. You can change the userEnter and passwordEnter values to whatever string you desire.

  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. Create another layer named labels. Assign a frame label of start to frame 1 of the labels layer. Add a keyframe to the frame 2 of the labels layer, and label it success. Make sure all other layers on frame 2 have empty keyframes.
  16. 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 2, so, if necessary move its initial keyframe to that frame. When you’re finished with the step, your Stage and Main Timeline should resemble below.
  17. Your Main Timeline should have three “states”: a login page, an error message, and a success page.

    Timeline should have three “states”: a login page, an error message, and a success page.

  18. Test the movie’s functionality with the Test Movie command (Control➪Test Movie).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 only assign a key press to the Button symbol instance after you have tested the initial ActionScript code.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics