Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Flash Tutorials Creating an Interactive Story Part 2
Your Ad Here

Creating an Interactive Story Part 2


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.

Click to enlarge
Click to enlarge

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.

image 2

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.

Click to enlarge
Click to enlarge

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.

Click to enlarge
Click to enlarge

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.

Click to enlarge
Click to enlarge

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.

Click to enlarge
Click to enlarge

image 7



Author's URL: Cyndy Cashman
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Internet & computing Flash is a vector-based moving graphics format created by Macromedia for the publication of animations on the World Wide Web. More Flash & Swish: Most Popular Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com

Add comments to "Creating an Interactive Story Part 2"

Only registered users can write comment

Reader's comments