Task: Printable Form

I l @ ve RuBoard

One thing I hate to see on the Web is a printable form that you need to print out, fill out, and then mail in. It is the filling out that I object to. I'm using a computer, but then I suddenly have to find a pen and a clear spot on my desk to write?

So why not allow the user to fill out the form right on the screen? Then you can print out the form, complete with the text the user entered.

Doing this is simple with Flash and has some definite advantages over placing an HTML form on a page and asking the user to print out the entire Web page. You can completely control what gets printed, so that miscellaneous elements on the page get ignored, and new elements, such as a mailing address for the form, can be added.

1. Create a new Flash movie.

2. Add a lot of input text fields on a layer named content. You can see which fields to add in Figure 20.4. This layer should be named Content.

   Figure 20.4. This form contains various fields to be filled out, plus a Print button.

   

3. Add a title to the top, complete with a title bar under it. Place these on two separate frames named Title and Title Bar.

4. Create a Print button and place that on its own frame named Buttons.

5. Add this script to the button:

    on (release) {     print(this,"bmax"); } 

6. Now add a second frame to the movie. Stretch the Title Bar and Content layers onto this second frame. However, create new blank key frames for the Buttons and Title layers . They will have different content on frame 2.

7. In the second frame of the Title layer, put a different title. For instance, if the first frame is titled Fill Out This Application, the second frame can be titled just Application. After all, if the printed application is already filled out, the original title doesn't make sense anymore. You can see this new title in Figure 20.5.

   Figure 20.5. This frame has a different title, and is missing the Print button, but has a signature line and mailing instructions.

   

8. Add a new layer named Signature. Put a key frame on the second frame of this layer. Add a signature line and mailing instructions to this key frame, as shown in Figure 20.5. These should not be visible on the first frame, only the second.

9. Add a Frame Labels layer. Place two key frames on it. The second key frame, in the second frame of the movie, needs a #p label on it. Use the first key frame to place a stop() script so that the movie stops on frame 1.

   Test your completed movie. You should be able to fill out the form and then click the Print button. The second frame prints, complete with a new title, signature line, and mailing instructions.

The sample movie 20printform.fla contains my version of this example.

I l @ ve RuBoard