لطفا منتظر باشید ...
Working with the Library
Fireworks' Library lets you store, share, and reuse assets throughout the development process. The Library makes it possible for developers to improve productivity, maintain consistency, as well as streamline animation and interactivity production.
You can drag and drop symbols from the Library onto the canvas. You're not dragging the original symbol to the canvas; rather, you're placing a copy of the symbol there. Remember, this copy is called an instance. When you modify a symbol, all instances of this symbol are changed automatically, no matter where they're placed. Because the Library lets you drag many copies of the same symbol onto the canvas, you can eliminate repetitive work and errors during production if you need several copies of the same asset.
Tip
During the development processespecially if a lot of developers are involvedone effective workflow is to develop all graphic, button, and animation assets in a single Fireworks PNG file. Once that file is completed, any team member can retrieve any asset by importing the appropriate symbol into a file's Library. And because Fireworks maintains the link between symbols and instances, any time a developer changes a symbol, all instances of this symbol can be updated in all the files where the instances are used.
In this task, you'll learn how to use the Library to create a navigation bar for the Jade Valley Web site. You'll find a list of premade button symbols in the Library of the file that you'll be working on: "interface.png." In the process, you'll also learn how to import a button symbol and position and align instances on the canvas.
1. | Open interface.png from this lesson's Start files and, if necessary, choose Window > Library. |
You can open the Library of any Fireworks file by choosing Window > Library or using the keyboard shortcut F11. There are five button symbols in this file's Library: about us, events, organic, products, and recipes. You'll place all five button symbols alongside the nutrition button you created earlier to build the navigation bar for the Jade Valley Web site.
Take a few moments to explore the Library. To preview a symbol in the Library, first select the symbol by clicking it. You can change the order of the symbols in the Library by using the Toggle Sorting tool, which is located under the Symbol Preview pane on the right-hand side (the triangle with the arrow pointing to the top or bottom). You can also use the Play control (the triangle pointing to the right, above the Toggle Sorting tool) to preview different states of a button symbol or an animation.
2. | Open the Library panel's Options menu and select Import Symbols. In the Open window, navigate to button.png and click the Open button. Next, in the Import Symbols dialog, select the Nutrition button symbol (if it is not already highlighted) and click Import. |
The Library panel's Options menu contains several commands pertaining to symbol-related tasks: creating, editing, duplicating, deleting, and exporting symbols, among others. You created the Nutrition button symbol in a separate PNG file earlier, so you need to import the Nutrition symbol as an independent symbol Library item into the current file, interface.png.
When you choose Import from the Library panel's Options menu, an Open dialog appears, enabling you to search for PNG files that contain any files with symbols.
Note
If you choose a PNG file that doesn't contain any symbols, Fireworks bypasses the Import Symbols dialog and first converts the contents of the file to a group and then converts that group to a graphic symbol and places the symbol in the Library.
In the Library, Fireworks marks imported symbols as "imported" to distinguish them from native symbols.
3. | Drag an instance of the following six button symbols from the Library to the canvas, from left to right, and in the following order: ABOUT US, PRODUCTS, RECIPES, NUTRITION, ORGANIC, and EVENTS. |
As stated earlier, items in the Fireworks Library can be dragged to the canvas to eliminate repetitive work. Just select a symbol in the Library and drag it directly from the Symbol Preview pane to the canvas.
4. | Reposition all six button instances using the Property inspector of each one, according to the following specs: ABOUT US (X: 200, Y: 20), PRODUCTS (X: 278, Y: 20), RECIPES (X: 364, Y: 20), NUTRITION (X: 439, Y: 20), ORGANIC (X: 523, Y: 20), and EVENTS (X: 604, Y: 20). |
All six button instances have the same Y coordinate. These six buttons make up the navigation bar and need to be in the same position vertically in relation to the top-right corner of the canvas.
5. | In turn, select each button instance and use the Property inspector to give it a descriptive name: about, products, recipes, nutrition, organic , and events . |
Naming each button slice makes the resultin220 code and exported image assets more self-evident.
Holding down Shift constrains the drawing to 45-degree increments, making it easy to get the line perfectly horizontal.
For aesthetic and design reasons, you need to draw this gray line to visibly group all six buttons into a navigation bar for the Jade Valley Web site.
6. | With the line still selected, choose Modify > Arrange > Send to Back to hide the gray line behind the buttons. |
The navigation bar doesn't look very attractive with a line across it, so use the Arrange feature to neatly tuck the line behind all the buttons, while still visually connecting them.
7. | Save interface.png. |
You're finished working on the navigation bar for now. Later in the lesson you'll continue developing the Jade Valley Web site banner by combining the navigation bar with the logo you created in Lesson 1.
