Други уроци
Adobe Photoshop
Adobe Illustrator
Adobe Flash
Adobe Fireworks
DreamWeaver
CSS и HTML
Corel Draw
Image Ready
PHP
SEO
CMS
Microsoft Windows
Microsoft Word
Microsoft Excel
PowerPoint
Microsoft Access
Microsoft Publisher
Linux
Visual basic
JavaScript
Ajax
3ds Max
Maya 3D
C++
Sound Forge
Gimp
SWiSH
Използване на rich symbols във Fireworks
видян: 11920
Now that we've prepared a symbol specifically to be given rich, editable properties, we will create the .jsf script to make it functional. To do this without having to hand code the .jsf, we will use the Create Symbol Script panel.
Open the Create Symbol Script panel. Choose Commands > Create Symbol Script. This panel allows you to easily create a .jsf file to add editability to your rich symbol. Click the [...] button, locate your Common Library folder and find the symbol you just saved. As mentioned previously, the Common Library is usually located in C:Documents and Settings<user>Application DataAdobeFireworks CS3Common Library in Windows or <user>LibraryApplication SupportAdobeFireworks CS3Common Libray in Mac OS, and your symbol is saved by default into the Custom Symbols folder.
The Create Symbol Script panel has four fields used to define an editable property of your rich symbol: Element Name, Attribute, Property Name, and Value.
Select the element name. To select the element name, click the [+] button. This will add a new row, with a pop-up menu in the Element Name field. Every element for which you gave a name in step 4 of the previous section should appear in this pop-up menu. If no items appear, make sure you not only gave names to your elements, but that you also saved the symbol to the Common Library, as described in step 5 on the previous page. Select the “face” element, which is the solid blue Rounded Rectangle AutoShape.
Choose an attribute. The attribute is the Javascript API property on the element that will be made accessible through the Symbol Properties panel. There are many attributes in Fireworks' Javascript API, but only the more direct properties are listed here. Most of the properties are fairly self-explanatory. In this example, choose fillColor.
Choose a property name. The property name is the name as it will appear in the Symbol Properties panel. Since the property we are adding will adjust the fill color of the button face, a good descriptive name could be “Face color.”
Choose a default color value. In the case of a fillColor attribute, the value is a hexadecimal color value (there is also a color picker). For consistency, we'll make the default color the same blue color as the Rounded Rectangle AutoShape, which happens to be #0066CC. We could, however, make it any color.
You have now created a fully editable property for your symbol! Before we test it out, let's use the same steps to quickly add some extra functionality.
Add editable text with the textChars attribute. Press the [+] button to add a new property. For the Element Name, choose Label. Set the attribute to textChars and give it an appropriate Property Name, such as “Text Label.” Enter a default value.
This property will now allow you change the text label for each instance. An important characteristic for buttons!
Toggle visibility with the Visible attribute. Finally, we will make a simple toggle state using the arrow graphic. Add a new property using the [+] button. For the Element Name, choose “arrow” or your equivalent, for the Attribute choose Visible, and for the Property Name choose “Active” or something similar.
Save the script. After you click Save, a .jsf file is generated in the same location as the symbol PNG file. For the daring, now is a good time to open the .jsf file and take a peek at the code. It is important to note that although the symbol in the Common Library now has editable properties associated with it, the symbol you currently have on the canvas does not automatically inherit the new .jsf script. To update the symbol, delete it from the document Library (Window > Library) and drag a new instance from the Common Library. Or, while testing, you may want to simply create a new blank document and drag an instance from the Common Library onto its canvas.
After clearing your document of the old symbol, and placing a new instance from the Common Library, select the symbol and open the Symbol Properties panel (Window > Symbol Properties). You can now make multiple sized instances of your rich symbol, each with a unique face color, label, and active state!
There are a few tips and tricks when using rich symbols that you should become familiar with. One is the new Swap Symbol command. This command can be accessed by right-clicking the symbol on the canvas, and choosing Swap Symbol from the pop-up menu. The command will preserve as many properties as possible, while swapping the instance with another symbol. It can be very useful when you have several graphic styles for a single component, and would like to change the style without having to reset the attributes, such as size or text label. Another useful tool is the Remove Transform command (Modify > Transform > Remove Transform), which returns a symbol to its default size, but preserves any attributes you might have set.
As you continue to work on a rich symbol, adding and editing properties, and changing the symbol graphics, it is important to have a strong understanding of the necessary workflow steps:
Resave your symbol to the Common Library. If you make changes to the symbol graphics, you need to resave it to the Common Library by using the document Library (Window > Library); otherwise, the copy in the Common Library won’t reflect your changes.
Reload the Common Library. The Common Library automatically reloads itself whenever you save from within Fireworks, but it is a good habit to click the reload button on the panel just to be sure. If you are making changes to the .jsf file by hand, for instance, you need to manually reload the Common Library before the .jsf file will be registered with the symbol.
Delete the current Symbol from the document Library. Currently, a rich symbol cannot be fully updated with a copy from the Common Library. Although you can update a symbol's graphics, the .jsf file is permanent once imported into a document. Therefore, to register a new .jsf file, be sure to delete the old symbol from your document Library (Window > Library) before testing changes made to the script.
Drag a new instance from the Common Library. Once the above three steps are done, you can create a new instance of your symbol from the Common Library, and test away.
Източник: Adobe.com