Creating Interactive Images

 < Day Day Up > 



There are a variety of behaviors you can add to an image to make it interactive. Rollovers are one of the most popular behaviors. JavaScript rollovers all work the same way: when a cursor passes over one graphic, a trigger is activated. A number of behaviors or actions can be assigned to this trigger, such as replacing the current image with another or displaying a graphic or text in another location of the Web page. The trigger is always a hotspot or a slice. Then there are other behaviors, such as disjoint rollovers, pop-up menu, bar and navigation bar behaviors, which all perform different functions.

Making a rollover image

A simple rollover is one image that is replaced (or swapped) with another image on demand. It's quite easy to build a rollover in Fireworks using the Behaviors panel. A simple rollover has an image in Frame 1, which is swapped for an image in Frame 2. In Fireworks, the button states are always on specific frames: the Up, Over, Down, and Over-Down states are Frames one through four, respectively. This section covers adding simple rollover and other behaviors using the Behavior panel instead of the Button editor. I prefer using the Button Editor for button rollovers but there are some people who prefer to use the following method.

Designing the Up and Over states of a button

This tutorial shows how to make one of the buttons for the Habitat Alert Web site. You'll build both the Up and the Over state of the button. The remaining buttons are made using the same method but altering the button size where needed.

  1.  Habitat Alert site   Open the  ha4.png file from the chapter20_exercise folder on the CD-ROM.

  2. Using the Text tool, type the word LEARN (refer to Figure 20-7 for placement). Use a font that will fit the area. Here I used:

    click to expand
    Figure 20-7: The first button text added to the site interface

    • Font: Lithos Regular (an Adobe font)

    • Size: 12

    • Color: #666600

    • Range Kerning: 7

    • Anti-aliasing Level: Smooth Anti-Alias

    The remaining text links and positioning can be seen in Figure 20-8.

    click to expand
    Figure 20-8: The rest of the main navigation text added to the layout

  3. Open the Frames panel and click to Frame 2. This is where you will make the Over state of the text navigation.

    Note 

    The rectangles around two of the links are already in place in this file to show you the effect you are going for. You'll see how to remove the bottom of each rectangle in a little bit. Each link was done the same way, then the cut rectangles edge was butted up against each other.

  4. Draw a rectangle anywhere below the navigation and set its size to 60 × 20.

  5. Set the fill to none and use a Basic, 1-pixel Hard stroke using #003366 for the color.

  6. We only want a three-sided rectangle without a bottom for the rollover, to cut the bottom off the rectangle:

    1. With the rectangle selected, use the Knife tool to drag horizontally across the bottom of the rectangle. You want to cut off approximately 3 pixels (Figure 20-9).

      click to expand
      Figure 20-9: The Knife tool after it sliced the bottom of the rectangle

    2. Click on the canvas to deselect.

    3. Use the Pointer tool and select the bottom portion you sliced and delete it.

      Note 

      The sliced portion won't be a separate object until you deselect then reselect. Alternatively you can use the Pointer tool and Shift+click on the portion you want to keep (this deselects it) then press the delete key to remove the unwanted portion.

    4. Use the Subselection tool and Shift+click both of the bottom points of the sides and use the up or down arrow key until the height is 17.

  7. Click on Frame 1.

Adding the Swap Image behavior

You need to have a slice or a hotspot in order to attach a behavior; we'll be using slices for this exercise.

  1. In the Frames panel, click on Frame 2.

  2. Select the three-sided rectangle around the LEARN button next and click on Edit ® Insert ® Slice.

  3. Add a slice to each text link as seen in Figure 20-10.

    click to expand
    Figure 20-10: Slices added to each text link

  4. It's a good idea to give your slices unique names. To name the slice:

    1. Select the slice over the LEARN button.

    2. Type btn_learn in the Slice area of the Property inspector (see Figure 20-11). When naming files for export there are certain things that are not allowed such as special characters and spaces. But the underscore is allowed instead of the space.

      click to expand
      Figure 20-11: The LEARN slice is selected and given a unique name in the Property inspector.

     Dreamweaver MX   If you name all the buttons with btn in the front then they will be easy to locate in a list of images as you'll see in Dreamweaver.

    Note 

    If you don't assign your own names for slices Macromedia Fireworks will do it but its naming system is a bit cryptic. You can set up your own naming system if you'd like in the HTML Setup, Document Specific dialog box (File ® HTML Setup).

  5. Open the Behaviors panel (Window ® Behaviors) and click the plus (+) sign.

  6. Click on Simple Rollover.

  7. In the Behaviors panel you'll notice the onMouseOver Event is added. Double-click on it. A dialog box opens as seen in Figure 20-12 explaining that the Over state uses whatever you have in Frame 2.

    click to expand
    Figure 20-12: The Simple Rollover dialog box

  8. Click on Preview in the document window and pass your mouse over the link to test it.

    Cross-Reference 

    You will optimize this image and add a few more slices for a special menu that will be made in Dreamweaver in Chapter 23. You will also learn a couple of different ways to export the text navigation and the benefits of each method.

Making a disjoint rollover image

A disjoint or remote rollover allows you to trigger image replacement in one or more locations — the swapped image need not be the same as the triggering image. With a disjoint rollover, a user moves the mouse pointer over a graphic (usually a button) and may trigger a rollover in the graphic but also in a different, remote location. A group of buttons can trigger different images in the remote location. This is useful because a single area may display lots of different information depending upon which button is active. Disjoint rollovers are typically onMouseOver events. To produce the disjoint rollover, follow these steps:

  1. Open the  disjointstarter.png file from the chapter20_exercise folder on this book's CD-ROM (Figure 20-13).

    click to expand
    Figure 20-13: The images used in this exercise

  2. Select the slice object that will trigger the remote image swap. In this exercise you will use a blue button labeled Products. This is the same version as the gold button you made earlier in the chapter, except that the fill is transparent. Notice that you can see the texture of the page behind the button. The gradient fill was added using 50% transparency for the right and left markers in the gradient edit pop-up.

    Cross-Reference 

    See Chapter 16 to learn more about using gradient transparency.

  3. This button is a symbol. Symbols automatically apply button behavior and include a slice. If you are using a static button or have built your button using the document frames, add a slice now. To add a slice, select the button's graphics (be sure to get all of them), choose Edit ® Insert ® Slice.

    As the user passes the cursor over the Products button, two things will happen: the button graphics will change and an image will appear above the button.

  4. To set up this behavior:

    1. Open the Frames panel, in the History and Frames panel group.

    2. Click the Frames panel options to access the menu and select Duplicate Frame. Add one frame after the current frame.

  5. With Frame 2 selected go to the Layers panel and click the eye icon on for Layer 2 bitmap image. By keeping the image hidden in Frame 1 it is only visible in Frame 2. Figure 20-14 show the image added to the second frame.

    click to expand
    Figure 20-14: An image added to the second frame for the swap image behavior

    Cross-Reference 

    Exporting the image as a GIF is discussed in Chapter 10.

  6. Select the slice tool and draw a slice to cover the area. You can see in Figure 20-15 that the slice is larger than needed.

    click to expand
    Figure 20-15: A slice added to cover the new content for Frame 2

    Note 

    If you have several different buttons that use the same swap area, you only need a single slice. Be sure to make the slice large enough to encompass the largest image for the area.

    If you click Frame 1, you will see the empty frame; if you click Frame 2, you will see the image added.

  7. Adding the behavior to make it work is easy — you will use a drag and drop method:

    1. With slices visible, click on Frame 1. Slices may be toggled on and off from the Toolbar or in the Web Layer.

    2. Select the Products button. You should see a little circle in the center and a pointing hand, which turns to a fist when you click and hold.

    3. Click, hold and drag with the fist, moving to the slice area above the remote graphics. A line is added showing the link (Figure 20-16).

      click to expand
      Figure 20-16: The drag and drop method being used to add the Swap Image behavior

    4. A Swap Image dialog box opens, which should default to Frame 2. To select a different image, click the More Options button, select a different image file, then click OK.

      It's possible to use an external file as well. For example, if you have graphics that have been previously exported, you may select them by browsing to their location. This is a method often used when the remote area includes animation.

    5. The Restore Image onMouseOut option is checked by default. It's used to undo the swap when the mouse cursor moves away. If it isn't checked, check it.

    6. To see that the behavior has been added, open the Behaviors panel (Window ® Behaviors). Figure 20-17 shows the Swap Image behavior added.


      Figure 20-17: The Swap Image behavior added

  8. To view your new disjoint rollover, click the Preview tab to enter the preview workspace. Move your mouse pointer over the button graphic. You can toggle the slices to hide them to get a better view of the graphics.

Multiple Buttons using the same remote area

This is a variation of the disjoint rollover you just did. The sample design is using three separate button images. You could just as easily use buttons with rollover effects if you'd like. Below the buttons is one large slice for the remote or disjoint rollover. I've provided a starter file for you.

  1. Open the  disjoint_multiple.png file from the chapter20_exercise folder on the CD-ROM. Notice the buttons have slices already and the large empty slice below the buttons.

  2. Open the Frames panel Options menu and click on Duplicate Frames. Type in or scroll to three frames after the current one.

  3. Select Frame 2 and type in some text below the Home button as seen in Figure 20-18.

    click to expand
    Figure 20-18: Text added below the Home button in Frame 2. This text will only be visible when the mouse cursor rolls over the Home button.

  4. Repeat Step 3 for the remaining two buttons.

  5. To add the behavior:

    1. Click the first button slice to select it. Use the drag and drop icon and drag it to the remote slice and release the mouse button.

    2. When the dialog box opens, choose Frame 2 if it isn't selected already.

    3. Repeat for the second button only use Frame 3 (Figure 20-19).

      click to expand
      Figure 20-19: Frame 3 being used for the second buttons rollover

    4. Repeat for the third button but use Frame 4.

  6. Click the Preview tab and mouse over the links.

Table 20-1 shows a list of behaviors and what they do. The behaviors all are applied in a similar manner as the rollovers.

 Dreamweaver MX   Fireworks behaviors are compatible with Dreamweaver.

Table 20-1: Behaviors and Descriptions

Behavior

Description

Simple Rollover

Swaps an Image on Frame 2 with an image on Frame 2.

Swap Image Restore

This restores a swap image on another frame back to its default appearance in the relevant frame (usually Frame 1). You can change the event that triggers the behavior by specifying a mouse event.

Set Nav Bar Image

The Set Nav Bar behavior has several other behaviors associated with it. You can choose to use Nav Bar Down, Nav Bar Over, and/or Nav Bar Restore. You can choose to add these behaviors individually or add all at once using the Set Nav Bar Image behavior.

Set Pop-Up Menu

This behavior will present you dialog boxes that allow you to automatically build a pop-up menu. You attach the behavior to a slice or hotspot.

Set Text of Status Bar

This behavior is used to add text to the status bar of a browser window.



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net