- Introduction
- Stage 1: Sizing and Graphics - Setting Up Your Form
- Stage 2: ActionScripting - Making Flash Talk to CGI
- Stage 3: CGI—What Is It, and How Does It Work?
- Stage 4: Troubleshooting and Uploading the Final Files
Stage 1: Sizing and Graphics - Setting Up Your Form
Creating a form can be a tricky thing sometimes. The best thing to do right away is decide what you want in the form. For this example, we will be using three fields:
Email
Subject
Message
These are pretty standard when it comes to forms. The one curveball I am going to throw into the project is the use of the Menu Smart Clip. This is a pull-down-style menu that can be found under Common Libraries in the Smart Clip section. The reason for doing this is to better serve the visitor, by providing a list of subjects that route questions or inquiries to the correct person within the company.
One last order of business before we move on is to explain how this movie will work. I am going to describe a movie that is a smaller size so that you can load it in a layer above your main movie or into a window in front of your site.
Let's Begin
Open Flash. (If you have not already... Hey, you never know!)
Choose Modify->Movie (Command + M on the Mac; Control + M on the PC). This will open the Movie Properties window, where we can set the dimensions of the movie.
Set Width = 175px and Height = 250px. This should give us enough room in which to work.
The next step is to choose a background color. Let's get everyone's attention and choose #FF6600.
Click OK to close the Movie Properties window and set the movie to the settings we have chosen.
This completes the movie's setup. Let's jump into...
Setting Up the Fields
Figure 1 is what the completed project will look like. Now, you can better visualize what I am asking you to build in this example. I have kept it very simple so that you do not get distracted from our main goal, which is to understand the communication between Flash and CGI.
){kind=link}
Figure 1 Finished product.
Text Fields and Variables
This section quickly covers the setup of the "email" and "message" text fields. Create the text fields like I have them set up in Figure 1. I will cover the "subject" pull-down in the next section.
Figure 2 shows you the settings I used for my "email" field. Notice that I left the Border/Bg field unchecked. This is just a personal preference because I don't like a black border on all of my text fields. So in this example, I just created white boxes and placed them on layers beneath the text fields. You will also notice that the Variable field is set to "from." This isn't a mistake; I purposely did this because this is one of the variables that the CGI script calls. When you are making your "message" field, be sure to set the Variable field to "body."
){kind=link}
Figure 2 Text Options panel with settings for the "email" text field.
Using Smart Clips
The Menu Smart Clip can be found in the Smart Clips library under Common Libraries. I am going to give you a few steps so that you understand the setup of a Smart Clip. For some reason, it isn't as easy as you would think.
Drag the Menu clip from the Smart Clips library to the stage.
Select Window-> Panels-> Clip Parameters to open the Clip Parameters panel if it is not open already.
Double-click on the Array Value in the Clip Parameters window. This will open a Values window.
Double-click on defaultValue1 and change it to "information"; change defaultValue2 to "Site bugs" and defaultValue3 to "Other." Then, delete the rest of the defaultValues. Click OK to close the Values window.
In the Clip Parameters window, click on the Auto value that is next to Style and set it to Win. (Trust me, it's just easier this way.)
Double-click on the Menu clip until you get into the "menu-currentvalue" clip. (A quicker way to do this is to go to the library and find the "menu-currentvalue" clip and double-click it to open it on the stage.)
Change the text from "List Value" to "Select."
That wraps up our pull-down menu. Now we have some extra things we need to build.
Extras
There are two extras that we need to create that you can't see in Figure 1. These are the "Please" movie clip and the "Thanks" graphic. These are going to be shown based on a response from the CGI. The CGI will know if all the fields have not been filled in correctly. If they have, it will send the user to the "Thanks" screen; if they haven't, the user will be prompted by the "Please" movie clip to complete the fields. Take a look at the timeline graphic (Figure 3) for an idea of how to lay out the timeline so these graphics are placed correctly.
){kind=link}
Figure 3 Main timeline.
When looking at Figure 3, you should notice that the graphics are placed in the top two layers: the first is "Please", which spans from Frame 1 to Frame 9; the "Thanks" layer picks up from Frame 10 to Frame 15. You should also be aware of the fact that the rest of the graphics are not visible after Frame 2. This is done so that the user can see the message that we are trying to get across, whether it is telling him/her about a forgotten field or thanking him/her for sending a message.
Check out Figure 4. It shows the timeline for the "Please" movie clip. This is a simple way of making sure that the user gets the message when he/she has forgotten to fill in a field. Our message flashes three times and then loops back to Frame 1, where we have a Stop action. This Stop action serves two purposes: First, it stops the movie from being played until we tell it; second, it stops the movie from being played again until told.
){kind=link}
Figure 4 "Please" movie clip timeline.
The "Thanks" layer holds a graphic symbol that simply says, "Thanks for your email. We will respond as soon as we can."
We are getting close now!! We just have to add some finishing touches to our graphics and we can dive into the scripting section.
Finishing Touches
The first thing we need to do is create a button that says "send." This is pretty simple, so I am not going to walk through this part. Next, we need to create the names for the three fields so that people know where to fill in their information. This is also a pretty easy step, but I was feeling ambitious and decided to break it out into steps:
Insert a new layer and call it "field names."
Choose the Type tool and make sure that it is set back to Static Text.
Set the Fill color to #333399, and type "email," "subject," and "message" as three separate graphics.
Position the new text graphics above their respective windows.
That's it for our graphics; now let's get into some programming.