The basic production and advanced application of dynamic components in fireworks software

First, let's talk about what is a dynamic component , in fireworks, we can create "graphics", "button", and "animation" three kinds of components, but often we just directly from the document library directly drag the components to use, we make this component static components.

For example: I paint a "OK" button and convert it to a button-class component, when I want to make a "Cancel" button again, I'm going to drag the "OK" button from the document library into the canvas, break it, and then change the text "OK" to "Cancel" and turn it into a component. Operations like this maybe we don't have to turn them into components at all, because if we're going to do a lot of buttons, the document library will have a lot of these components.

And what is the concept of dynamic components? Is that I just need to drag the button out of the library, and then I can do the "symbol definition" the panel changes the text, length and width of the button, and the mouse moves in and presses the inferior attributes, but there is only one element in the library, which is what I call a dynamic component. If you don't understand this, you can click on the "Window" menu "Common Library" to open the public library, where there are some of these types of components.

Once we know what the dynamic components are for, we can start making them.

1. First we draw four states of a button: "Normal state", "Mouse Move In", "Mouse Down state" and "disabled state"

2. Then we set the coordinates of the background image of these buttons together, let them overlap, and then select all of them, press F8 key into a graphic class element, enter the editing state of this component,

Add the button text and name each status chart (as shown below)

3. The 2nd step operation should pay attention to several points:

-Turn on "Nine smart scaling" to set the stretch area outside the text box;

-The width of the text box is equal to the button background width minus the zoom area width, and the text is centered;

-the button background image is best flattened into a bitmap, avoiding the path to open when scaling (but not flat can also keep the graphics scaling quality will not be lost);

-Hide state diagrams that do not need to be displayed (remove the eye icon in front of the layer);

4. Select the component you just created in the document library, click the menu button in the upper-right corner, select "Save to Common library", and select Save in the pop-up dialog box, the default path is:

X:documents and Settingsusernameapplication dataadobefireworks Cs3common librarycustom Symbols

5. Click "Create symbol Script" from the "Command" menu;

6. In the Create Symbol Script dialog box, select to open the PNG file you just saved, and follow the diagram to set the properties of the dynamic component, and then click Save:

7. Create a new document, drag the homemade dynamic component into the canvas in the custom directory of the public library, and then click Symbol Properties (component attributes) under the "Window" menu

Simple settings can be created on the scene to create a number of different states, different label text buttons.