• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 6. Interactive Simulations > Adding Main Page Elements

Adding Main Page Elements

The simulation itself is only part of the whole project. It wouldn't be much of a tutorial if it didn't at least tell people what to do! In this task, you'll set up the rest of the static parts of the file.

Select the first keyframe after the intro keyframe in the labels layer. In the Property inspector, type one into the Frame Label field. Do the same for the eight keyframes remaining, naming them two through nine, before the conclusion keyframe.

Labels have a number of advantages. First, they make it easier for you to read your timeline. Second, they can be targets of gotoAndStop() and gotoAndPlay() commands, as you will see.

It is important to begin each frame label with an alphabetic character; you should never use a number as a frame label, which is why you should type one rather than 1.

Select frame 1 of the page elements layer, and drag an instance of the dir_intro symbol in the directions folder in the library onto the stage. Position it below the text that's already there, and choose Align Horizontal Center.

This directions box is not needed on this page, but it is of singular importance on all of the other pages so it is good to put it under the user's nose right from the beginning. That way, users will recognize it later and know that it is not supposed to be a part of the Windows Data Source Administration dialog box.

Select the screens3 layer name, and choose Insert Layer. Name the new layer navigation. In the first frame of the navigation layer, drag an instance of the continueB button symbol, and position it in the center below the dir_intro dialog box.

Separating different kinds of objects often makes it easier to work with them. You will put all your buttons (including the invisible button hotspots) in this layer.

Insert a blank keyframe in frame 10 of the navigation layer. Still in frame 10, select the page elements layer, and drag an instance of dir_01 onto the stage.

Inserting the blank keyframe prevents the Continue button from showing up in every frame of the movie.

I placed the directions dialog box on the right side, just below the Configure button in the dialog box, to show as much of the dialog as possible.

One at a time, drag out instances of the directions dialog box into each of the keyframes on the page elements layer. The direction number (e.g., dir_06) should match the frame label (e.g., six) in every case. Position each to block as little of the dialog box as possible.

Use the directions in each dialog box as a guide for placement. For example, the directions for keyframe two say, “Press the Add button to continue.” In this case, make sure that you do not cover the Add button with the dialog box.


This might be a good time to use the Paste In Place/Swap Symbol technique, where you copy one frame's dialog text, and paste it in place (Edit > Paste In Place) into the new frame, select it, choose Swap from the Property inspector, and select the correct dialog text instance.

Remember that you can reposition these at any time, so if you later discover that you placed one too close to something important, you can move it out of the way at that time.

You might have heard that naming movie clip instances is good practice in Flash. Naming movie clip instances gives them an ID that both users and ActionScript can understand. These movie clips, however, will not be manipulated by an ActionScript so you don't need to name them. But if you want to be safe, you can name each one; if you do, I'd recommend using alphabetic rather than numeric characters, at least as the first character. In any event, giving these movie clips instance names is optional.


To give a movie clip an instance name, select it and enter a name in the Instance Name field of the Property inspector.

Choose Control > Test Movie to see it in action.

As each screen flies by in under a second, you realize that you need to stop the timeline. Otherwise, it's coming together.

One thing, though, that might bother you is that without borders, it is hard to tell where the movie ends and the page around it begins. This undesirable effect would also repeat itself if the movie were published on a white HTML page. Whenever my movie background color and page color are the same, I make sure to add a border around the movie.

Add a new timeline layer at the bottom of the stack, and name it border. Select the rectangle tool, and set the stroke to black and the fill to none. Draw a rectangle on the stage of any size. Switch to the pointer tool and double-click the rectangle to select it, and enter the following settings in the Property inspector: W = 548, H = 398, X = 1, Y = 1.

This step takes advantage of the miraculous info settings, W, H, X, and Y. These settings define the rectangle. W specifies the width, H the height, X the position in pixels to the right of the top-left corner of the stage, Y the position in pixels beneath the top-left corner of the stage. Since the stage is 550 by 400 pixels, these settings make the rectangle two pixels smaller than the stage in each direction, and place it one pixel below and to the right of the top-left corner of the stage, perfectly bordering the edges.

Select frame 1 of the actions layer, open the Actions panel in expert mode, and type stop(); to stop the playhead in the first frame.

By default, Flash movies play beginning in the first frame and run at the specified frame rate until told otherwise. Adding the stop(); action is how you tell it otherwise. In an interactive simulation, you will seldom want the movie to be playing; it will usually be stopped.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint