FW MX 2004 Tutorial (9): Image transformation

Tutorial Image Transformation Technology is often used in Web pages, that is, when the mouse moves to an image or button, it triggers the display of another graphic. In fireworks, the principle of the image transformation is to make the graphic objects in a frame in the frame panel exchange with the images from any frame, so as to achieve the effect of graphic transformation in the Web browsing.

　　1 , simple image transformation

Make a simple image transform in fireworks, which is to exchange the objects in frame 1th and the image in frame 2nd.

We first create or introduce a general state diagram of a button, click the right mouse button, select the Insert slice or insert Hotspot command from the pop-up menu, as shown in Figure 9-01.

Figure 9-01

Then add a new frame in the frames panel and introduce the image that will be transformed when the mouse passes the button on this frame, as shown in Figure 9-02.

Figure 9-02

When the slice is selected, start the Behaviors panel and click the Add command button to select "Simple transform Image", as shown in Figure 9-03.

Figure 9-03

In this way, a simple transformation button is done, press the F12 key can be tested in the browser.

Figure 9-04

You can see that no matter how large the image you are importing in the second frame, you can only see the transformation effect of the two graphs in the same slice range when browsing the page. Therefore, the transformation of this image is called the "intersection transformation".

　　 2 , complex image Transformation

Draw or introduce three drawing objects on the canvas, then select them at the same time, right-click on any object, and choose Insert Slices from the pop-up menu. A prompt window pops up, as shown in Figure 9-07.

Figure 9-07

When you select the single button, you set all selected objects in the same large slice area, and the multiple button sets a separate slice area for all objects. Here we select the "multiple" button, as shown in Figure 9-08.

Figure 9-08

Next, we add three blank frames in the frames panel, as shown in Figure 9-09.

Figure 9-09

In frame 2nd, introduce the "Kitten" button slice to the shape you want to transform, and click the right mouse button to select the "Insert Slice" command, as shown in Figure 9-10.

Figure 9-10

Similarly, in frames 3rd and 4th, we also introduce images for the "parrot" and "Flower" buttons, and then right-click on the image and select Insert Slice.

Figure 9-11

Next, click the "Kitten" button slice and use the Swap Image command on the behaviors panel, as shown in Figure 9-12, to start the "Swap Image" dialog box (Figure 9-15).

Figure 9-12

Or with the left mouse button to hold the "kitten" buttons to slice the middle of the circle control handle do not put, and then drag the mouse to its image exchange slices, then a blue link curve, as shown in Figure 9-13.

Figure 9-13

When you release the mouse, a "Swap image" setting window pops up, and the image with the "Kitten" button slice is selected on the Drop-down menu. Here we select "Frame 2".

Figure 9-14

If you click the "More Options" button, you can also start the "swap image" of the Detailed Setup dialog box, as shown in Figure 9-15.

Figure 9-15

In this window, the top left column is the name of all slice blocks, and the right side is the thumbnail of all the slice blocks. Here we can arbitrarily select an image of the slice block for the "Kitten" button slices for image exchange.

Frame number--Select the number of frames where the swap image is located, where we select frame 2nd;

Image files-If the graphics for frame 2nd are not imported into the workspace, you can also introduce the image here separately;

Pre-loading image--the image can be loaded in advance when browsing the transform effect of the test image;

Restores the image when the mouse moves away--when the Web page is browsed, the graphic automatically reverts to its original state when the mouse leaves the button.

When the settings are complete, click OK to return to the workspace. At this point, a slice of the kitten button has a curve with the slice of the graph that it wants to swap. It indicates that the two regions have established a link relationship, as shown in Figure 9-16.

Figure 9-16

Use the same method for "parrot" and "Flower" buttons to set up different swap images in the Swap Images dialog box. Three button slice settings are completed as shown in Figure 9-17.

Figure 9-17

Press the F12 key to test the results on the browser, as shown in Figure 9-18.

Figure 9-18

You can see that when you click on a different button image, you will display the corresponding transform graphics in different locations. Therefore, the transformation effect of this image is called "disjoint transformation".

To modify the settings, select the slice and click the Edit button in the lower-right corner of the behaviors panel, as shown in Figure 9-19.

Figure 9-19