The basic production and advanced application course of fireworks dynamic components

This example is the fireworks Technique example tutorial, mainly explains the dynamic component creation method, the tutorial from introduces the dynamic element concept, creates a basic fireworks dynamic component to use the JSF code the advanced use to have the explanation, hoped can bring the help to the friend ~ ~

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? I just need to pull this button out of the library. You can then change the text, length and width of the button in the component definition panel, and move the mouse in and down, 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.

　　First, create a basic dynamic component

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 these button backgrounds to be unified, let them overlap, and then select all of them, press the F8 key into a graphic class element, enter the editing state of the component, add the button text, and give each status chart name (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