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

Lesson 6. Interactive Simulations > Inserting Screenshots

Inserting Screenshots

Now that the timeline is prepared, you can add the screenshots. This task is much like the same task in the video animation, with a twist—some of the screenshots need to be layered over other screenshots to represent the behavior of dialog boxes popping up.

In the screens layer, drag one screenshot apiece in sequence into each successive keyframe, starting with 10 (use 01_userdsn) and ending at 90 (use 09_systemdsn_dsncreated). As you drag each screenshot onto the stage, align it to the center of the page using the Align panel (Window > Align) and pressing the Align Center Horizontal and Align Center Vertical buttons with the To Stage button toggled on.

Since each of the screenshots represents a floating dialog box, aligning it to center ensures that each will be placed well relative to the others.

Drag the playhead across the frames to see each of the screenshots in sequence, making sure they are aligned and generally absorbing the effect. As you do so, you will become aware that the dialog boxes are all different sizes. That is because many of the dialogs pop up from other dialog boxes. As it stands, the dialog boxes are not realistic (which is a bad thing in a simulation), because in reality, where a pop-up is smaller than its parent, the parent is still visible behind it.

To see what I mean, drag the playhead back and forth from frames 28 to 32. The first place where there is a difference is in frame 30 where the Create New Data Source dialog is not as tall as its parent, the ODBC Data Source Administrator dialog. In reality, the top and bottom of the ODBC Data Source Administrator dialog box is visible while you work in the Create New Data Source dialog box. (Windows users can test by double-clicking the Data Sources icon in the Control Panel, in some versions located inside the Administrative Tools icon; DSNs aren't available on Macintoshes, so Mac users won't be able to experience this dialog box first-hand.)

To the left of the timeline, select the screens layer name and press Insert Layer to add a new layer above it. Double-click the default layer name (which is probably something like layer12) and rename it screens2.

Adding a second layer for screens above the first makes room for you to recreate the pop-up effect. You could simply paste the bitmaps directly on top of one another in the same layer, but you have greater flexibility if you separate them.

In frame 30, select the screenshot and choose Edit > Cut. Insert a keyframe in frame 30 of the screens2 layer, and choose Command+Shift+V/Ctrl+Shift+V to paste the screenshot into the new layer. Select the keyframe in frame 30 of the screens layer, and choose Insert > Clear Keyframe to remove it.

In this step, you are transferring the screenshot that should appear on top to a higher layer. By deleting the keyframe from the lower layer of frame 30, the parent (lower) screenshot persists, just as it does in the real dialog box. In the next steps, you will do this for the rest of the screenshots that need it.

Command+Shift+V/Ctrl+Shift+V is the keyboard shortcut for Paste In Place. Regular pasting does not carry through the original positioning of the pasted object. By choosing Paste In Place, both the object and its original positioning are maintained.

In frames 40 and 50, repeat step 3 (using Insert > Blank Keyframe, instead of Insert > Keyframe), so that the two dialog screenshots appear in the same relationship as the two from step 3.

This step is the same as the previous one, with the only difference being that you should use Insert > Blank Keyframe in the screens2 layer, rather than Insert > Keyframe. If you choose Insert > Keyframe, the new keyframe contains the contents of the previous keyframe. This effectively copies the previous screen's screenshot to the new screen, which you don't want. Insert > Blank Keyframe results in an empty, new keyframe, into which you can paste the active screenshot.

Add a new layer stacked above screens2 called screens3. In frame 60 of this new layer, add a keyframe. Copy and paste in place the 06_selectdatabase screenshot into the keyframe, and remove the keyframe in the two lower screen layers.

Frame 60 is tricky, because that screenshot is a pop-up whose parent is the higher screenshot in frame 50. It is small, so both of the screenshots that precede it should be visible behind it. This is essentially the same technique used in step 3; it's just that this time, you're adding a third level, instead of a second.

In frame 70, insert blank keyframes into screens2 and screens3, so you can see the current screenshot. Cut and Paste In Place this screenshot (07_selectdatabaseOK) into a new keyframe in screens3 and then remove the keyframes in screens2 and screens, as before.

This is the same dialog box as the one from the previous step, only with the database selected. It should therefore look like the dialog box in step 5.

Insert blank keyframes into frame 80 of both the screens3 and screens2 layers, so you can see the active screenshot on the bottom layer. Cut and Paste In Place this screenshot into screens2, and clear the keyframe in screens.

The active screenshot here shows the same dialog box as the one in frame 50. The only difference is that the text is already entered. The pop-up menu on the screens3 layer is complete, so just as you built up the layers before, now you are dropping back down. When you are finished, only two stacked screenshots should be showing.

In frame 90, insert a blank keyframe into the screens2 layer.

In this screen the user is returned to the original dialog box. The only difference between this version and the one maintained throughout the tutorial is that the new DSN, E337, appears in the list. Screens3 should already be empty. In the simulation at this point, the user has clicked OK in the dialog box in screens2, so that dialog box needs to disappear, which is what inserting the blank keyframe does.

Drag the playhead across the frames to see the effect. The pop-up dialog boxes are a lot more convincing now that their parents are still visible behind them.



Not a subscriber?

Start A Free Trial

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