Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
This chapter is from the book

Creating the Pages

The file is well-structured, and your assets are imported and organized. It's time to start building the tutorial.

As mentioned earlier, what makes the simulation work is the careful positioning and sequencing of bitmaps. They form the foundation on which the whole tutorial is based. For this reason, it makes sense to get them in position first.

Before you can place the bitmaps you need to make room for them. Although you've added layers, that makes room only in space. This animation unfolds over time, and nothing in the file so far deals with time.

To change a layer's contents over time, you will use keyframes. Every regular frame that follows a keyframe contains exactly the same contents as the keyframe that precedes it. The way to change the contents in a frame is to insert a new keyframe.

  1. Drag your cursor from the top layer of frame 10 down to the bottom layer. Only frame 10 in every layer should be selected. Press F6, which is the keyboard shortcut for Insert > Keyframe.

    Notice that performing this command results in two kinds of keyframes. The keyframes added to the two layers that already had some contents are solid, indicating that there is content in those keyframes. The keyframes in the empty layers are represented by hollow circles, which indicate that they are blank.

    Figure 10


  2. Select frame 10 of the text layer only, and press Delete.

    This should clear the text box and the line from the stage, and the keyframe should now be empty.

    In the next step, you are going to add the rest of the keyframes needed for this piece. Adding these keyframes will continue to copy the contents of the two layers with contents all across the timeline. The text layer is going to change in every layer, so there is no point in carrying through the contents from frame 1 all the way across. Deleting it here will ensure that the text layer is empty in every keyframe but the first.

    The screenshots will also change in every layer, but leave this keyframe alone for now, as replicating the screenshot from frame 1 throughout the timeline will enable a shortcut later.

  3. Dragging from top to bottom as before, add keyframes to frames 20, 30, 40, 50, 60 , 70, 80, 90, and 100.

    You may need to use the horizontal scrollbar beneath the timeline to complete this task.

    When you are finished, you have what amounts to 11 pages for your tutorial.

    Figure 11


  4. Click frame 10 of the screenshots layer, and then click the bitmap image on stage to select it. The bitmap image version of the Property inspector appears.

    Use the Property inspector to change attributes of the selected object. In this case, the selected object is the bitmap, and the attributes you can modify are its size and positioning. Two other commands appear: Swap and Edit. Use Edit to open the bitmap in an external image editor, such as Fireworks. Use Swap to replace this bitmap with a different one.

    Figure 12


  5. Click the Swap button, and in the Swap Bitmap dialog box, navigate to one.png in the screenshots folder and click OK.

    This is the shortcut referred to in step 2 above. Normally, to place a library asset on the stage, you drag an instance out of the library. Then you have to position the element. By using the Swap technique, you can place the new image in place of the old one, eliminating the time-consuming step of positioning the bitmap.

    Bitmap positioning is especially important in simulations, because the changing of screens has to look natural. If the screen moves even one or two pixels, it undermines the illusion that the simulation is trying to create.

    Figure 13


  6. In each successive keyframe in the screens layer, replace the existing bitmap with the next numbered bitmap.

    In keyframe 20, you should swap in two.png, and so on. Sequentially naming screenshots makes placement much easier. Place the final bitmap (nine.png) in frame 90. In frame 100, select the bitmap and then delete it; there is no screenshot for frame 100, which is the ending page.

    If you return the playhead to frame 1 and select Control > Play, you can watch as the screenshots cycle by. Not compelling yet by any means, but you get an idea of how the simulation will behave.

  • + Share This
  • 🔖 Save To Your Account