Automation with Fireworks CS4 Commands – Reflections

thomasb — Wed, 04 Mar 2009 01:08:44 +0000

While working at Ustrive2, Inc. I initiated some redesign efforts for the Sellit Administrator tools. Focused on creating a fantastic, rich user experience, The dev team [DanM, JesseF, MichaelF, and MikeC] used Fireworks CS4 to quickly iterate through several design prototypes and deliver designs that satisfied many complex feature requirements.

One aspect of those designs was to create a sense of depth [and engage the user] by judiciously highlighting key components with lighting and reflections. Many of the resulting storyboard pages contained 2 or more components with reflections.

Manually creating a reflection requires 20 or more steps and about 60 seconds to complete… for each component. I will not bother listing each step… it is non-trivial and tedious [and the code at the bottom of this blog shows you the details]. There had to be a way to automate the process. I realized that a Fireworks Command was the solution!

Fireworks CS4 is an amazing web design and storyboarding tool. If you are not leveraging its power within your own design processes you are crazy.

With a Fireworks command and associated hot-key, I could automate 20+ steps and many mouse movements to a single command. And I could easily invoke that command using a hotkey. Wow! But how would I create the command if I did not know the Fireworks API? Before we solve the automation issue, let’s first see what the Reflection command actually does. Then we will learn how to create such a command.

Click on any of the thumbnails below to see the examples of using a ‘Create Reflection’ command.

Sellit ShopBOT

ShopBOT w/ Reflection

Reflections on many ShopBOTs

More Reflections on ShopBOTs

Below is an outline of the process you can use to create your own reflection command. Let Fireworks record all your steps and save those steps as javascript code. Then you can fine-tune that code as desired:

Open the History panel and make sure the history is clear,
Manually create a reflection with the 20 or more steps (painful details not included),
In the History palette, select the steps that match the process to create the reflection,
Using the History Menu, select the ‘Save as Command…’ menu option,
Specify the name ‘Create Reflection’ and click OK
Edit the javascript command code to perform as desired:
1. Use a text or code editor to open the ‘Create Reflection.jsf’ file (directory location below),
2. Modify the code to programmatically support clip height, opacity, offsets, etc.
3. Save modified command file,
4. Return to Fireworks, select a object, and invoke the ‘Create Reflection’ command
Did your changes work? If not go to Step (6) make more coding changes and iterate…

Did you know about the Export Pages as PDF feature and its click support to jump between pages. Your PDFs can be used for storyboarding, collaborating, sharing prototypes, and walkthrus.

Fireworks Commands Directory (Mac OS X)

But where [which directory] should you open/edit/save the ‘Create Reflection.jsf’ command file? Click the thumbnail on the right to zoom for details.

After the challenging [and fun] time invested to create my own working command, my ‘Create Reflection’ works great. The Ustrive2 developers loved using it for their own design efforts.

With the code [shown below] and a copy of the ‘Create Reflection.jsf’ command file, it is my hope that you will also enjoy using this command.

Below is the javascript code contained in the link for your own Create Reflection.jsf command (click to download):

/*
 * CreateReflection is a Fireworks Command that creates a vertical reflection [of the currently selected items].
 *
 * This is an incredible timesaver and allows the designer to quickly create reflections for anything.
 * When 1 or more items are selected in the current canvas area, those items are:
 *   1) Duplicated, flipped vertically, and flatten (original items are unchanged and deselected)
 *   2) The flattened copy is cropped to the top 40 pixels
 *   3) A gradient alpha mask is applied to the cropped image
 *   4) Both the mask and image are flattened and opacity set to 20%
 *
 * TODOs:
 *    1) Add support to skew/distort the selected images and reflection (for 3D perspective effect)
 *    2) Create runtime UI dialog to request clip height, offset, opacity, and skew parameters
 *    3) Check for no items currently selected and posting feedback to designer
 *
 * Author:  Thomas Burleson, Flex/Groovy Consultant
 *
 *          Blog    @ http://www.gridlinked.info
 *          Profile @ http://www.LinkedIn.com/in/ThomasBurleson
 *          eMail   @ ThomasBurleson@gmail.com
 *
 *
 * Date:  Feb 24, 2009
 */ 
 
var OFFSET         = 4;
var REFLECT_HEIGHT = 40;
 
var dom            = fw.getDocumentDOM();
var reflections    = new Array();
 
// Copy and flip selection, move to OFFSET below the original, and flatten to bitmap 
dom.clipCopy();
dom.clipPaste();
 
dom.group();
dom.reflectSelection(false, true, "autoTrimImages transformAttributes");
dom.flattenSelection();
 
var bounds = dom.getSelectionBounds();
dom.moveSelectionBy({x:0, y:bounds.bottom-bounds.top+OFFSET}, false, false);
 
// Clip image to REFLECT_HEIGHT,
bounds = dom.getSelectionBounds();
bounds.bottom = bounds.top + REFLECT_HEIGHT;
dom.setSelectionMask( {  maskBounds:bounds, 
                                       maskKind:"rectangle", 
                                       maskEdgeMode:"hard edge", 
                                       featherAmount:0, 
                                       maskData:null }, 
                                    "replace");
dom.exitPaintMode();
dom.cropSelection(bounds);
 
// Cache the reflection...
reflections.push(fw.selection[0]);
 
// Build an alpha clip mask and set transparency to 20%
dom.addNewRectanglePrimitive(bounds, 0);
dom.setBrushNColor(null, "#ffffff00");
dom.setFillVectorStart({x:bounds.left, y:bounds.top});
dom.setFill( { category     :"fc_Linear", 
			   ditherColors :[ "#000000", "#000000" ],
			   edgeType     :"antialiased", 
			   feather      :0, 
			   gradient     :{ name:"cn_Custom", nodes:[ { color:"#ffffff",  isOpacityNode:false, position:0 }, { color:"#ffffff",  isOpacityNode:false, position:1 }], opacityNodes:[ { color:"#000000",  isOpacityNode:true,  position:0 }, { color:"#00000000",isOpacityNode:true,  position:1 }] }, 
			   name         :"fn_Linear", 
			   pattern      :null, 
			   shape        :"linear", 
			   stampingMode :"blend opaque", 
			   textureBlend :0, 
			   webDitherTransparent:false });
 
// Cache the alpha mask
reflections.push(fw.selection[0]);
 
// Select the reflection and alpha mask, then group and set opacity...
fw.selection = reflections; 
dom.group("mask to image");
dom.flattenSelection();
dom.setOpacity(20);
 
// DONE!

After this tutorial, you should explore more solutions and start creating your own cool Fireworks commands. I will let you figure out how to assign a hotkey sequence to a command. With commands and hotkeys, your design life becomes FUN!

If you extend or enhance ‘Create Reflection’, please send me a copy And don’t forget, please comment and rate this article (rate by select the star levels) below.

GridLinked to RUX » Fireworks

Automation with Fireworks CS4 Commands – Reflections