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 functions. 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 five keyframes to each layer.
  5. Create four button symbols. One should say "Enter," one should say "Add a person," one should say "Done," and one should say "Play again."
  6. In frame 1 of the "text" layer create 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 instance name (not variable name) "nameField." Also Place an instance of the "enter" button on the page. Give it an instance name of "button1."
  7. Go to frame 2. In the "text" layer, put another dynamic text field; give the field 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").
  8. In frame 3 duplicate the contents of frame 1 (input text field called "nameField" and the "Enter" button with an instance name "button1."
  9. Frame 4 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 .(see the example). Each text field needs an instance name; I would recommend calling them "noun1," "noun2," "verb1," "verb2," etc. Also add another instance of the "enter" button and give it an instance name "button4".
  10. In the final frame, create two dynamic text fields. The first need only be a single line; give this field the instance name "storyIntro." Then create a bigger box (choose multiline in the Property Inspector). Give this larger box the instance name "story." The Mad Lib will appear here so it needs to be large enough for your entire story. Fianlly put the "play again" button on the screen and give it the instance name "button5".

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. In the "actions" layer, open the Actionscript window and write:

    2. stop();

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

    }

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

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

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

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

    };

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

    };

    If you recall, there is a dynamic text field on this frame called "greeting" (see step 7 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 3 where a new name can be added. if button3 is pressed we jump to frame 4 to begin the Mad Lib.

  3. The code in frame 3 is almost identical to that in frame 1:

    4. button1.onRelease = function() {
    displayName = displayName+", "+nameField.text;
    gotoAndStop(2);

    };

    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.

  4. The script in frame 4 gets a bit trickier. When the button is pressed, the values of all of the text fields need to be recorded and stored in variables. You will likely have different variable names, but it might look something like this:

    5. button4.onRelease = function() {
    noun1 = noun1.text;
    verb1 = verb1.text;
    verb2 = verb2.text;
    noun2 = noun2.text;
    ...
    gotoAndStop(5);

    };

    In this example, the first blank space in my mad lib is a noun which I have called "noun1." The next blank is a verb, and so on.You will have to change the bits in red to reflect the story you've written. The three dots are not part of the code; they represent where more variables will be added, depending on your story.

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

    6. storyIntro.text = displayName+" here is your story:";

    story.text = "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 unsuspecting "+noun3+" and "+verb3+" it in one bite.";

    button5.onRelease = function() {
    gotoAndPlay(1);
    }

    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. Finally, a button sends the user back to the beginning to play again.

Part Three: Finishing Touches.

  1. Try it out, does it work?
  2. Make the Mad Lib look better than just boxes. Add some color, some flair; give it a cool interface.
  3. Export a .swf file and give it to me along with the .fla file. Make sure your name is on them!

Example

Course Outline

Syllabus

Student Resources

Updated 7/09