Creating an Interactive Story using Adobe Flash, Part 2

CATEGORIES: Flash, Tutorials | Cyndy Cashman | November 15, 2006

In the first part of this two-part tutorial we created a Flash movie in which the lights in a house immediately turn on when the user "rings" the doorbell. In part two, we’ll add the sound of footsteps as our homeowner walks to answer the door and turn the lights on after the footsteps stop.

STEP 1: Create a Nested Movie clip

Move the playback head to Frame 5 of the Main Timeline. Select the Instance of "house light" on the Stage and convert it to a Movie clip (Control-click [PC: Right-click] and choose Convert to Symbol). Enter "coming" in the Name field and select Move clip for the Type. You’ve just created a nested Movie clip.

STEP 2: Waiting

Double-click the Instance of "coming". Insert a Keyframe (F6) in Frame 60. Next, select the Instance of "house light" in Frame 1. In the Properties panel click the Swap button. The Swap Symbol window will open. Select "house dark" then click OK.

Why did I insert a Keyframe in Frame 60? I want the lights to come on four seconds after the doorbell is rung. The movie’s frame rate is 15 frames per second. Four times 15 equals 60. When the Playback head enters Frame 60 the lights will turn on when "house light" appears on the Stage.

STEP 3: Add a Stop Action

If you test your movie now, the lights will switch on and off after the doorbell is rung. This is because the Movie clip is looping. To keep it from looping we need to add a Stop Action. But first, we want to add two new layers. We also want to name our layers to make it easier to keep track of the movie’s elements.

First, rename "layer 1" to "house". Next, insert two new layers. Name the top layer "actions" and the middle layer "sound". Click in Frame 60 of the "actions" layer. Insert a Keyframe (F6). 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." Test the movie. When you press the doorbell the lights no longer immediately come on.

STEP 4: Add Footsteps

To make our story a little more realistic, we need to hear a few footsteps before the lights come on.

Choose File > Import to Library. Locate your footsteps sound file and click OK. Insert a Keyframe (F6) in Frame 20 of the "sound" layer. In the Properties panel choose the sound you imported from the Sound menu. Select Stream from the Sync menu. When Stream is chosen, the length of the sound is tied to the Timeline. This means the sound plays until the Playback head encounters an empty Keyframe, a Keyframe with a different sound attached, or the last frame in the Timeline.

Why didn’t we start the footsteps in Frame 1? If you said the resident needs to hear the doorbell before he starts walking to the door, you’re right. It wouldn’t be very realistic to almost simultaneously hear the doorbell and footsteps.

STEP 5: Tweaking a Sound Effect

Since most bedrooms are located away from the front door, maybe down a hall or upstairs, the footsteps should grow louder as the resident approaches the front door. Select Keyframe 20 of the "sound" layer. In the Properties panel click the "Edit sound envelope" button to open the Edit Envelope window. Choose "Fade In" from the Effect menu. Click OK. Choose Control > Test Movie. When you click the doorbell the footsteps should become louder as the resident approaches the door and then stop when the lights are turned on.

When you tested your movie you might have thought, "Boy, this is a small house". Are you wondering where that thought came from? Sound effects! If you want to create the illusion of a larger house all you need to do is lengthen the time between the hearing the doorbell ring and seeing the lights go on.

STEP 6: Insert Frames

Select the number of frames you want to add to increase the sound of footsteps. Your selection should be after Keyframe 20, where the footsteps start, and include all of the Timeline’s layers. Next, press F5 to insert frames. Test your movie. Even though we didn’t graphically enlarge the house, it seems like the house is bigger since we hear the footsteps longer and it takes the resident more time to turn on the lights.

STEP 7: Adding More Light

Let’s make it appear that light radiates out from the house when the lights are turned on. You should still be in the Instance "coming". Move the Playback head to the last Frame of the Timeline and double-click the Instance of "house light" to edit its Timeline. Insert a new layer and move it to the bottom of the stacking order. Name the layer "burst".

Select the PolyStar Tool from the Tools panel. In the Properties panel, click the Options button. Choose star from the Style menu. Enter 25 in the Number of Sides field and .30 in the Star point size field. Click OK.

Click the Fill color button in the Color Mixer panel. Enter the following settings: R: 255, G: 204, B: 0, Alpha: 77%. Draw a large star on the Stage. Select the star with the Selection Tool (V) and move it behind the house. Test your movie to see the results.

Congratulations, you’re on your way to creating an interactive story.

Share This

No Comments

No comments yet.

Sorry, the comment form is closed at this time.

Featured Partner

From our Partners