SubscribeSupportLog In
VirtualClues.com - Web Design Training
Movie Library Downloads Photos Blog Archived Tutorials  
 Fireworks CS3 New Features
Fireworks CS3 New Features > Rich Symbols

Rich Symbols provide developers (and designers) a new tool to create Flex Componets, Flow Diagrams, Buttons and even Animations. You'll find them in the Common Library (Window > Common Library). Attributes can be assigned to many of them such as labels, colors, rollover effects, etc. You can even create your own rich symbols and add them to the Common Library. I have to admit, I'm no Flex developer but even I can create rich symbols to be used in later projects, such as a two-state button.

To create a Custom Symbol in Fireworks CS3, you go through the same process as creating a regular symbol. Hit F8 or go to Modify > Symbol > Convert to Symbol.

For this example I created a two-state button. I'll go through this part briefly for those you not familiar with creating two-state buttons in Fireworks.

Creating a Two-State Button

twostate button

First I drew out the rectangle for my button and added a drop shadow to it. I then converted this shape to a button symbol. (Don't select "Save to Common Library yet!")

Convert to Button

 

Now that it is a button symbol, I can double click on its slice to open up the button editor. Here I chose the Over Tab, I clicked the "Copy Up Graphic Button" and then just changed the brightness of the button using the Brightness/Contrast filter. This will give the effect of the button being "high-lighted" when it is rolled over.

Button Editor

 

Now that I have a two-state button I can convert into another symbol, this time making sure that I select "Save to Common Library".

Saving to the Common Library

Convert to Rich Symbol

Once you click OK, a box will open asking you where to save the file. It should automatically go to your Common Library. Since this is a custom symbol it will be saved in the Custom Symbol's Folder.

Open up the Common Library to test out your button. Window > Common Library. Open up the Custom Symbols folder and you should see your new symbol.

Common Library

This can be dragged onto the canvas anywhere. You can preview it to see its rollover behavior. So as you can see, I've created a symbol that can be used over and over.

 

 

 

Copyright 2005-2007. VirtualClues.com (A division of Lynn Information Technologies ).

Home | Resources | Site Map | Contact Us | About Us | Terms | Membership FAQ's