Main

July 6, 2009

Page navigation shortcuts

Pages are a boon to Fireworks since their introduction in CS3 release. There is a built in Keyboard navigation facility for iterating through all the pages in the document of a Fireworks png file.

The 'PgUp' and 'PgDn' key does the trick of navigation. Even when the focus is on the canvas, the keyboard shortcuts will work.

Incase you are editing a field or entering some values/text in any of the panels then you will need to exit that editing field and then the shortcut will work for you. Simplest way is to click on the canvas to gain focus on the main area of the application.

This keyboard navigation is valid on Windows and Mac.

Bookmark and Share

,,

May 2, 2009

Change canvas/image size for all pages at once

With multiple pages now in a Fireworks png file, it can difficult to re size the canvas or the image size one by one for each page. An often missed settings in the "Canvas Size" or "Image Size" dialog is the check box named aside "Current page only" . It is shown below in the dialog.

Canvas Size- Current page only setting

 

By default it is checked, but the settings are remembered across multiple Fireworks sessions.A quick time saver option now known to all you Fireworks designers!

April 9, 2009

'Scale Attributes' property

Scale attributes tip

March 20, 2009

Preserve rectangle roundness while scaling

Fireworks CS4 and earlier versions allow for defining the roundness of rectangles. The roundness gets distorted when any of the transformation tools are used like Scale, Skew or distort.

If you know the approximate height or width values for the rounded rectangle, then you can enter the values in Properties Inspector in the width and height fields and the roundness will be preserved. This is a HUGE time saver.

 

Rectangle roundness preserved after scaling

February 27, 2009

Copy Pase layer structure now!

Facing problems while copy pasting layers and the layer structure not being respected.

Now worries now! Just use the extension created by Mayur

Download Link

December 23, 2008

CS4 Text woes workaround

Users facing the text bounding box issue can breathe a sign of relief as there is a workaround for that problem. As a temporary solution is through an extension which will correct all text objects whose blue colored bounding box has been shifted in the document.

Important Note:

  1. Running this script will correct the bounding boxes for all text objects in the document affected by this bug. This correction is limited for that png file edit session only. The bug may be encountered again during future file edits where the extension script will need to be executed again.

  2. Any CS3 text element if present inside a Group ONLY will get re-rendered on running this script. After installing this extension, you can access this script from Commands menu-->Re-sync Text

  3. This extension will not touch any text elements containing missing fonts. The missing fonts dialog pops up when opening a png file which contains fonts not found on the system.

Thus there is no need to worry about CS3 text and missing text getting re-rendered unnecessarily on using this Extension.

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1706527

Re-sync Text Bounding Box is a simple Extension which will go through each and every text element present in a png document (be it inside a page or a layer or a state) and re-align its bounding box.

EXAMPLE:

The following is the screen shot of a file which got affected by this problem.

Text bounding box issue

After running the extension script mentioned in the above link, the following is the state of text objects.

Text issue resolved

Extending Fireworks CS4 document live

Adobe Fireworks CS4 extending document is live with the new document containing all the changes in the API for the product. The same document is also available as a pdf file which can be saved on you local disk for referring to it while you are disconnected.

Extending Fireworks CS4 web page

Web Help Link

http://help.adobe.com/en_US/Fireworks/10.0_Extending/index.html

Downloading PDF Link

http://help.adobe.com/en_US/Fireworks/10.0_Extending/fireworks_cs4_extending.pdf

Utilize the power of JavaScript interpreter built into Fireworks to enhance your productivity. To give you some examples, many panels have been built entirely using this technique. Some of them are Path, Align, Export to AIR panels.

Explore the power within the application.


December 19, 2008

Auto Save in Fireworks CS3, CS4

I have seen that users of Fireworks are running into issues where the design job is lost while saving the file. I admit to this begin a huge frustration for the users and we will work on to better it. Till that time a useful utility is present at the following web address which can save the png file automatically for you.

http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&offeringID=10210

Auto Save AIR application for Fireworks CS3, CS4
-

This is an AIR application which will save your work automatically. It will not update the original png file but will create a folder FWAIRBackup where the auto saved png file will be placed. The extension will successfully work in versions CS3 and CS4 of Fireworks. The only requirement is that AIR run time needs to be installed which can be downloaded from http://www.adobe.com/products/air/

Further details of the extension can be obtained from the first link. Any other doubts or queries post them right away.

 

December 9, 2008

2 new Fireworks articles at Adobe Dev Center

Two new articles have been posted at Fireworks Developer Center on www.adobe.com. The actual links for the articles are mentioned below. For people new to this location, it houses articles, extensions which range from traditional usage of Fireworks to extending the functionality to its limits. Explore the following new articles apart from the old ones which are a good read.

Lorem Ipsum placeholder text generator for Fireworks
http://www.adobe.com/devnet/fireworks/articles/loremipsum_panel.html

Workspace Manager panel in Fireworks CS4
http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html

Easter Egg? Other Fireworks engineers!

Easter egg is a hidden feature of Fireworks which is no way related to the functionality of the product. It is a flash demo which contains photos of a lot of people who are involved with the building on Fireworks over different versions. To access the feature go to menu item

  • MAC: Fireworks -> About Fireworks CS4...
  • WIN: Help -> About Fireworks...
About Us dialog

The about dialog will pop up. Now press Control on Mac or Win and a single mouse click on the FW icon. Be patient! This will pop up the faces of people who work quite hard to bring the various versions of Firework to you. I am also in one of the images. You just need to hunt me down!. This trick can be found in earlier versions of Fireworks also.

December 8, 2008

Keyboard Shortcut Tips

Keyboard shortcuts are an important ingredient for an efficient user of an application. But different applications have their own custom set of shortcuts even if they have the similar kind of functionality.

Graphic applications like Fireworks, Photoshop, Illustrator and Freehand have a degree of overlap in their basic functionality. It is only in their advanced features that the applications start to differ. With the overlapping functionality amongst the applications it would be really beneficial if

  1. People working in some other application might like to use the same keyboard shortcuts in Fireworks.
  2. Migrating from other graphical applications to Fireworks for its specialized features but using the other applications keyboard shortcuts for some of the same task.
  3. A user has customized the keyboard shortcuts for an old version of Fireworks and would like to migrate the those shortcuts in the newly released version of Fireworks.

All the above problems can be solved as:

  1. See the below image where you can switch between the keyboard shortcut of other applications. The keyboard shortcut dialog can be accessed from the following menu items. This will load the keyboard shortcuts of the selected application.
    • WIN: Edit-> Keyboard Shortcuts
    • MAC: Fireworks->Keyboard Shortcuts

     

    Keyboard Shortcut dialog
  2. The keyboard shortcut file is an xml file which is placed at the locations
    • WIN: <OS Drive>:\Program Files\Adobe\Adobe Fireworks CS4\English\Keyboard Shortcuts\
    • MAC: /Applications/Adobe Fireworks CS4/Adobe Fireworks CS4/Contents/Resources/<language project file e.g en.lproj>/Keyboard Shortcuts/

    The path to "Contents" can be reached by Right click on "Adobe Fireworks CS4" app and click on "Show Package Contents". Just add the xml file from some other version of Fireworks and place it at the above location and restart the application. This will add the newly dropped xml file in the menu item. Select that xml file for shortcuts to work in the new version of Fireworks. Just remember to account for the Fireworks version when looking up the file path.

November 17, 2008

Rectangle roundness backward compatibility

Fireworks CS4 version has introduced defining the roundness of rectangles in either pixels or in percentage values. However in Fireworks CS3 the roundness could be defined only in percentage numbers.

In Fireworks CS4 if you are working with pixel values and a CS3 version file is opened, all the rectangles will loose the roundness information and have sharp corners.

To work around this just create a new rectangle and define the roundness in percentage and then open the CS3 version created fireworks png files. This will solve the issue.

November 10, 2008

CS3 and CS4 rendering engine differences

Fireworks CS4 now utilizes a new rendering engine. Users have the option of toggling between the CS3 and CS4 vector rendering engines using the following scripts: Any object created afresh in CS4 version will utilize the new rendering engine.

A legacy file created in version prior to CS4 even when edited in CS4 version will not use the newer engine until the object is selected and the script is run on it.

  1. Download link for script to enable Fireworks CS3 vector rendering on selected objects
  2. Download link for script to enable Fireworks CS4 vector rendering on selected objects

Users can toggle as many times between the 2 options to verify the graphic appearance.

Visual Illustration: See the 1 pixel anti-aliasing added to red rectangle on right which uses CS4 rendering.

Rendering difference between CS3 and CS4
The above editable fireworks png file can be downloaded from here.