FW MX 2004 Tutorial (8): Dynamic button

Buttons | dynamic | Tutorials In the previous chapters we have a glimpse of the outstanding performance of Fireworks MX 2004 in image rendering. Starting with this chapter, we will learn about the powerful features of fireworks MX 2004 in Web support. Let's start with the creation of a dynamic button.

　　1 , setting mouse events

First draw a blue-rectangular button shape on the canvas, and then press F8 to convert the object to a button symbol. This button is on the canvas as shown in Figure 8-01.

Figure 8-01

After you double-click the button object, set the mouse event for the pop-up button symbol to the window, as shown in Figure 8-02.

Figure 8-02

The previous "release", "Slide", "Press", and "slide over" in the window are used to set the four states that the button renders when the mouse touches the button. The active area is used to set the effective range of the button when it responds to the mouse pointer.

If we open the Frames panel now, we can see that the Panel has automatically generated four frames for the button symbol, as shown in Figure 8-03. But at this point only the 1th frame has a button image, the other three frames have no content.

Figure 8-03

Click the "Import button" to import a button directly from the Fireworks Button component library, as shown in Figure 8-04.

Figure 8-04

The Release tab is the general state used to draw a button. When we convert a normal graphic object directly to a button symbol, fireworks automatically places the object as the general state of the button on the Release tab as the first frame of the button.

The Skip tab is the state that the button renders when the mouse is moved to the button and pressed. Here we can click the "Copy Bouncing Graphics" button, copy the button graphic from the Release tab, and change its color to differentiate. As shown in Figure 8-05. Or you can draw the other shapes you want here.

Figure 8-05

The Down tab is the state that the button renders when you draw the mouse over the button. In this option, the content in this frame will not take effect unless you select Include navigation bar down state, otherwise the content in this frame won't appear in web browsing. We also copy the button state of the previous frame over the copy sliding graphics button, and then change the button color from green to orange, as shown in Figure 8-06. Also, you can draw any kind of button graph you want here.

Figure 8-06

The slide over when pressed option is the shape that the button renders when the mouse slides again to the button after being pressed. This item is also selected to take effect when the include navigation bar press state is checked. When we click "Copy pressed Graphics", we change the button color of the previous frame to black to make the difference.

Figure 8-07

At this point, the button has four mouse events, click the "Finish" button to return to the workspace in the original Options window. We can click on the "Preview" window to the right of the original option window (or press F12 to start the browser) to see the button that the test just made, as shown in Figure 8-08.

8-08

　　 Double-click the button graphic after you return to the original option window, or double-click the button symbol in the library panel to edit the button.

　　 2 , link area of the button

In the Make tab of the button symbol, there is also an active area option, as shown in Figure 8-09.

Figure 8-09

In this option, you can make specific settings for the link area of the button. You can adjust the active link range of the mouse within the button by dragging a four red line edge. When you want to set such a link area for a circular button or an irregular button, the link area of the rectangle will cause the button to be unnecessarily part of the mouse response area, as shown in Figure 8-10.

Figure 8-10

At this point, we can select the Polygon Slice tool from the Web tool area, which is specifically designed for links to Web pages in the sidebar, as shown in Figure 8-11.

Figure 8-11

Use the tool to click along the edge of the graph, and each click will produce a line segment similar to the one in the pen path until the graphic circle in, as shown in Figure 8-12.

Figure 8-12

Within the green area is the link range for which the button is valid. You can modify or adjust a control point on the edge of the link range by using the pointer or Subselection tool.

When you select the Automatically set Activity Area selection box, you can return the link range to its original rectangular state.

In the properties box of the Polygon button link slice, you can further set the link target and the color output mode of the button image for the button, as shown in Figure 8-13.

(Figure 8-13 Larger picture, please pull the scroll bar to watch)

alt--the hint to be displayed when the mouse moves over the button while browsing the Web page;

Target--Choose whether to open the linked content in a new browse window.

You can also use the Polygon Hotspot tool in the Web tool area to draw a link area for a button or diagram, as shown in Figure 8-14, for the settings of the button link area.

Figure 8-14

The Polygon Hotspot tool is used the same way as the polygon slice tool.

You can also use the UBL panel when you add a linked object to a link area, as shown in Figure 8-15.

Figure 8-15

In the second input field of the panel, you can enter the link address for the slice or hotspot area directly, and then click the Add Link button to add the address to the link window below. Select the link address you want to use for the current slice or hotspot area in the window when you use it. In the new URL button in the lower-right corner of the UBL panel, you can add a link directly to the Link window or modify an existing link address in the Link window, as shown in Figure 8-16.

Figure 8-16