Macromedia fireworks MX bible phần 7 pot

573 Chapter 17 ✦ Using Symbols and Libraries To modify a Button Symbol, double-click its name or its symbol preview in the Library panel, or select it in the symbol list and choose Edit Symbol from the Library panel Options menu. Converting existing objects into Button Symbols Converting an existing object into a Button Symbol is a quick way to get a button started. Because each state of a multistate button is usually a variation on the first state, converting an existing object into a Button Symbol, and then modifying it slightly in the Button Editor to create Over, Down, and Over While Down states is an excellent strategy. To convert an object into a button, select it and choose Modify ➪ Symbol ➪ Convert to Symbol, or use the keyboard shortcut, F8. Choose Button from the Type setting in the Symbol Properties dialog box, give your button a unique name in the Name box, and click OK. Fireworks converts your object into a Button Symbol, creating a slice object on top of it in the document window, as shown in Figure 17-11. Figure 17-11: Converting an object into a Button Symbol also covers it with a slice object. Add more states to your button by editing it in the Library panel. Converting Button Symbols into Graphic Symbols If you convert a Button Symbol into a Graphic Symbol by editing its properties in the Symbol Properties dialog box, the slice object that makes up the Active Area of the button remains with the symbol. To remove it, edit your symbol in the Symbol Editor and manually delete the slice object. Using Button Instances In addition to the standard, modifiable Instance properties, such as opacity, X and Y coordinates, width, height, and Live Effects, Button Instances have two additional 223662-1 ch17.F 8/2/02 2:55 PM Page 573 574 Part IV ✦ Coordinating Workflow editable properties: their Button Text and the links that are applied to their slice objects (see Figure 17-12). Selecting the Button Instance and viewing the Property inspector allows you to modify both of these, enabling you to assign each Button Instance a separate URL and some unique text. Figure 17-12: Modify the Button Text and the URL for each Button Instance in the Property inspector to truly turn each Instance into a separate button. To modify the Button Text, type new text into the Button Text box in the Property Inspector and press Enter (Return). You can only modify Button Text if your Button Symbol contains a text object. If it doesn’t, the Button Text area of the Property inspector is grayed out. To modify a button’s link, simply click the Link field in the Property inspector and add the URL for your Instance. Instance Level Button Properties Fireworks MX takes individual control over buttons a step further. For most people, the amount of control over Instances and buttons in Fireworks 4 was enough. While the level of control over Instances mentioned so far allows for a great deal of flexi- bility and ease of use, Fireworks always seems to be able to go that extra mile if you need it to. In Fireworks MX, whenever you have an Instance selected, you can edit all of the Instance Level Button Properties from the Property inspector (see Figure 17-13). Note 223662-1 ch17.F 8/2/02 2:55 PM Page 574 575 Chapter 17 ✦ Using Symbols and Libraries Fireworks MX lets you take the control over Buttons to the next level by enabling you to change the export settings, add Behaviors, and so much more — all at the Instance level. Instance Level Button Properties give you control over the following: ✦ Export Settings: Export settings for the Instance, such as GIF WebSnap 128. ✦ Behaviors: You can use the Behaviors panel to apply additional Behaviors to just one Instance. ✦ Link: A URL, as well as ALT text, for the button. ✦ Target: A target window or frame for the hyperlink to open in. ✦ Filename: A filename for the button’s Instance, or Auto-Name Slices can be left on to have Fireworks name the slice on its own. Figure 17-13: The ability to edit button properties at the Instance level means that a group of Instances can be significantly changed without altering the original symbol. Managing Libraries Making and managing buttons is a common task for the Web artist, and having a central place to store buttons and an easy way to reuse them — drag and drop from the Library panel to a document — saves time and work, again and again. Libraries exist in one of two places: within a document by default, or as a standalone PNG file that you create by exporting a Library. New Feature 223662-1 ch17.F 8/2/02 2:55 PM Page 575 576 Part IV ✦ Coordinating Workflow Importing a Library You can import Libraries from other Fireworks documents, or from Library-only PNG files that are created by exporting a Library from Fireworks. To import a Library into the current document, follow these steps: 1. Choose Window ➪ Library, or use the keyboard shortcut, F11, to view the Library panel, if it’s not visible. 2. From the Library panel Options menu, choose Import Symbols. Fireworks displays an Open File dialog box. 3. Navigate to the Fireworks PNG file that contains the Library you want to import, and choose Open when you’re done. Fireworks displays the Import Symbols dialog box, as shown in Figure 17-14. Figure 17-14: Fireworks displays the Import Symbols dialog box when you import a Library. 4. Choose symbols to import in one of the following ways: • To import all the symbols, click the Select All button. • To import a contiguous list of symbols, hold down Shift and click the first and last symbol in the contiguous list. • To pick and choose symbols from the list, hold down Ctrl (Command) and, in turn, click each symbol you want to import. To quickly import a single symbol, double-click its name in the Import Symbols dialog box. 5. After you make your selection, click Import to import the symbols into the current document. Fireworks imports the symbols and makes them available in the Symbol list. Tip 223662-1 ch17.F 8/2/02 2:55 PM Page 576 577 Chapter 17 ✦ Using Symbols and Libraries Accessing often-used Libraries Choose a Library from the Edit ➪ Libraries submenu to begin importing it. This sub- menu reflects the contents of Fireworks’ Libraries folder, shown in Figure 17-15. The Libraries folder is located inside the Configuration folder, inside your Fireworks program folder. Placing a Fireworks PNG file into this folder and restarting Fireworks makes it available as a Library on the Insert ➪ Libraries submenu. If you frequently access the same sets of Libraries, this can be a real timesaver. Figure 17-15: Place often-used Libraries into Fireworks’ Libraries folder for easy import. The Fireworks program folder is typically found at C:\Program Files\Macromedia\ Fireworks MX on Windows-based computers, and at Macintosh HD:Applications: Macromedia Fireworks MX on the Mac. You can also import a Library from the Edit ➪ Libraries submenu without restarting Fireworks by choosing Edit ➪ Libraries ➪ Other and navigating to the Library PNG file anywhere on your computer. Fireworks imports the Library into the current document. Updating imported Libraries Fireworks remembers where it originally acquired an imported symbol and can update imported symbols from that original source. This enables you, for example, to maintain a single Library of buttons for a Web site and to import that Library into multiple documents. If you need to modify a button later, modify it in the Library, and then click Update in each of the documents that uses that Library. In one step for each document, any number of documents can be updated from a single edit of the master Library. Tip 223662-1 ch17.F 8/2/02 2:55 PM Page 577 578 Part IV ✦ Coordinating Workflow To update imported symbols from their original sources, choose Update from the Library panel Options menu. If you try to edit an imported symbol, Fireworks notifies you that doing so breaks the link to the original symbol. In effect, you are creating a new symbol based on that symbol by editing it. Exporting and sharing Libraries Although you can import Libraries directly from any Fireworks document that con- tains symbols, exporting a group of symbols as a standalone Library — which is still a standard Fireworks PNG file — is a good way to share symbols with colleagues or to create archives of symbols for later use. To export symbols as a standalone Library, follow these steps: 1. Choose Window ➪ Library, or use the keyboard shortcut, F11, to view the Library panel, if it is not visible. 2. Choose Export Symbols from the Library panel Options menu. Fireworks displays the Export Symbols dialog box, as shown in Figure 17-16. Figure 17-16: Fireworks displays the Export Symbols dialog box, enabling you to choose which symbols you’d like to export. 3. Choose symbols to export in one of the following ways: • To export all the symbols in your document, click Select All. • To export a contiguous list of symbols, hold down Shift and click the first and last symbol in the contiguous list. • To pick and choose symbols from the list, hold down Ctrl (Command) and click each symbol you want to export. Caution 223662-1 ch17.F 8/2/02 2:55 PM Page 578 579 Chapter 17 ✦ Using Symbols and Libraries 4. After you make your selection, click Export. Fireworks displays the Export Symbols As dialog box. 5. Navigate to a folder where you want to save your symbols file and provide a filename. Click Save when you’re done. The exported file contains your exported symbols, and you can import it into another document or share it with others. Summary Symbols and Libraries can greatly simplify many of the most common tasks of the Web artist. Keep the following points in mind: ✦ Fireworks has three kinds of symbols: Graphic, Animation, and Button. ✦ Symbols are kept in the Library panel. Dragging a symbol from the Library panel onto the canvas creates an Instance of the symbol. ✦ Symbols can contain any object, except Instances. ✦ Every copy that you make of an Instance is another Instance. ✦ Some properties of Instances, such as Live Effects, and some transformations, such as scale and skew, can be modified independently of the parent symbol or other Instances. Some properties, such as fill and stroke, can be modified only on the symbol and are then inherited by its Instances. ✦ Symbols are stored in Libraries, which you can export from and import into the current document using the Library panel. In the next chapter, you look at how to update and maintain your graphics in Fireworks. ✦✦✦ 223662-1 ch17.F 8/2/02 2:55 PM Page 579 223662-1 ch17.F 8/2/02 2:55 PM Page 580 Updating and Maintaining Web Graphics I ’m sure you’ve heard the expression, “One percent inspira- tion and 99 percent perspiration.” In my experience, Web graphics is more balanced — half the time you’re creating a new work, and the other half you’re revising something that you’ve already done. Updating Web pages is a continual, seemingly never-ending process, and although some of the work involves importing new text, quite often you need to alter the graphics, as well. No product can completely turn such a chore into a joyful, creative pleasure, but at least Fireworks helps you to get the job done in the most efficient manner possible. Web-graphic maintenance is at the core of Fireworks’ “every- thing-editable, all-the-time” philosophy. When Fireworks first arrived, Web designers everywhere were thrilled with the ease with which changes to images could be made. Fireworks has since extended that ease-of-use philosophy to include produc- tion tasks, such as updating URLs and replacing colors. This chapter explores all the production enhancement techniques — from previewing your graphics directly in a browser to opti- mizing entire folders of images at one time. Using Preview in Browser It’s amazing to me how many so-called Web-graphics programs don’t enable you to easily see your work through its intended medium: the Web browser. Fireworks enables you to preview in not one, but two browsers at the press of a keyboard short- cut. Not only do you quickly get to see how the browsers are interpreting your graphics, but you can also test any rollovers or other Behaviors you may have included in Fireworks. 18 18 CHAPTER ✦✦✦✦ In This Chapter Viewing your graphics in a browser Managing links in Fireworks Updating a site with Find and Replace Batch processing automation Reusing scriptlets ✦✦✦✦ 233662-1 ch18.F 8/2/02 2:56 PM Page 581 582 Part IV ✦ Coordinating Workflow Web designers, as with most Internet users, tend to work with a particular version of Navigator or Internet Explorer most of the time. But, unlike ordinary Web surfers, Web designers must be able to view work under various conditions in order to ensure consistency across platforms and browser versions. As of this writing, Microsoft has the lion’s share of the browser market, with Netscape in second. Although Internet Explorer 6 and Netscape 6 are in many ways more compatible than the corresponding 4 and 5 versions, you still must test early and often in multiple browsers to guarantee a professional quality of work. You can even use the Preview in Browser feature to display different versions of the same graphic side by side, without having to make additional copies in Fireworks. Just make a new Web browser window after previewing the first time (File ➪ New Window in your browser), and — at least on Windows — the second preview opens in the second window. Before you can use the Preview in Browser feature, you have to tell Fireworks which two browsers you want to use. Although you don’t have to define both a primary and a secondary browser, it’s a good idea (if you have two browsers on your system). To set the browsers, follow these steps: Fireworks automatically sets the primary browser from what is configured in your operating system. You need to follow this step only if you wish to alter the primary browser that Fireworks selects. 1. Choose File ➪ Preview in Browser ➪ Set Primary Browser. The Locate Primary Browser dialog box appears, as shown in Figure 18-1. Figure 18-1: Declare your primary browser through the Locate Primary Browser dialog box. Tip Tip 233662-1 ch18.F 8/2/02 2:56 PM Page 582 [...]... including space, tab, form feed, or line feed \smedia matches media but not Macromedia \S Caution Matches Any nonwhite-space character \Smedia matches Macromedia but not media Be careful with the \S wildcard In Fireworks, it actually matches one more character than it should; for instance \Sworks actually matches Fireworks, instead of just Fireworks The backslash character (\) is used to escape special characters... button Tip Figure 18 -7: Exporting a URL Library results in a list of links in HTML format Caution On the Macintosh, even if you name your exported file with an html filename extension, Fireworks still saves it with an htm filename extension Updating Graphics with Find and Replace Fireworks has always been great about enabling you to alter any aspect of your graphic at any time; before Fireworks, you had... file extension, Fireworks automatically appends one Fireworks creates a new file in the URL Libraries folder, inside the Configuration folder This file is updated when Fireworks closes; you don’t need to save your URL Library in a separate operation CrossReference For more information regarding the Configuration folder and its location for your operating system, see Chapter 25 Although Fireworks makes... No command is available to delete a Library, so you have to open the URL Libraries folder located inside your Fireworks Configuration folder, and delete the HTML file using Windows Explorer or the Macintosh Finder The deleted Library disappears from the URLs list when Fireworks is restarted If Fireworks automatically stores the URL Libraries that you create, why would you need an Export command? The... The more that your site structure is developed — blank Web pages and empty folders created — before working in Fireworks, the more you can take advantage of the program’s URL tools Accessing the URL History list In Fireworks, links are attached to either of the two types of Web object: a hotspot or a slice You can assign a link to a selected Web object either through the URL panel or the Property inspector... desired: Whole Word, Match Case, or Regular Expressions 7 To make changes on a case-by-case basis, first click Find Next and then click either Replace, to change the text, or Find Next again, to move to the next matched text 8 To change all the text at once, click Replace All If no changes are made, Fireworks reports that the search is complete Otherwise, Fireworks informs you of how many occurrences it changed... Internet would be a very linear medium — and nowhere near as popular Before Fireworks, the normal course of Web graphics production kept the images and the links completely separate until the final Web page was assembled However, because Fireworks extends its graphic capabilities into HTML and JavaScript code through Behaviors and hotspots, links can actually be incorporated during the creation phase A link... the Include to Batch list Operations are executed in the order they appear 7 When you’re satisfied that your batch operations are completely specified, click the Next button The Batch Process dialog box changes again, to a final form that enables you to finalize and execute your batch operation (see Figure 18- 17) Figure 18- 17: Finalize your batch and execute it and/or save it as a scriptlet in the... document’s URL History with the current URL Library is a one-step process — just choose the Add Used URLs to Library command from the panel Options menu Fireworks automatically integrates the two lists of links, alphabetically If any links appear in both lists, Fireworks eliminates the duplicates To add a single URL to the Library, choose the Add URL command from the panel Options menu The New URL dialog... Find and Replace options for text and URLs include a powerful wildcard capability, known as Regular Expressions You can also track your changes through Fireworks Project Log Outside of batch processing and scriptlets, all automated modifications in Fireworks are handled through the Find and Replace dialog box, shown in Figure 18-8, which 591 233662-1 ch18.F 592 8/2/02 2:56 PM Page 592 Part IV ✦ Coordinating . Properties from the Property inspector (see Figure 17- 13). Note 223662-1 ch 17. F 8/2/02 2:55 PM Page 574 575 Chapter 17 ✦ Using Symbols and Libraries Fireworks MX lets you take the control over Buttons. symbols into the current document. Fireworks imports the symbols and makes them available in the Symbol list. Tip 223662-1 ch 17. F 8/2/02 2:55 PM Page 576 577 Chapter 17 ✦ Using Symbols and Libraries Accessing. Place often-used Libraries into Fireworks Libraries folder for easy import. The Fireworks program folder is typically found at C:Program Files Macromedia Fireworks MX on Windows-based computers,