Използване на rich symbols във Fireworks

Adobe Fireworks » Fireworks

Stalik   трудност:    видян: 652

Although there is nothing fancy to creating a symbol in Fireworks, there are a few extra steps you should take to prepare it for rich editability, so follow these instructions even if you are already comfortable working with symbols.

1. Create the symbol graphics. Use the Rounded Rectangle AutoShape to create a solid colored rectangle. Ungroup the Rounded Rectangle. Add some interest to it with a stroke and some filters, and perhaps a highlight graphic over top for that trendy glossed look. Add some left-aligned text for the button label, with placeholder text. Finally, add an arrow graphic or something similar, which we will use to signify the active state of the button.
2. Convert to Symbol. Select all of your elements and choose Modify > Symbol > Convert To Symbol (or press F8). Give your symbol a name, and make sure Enable 9-Slice Scaling Guides is selected. You can select Save To Common Library now, but since we will be making some changes and resaving, it is not necessary.
3. Set up the 9-slice guides. The goal here is to make sure the pixels that make up the corners fall fully inside the corner intersections of the four guides, as shown in Figure 6. In this example, we also need to make sure the arrow graphic is fully to the left of the left-most guide, so that it will not be stretched horizontally in the center slice. Conveniently, text will never scale, no matter where it is placed, unless it is converted to paths. After you have defined the 9-slice guides, close the symbol document by clicking Done and test your symbol to make sure it scales as you intended. Often some tweaking is required.
4. Name any elements you want to make editable. This is the main thing you will need to remember when creating the graphics in a rich symbol. Double-click the symbol object you have created to open the Edit Symbol dialog box and take a look at the layers you have defined in the Layers panel. Any element that you will want to change by way of the Symbol Properties panel must be given a distinct name. Default names such as “Path” or “autonamed text” will not work. In this example, we will name the blue Rounded Rectangle “face,” the arrow graphic “arrow,” and the text label “label.”
5. Save the symbol to the Common Library. If you already saved your symbol to the Common Library in Step 2, it is important to note that changes made to the symbol in the document aren’t automatically saved to the Common Library. Open the Library panel (Window > Library) and select your symbol. From the Options menu (at the top right of the library), choose Save To Common Library (see Figure 8).
6. Make further changes. If you make further changes to your symbol, always remember to resave it to the Common Library. Once you have updated the symbol in the Common Library, you can simply drag-and-drop it onto the canvas to create a new instance in your design. One point to keep in mind is that the document Library panel (not to be confused with the Component Library panel) retains a list of all objects used in the current project. If you drag a new instance of the symbol onto the canvas, Fireworks will prompt you to “Resolve a Library Conflict;” be sure to select Replace Existing Items to update your symbols. Once a symbol is in your document, you do not need to keep using the Common Library to make new instances; you can use the document Library. While saving symbols to the Common Library, you should also get used to using the Reload button to ensure your newly saved symbol is reflected in the panel.
   

Страници: «1 2 3 4 »