Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Mad Lib

VCB424 Advanced Interactive Design IV

Input & Dynamic text: Mad Lib

Remember Mad Libs? We all did them as a kid—fill in blanks with nouns, verbs, adjectives, etc. and then read back a humorous story. Using Flash, you will create an interactive Mad Lib of your own. Here is a sample.

To do this we're going to make use of Flash's input text and dynamic text funcions. Input text allows the user to write text in pre-made fields (as are used in forms, etc.). Dynamic text is text that is written or altered by Flash as the program is running. In this case the user will input his/her name, then a list of nouns, verbs, etc. Flash will then output a dynamically written story using the input words.

Part One: Layout

1. Write a story for your Mad Lib. Leave about 10 – 12 words blank; make sure the blanks constitute a variety of word types: nouns, verbs, adjectives, adverbs, interjections, names, places, etc.
2. Launch Flash. Create a new file (no bigger than 760 x 420).
3. Create two layers called text and actions.
4. Now add six keyframes to each layer.
5. Create three button symbols. One should say "Enter," one should say "Add a person" and one should say "Done."
6. For now we're ging to skip frame 1 (just leve it empty).
7. In frame 2 of the "text" layer add two text fields. The first text field should be static text and say "What is your name?" or something along those line. Place the second text field right below the first, but make it an empty input text box. In the Properties window choose a font, style & size for your input text. But most important: give the text field the variable name "nameField." Also Place an instance of the "enter" button on the page. Give it an instance name of "button1."
8. Go to frame 3. In the "text" layer, put another dynamic text field; give it the instance name "greeting." Below the text field put an instance of the "Add a person" button (call it "button2," and an instance of the "Done" button (call it "button3").
9. In frame 4 duplicate the contents of frame 2 (input text field called "nameField" and the "Enter" button with an instance name "button1."
10. Frame 5 is the trickiest one because the layout depends on your story. Basically you need to create an input text field for every "blank" in your Mad Lib. Above (or below) each one write "Noun," "Verb," "Adjective," etc. Each text field needs a variable name; I would recommend calling them "noun1," "noun2," "verb1," "verb2," etc. (see the example).
11. In the final frame, create two dynamic text fields. The first need only be a single line; give this field the variable name "storyIntro." Then create a bigger box (choose multiline in the Property Inspector). Give this larger box the variable name "story." The Mad Lib will appear here so it needs to be large enough for your entire story.

Part Two: Actionscript

Now we need to write several actions; these will collect the input data (name(s) of users, supplied words, etc.) and then integrate them into the story and spit everything out as dynamic text.

1. We'll begin with frame 1 which we skipped earlier. In the "actions" layer, open the Actionscript window and write:

displayName="";

 

This sets up a variable ("displayName") and assigns it a null (empty) value. We will use this variable in the next frame.

2. In the "actions" layer, for frame 2, write:

stop();

button1.onRelease = function () {
gotoAndStop(3);
displayName=nameField;

}

This script does two things when the button (button1) is clicked: the playhead jumps to frame 3 and the variable "displayName" is filled with the name typed into the input text field called nameField.

3. In the "actions" layer for frame 3 write:

greeting = "Hello "+displayName+". Is there anyone else?";

button2.onRelease = function() {
nameField = "";
gotoAndStop(4);

};

button3.onRelease = function() {
gotoAndStop(5);

};

If you recall, there is a dynamic text field on this frame called "greeting" (see step 8 above). The first line of this script causes a message to be written within it—a greeting to the user. The script then looks to see which button is pressed. If button2 is pressed, it clears the value of the variable "nameField" (sets it to null), and goes on to frame 4 where a new name can be added. if button3 is pressed we jump to frame 5 to begin the Mad Lib.

4. The code in frame 4 is almost identical to that in frame 2:

button1.onRelease = function() {
gotoAndStop(3);
displayName = displayName+", "+nameField;

};

The difference, of course, is that displayName already has a value assigned to it (the first user name entered). This script takes the new name and adds it to the first name (and throws in a comma to separate them). If the user opts to go back and add a third name, it will be added to the first two, and so on.

5. The script in frame 5 is very simple; all it does is send the user on to frame six once the button is pressed:

button4.onRelease = function() {
gotoAndStop(6);

};

6. It is in frame 6 where all the magic happens. The various input words from frame 5 are added to the story, then output to the big dynamic text field:

storyIntro = displayName+" here is your story:";

story = "Once upon a time there lived a "+noun1+" who lived in a little room under "+place+". One day the "+noun1+" got hungry, so it "+verb1+" into "+place+" and hid in a "+noun2+". When a "+adj1+" "+noun3+" came by it "+verb2+" on the unsepecting "+noun3+" and "+verb3+" it in one bite.";

 

The first line writes a little personalized intro to the user. The next part of the script writes the story. Note that this is my sample story—you should create your own. Place the appropriate nouns, verbs, etc., where they belong.

Part Three: Finishing Touches.

1. Try it out, does it work? Okay you may ask, what happens when I reach the end? Can I go back and try it again? Well, you have to add one more button, a button on the last page that sends you back to frame one.
2. Make the Mad Lib pretty. Add some color, some pizzazz... you get the idea.
3. Export a .swf file.
4. Embed the .swf file into an html page (called madLib.html for example).
5. FTP the .swf, .html, and .fla files to your server space. Make a link to the html file from your home page.

Course Outline

Syllabus

Student Resources