Fireworks CS4

By Matthew Keefe - mkeefeDesign.com

Fireworks CS4 gives you the ability to rapidly prototype websites, mobile interfaces, application UI’s and interactive designs with ease.

 

Fireworks CS4 introduces a very impressive list of new features and abilities.

The list includes:

• - New User Interface
• - Text Engine Improvements
• - Style Improvements
• - Tooltips
• - Live Gradients, Patterns, and Masks
• - CSS/Images Exporting
• - Exporting to PDF
• - Performance
• - Asynchronous Saving

New User Interface

The most obvious update found in Fireworks CS4 would have to be the new application interface. Fireworks does sport the new “CS4 look” that the other apps in the suite have. However, for a user of previous versions it may be a bit of a shock. Overall the new UI is more streamlined and contained.

 

The Mac version is especially different because of the “App Frame”, which gives you the ability to re-locate the panels and other application elements into one neat package, instead of the “classic” floating panels of CS3 and before. Adobe does give you the ability to work in the old way with the floating panels, by simply disabling the app frame “Window > App Frame”. By default Fireworks open with the app frame disabled, but can easily be enabled by the previous mentioned step.

One preference that was always buried was custom workspaces. You know when you would move panels, hide others and get everything just the way you wanted it, so you would save that setting? Well in Fireworks CS4 you will now notice a dropdown box on the right side of the application (when the app frame is visible) where you can quickly switch workspaces.

Here is a comparison of the 2 options, choose whichever ones works better in your workflow.

Fireworks CS4 with the app frame and without

Text Engine Improvements

One of the best improvements to Fireworks CS4 can be found in the text engine. However, you may not notice any difference at first glance, because the true improvement is under the hood.

Fireworks CS4 now has the same text engine that is found in Adobe Photoshop. This means a much better text engine for all.

You may be asking yourself, what does a better text engine offer? Well, simply put better performance in rendering and editing, which of course can translate into less design time and faster changes.

Performance is not the only improvement to the text engine, when it began sharing the Photoshop engine it also got the ability to have font styles and support for ligatures. The integration ability is also enhanced because your text will look similar going from Photoshop to Fireworks which means less modifications required when in Fireworks, but also a more consistent look overall.

Text panel in CS4

TIP - You can even place text within a closed path and the text will reflow properly which can create some very interesting and unique layouts.

Tooltips

You will find the use of tooltips in many aspects of Fireworks CS4. One place this really turns out to be useful is when positioning objects on the canvas.

Tooltips are not turned on by default, but can manually be enabled by going to “View > Tooltips”. Now when you begin to drag your mouse around you will notice the X and Y position is readily viewable in the tooltip just below the mouse cursor

TIP - You can enable tooltips using the keyboard shortcut ( CMD/CTRL + ] )

Tooltip below the mouse cursor, showing x and y position relative to the document

Asynchronous Saving

A common issue with application is the time it takes to save a file. Fireworks CS4 introduces asynchronous saving, which basically means the file is saved while you’re working. The advantage to this approach is the ability to work on a file, save it and immediately move to another file while the first file is being saved.

Saving indicator at the bottom of a document

When you save a file in Fireworks CS4 you will notice a little progress bar will appear towards the bottom of the documents frame. This is a visual indicator that the file is currently being saved. The amazing thing about this new saving ability is the lack of performance decline while saving a file. You would assume a process such as saving to be a big performance killer, but in this case, it’s not.

Speed...Speed...Speed!

Fireworks CS4 comes with amazing speed increases. In CS3 you would find the application to become sluggish after extended use. This was due to various memory leaks within the core of the application. These have been taken care of in Fireworks CS4 and overall the application is more responsive.

Another aspect of performance that has been updated is loading files. You will also see more responsive documents in CS4 due to these memory and performance updates. You will only see an improvement in CS4 documents due to the way it is handled. In order for you to see the increase in speed in a CS3 document, you must first re-save the document in Fireworks CS4.

Style Improvements

Designers now have the ability to create style sets in Fireworks CS4. These style sets can be linked to other objects and shapes throughout your documents. When you make a change to the master style, all the others will be changed, meaning less time needed to make minor style tweaks.

The various style options are found in the Property Inspector (PI). The PI is also where you will find many tools to quickly redefine styles, as well as break style links, delete styles or override master styles.

Adobe has also packed the style panel with some great default styles. They hired various designers to create some pretty interesting styles that you can quickly use in your prototyping projects. The style dropdown box offers many style sets that can be loaded which offers many themes and options.

Exporting to PDF

When a designer needs to present a design to a client they often create a complete web page where the user can “click around” and really understand how the site will come together. The problem with this approach is that it’s both time consuming for the designer and risky because the client gets everything they need to use the site, automatically.

In Fireworks CS4 you now have the ability to create a fully clickable PDF that you can send to your clients. This means they don’t get a complete site to run with, but do get the overall functionality of a web site. You can also make use of the commenting feature in PDF and allow them to directly comment, which is a welcome update from the “old school” email methods.

Adobe Kuler

Adobe Kuler is a web site where users can create color sets, save them and share them with other users. Fireworks CS4 has a Kuler panel that allows you to quickly search for colors and apply them to your design without ever leaving Fireworks. You will actually find this panel in many of the CS4 applications included in the suite.

CSS/Images Exporting

You now know Fireworks CS4 can export a PDF, but what happens if you want to create a complete site from your design? Simple, export it as a CSS/HTML package. In Fireworks CS4 you can export standards compliant HTML and CSS directly from a PNG (Fireworks document). Fireworks will even properly convert rich symbols to their HTML equivalent. For instance, if you define a shape as a button, Fireworks will create the <button> code directly in your exported file automatically.

If you happen to use non-standard font styles in your design, Fireworks will warn you with an alert box when you attempt to export. This offers you the suggestions of exporting the text as images (if it’s static) or choosing a “web friendly” font family.

Live Gradients, Patterns and Masks

Often times you find yourself editing gradient options to get the perfect result, but constantly changing options, applying them and reviewing the result can be time consuming. New to Fireworks CS4 is that you can now work with Live Gradients. As you make changes, the gradient on the canvas automatically reflects those changes, allowing you to quickly make changes and move on to the next task.

This Live ability is also found on the Patterns and Masks, truly offering the ability of rapid prototyping to Fireworks CS4. Once you start using it you will wonder how you lived without it.

Wrap up

You should now have a pretty good understanding of the new features in Fireworks CS4. Now you can start rapidly prototyping your designs with ease and much better performance.

One last thing to note, unlike the other applications in the CS4 suite, you can actually download a beta version of Fireworks on the Adobe labs. This will not be the exact version that will be found in the suite once it’s released, but it can cure your desire to use Fireworks CS4!

Matthew is a new-media designer, developer, author and trainer who recently wrote the Flash and PHP Bible. He is also Technical Editor of a number of books. www.Scriptplayground.com