Welcome!

Adobe Flex Authors: Liz McMillan, RealWire News Distribution, Maureen O'Gara, Yakov Fain, Keith Swenson

Related Topics: Adobe Flex

Adobe Flex: Article

Do It with Style

Do It with Style

The value of any piece of software is in how much time and effort it can save you. What good is the software if it is not going to increase productivity and efficiency? In several of my past articles, I have examined ways of automating common or repetitive processes. To that end, I am continuing the discussion this month. One of the great new features of Fireworks MX 2004 is the Styles Panel, shown in Image I.

This feature allows you to capture the properties of an object for use, later on, in another object. As an example, suppose you were to create an object with color shading and a bevel effect. Further, let's suppose that this particular job often. We can simply create it once and capture it as a Style. Each of the buttons is referred to as a preview icon.

The wording I just used is important. Notice I didn't say that you create the attributes in the Style, but simply capture them for later use. As you will soon see, we can determine which attributes we want to keep or not keep.

Let's begin by creating a simple Style.

Creating a Style
Let me start by doing something simple in order to show how easy it is to use. I am going to set up a simple object with a fill color and stroke as shown in Image II.

Obviously, it's not very exciting. However, it will give you a good working knowledge of using Styles for more complex scenarios.

Make sure that object is selected before you do the next step. In the Styles panel, click new. This is shown in Image III.

Here you can decide what you want to name your Style, as well as the properties you want to retain for the Style. For instance, in this case, if you were to shut off the Fill type and Fill color, you would just be left with the Stroke properties.

Notice as I stated earlier, we are not creating the Style's properties here. Those come from the object itself. We are only deciding which attributes we want to keep.

Once I say OK, the style is then added to the Styles Panel, with a preview icon, and can be used at any time.

To use the Style in another object, just select the object and then click on the preview icon in the Styles panel. As you can see, applying the Style is extraordinarily easy.

You should be aware that Fireworks saves many effects, such as shadow, glow, bevel, emboss, and stroke size, with absolute values. This means that a Style you apply to a small object may look different with a large object. For that reason, I may have similar styles for different size objects.

Editing a Style
To edit a Style, it is important that you first make certain no objects are selected. What I usually like to do is select Select>Deselect from the menu. That way, you know nothing is selected. I then double-click on the preview icon in the Styles panel. This opens up the dialogue box shown in Image III.

If you needed to change the actual attributes, such as the color of the fill or the stroke size, you would need to create a new Style altogether.

One handy feature is that you can have two styles with the same name. What I sometimes like to do is apply a Style to an object, change the attributes in the object, and capture the new attributes to a Style with the same name. I then delete the original Style.

Once again, you cannot directly change the attributes in the Style.

Importing and Exporting
As a designer, many times I might need to share styles with various other members of the team. Styles can easily be shared with other Fireworks users by using the Import and Export features found in the Options menu.

You first select the Style and then select Export Styles in the panel's option menu. You can decide where you want the file saved and, after naming it, the file will have an extension of .stl.

If you need to load an exported Style, simply select Import Styles from the option menu and browse to the file's location.

As a handy feature, you can export multiple Styles at the same time. You could click on the first Style and then shift-click on the last Style if they are grouped together or, if they are not adjacent, you could ctrl-click on the Styles that you want. Once they are selected, you then export as you would an individual Style. All the Styles would be saved to the one file name. The user importing the Styles would then get all the Styles in the file.

One other advantage is that, from time to time, you can find some nice Styles in the Fireworks section of the Macromedia Exchange. It is worth taking a look from time to time at www.macromedia.com and locating the Exchange link in the navigation bar.

Resetting the Styles
There may be a time when you want to reset your Styles panel back to the default settings. This would not only mean the original settings, but also deleting any custom Styles you might have.

Simply select the Reset Styles menu item from the option menu. You will receive a warning message and, after you select OK, the panel would be reset and any custom Styles would be gone (as well as the subsequent preview icons).

Conclusion
I am always amazed when I see a software user spend a large amount of time learning a complex feature, but then completely ignore a very simple feature.

As you can easily see, Styles is relatively simple to use, but is a powerful time-saving tool. This is in keeping with my previous articles discussing reusability.

Next month, we are going to examine situations where external programs might be useful.

More Stories By Charles E. Brown

Charles E. Brown is the former editor-in-chief of MX Developer's Journal. He is the author of Fireworks MX from Zero to Hero and Beginning Dreamweaver MX. He also contributed to The Macromedia Studio MX Bible. Charles is a senior trainer for FMC on the MX product family.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.