mail form

source: http://www.thegoldenmean.com

Page Three: Text Fields and Graphics

Stage Elements

You are of course free to make your Flash movie as elaborate as you wish. The illustrations for this tutorial will be pared down to the essentials. Feel free to decorate yours according to your whim.

We need a headline and four labels which are just plain static text entered directly on the main timeline.

We need one movie clip for a “submit” button. I don’t use a button symbol because I don’t like having code anywhere but the main timeline if I can avoid it. Using a movie clip allows me to put all the movie’s code in one place. You can make yours as plain or fancy as you choose. For the sake of simplicity mine is just a simple one–frame clip with a rectangle and a line of static text. Drag it from your library to the stage and give it an instance name. I called mine “submit_mc”.

Next we need four input text fields. Select the type tool and create four text fields: three of them should be single line (for name, email and subject) and one should be multiline word wrapped (for the message). Be sure they are defined as “input”. Be sure each field has been given an instance name, because we will need to refer to them in ActionScript soon. I named mine “name_txt”, “email_txt”, “subject_txt” and “message_txt”. I added a scrollbar component to that field because “message_txt” is multiline and needs to accept however much text the user feels like writing.

You can define the font and font size for these fields in the properties palette, but don’t define any other properties (such as border), as this will be done later in ActionScript.

Finally, create one last text field. Define this one as “dynamic text”; give it an instance name (I called mine “error_txt”) and select a bright color. This will notify the user if something has gone wrong. I placed this dynamic text field above the submit button and below the message text field because I assume that’s where the user’s eyes will most likely be if there is a problem requiring an error alert.

To summarize: the movie at this point is made up of:

The stage might look something like this so far:

Layers for organization

For the sake of clarity, you should put things on separate layers. From top to bottom mine has:

Frames for functionality

Our movie is going to be four frames long.

Accordingly, we need to extend the timeline with some special frames.

Click in the first frame of the “background” layer and press F5 three times to add three additional frames (not Key Frames) to the background layer, because that will not vary throughout the movie.

Click on the first frame of the input fields layer and press F5 once. We don’t want frame two to be a Key Frame, because we need to preserve the user’s input while the script is running. If for some reason we need to send the user back to frame one, we want what they have already entered to still be there waiting for them to add to or otherwise modify.

But it’s going to be confusing if the user sees their text just sitting there while the PHP script runs. How can we tell them something is happening? That’s what the “processing” layer is for. Click on frame one and press F6 to add a Key Frame. Frame one will contain nothing. Frame two will contain a rectangle filled with a solid color at a low opacity to sort of put a veil over the input fields. It could also contain an animation that clearly indicates some process is occurring.

Click in the first frame of the “output text” layer and press F5 once to add a frame, and then press F6 twice to add two Key Frames. On frame two of this layer, type a static text message indicating that the message is being processed. Delete the instance of the alert_txt dynamic text field on frame three of this layer, and type a message apologizing for a System Error. Similarly, delete the instance of alert_txt on frame four of this layer type and an indication that the message has been sent successfully.

Click on the first frame of the “stops” layer. Press F6 three times to add three Key Frames. In the ActionScript editor type “stop();” in each of the three frames. We don’t want the playhead to advance until instructed to by the main ActionScript logic.

Click on the first frame of the “logic” layer and press F5 twice to add two frames.

The labels layer and the UI elements layer only need one frame apiece. Your timeline should look something along the lines of this now. The foundation of the movie is complete. ActionScript is what makes it work, and that is discussed on page four.

divider ornament

--top--

Thanks for visiting.