Rich symbols are a powerful feature of Fireworks, but creating them is a fairly complicated process. The Create Symbol From States command lets you create basic rich symbols in one step with no scripting.

The symbols created by this command can switch between displaying different states, controlled by a State menu in the Symbol Properties panel. Say you're mocking up an IM buddy list, and each person in the list has an icon showing whether they're online, offline, busy, or idle. This command can turn the icon into a symbol that lets you easily switch its state using the properties panel. It will also make any text elements on these states editable via the Symbol Properties panel.

Creating the source document

First, create a new Fireworks document. In the States panel, add the states you want the symbol to have, and give each one a name. The names of the states will appear in the State menu in the Symbol Properties panel when the symbol is selected.

On each state, add whatever elements you want to display when that state is selected. You can use the onion skinning feature in the States panel to check the alignment of the elements across the states.

The States and Layers panels of the example buddy icon document might look like this:

Creating the symbol

Once the states have been filled in, run the Create Symbol From States command. It will first display a dialog box to select a folder in the Common Library in which you want to store your new symbol. Remember that a symbol has to be stored within a sub-folder of the Common Library folder for it to appear in the panel.

Next, you enter a name for the symbol. This name will also be used for the file, so if you enter My Icon, the document containing the symbol states will be saved as My Icon.graphic.png in the Common Library. The script that specifies how the symbol behaves will be written out to the same location with the same name, e.g., My Icon.jsf.

Once the symbol name has been entered, the command will add a new initial state called Symbol and copy the contents of each of the other states to the new one. The new symbol will be created on this first state.

Using the symbol

After the command is finished, you can drag an instance of your new symbol from the Common Library panel into another document. When the symbol instance is selected, the Symbol Properties panel will display a single State menu control. You can change this menu to choose which state of the symbol to display.

Editing the symbol

There are a couple ways of editing the symbol once it's been created. One way is to open the symbol file in the Common Library, e.g. My Icon.graphic.png, and then edit the states. When you've made the necessary changes, just run the Create Symbol From States command again, which will create a new symbol from the states. You won't have to select a folder or name if you run the command on an existing symbol file.

If you want to update the symbol in the documents where you've used it, you'll need to drag the symbol in from the Common Library panel again. Select the Replace existing items option in the dialog to update the existing instances in that document.

The other way to edit the symbol is directly in a document where you've used it, by double-clicking an instance. In the symbol edit mode, the Layers panel will show a list of groups, one for each state in the symbol. For instance, the panel for the buddy icon symbol might look like this:

To edit one of the states, modify the contents of the group that represents it. You may find it helpful to hide the other layers in the symbol while you're dealing with a particular group. If you ungroup a "state", remember to regroup its elements when you're done editing and give the group the same name as before. Otherwise, that state will disappear from the State menu and its contents will always be visible.

You can reorder the groups to change their order in the State menu, or rename a group to rename that state. You can also add or remove states just by adding or removing groups in the symbol. When you exit the symbol editing mode, the Symbol Properties panel will update to reflect the new list of groups.

Making editable text elements

Any named text elements that appear on the states will be made available as editable text fields in the Symbol Properties panel. For instance, if you're creating a button and have a text element on each state called Label, a text field called Label will appear in the symbol panel after running the command. Changing the Label property in the Symbol Properties panel will change the text of each element with that name on every state (though only the text element for the current state will be visible at any given time).

To extend the buddy icon example from above, you could add text elements for the name of the person and their status message to each state. They will then appear in the Symbol Properties panel:

Note that the styling of the text elements can be different on each state, letting you change, say, the text color on a hover state vs. a down state. The text elements also don't have to appear on every state. In the buddy icon example, you might want to hide the Status text when the buddy is offline, so just don't include the text element in that state.

When in symbol editing mode, you'll see that the text element names are appended with the name of the state they're from. So in the buddy symbol example you might see Buddy Name_Online, Buddy Name_Offline, etc. When changing the names of states in the symbol, be sure to update the names of the corresponding text elements as well.

If you have text elements that you don't want to be editable, just wrap them in a group or don't give them a name. They'll appear as a static element on their state and will not show up in the Symbol Properties panel. Note that editable text elements will always appear layered on top of the other elements in their state.

Release history

0.2.0

Added the ability to included editable text elements on the states.

0.1.0

Initial release.