10 Minutes with Flash: Using LoadVars to Send Form Data
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
I've heard the question a hundred times: How, oh how, do I create a form in Flash to send an email? So here's the answer, in 10 minutes or less.
The Setup
For this article, I'm going to assume that you have some prior experience using ActionScript and a decent amount of experience with Flash in general. I also assume that you actually need this information (smart of me, huh?). Because we have only 10 minutes, I won't get into the server-side scripting (CFM, ASP, PHP, etc.) you would use to process an email form. But I will show you how to create the form, compile its data, and send the data out of Flash.
So, let's do it.
Launch Flash and create a new blank document. It doesn't matter whether you use Flash MX or Flash MX 2004/Flash Pro. Either version will work.
Set the Publish Settings to use Flash Player 6 or higher by using either ActionScript 1.0 or 2.0.
Set the Stage dimensions to whatever you want. Just be sure to leave enough space for five text fields—one of which will be rather large—and a button.
Add a layer in the Timeline (so you have two) and then name them actions and assets, with the actions layer on top.
On the assets layer, create four individual lines of static text: First Name, Last Name, Email, and Message (see Figure 1).
Add four empty text fields to the Stage in a layout of your choice, and set their text field types to Input, using the menu in the Property inspector. One of the fields will be used to enter an email message, so make sure it's fairly large.
Position the Static text fields from Step 5 (First Name, Last Name, etc.) above or next to the input text fields so the user will know what is supposed to be entered into each Input field, similar to Figure 2. Leave space for a fifth text field, which you'll add in a moment.
Select the Input text field next to First Name and use the Property inspector to give it an instance name of first_name_txt. This gives you a way to identify the field in the ActionScript you'll write in the next section.
Name the other input text fields last_name_txt, email_txt, and message_txt.
Create a Dynamic text field, position it, and give it the instance name status_txt. This field will be used to notify the user if the form is incomplete and can't be sent.
Create a new Button symbol and design yourself a Send button. I used the word Send and changed the color of the text for the Over state (if using plain text for the button, be sure to add a rectangle into the Hit state for the button that covers the entire word). Return to Scene 1 when you're done.
Position the Send button somewhere where the user can find it (on the Stage, for example, where it can actually be used) to complete the form layout.
Snap an instance of the Scrollbar component to the right side of the largest Input text field (message_txt). This way, users can write extra long messages and scroll through them while writing.
Add a keyframe to frame 2 of the assets layer (by pressing F6). Select the new keyframe, delete everything on the Stage, and add a line of Static text that says Thank you. Your message has been sent. This will cue users that everything went smoothly, giving them that nice, warm, fuzzy feeling you get when you know an email has been sent.
Save this file as form.fla to your desktop (or wherever you might need it).
)
Figure
1 Words. Pretty, pretty words.
)
Figure
2 The careful planning of a form.
NOTE
If you're using Flash MX 2004/Flash Pro and don't have the legendary Scrollbar component now missing from Flash, copy it from the exercise file for this article, which can be downloaded at the end of this article.
The form should now contain all the assets shown in Figure 3.
)
Figure
3 One of a million possible layouts for a form in Flash.
Hooray! You have a form. Of course, it doesn't do anything yet, so keep reading.