Exercise 4 — Create a Simple Slide Show

Applet

Each slide is an Image module. The sequence in which they are displayed is controlled by a module called a sequencer.

• In Hyperwire, open the file Exercises\Ex04-6Work\Ex4Work.Ttl.

  The layout of this file has already been prepared, to save you the tedium of loading each of the image files and button art. If you did the previous tutorial, you know how to set up buttons and images already.

So far, this title has a layout but no functionality. The four images in the title are on top of each other at the position (24,24).

Note: In a Hyperwire title, as in most GUIs, the upper-left corner is position (0,0). Other positions are measured in pixels from (0,0).

To make the images appear in a particular sequence, you will use a sequencer module. See Sequencers for more information about the different types of sequencer modules.

1. If the Module panel isn't visible, make it visible by choosing Window/Module Panel.

2. Drag a Simple Sequencer module from the Module panel to the Wire view.

   
   
   

3. Double-click the simple sequencer to display its Properties dialog

   
   
   

4. In the Simple Sequencer properties, increase the Number of Outputs to 4, leave the Base Number set to 1, and turn on the Loop check box. Click OK when you're done.

   A simple sequencer has a set number of output ports, identified by integers. You will use each of these output ports to activate a particular image.

   Turning on Loop means the sequence starts over from the beginning: 1234 1234 1234, and so on.

1. Click the button's Output Ports button, and choose Button Down from the pop-up list.

   The image will change as soon as the user clicks the button.

2. Wire the button to the Simple Sequencer module. Choose Next Step as the input port to the sequencer.

   This tells the sequencer to proceed to a new step each time the button is pressed.

   (If you want, you can also have a button that goes through the slides backwards, using the sequencer's Previous Step input.)

You will make each image visible by changing its Z-order. The Z-order is the order in which visual modules are layered in a title's interface. A module's art obscures the art beneath it, but you can change the layering by bringing a module to the front of the Z-order, or by sending it to the back.

1. Choose the sequencer's output port 1 (Custom Outputs/1).

   The four numbered outputs that you set up in the sequencer's Properties dialog are in the submenu called Custom Outputs.

2. Wire the sequencer to the Pear image.

   In the Pear input ports pop-up menu, choose More/Position/Bring to Front.

3. Repeat the previous steps to wire sequencer outputs 2, 3, and 4 to the Bring to Front input of the Lampshade, Cup, and Screwdriver images.

•    Click Run Title to test the applet.

  When the applet runs, clicking the button should cause the four slides to appear in sequence.

      Save the file when you are finished.

This is the end of exercise 4. Exercise 5 shows how you can make the slide show run on its own.

Note: To create a slide show with a greater number of images, you can collect the images into a single GIF or JPEG file, then use the sub-image feature (introducted in exercise 2) to display only one sub-image at a time. Exercise 6 describes how to do this.

Home | Previous | Next