Creating a Flash Form Flash

In this section, we create a Flash form that submits user-entered information to a server-side CGI script, which e-mails the data to an e-mail address that we specify with a Flash variable. By accessing a remote Perl CGI script, you make a Flash movie with five data exchange states: input, send, wait, output, and error. You learn how to submit name/value pairs from Flash to remote URLs, and learn how to check the receipt of variables from the CGI script using a multiple frame loop. We also use the new onClipEvent(data) action to detect the loading of the external variable data.

Flash forms are user data entry forms (just like HTML forms) that are created in Flash using Input Text fields. When a user types information in these text fields, the information is stored as variables. The values of these variables are then sent to a specified Web server using standard GET or POST communication. These same variables are available to the Web server and can be processed there by a CGI program or script. CGI programs can be written to e-mail this information, manipulate it, store it in a database, or perform many other applications. The same CGI script can also return values to Flash these can then be displayed or used by the originating Flash movie.

In this exercise, our Flash form solicits feedback from visitors, giving them an opportunity to submit comments, report bugs, or make suggestions for improvement. As each form is submitted, it’s e-mailed directly to the e-mail address you specify in the Flash movie.

  1. Open a new Flash movie document (Ctrl+N or Command+N).
  2. Rename layer 1 to labels. Create keyframes (F6) on frames 5, 15, 25, and 35.
  3. Give these keyframes the labels input, wait, output, and error, respectively.(Do not give frame 1 a label.) Select frame 45 and press F5 to insert more empty frames at the end of the layer.
  4. Create a new layer, and name it actions. On frame 5 of the actions layer, insert a keyframe (F6) and double-click it. In the Actions Panel, add a stop( ) action. In the Frame Panel, add a comment of //stop in the Label field.
  5. Create a new layer, and name it text fields. Insert keyframes on frames 5, 15, 25, and 35.
  6. On frame 5 of the text fields layer, insert three separate Input Text fields. From top to bottom, assign the following variable names to the Input Text fields (in the Text Options Panel): name, from, and comments. The name and e-mail text fields should accommodate one line of text, while the comment field should be set to Multiline and Word wrap in order to hold multiple lines of text. All of the Input Text fields should have the Border/Bg option selected, unless you plan to create your own background graphics. Make each text field long enough to accommodate about 45 characters of text. The comments field should be able to show between five and ten lines of text.
  7. These text fields accept input from your site visitors.

    These text fields accept input from your site visitors.

  8. Create a new layer, and name it static text. Insert keyframes on frames 5, 15, 25, and 35. On frame 5, add Static Text blocks to the left of the text fields, indicating the purpose of each field.
  9. On frame 15 of the static text layer (underneath the wait label), insert a Static Text block indicating that the information is being sent to the server and that we’re waiting for confirmation. In our example, we used the text “Checking the server. . . .”
  10. On frame 25 of the static text layer (underneath the output label), insert a Static Text block containing a successful receipt of the visitor’s information. In our example, we used the text “Thank you. Your feedback was received at:”.
  11. You can see that we are setting up the output state to display the time that the server received the data . The CGI script returns the time and date of the receipt to the Flash movie Main Timeline. On frame 25 of the text fields layer, create a Dynamic Text field named serverTime, and place it underneath the Static Text you just made.
  12. The serverTime field displays the time that the server received the Flash form data.

    The serverTime field displays the time that the server received the Flash form data

  13. On frame 35 of the static text layer (underneath the error label), insert Static Text that indicates the data was not successfully received. In our example, we used the text “Sorry, the server is down.”
  14. Save your Flash movie as sendReceive.fla.Now, we have all our states defined with placeholder artwork. You can go back later and refine the text and graphics to suit your particular needs. Next we need to add the interactive components to- the Flash movie:
    • A Flash action to define the e-mail address of the site administrator (or your own e-mail address)
    • A Flash action to send the data in the Input Text fields (and the e-mail variables)
    • A Flash action to wait for the server’s response
  15. These actions need to put on the appropriate Flash event handlers. We start by defining our e-mail address variable, and then adding a Button instance to the input state. This Button instance uses a loadVariables action to send the data from the Flash movie tothe receiving script on our Web server. Then our wait state uses an if. . .else action to determine whether the server has received the data.

  16. Create a new layer and name it buttons. Insert keyframes on frames 5 and 15. On frame 5, create a simple Button symbol or use one from the Buttons Library (Window➪Common Libraries➪Buttons). In our example, we used the Pill button from the Buttons Library. Place an instance of the Button symbol below your text fields. Then insert some Static Text on the Button instance, such as “Submit” or “Send.”
  17. Select the Button instance from Step 11, and open the Actions Panel. In the actions list, type the following code (note that the ¬ indicates a continuation of the same line of code; do not insert this character into your actual code):
  18. This code establishes the recipient’s e-mail address (your e-mail address) and the subject line of the e-mail, and issues a loadVariables action that sends the mailto, name, email, and comments variables to the sendmail.cgi script on our Web server. _root indicates that any output from the sendmail.cgi script should be directed to the Main Timeline of our movie. Depending on the browsers of your target audience, you may want to use the GET method for loadVariables, as Internet Explorer 4.5 (or earlier) on the Mac does not support the POST method from plug-ins.

    After the loadVariables action is executed, a new variable called sendTime marks the time that the loadVariables action occurred. The getTimer() function is a built-in Flash function that returns the current time, in milliseconds, of Flash movie playback. Thus, if the user clicked the Button instance after spending 2 minutes to fill in the form, the getTimer() will return a value of around 60,000 (milliseconds). Finally, the gotoAndPlay action will direct the Main Timeline playback to the wait label.

  19. On frame 16 of the actions layer, insert an empty keyframe. In the Frame Panel, type a frame label (comment) of //loop. This keyframe contains the actions necessary to check the server’s response to our loadVariables action. Open the Actions Panel, and type the following code:
  20. This code first tests whether a variable called success has been received by the Flash movie (from the CGI script). If success exists and it’s equal to the string “1”*, then the Main Timeline will go to the output label. If success has not been received, then a secondary if. . .else statement is evaluated. If the current time of the Flash movie is greater than 25 seconds from the sendTime value, then it sends the playhead to the error label. Otherwise, the playhead will loop back to the previous frame with the wait label.

  21. Finally, add a keyframe to frame 25 of the actions layer. With this keyframe selected, open the Actions Panel, and add the following action:
  22. serverTime = timeDate;

    This action takes the server’s returned variable, timeDate, and use its value for the serverTime variable, which also updates the serverTime text field we created at this state.

  23. Save your Flash movie again, and test it (Ctrl+Enter or Command+Enter). Type some information into the text fields, and click the Submit button. If the server script is available, you should see the output state display the time/date stamp from the server.
  24. You can modify this movie to work with as many text fields as you want. The server script supports either GET or POST methods. Remember, every data exchange with a Flash movie should use input, wait, output, and error states. Even if you are loading variables from a small .TXT file, you should confirm the download by checking for the presence (and value) of a terminal tag.

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

Flash Topics