Creating an Interactive Story

You're lost. It's late at night. The only light you see is the glow of a doorbell. You're desperate. You ring the doorbell. Suddenly all of the lights go on. Okay, we've all seen this opening scene. But have you tried creating your own version in Flash? If not, follow along and learn how in this two-part tutorial. Oh, and by the way, we'll let the user ring the bell.

Note: This tutorial assumes you're familiar with creating Flash documents, using the drawing tools, inserting layers, importing audio files and converting images to symbols.

Step 1: Plan the Animation

Before you start any animation you should plan the main scenes. We have two scenes in the opening scene described above. The first scene is the dark house with the glowing doorbell. The second scene is the house with the lights on. The action between the two scenes includes the sound of a doorbell and footsteps. So we'll need two images of the same house, one with the lights off and one with the lights on. We'll also need sound effects for the doorbell and footsteps. If you don't already have suitable sound effects, visit simplythebest.net or flashkit.com. These sites have large repositories of freeware and shareware sound files. Or you can record your own.

Note: The use of the term "scenes" in this Step is referring to the story, not the Flash Timeline which can be divided into Scenes.

Step 2: Create a New Document

Launch Flash and create a new Flash Document. In the Properties panel enter 15 in the Frame rate field. The background color should be white. We'll change it to a dark blue later. Save your file.

Step 3: Create a House Symbol

Choose Insert > New Symbol. The Create New Symbol window will open. In the Name field enter "house dark". Select Movie clip for the Type. Click OK. Using the Flash drawing tools, draw a house similar to the one in the illustration. It should have at least two windows, a door with a window and a doorbell button. Draw the doorbell on a separate layer. We'll be converting it to a Button Symbol later. Fill the windowpanes with a dark color, such as black or navy blue. You want it to appear as though everyone has gone to bed.

Step 4: Duplicate the House Symbol

Open the Library panel, (Command-L [PC: Control-L]). Select the "house dark" Symbol. Control-click (PC: Right-click) and choose Duplicate. The Duplicate Symbol window will open. In the Name field enter "house light". Since we duplicated the "house dark" symbol, Movie clip is already selected for the Type. Click OK. In the Library panel, double-click on the "house light" icon to edit its Timeline. In the Tools panel click on the Paint Bucket. Click the Color Swatch next to the Paint Bucket to open the pop-up swatch menu. Click on a shade of yellow. Change each dark windowpane to yellow by clicking the tip of the Paint Bucket on the dark fill. Click the Scene 1 button to return to the Main Timeline.

Step 5: Create the First Scene

Click the Insert Layer button twice. Rename the top layer "sidewalk", the middle layer "house", and the bottom layer "ground".  Click on the "house" layer to select it. Drag an Instance of "house dark" from the Library panel onto the Stage. Select the "ground" layer. Use the Rectangle tool (R) to draw the ground. Choose a dark green for the fill. Select the "sidewalk" layer. Draw a sidewalk the width of the Stage.

Switch to the Selection tool (V). Click the Stage. In the Properties panel click the Background swatch to open the pop-up menu. Select a dark blue or black for the Stage color.

Click to enlarge

Step 6: Switching Houses

Click in Frame 5 of the "sidewalk" layer. Hold the Shift key down and click in Frame 5 of the "ground" layer. Control-click (PC: Right-click) and choose Insert Frame (F5). Select Frame 5 of the "house" layer. Control-click (PC: Right-click) and choose Insert Keyframe (F6).  In Frame 5, select the Instance of "house dark". In the Properties panel, click the Swap button. The Swap Symbol window will open. Select "house light" and click OK. The lights just came on!

Note: Instead of extending our Timeline to frame 5, we could have used only two frames for our animation. Working in five frame increments makes it easier to read the Timeline.

Click to enlarge

Step 7: Add a Stop Action

If you tested your movie right now, the lights would flicker on and off since the movie would be looping. Actually, it's kind of neat looking. Oh well, back to work. Select the "sidewalk" layer and click the Insert Layer button. Rename the new layer "actions". Click in Frame 1 to select the Keyframe.  Choose Window > Actions to open the Actions editor. Click the Scrip Assist button. Click the Global Functions category then click Timeline Control. Double-click "stop."

Adding the Stop action keeps the movie from playing until the user clicks a button.

Click to enlarge

Step 8: Add a Button

We want our user to be able to "ring" the doorbell to turn the lights on. To do this, we'll need to convert our doorbell into a Button Symbol. In Frame 1, double-click on the Instance of "house dark" to edit its Timeline. Select the layer with the doorbell. Control-click (PC: Right-click) and choose "Lock Others". Select the doorbell and convert it to a Button (Control-click [PC: Right-click] and choose Convert to Symbol). Enter "doorbell" in the Name field. Click OK.

Double-click the Instance of the button to edit its Timeline. Insert a Keyframe (F6) in the Over, Down, and Hit Frames. Move the Playback head to the Down Frame. Use the Line or Pencil Tool to draw several yellow lines radiating out from the doorbell button. The lines indicate to the user the bell is being pressed.

Click to enlarge

Step 9: Add a Sound

Click the Insert Layer button. Rename the new layer "sound". Insert a Keyframe (F6) in the Down frame. Choose File > Import to Library. Locate the sound file you want to use for the doorbell and click OK. Select the Keyframe in the Down frame. In the Properties panel choose the sound you imported from the Sound menu. Select Event from the Sync menu.

Click the Scene 1 Button to return to the Main Timeline. Choose Control > Test Movie. Click the doorbell. You should hear the doorbell "ring" and see the radiating lines around the doorbell. Return to the Flash Document.

Click to enlarge

Step 10: Stop the Animation

Select Frame 5 in the "actions" layer. In the Properties panel enter "on" in the Frame field.

Move the Playback head to Frame 1. Double-click on the Instance of "house dark" to edit its Timeline. Select the doorbell. Choose Window > Actions to open the Actions Editor. Turn off Script Assist by clicking the Script Assist button. Type the following code: 

After entering the code, test your movie. When the user "rings" the doorbell, the lights in the house come on. The code tells Flash that when the mouse button is released over the "doorbell" button to go to the Frame labeled "on" in the timeline where the Instance of "dark house" is located. In our case, this is the Main Timeline.

Note: After you've entered the code, you can click the Script Assist button to return to the Script Assist mode. Then click on different parts of the code to see a description and/or explanation of the code. This is a good way to learn about ActionScripting.

In this tutorial you've learned how to create a basic interaction. By using Movie clips for our houses we've laid the groundwork for adding additional sound effects and leading up to the lights turning on. In part two, we'll add the sound of footsteps as our homeowner walks to answer the door and have the lights come on after the footsteps stop.

Click to enlarge

Courtesy of Layers magazine.