Lesson Plan Industry Sector
Arts, Media & Entertainment

Lesson Plan Originally Created By: Jeanie Smith

Buttons 2: Dungeon

Part of Unit: Animation Production

Lesson Plan Overview / Details

Students continue to learn how to action script buttons in Flash in order to move viewers through their animation or presentation, by clicking on buttons or using automatic triggers.

An intermediate level use of button action scripting, with room for creative personalization, as the "player" navigates a puzzle game through a Dungeon setting.

Lesson Time

20 Minutes
Guided Practice
5 - 7 Hours

Objectives and Goals

1. To produce interactive digital media 2. To further knowledge of how to plan and create an animated structure 3. To understand how this works in relation to animation and game/app development

Activities in this Lesson

  • Hook em! Hooks / Set

    Show students several versions of the Dungeon project (see attached files).  Once you've done this lesson a few times, you will have some awesome examples, too!  Showing students that they have the opportunity to personalize this project really gets them interested, and many of them will become quite creative with it.

    Tell them that they need to roughly duplicate the first THREE frames-- the Title page, the Intro, and the first Room with three doors-- but that the rest is up to them.  Minimum projects will run about 15-20 frames; larger ones can run 50-100.

    The folder of Dungeon images is just for a guideline.  These are not useable as images in Flash because you can't "ungroup" them in order to create buttons.  Students can, however, open them all up in presentation style (e.g. in Preview) to view as templates for their own work.

    More advanced students will have fun adding tweens and other animated elements into their Dungeon-- let them!  This is a great project for differentiation.

    Resources and Materials

  • Getting Started Demo / Modeling

    I.  Give students a handout with the template pictures, OR post them online so that students can open them in a presentation format, such as Preview.  

    A.  Show them that they need to keep the first two pages the same, in order to begin the project. They will need TWO layers, at least-- one for Background, and one for Foreground or Content. This gets them started with making simple arrow buttons to progress from frame to frame. Remind them that they need to put action scripting in Frame 1 as well, putting in a Stop so that the frame sequence doesn't loop endlessly.

    B.  Then they need to create the first "Room" frame, creating the basic room design in their Background layer, and the doors and torches in Content layer.  They can create buttons for each door, torches can become buttons, doorknobs, etc.-- this is where it is up to them how extensive they want to get.

    C.  But now they should also do a Storyboard to layout the structure and design of their Dungeon, in order to keep track of which button leads to which frame, and to make sure their paths will work.  If they don't do this, they run the risk of getting mixed up when they're action scripting their buttons.

    Attached are two FLA files so that you can show students both simple and more complex constructions. Click on the action scripting for a few buttons so they can see that as well.

    Resources and Materials

    • The Teacher's raw file [ Download ] See what a basic two-layer construction might look like
    • Deep Dungeon raw file [ Download ] More complex construction, including animated elements
    • Watery Dungeon raw file [ Download ] Much more extensive construction
    • Basic Frame templates [ Download ]
    • Storyboard template [ Download ] To help students "map" their dungeon beyond Frame 3
    • Instructions for students [ Download ]
  • II.  Build (or have already built) the first three frames, including the first Room frame.

    A.  Show the recommended sequence for creating and scripting a button:
    1.  Create the button shape.  Create text (if any) on the button.  Using the Selection Tool, select both the shape and the text and hit Command-->G in order to Group them.
    2.  Control-->Click on the button to get the pop-up menu, and drop down to Convert to Symbol.
    3.  Be sure you're creating a BUTTON, not a Movie Clip. Give the button a descriptive name, such as "Start", and click OK.
    4.  Now, while you're still focused on the button (and it's showing that in the Properties window), click on the ActionScript Panel arrow (in the upper RH corner of the Properties window).  Enter your action scripting, sending your "Player" to the correct frame you want it to lead to.  For example:

    on (release) {
         gotoAndStop (4)

    This means that when the Player clicks and releases on that button, they will be taken to Frame 4.

    (Also attached is a description of basic Actionscripting in Flash, with links to a simple online resource.)

    B.  When ready to create the next frame in your sequence, decide (referring to your Storyboard map)-- do you want to have the same background in the next frame? For example, another room?  If so, you will select the next frame in both layers and do Insert--> Timeline--> Keyframe.  This allows you to repeat the background and merely change the elements in the Content layer.
    If instead you want a blank screen for a whole new background design, then select BLANK keyframe. This allows you to create a new look, new scenery.

    Resources and Materials

    • Basics of ActionScripting [ Download ] More on the STOP and ON commands
  • Go for it! Guided Practice

    Allow students sufficient time to create their dungeons-- usually 3-5 class periods at least.

    Circulate to help them with their storyboards and construction.  

    If you like tell them that YOU must be able to find the escape route-- you are their test player.

    It's great if you have a way for students to upload their finished SWF file to a common online site so that they can play each others' dungeons.


Assessment Types:
Projects, Demonstrations, Observations,

Students' finished projects are assessed on the following three points:

1.  Do all the mechanics of the project work, e.g. buttons or animated elements?

2.  Spelling counts! Graphics/design count!

3.  Does the project overall show a structure similar to the master, but also show originality and creativity?