Sarthak

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)

Adobe Fireworks has always allowed designers to do some developers' job without any code writing. A simple example of such a scenario is the creation of roll over behaviors.

Such behaviors are exported in the html from Fireworks which are Java script based. The current web trends make this possible through CSS but remember Fireworks is a graphic design application and is used for rapidly prototype for the web and creating quick experience related mock ups.

roll over,behavior,javascript

Posted by Sarthak Singhal at 4:10 PM | Permalink | Comments (0)

Objects can be placed behind some other objects and visually are hidden. They are accessible only from the layers panel. User do various workarounds like cut the object and then make edit and finally paste it back on the canvas. Another option is to turn off the visibility of object but this can be difficult when the file houses many layers and objects nested with in it.

In the following video, I showcase you the presence of "Select Behind tool" which will let you select the object behind an existing one, sub-selecting it, moving it, nudging and making edits to it.

Select behind tool,selecting objects in Fireworks,Object selection

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

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)

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

Next in the series of Panel explorations we have the "Layer" panel. It is probably one of the most used panels in the application.

The whole concept of layers is just brilliant when the document has to be organized and different applications have different ways of handling it. Photoshop being the a hugely popular one explains the need for it. In Fireworks the layers behave a bit differently. Fireworks application works at the object level meaning that any attribute which is applied to the layer like a blend mode or the opacity is actually applied to all the objects which are contained within that layer.

The above mentioned difference is huge in understanding how Fireworks handles all the objects and the layers containing them.

In the above shown panel image, I have tried to highlight some of the functionality of the panel. Apart from that the other detail features are mentioned below.

1. The Layers panel menu can be accessed now from right click on a layer. This is the same menu list which appears on click from the icon on the top right. There is just one exception in a menu item for "Share Layer to All Pages" in the right click menu.
2. The layers panel can contain optional master page layers if the document contains a master page. The master page layer by default sits at the bottom in the hierarchy order. The order can be changed but all the individual layers of the master page will be moved together and not independently.
3. The master page layer are locked in child pages and cannot be renamed or unlocked from there. If the visibility is toggled, the affect is seen on all the pages containing the master page layers.
4. When the blend mode or the opacity values are changed for a layer, it is actually applied to all the objects contained within that layer.
5. Layers can moved around and converted from sub layers to parent layers or vice versa.
6. The visual feedback for layer movement is when the folder icon changes color to a yellowish icon color.
7. All web layers and master page layers are shared to all the states by default and cannot be toggled. This is represented by the film strip icon which is seen at the end of layer name. Other kind of layers can also be shared but not by default. This functionality can be toggled for the other layers
8. Layers can also be shared across pages, which is represented by the page icon next to the layer name. Any change in the layer attribute like visibility, lock etc are reflected in all the pages where the layer is shared.
9. The shared layer can be detached from the current layer with/without a local copy.
10. Even web layers can be shared across pages. In the above graphic, "Web Layer" cannot be shared but layer "Web Layer 1" can be shared. sub layers cannot be shared. The top most parent has to be shared in entirety for the layer contents to be visible across pages.
11. The last column in the panel representing a circle with a dot in it allows for the movement of selected objects from one layer to the other. In case there are no objects selected in the layer, the circle will be empty otherwise it will show a dot. Moving this dot to any other layer/sublayer will allow for the movement of selected objects onto the destination layer.

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

Apart from the regular Exchange, Dev net articles, forums and community help available at Adobe's official website, following are some of the links which are dedicated to Fireworks. It includes forums, blogs, extension posts, design posts, workflow descriptions and many other cool stuff dedicated entirely to Fireworks.

Alan Musselman

Aaron Beall

Thierry Lorrey

Matt Stow

Fireworks Guru Forums

There is also a Linked In group. Catch up on some of the interesting discussions going in there. There is also a google group named Macromedia Fireworks.

In case you guys find some other resources about Fireworks anywhere on the web, let me know so that I can highlight it as well. Let us spread the Fire which Works!

Posted by Sarthak Singhal at 10:37 AM | Permalink | Comments (1)

Hi everybody,

I am planning to start a series of blog entries on Panels in Fireworks. The entries will dive deep into exploring the panel functionality. It will help users in understanding the complete functionality of panels which are present in Fireworks.

If you would like to get some panel explained early in the series, send in the comments.

Posted by Sarthak Singhal at 11:01 AM | Permalink | Comments (0)

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)

Past:
In the days of Macromedia, Fireworks was a tiny niche, but popular application preferred by people for its flexibility while dealing with bitmap and vector objects. That is still a very big advantage for the application but the journey for it is being defined freshly to find a more strategic spot in the creative suite of products.

CS3 was the first version under the flagship of Adobe brand for Fireworks. The tag of “Rapidly prototype and Design for the web” was well received by the designers and other consumers of the application. The application started gaining importance for Interaction Designers, Information Architects for various activities from Wireframes to Website prototypes.

Present:
The journey does not end here and gives Fireworks unique opportunities at different stages. CS4 release projected a stronger Suite Integration story for the application apart from making website prototypes easier to create and maintain. Fireworks seems to be the tool for any design which has to be put on the web.

Future:
Exciting times lay ahead with Adobe focusing on this application. It fits well in the portfolio for Web Designers where Adobe is gaining strength. Making itself as the first choice tool for Web Designers, free lance designers, Interaction designers, Experience engineers will not be an easy task but Adobe is fully committed to this vision.Being a design application, the focus stays on refining the existing design-centric workflows, creating new ones to keep the application abreast with the technology advances around it.

An interesting opportunity lies in the area of Interaction design where a click through mockup of an application or website or even a workflow is needed. Fireworks has the feature set which makes it a natural choice for designers of that portfolio. Adobe will continue to invest in that area by promoting Fireworks as the right tool for these designers.

Fireworks has been a tool preferred by freelancers and designers but there are some bottlenecks when using the application in their design process. The commitment is there to streamline that process and go the extra mile of reaching the stage where the design can be handed over to developers in case of website or web applications. For freelancers, they can just spit out standards-compliant CSS from Fireworks itself and tweak it.

Vastly improved support for CSS was a major effort in CS4 release and the feedback has been very positive on that front as well. Let us all get excited and anticipate for the exciting times that lay ahead for Fireworks with Adobe brand fully committed to it.

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

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...

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.

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

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

 


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.

Posted by Sarthak Singhal at 2:40 PM | Permalink | Comments (3)

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)