Skip to main content

Home

Daniel C. Fergus

Artist & Educator

COMM 414 Introduction to Rich Media for the Web

Mad Lib

Introduction

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Assignment

Remember Mad Libs? Most of us did them as kids—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.

To do this we're going to make use of Flash's input text and dynamic text features as well as arrays. Input text allows the user to write in text 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. Arrays are special containers that hold lists of things—words, numbers, or other pieces of data, We will use arrays to store our word types and guessed words.

Preparation

  1. Write a story for your Mad Lib. A good Mad Lib will be about 100–150 words long. Now pick about 15–20 words to remove from the story—these will be the words that the player provides; make sure you choose variety of word types: nouns, verbs, adjectives, adverbs, interjections, numbers, names, places, etc.
  2. Play test your Mad Lib using paper to make sure it works. Note that for verbs you need to specify a tense: present, past, present participle (or "verbs ending with 'ing'"), etc. Nouns can be singular or plural. You can even be more specific with nouns—"a place," "a name," etc.

Flash Layout

Frame 1

  1. Launch Flash. Create a new file. You can adjust the size, but make sure it's no bigger than 800 x 600.
  2. Add a background. Your background could be a simple color or texture, or something more elaborate (photo, graphic, etc.) You could import an image or create something with Photoshop or Illustrator. You could choose something that matches the theme of your story, but you shouldn't give too much away. If you want to create a theme background, save it for the second page (as in the example above). I'd recommend you place your background image on its own layer and then lock it.
  3. Put "Mad Lib" using static text some where on teh page (usually at the top). Choose an appropriate typeface, size, color, etc. that fits into your design.
  4. Add a dynamic text box that will display the kind of word needed (noun, verb, etc.). Make sure it's big enough to hold your longest term (like "verb ending in 'ing'"). Give this text box the instance name wordNeeded_txt.
  5. Add an input text box for the user to write his/her words. Once again, make sure it's long enough, and also make sure it's set to 'Single line,' not 'Multiline' in the properties window. Give it the instance name wordChosen_txt.
  6. Add an "Enter" button. You could use a built-in Flash button, but you'll get more points for creating your own button from scratch. Give the button the instance name enter_btn.
  7. It's a good idea to let the user know how many words s/he needs to choose. Create a small dynamic text box with the instance name wordsLeft_txt. Label this with some static text that reads "Words left" or something similar.
  8. You could also include some instructions (as in the sample above), though that's not strictly necessary.

Frame 2

  1. Now select the 2nd frame in each layer of the timeline add a new blank keyframe (F7). This will be the results frame. Note that if you want the background to remain the same in page frames use a regular keyframe (F6) for that layer. Otherwise you can add a unique background here.
  2. Still in frame 2, Write the title of your story using static text. Once again, choose an appropriate typeface, size, color, etc.
  3. Draw a large dynamic text field with the instance name "story_txt." The finished Mad Lib will appear here so it needs to be large enough for your entire story. And this time make sure it's set to 'Multiline,' not 'Single Line' in the properties window.
  4. Add a button that says "Replay" or something similar. Give it the instance name replay_btn.

Actionscript

Now it's time to write our actions; these will collect the input data (name of user, supplied words, etc.) and then integrate them into the story and spit everything out as dynamic text.

  1. Create a new layer called "actions."
  2. Select the first frame of the actions layer and open the Actionscript window. Write:
    stop();  
    This will keep the playhead from jumping to frame 2 prematurely.
  3. Now we need to set up our arrays. The first one will contain the kinds of words the user will need to supply. You should go through your mad lib and make a list of the word types you'll need in order. In the array below, replace the word types in green with those from your own list. Make sure each item is in quotes, separated by a comma.
    var wordType:Array = new Array("Noun:","Name:","Adjective:","Place:","Verb, past tense:","Noun:",
    "Adjective:","Noun:","Verb, past tense:","Verb:", "Noun:", "Adverb","Verb:, past tense:"
    );
  4. The second array we will leave empty, since it will be used to store the words provided by the user:
    var wordChoice:Array=new Array(); 
  5. Next we'll write some functions. The first function will put the required word type into the "wordNeeded" text box and put a number in the "wordsLeft" box.
    function showText():void {
    wordNeeded_txt.text = wordType[wordChoice.length];
    wordsLeft_txt.text = String(wordType.length - wordChoice.length);
    }

    Notice how it works: the wordNeeded_txt text field is filled with an item from the wordType list. Which item? The item that corresponds to the current length of the wordChoice array. At the start of the game that array is empty, so its length is zero; thus the text field gets filled with the first word in the wordType array (remember, arrays start counting from zero). Later, as the user adds words to the wordChoice array, its length will increase, changing the word that is placed into the wordNeeded text field.

    The wordsLeft text box uses a little math, subtracting the length of the wordChoice array (currently zero) from the wordType array (the total number of words). Of course, this will give us the maximum number. at the start. As words are added to the wordChoice array by the user, that number will be subtracted, causing the wordsLeft count to go down. Pretty tricky if I do say so myself.

  6. Now the longest function:
    function getWord(myEvent:MouseEvent):void {
    wordChoice.push(wordChosen_txt.text);
    if (wordChoice.length < wordType.length) { wordChosen_txt.text = "";
    showText(); } else { this.nextFrame();
    }
    }

    This function will be triggered when the "enter" button is pressed (we'll add the listener later). The first thing the function does is add the word entered by the user to the wordChoice array. The push() method automatically adds an item to the end of the array.

    Next we add a conditional ("if" statement) to check and see if we've run out of words. As long as the wordChoice array has fewer words than the wordType array, the input box will be cleared and the dynamic text fields will be updated (by called the showText() function we wrote previously). However, once the two arrays become the same length, the movie is advanced to the next frame (where the finished story will be displayed...more on that later).

  7. But there's a problem. If someone presses the enter button without typing a word, a blank space will be added to the array. We need to do something to make sure a word is typed before the enter button will work. Do do this, we'll wrap everything in another conditional; add the two lines in black:
    function getWord(myEvent:MouseEvent):void {
    if (!wordChosen_txt.text == "") { wordChoice.push(wordChosen_txt.text);
    if (wordChoice.length < wordType.length) { wordChosen_txt.text = "";
    showText(); } else { this.nextFrame();
    }
    }
    }
    The conditional basically says "as long as the wordChosen box is not empty, go ahead and do the other stuff." Otherwise the function does nothing.
  8. Next we need to add a listener to the "Enter" button:

    enter_btn.addEventListener(MouseEvent.CLICK, getWord);  
  9. If you try it at this point it will work—sort of. But the initial screen will be missing the required word type and the word count. We need to call the showText() function to set the stage:
    showText();
    That takes care of the first frame.
  10. Now add a keyframe in frame 2 of the actions layer, and open the actions window (if not already open).
  11. Perhaps the trickiest bit is putting our story into the code. Note the green text below; this is a sample story. You need to replace this with your own story, including the spots for the wordChoice array items. Each chunk of story needs to be enclosed in quotes, and each array item should be surrounded by "+" signs. Note too the inclusion of spaces before and after most of the array items, so that they don't run into the story text.
    story_txt.text = "Once upon a time there was a/an "+wordChoice[0]+" named "+wordChoice[1]+ 
        ", who lived in a "+wordChoice[2]+" house in "+wordChoice[3]+". One day the "+wordChoice[0]+
        " got hungry, so it "+wordChoice[4]+" out of its home and hid in a "+wordChoice[5]+". When a "+
        wordChoice[6]+" "+wordChoice[7]+" came by, the "+wordChoice[0] +" "+wordChoice[8]+
        " on the unsuspecting "+wordChoice[7]+". But before "+wordChoice[1]+" the "+wordChoice[0]+
        " could "+wordChoice[9]+" the "+wordChoice[7]+", a/an "+wordChoice[10]+" came along and "+
        wordChoice[11]+" "+wordChoice[12]+" them both!"; 
    Note that you can reuse wordChoices as often as you like within your story. So for example, if you use wordChoice[1] to ask for a name, you can drop that name into the story anytme you write wordChoice[1].
  12. We're not quite done; we need to write one more handler and function—for the button that will jump us back to the first frame and allow us to start over:
    replay_btn.addEventListener(MouseEvent.CLICK, startOver);  
    
    function startOver(myEvent:MouseEvent):void { 
        this.prevFrame();
    }
  13. Try it out.

Personalizing the experience

A nice touch might be to add a personalized message. You could create a new input text box on the first page that captures the name of the user. You can store the name in a string variable, something like this:

var userName:String = userName_txt.text;

Then you could add a personalized message on the second screen (in a new dynamic text box) that says something like "Here's your story [person's name here]."

message_txt.text = "Here's your story, " + userName + ":";

Other possibilities

You can do other things to make your Mad Lib more unique and interesting. For example, you could:

  • Add some animation.
  • Give the user a choice of several Mad Libs to play.
  • Add sound effects

 

Specifications:

  • Size: up to 800 x 600 pixels
  • Frame Rate: 24 fps (default)
  • Length: 2 frames
  • Deliverables: completed FLA and SWF files
  • Due Date: April 3
decorative thumbnail

All text, images, and multimedia pieces (unless otherwise specified) copyright 2005–2011 Daniel C. Fergus. All rights reserved. No reproduction without permission.