Here is the timeline for this movie, and as you can see, it's pretty simple. In fact, you could fit this whole thing into two frames, but I like to have a little room. You'll probably have more layers for design elements as well, but I've stripped the design out of this to keep things simple and stay focused on the task at hand.
Layer one contains all of my static labels as well as my text input boxes. Layer two is just for the message box. Since it will sit on top of everything else, it's convenient to be able to lock and hide that layer. Layer three is simply a layer for my actions. You'll notice that it's labeled "actions/vars" and that frame one is a keyframe. We will initialize some objects and variables in that frame later on. Layer four contains my functions. Having a separate layer for actions is just good organization, while having a layer for functions (with no keyframes!) is required if you want all of your functions to be globally visible. Go ahead and add some extra frames (I added five) to all layers. Go to the last frame of the actions layer and add a keyframe. Open the Actions panel for this frame and add stop(); so that our movie won't loop. We want it to remain stationary on this one frame.
This particular form sends an email and calls for the sender's name, email address, phone, company and allows space for adding a message to the email. The subject line in this email is hard-coded into the PERL script that handles the form on the server. However, you could add a combo box with pre-selected subjects, but that's another task for another tute!.
One of the new features in MX is an object, LoadVars, to contain data to be passed to, or received from the server. If you work with Cold Fusion or XML, there are also versions of this object that are specific to them. However, we're going to use the "generic" version. You can easily find them in the Actions panel reference area under Objects->Client/Server->LoadVars
Go to Frame 1 of the "actions/vars" layer, and make the first frame a key frame. Be sure and keyframe this as we are initializing our variables here and if they extend down the timeline, they will continue to attempt to initialize.
Open the Actions panel for this keyframe and we'll add some code. Since this object will hold the data from our form, I've named it formData and the first line of code creates a new instance of the LoadVars object.
Now, using the "dot" syntax, we add variables for each of our form fields and initialize them to a empty string. There is also an "undefined" constant that can be used to initialize the variables, but Flash evaluates an undefined string as "" anyway, so I continue to use this more-or-less traditional way of initializing empty strings.
Next, drop down a line, and add another new instance of the LoadVars object that will "catch" the data returned from the server. Remember a CGI program always returns data, so you will always have something loaded back from the server. I've named this one replyData.
The LoadVars object has only one event, the sending and loading of data from the server, and only one method, onLoad, to handle this event. This method is invoked at the end of the data loading, and is by default, empty. So Line 9 is assigning a callback function to the replyData object's onLoad method. We will write this function later on.
But for now, let's go construct our input form.
|» Level Intermediate|
Rating: 9 Votes: 81
|Tom Watson is a Flash developer currently residing in Nashville, Tennessee. He's been an independant contractor in the computer business since 1989, working on web projects since the web was introduced to the Internet in 1994.|
|Download the files used in this tutorial.|
|Download (569 kb)|
|More help? Search our boards for quick answers!|