Sarthak

Yahoo Developer Network has hosted some nice assets for wireframing and other designs. These assets are Adobe Fireworks png files which are in the symbols format allowing them to be reused across multiple pages in a document.

You can copy them in the Common Library location and refresh the panel. They will be available for your design layouts or wireframes.

A screenshot of the assets is shown below:

The complete article and the files are placed at http://developer.yahoo.com/ypatterns/about/stencils/fireworks.html

Quite an impressive set!

Posted by Sarthak Singhal at 5:55 PM | Permalink | Comments (0)

What appeals to you in Adobe Fireworks? Any version? Old Macromedia days or Adobe days?

It could be specific to a feature which has been introduced in CS4, CS3, or the old days. It could be a workflow which makes you come back to the application, like Batch processing, slicing technique or something else.

I am gathering this data for knowing which feature/workflow of Fireworks is being used by designers. This is to gauge and help if something has been worked upon and could increase the efficiency of designers.

Posted by Sarthak Singhal at 6:46 PM | Permalink | Comments (17)

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.

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!

Posted by Sarthak Singhal at 1:03 PM | Permalink | Comments (1)

Adobe Fireworks CS4 has a new book on the shelves. Friends of Ed from Apress publications have released a new book for beginners which sets a good understanding for designers and users exploring the capabilities of Fireworks. There are some really good case studies in the book to get you related to real world scenarios.

Below mentioned is table of contents of the book. For more details about the book, please visit site http://www.friendsofed.com/book.html?isbn=9781430216186

Summary of Contents

• Part One: Learning Fireworks
  • Chapter 1: Welcome to Fireworks
  • Chapter 2: Fireworks and CS4 Integration
  • Chapter 3: Working with Bitmaps
  • Chapter 4: Working with Vectors
  • Chapter 5: Exporting from Fireworks to the Web
• Part Two: Using Fireworks
  • Chapter 6: Creating Visual Effects
  • Chapter 7: The Ins and Outs of Animation
  • Chapter 8: Skinning Flex Components with Fireworks
  • Chapter 9: Creating Adobe Air Prototypes
  • Chapter 10: Fireworks Extensions
  • Chapter 11: Extending Fireworks: Developing an Effective Workflow Using Javascript and Flash
• Part Three: Fireworks in Action
  • Chapter 12: Web Site Case Study #1: Blog
  • Chapter 13: Web Site Case Study #2: CSS Sprites
  • Chapter 14: Web Site Case Study #3: E-Commerce

Posted by Sarthak Singhal at 11:46 AM | Permalink | Comments (1)

Symbols are an important part in the way designer works with Fireworks. The application at the same time tries to reduce the burden or test his memory of updating all instances of the same object when any change is done.

To update all the instances in one go and provide further flexibility in the operations, Fireworks has symbols with multiple variations of it. Symbols are actually stored in the fireworks png file . Once a file is opened they can be accessed from "Document Library" panel in CS4 version. In the prior version it can be accessed from "Library" panel. The panels can be accessed from "Window" menu on a Mac or a Windows machine.

1. Graphic

This is the most generic form and has a parent child relationship. Whenever the master instance of the symbol is edited, the changes are broadcasted to all child instances of the symbol within the entire document. This serves as the edit once and update all mechanism. Any of the child instances can be updated so that the master knows of edits and transmits the update to all other instances.

2. Button

For creating effects like roll over, hover and similar behavior, the button symbol are used. They can be 2 state or 4 state buttons depending on the number of States/Frames which are present inside the symbol object. These symbols exhibit the behavior when previewed in browser or the preview button.

3. Animation

This is the traditional form of creating animated gif files. The transitions, delay settings and other file details are customized from the States panel.

4. Component Symbols (aka Rich Symbols)

Introduced in CS3 this is probably the most advance and least understood symbol type. This type of symbol also has a parent child relationship with an overriding facility. All the attributes of parent are inherited by all the child instances but if the child instance changes any of the available attribute from "Symbol Properties" panel, the parent attributes get over ridden only for that instance of the symbol. Any other instance of the symbol in the document does not get affected. Only the attributes changes through this panel are overridden, all other attributes are inherited from the parent.Each rich symbol is associated with a script from where the Symbol Properties panel is populated with the attributes which can be edited..

Symbols can be edited by double clicking on them. Once done so, the user enters the symbol edit mode where all the graphic tools are present for editing the objects.

Posted by Sarthak Singhal at 4:06 PM | Permalink | Comments (11)

Fireworks is a hybrid application with a competent set of tools and operations for the vector objects. One thing that suits for Fireworks is the ability to design for the screen. It could be a website, web application, desktop application, mobile application, ATM machine or anything else.

Designing with vectors and still get the pixel precision defining for it gives the application an edge. To learn more about how the rendering happens for the vector which have been created in Fireworks check out the following Knowledge Base article at adobe .com by Trevor www.adobe.com/go/d6f2172a

Posted by Sarthak Singhal at 6:22 PM | Permalink | Comments (12)

Doug Winnie has posted a blog understanding how Fireworks fits into a designers workflow. He is looking for answers to 2 questions.

1. What role does Fireworks play in your workflow?
2. Where do you find the value of Fireworks and it’s integration with Creative Suite and other Adobe design and development tools?

There have been many interesting use cases Fireworks users have posted. Read them and also post the ones you are performing in your stint with Fireworks application.

Posted by Sarthak Singhal at 5:28 PM | Permalink | Comments (5)

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

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.

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

Posted by Sarthak Singhal at 2:43 PM | Permalink | Comments (17)

Continuing with the workflow changes that have been done in CS4 release version, below you can find 6 more. I will keep posting more workflow changes in this release over the next few weeks.

1. All the color spaces of .psd and .ai are now supported. Once the import/open of the files happen, they get converted to RGB 8 bit.This might result in color variations on certain occasions. Prior to CS4 some of the files refused to open.
2. Another hidden functionality added in CS4 is the history of object selections. Consider a case when you select objects at multiple places on the canvas and have to revert back to the last selected object. Fireworks CS4 allows a history for the selection of objects also. The user can run back or forward in the selection history using Cmd+Shift+Left Arrow/Right Arrow on Mac and Ctrl+Shift+Left Arrow/Right Arrow on Win.
3. Whenever a custom asset is created by the user, the path location is remembered unlike CS3 where the user had to navigate to Fireworks preferences location in users folder.
4. The usage of special characters in File, Page, State name has been restricted. Ex '/', '\'

5. Not really a workflow change but all the flash panels are not loaded at the launch of application. They are initialized and respond only when they are in focus. This improves memory footprint of the application and performance. If all the flash panels are in focus then the user will not see any change. Also when the flash panel has been switched off, it does not unload and consumes memory.
6. A much needed and special feature to have images inset the text, Text In Path has been added which will create something like as below. It can be accessed from Text->Text in Path.

Posted by Sarthak Singhal at 5:44 PM | Permalink | Comments (0)

Below are some of the scenarios with respect to text shifting on the canvas. The user lands in a situation similar to one shown below from all the 4 scenarios.

1. Scenario: Selecting/de-selecting the text object and trying to move it on the canvas using keyboard arrow keys.
   Problem description: The text within a textbox in Fireworks CS4 on a Mac will move within the textbox and even move out of the textbox if you select and deselect the textbox multiple times while moving the textbox with the keyboard arrow keys each time.
   Temporary workaround: When ever you see a text image going out of sync with its bounding box, just re-adjust the text or double click inside the bounding box. This will make the text object to correct itself.
The above scenario can be seen visually from the video. The video has been provided by www.designme.sk
View Video
2. Scenario: Trying to align text elements using mouse either against other objects present on the canvas or a guide, using the cues from smart guides.
   
   Problem description: When ever we have grids enabled and we try to align a text element against other objects on the canvas using the cue from smart guides, sometimes the text bounding box shifts away from the text image on releasing the mouse.
   
   It seems this shift in the bounding box is happening when the bounding box tends to snap to the nearest grid pixel and we release the mouse at half pixel less.
   
   Temporary workaround: Try to align text elements with the following settings turned off. (i)View->Grid->Snap to Grid and (ii)View->Smart Guides->Snap to Smart Guides


3. Scenario: Range Kerning/Kerning value in CS3 is not the same in CS4.
   
   Problem description: Range Kerning value applied in CS3 does not give the same appearance when opened in CS4 and updated. The look of the text block totally changes and we need to manually enter the new value to get back the desired effect.
   
   Temporary workaround: Range Kerning control present in the UI has now been changed to Tracking in FWCS4. Tracking control works the same way as that present in apps such as Adobe Illustrator or Photoshop. To apply tracking, a range of characters has to be selected first, unlike kerning control wherein, just keeping the cursor between 2 characters we could apply kerning.
   
   For a value of Kerning applied in CS3, if we set approximately 10 times the value of Tracking in CS4, we can get similar looking text element. Ex: if the Kerning value which was set in CS3 for a text element was 10, then around 100 could be the Tracking value which we will have to set in CS4 so that we can get similar looking result.
4. Scenario: 2 pixel shift in text glyphs when we change area/frame text to point text and vice a versa.
   
   Problem description: When we change the area text (drawn by click dragging on the canvas using the text tool such that we get an area bounding box) into a point text (drawn by just click once on the canvas using text tool) by double clicking the top right handle or vice-versa, we can see that there is a 2-px shift in glyphs on the canvas.
   
   In ATE, bounding box of a point text is different than the area text. The area text has a small gap between the glyphs and the bounding box, thus currently when we do such a change; there is a slight shift of the glyphs either upwards or downwards depending upon the point or area text change done.
   
   Temporary workaround: Create either an area text or point text depending upon your requirement and don’t shift or change from one type to the other. Note that when you convert area text to point text, the glyphs shift 2 px downwards and when we convert a point text into an area text, glyphs shift 2 px upwards.
   
   


5. Scenario: Trying to 9-slice scale a custom symbol or common library element, sometimes the text jumps away.
   
   Problem description: When we try to apply 9slice scaling on common library element such as a button etc, sometimes the text jumps away from its location. 9-slice scaling when applied to a text bounding box changes it to an area text if it’s a point text which makes the glyphs to shift 2 px from their original location. Moreover in situations where in 9-slice scaling is used to scale the button element, after some point the text tends to break away from its original location.
   
   Temporary workaround: If a symbol or custom component has text contained inside, then make sure that the text object is placed well inside the 9-slice guides and they are not overlapping. More importantly, make sure that the text element is an area text box (if it’s not then convert it by dragging the lower right corner of the bounding box) and not a point text box.

Posted by Sarthak Singhal at 2:20 PM | Permalink | Comments (31)

1. Pixel radius definition for primitive rectangle. The radius can be changed even after the rectangle is 9 slice scaled. This is apart from defining it in percentage values.

2. Restricting the scaling down of objects which have 9 slice scaling applied to it. This prevents the objects from getting distorted for vector and bitmap objects.
3. States and Layers panel have a small radio button kind of functionality which allows for moving the objects from 1 state/layer to the other layer/state without any issues. When an object is selected contained in the State or Layer the radio button is enabled. Once the button is enabled designer can move just the radio button which inturn moves all the selected objects under it.

4. The vector objects like Line, Ellipse, and Polygon now show up with names unlike just "Path" as was present in earlier versions.

5. When guides are present on a document, pressing shift will show the distance between 2 guides on the canvas in pixels.

Posted by Sarthak Singhal at 6:30 PM | Permalink | Comments (0)

1. Guides on the master page will be visible on child pages. Any new guides added will also get reflected on the child pages. Guide location changes made in the master will reflect on child pages. Child page can override the master page guide settings.
2. In the symbol properties panel, user needs to press Enter to reflect the changes in fields like labels.
3. Loading of flash panels are delayed. This will reduce the launch time and use memory stamp only for panels which are used by users. There are 8 flash panels by default in Fireworks CS4.
4. Anti-aliasing for vectors is much smoother now. It is due to new rendering mechanism added in CS4 version.
5. Mouse wheel scrolling in panels
• Mac:  Layers, Pages, states, Common Library
• Win: All panels

Posted by Sarthak Singhal at 1:32 PM | Permalink | Comments (0)

1. Master Page Optimize settings can be carried over on to the child pages.  For optimize settings to be inherited by child pages, they need to be linked. Child page can override the master page optimize settings. Alternatively when the optimize settings for child page is modified, the linking goes off and the master page optimize settings are overridden.
2. Designers can now select multiple pages and change the optimize settings in one shot. It will be reflected in all pages.
3. Layers contextual menu has a new menu item called "Share Layer To All Pages". This option will share the selected layer across all the existing pages.
4. Another option added to the Layers contextual menu item is "Exclude Shared Layer". This option will remove the shared layer on current page without affecting it on the other pages.
5. The contextual menu can be accessed by right clicking in the layers panel. Similar right click functionality has been added to Pages and States panels.
6. Icons use for Extensible Flash Panels. Users can now place icons along with swf files, which will be considered as panel icons in workspace.The icons need to be png files. The name of the png file should be the same as panel name. Mouse over behavior can also be specified an icon and its name should be 'panelName_over.png'

Posted by Sarthak Singhal at 5:26 PM | Permalink | Comments (0)

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.

Posted by Sarthak Singhal at 5:31 PM | Permalink | Comments (2)

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.

The above editable fireworks png file can be downloaded from here.

Posted by Sarthak Singhal at 4:33 PM | Permalink | Comments (6)

Bug fixes part 2 lists some more issues which have been ironed out in Fireworks CS4 release.

1. When objects are present in sub layers and the canvas image is resized, the sub layer objects do not get resized.
2. & character is now allowed in Symbol Properties dialog.
3. Layer in FW created in a PSD have the blend mode set to Pass Through now instead of Normal.
4. Exporting the slice from contextual menu was causing a hang of Fw.
5. Text with PS effects had a bigger bounding box. Now it is fixed.
6. Text object which had multiple attribute settings when copy pasted did not preserve the attributes when pasted. Now pasting the text object preserves the same.

Posted by Sarthak Singhal at 4:11 PM | Permalink | Comments (116)

Apart from the workflow features in Fireworks CS4 there have been some bug fixes which seem important from a designers perspective. Below mentioned are 7 bug fixes which stand out amongst the other fixes.

1. When pages in the png file are linked and then renamed, the links had to be updated manually. This updation of links now happens automatically in Fireworks CS4 on page renaming.
2. If an invisibile layer or object was selected, the visibility was getting turned on automatically. This has now been taken care, where the visibility doesnot toggle automatically.
3. A restriction has been added to disallow the presence of special characters in page names. An alert message is displayed now.
4. Images copied from a web browser and pasted as a mask was broken in Fireworks CS3. Version CS4 has rectified the issue to make it work once again.
5. While scaling a vector or on some other occassions, a stray pixel used to crop up on the canvas. This stray 1 pixel has been taken care of now with the CS4 version.
6. When a web object aka slice/hotspot is cut and pasted, it now pastes in the selected web layer/sub web layer.  CS3 pasted in the lowest layer hierarchy irrespective of the layer selection.
7. The "Select Unused Items" in the document library now works across multiple pages. In Fireworks CS3 it was limited to the current page.

Posted by Sarthak Singhal at 5:16 PM | Permalink | Comments (0)

Following are the 11 features which have been highlighted in CS4 release for Fireworks product. To know more about them follow the link http://www.adobe.com/products/fireworks/features/?view=topnew

1. Preview or create package as an AIR application
2. Export all the pages in png file as pages of a PDF
3. Export the document as HTML and CSS
4. Link objects to Styles and skin them in a click
5. Bigger and better repository of re-usable assets
6. Workspace Improvements through Smart Guides
7. Kuler pallete usage directly in Swatches panel
8. New User Interface for better layout organization
9. Performance improvements in all areas of application working
10. New Type Engine for better integration with other products
11. Connect Now aka Adobe Connect for screen and voice sharing from within Fireworks

Stay tuned as I will highlight other features which are new in Fireworks CS4.

Posted by Sarthak Singhal at 2:59 PM | Permalink | Comments (0)