Interactive application of fireworks slices

The initial application of slices is to cut large pictures that affect the display time of a Web page into a few different parts to facilitate data transfer. As the fireworks version rises, slices become a basic way to create interactive Web pages, and now you can use slices to achieve interactivity. Here is an introduction to the interactive application of slices in Web pages.

Small knowledge: Slicing is to cut the image into many different parts, it is a Web object, not in the form of images, but in the form of HTML code. Photoshop also has slicing capabilities, but it has a certain gap in both operational and functional terms compared to the web-making tools fireworks.

First, create a slice

Turn on Fireworks MX 2004, open the picture you want to slice, select edit → insert → slice in the main window or use the Slice button on the toolbar to draw a rectangular slice on the picture (Figure 1), and if you are not satisfied with the shape of the slice, You can adjust the size of a rectangular slice object by moving the slice guide line.

Tip: If you need to draw a non rectangular slice, you can select the Polygon slice tool in the slice button. Pay special attention to non-rectangular slices that are not resizable.

Second, interactive application 1. Add Simple transform image behavior

A simple transform image is exchanged in a frame just below the current slice, involving only one slice, which can be applied to the page buttons. Select the slice first, and drag the behavior handle in the center of the slice to any location in the slice. After releasing the mouse, the "Swap Image" dialog window pops up, and we can select "Frame 2" (frame 1 is the slice itself), and then create a "frame 2" for the swap image in the frame panel, or click "Swap image" The more Options button in the window, select an image file to swap (Figure 2), and then press the "F12" key to preview the effect when the settings are complete.

2. Create disjoint transform images

When the pointer slips over a slice, the image of the disjoint transformation swaps the image of the other slice object. The only difference between it and a simple swap image is to drag the behavior handle of the slice to the location of another slice.