Exporting all elements from Fireworks

[scobob]

This script will allow you to export all visible elements of a Fireworks PNG file to individual PNG files. This is very useful for composing your mockups in Fireworks and simply select the menu command to export them for your skin. The elements will be

• Cropped and sized to it bounding box
• alpha channel is preserved
• if you've named your elements or groups, the element's name is used as the filename
• Only visible elements are exported, hidden and web layers are skipped

Installation:

1. Copy and paste the code below to Notepad or other text editor
2. Click File > Save As..
3. Enter a descriptive name such as Export all Elements to PNG.jsf
   It's important to note the .jsf extension, you can name the file anything you like but the extension must be .jsf
4. Navigate to the Configuration\Commands folder under Fireworks installation folder, usually C:\Program Files\Macromedia\Fireworks 8\
5. Create a new folder under Commands named Export
6. Save the file to the newly created Export Folder

Your path should look like this:
C:\Program Files\Macromedia\Fireworks 8\Configuration\Commands\Export\Export Elements to PNG.jsf

To Use the Command
You will now have a new command group available Menu > Commands > Export. There is a menu entry with the same name as the filename you entered earlier, Export Elements to PNG

1. Select this new command to start the export of your layout.
2. A dialog box will appear. Select the destination folder for your individually exported files to be saved.
3. In the filename field enter a name that will be used as the filename prefix for any element that you did not name in the layers. An example would be SkinPart . Any unnamed elements will be saved as SkinPart 1.png, SkinPart2.png, etc.
4. Click Save

That's it! Now each piece of your layout is ready to be used as buttons or layout elements in xLobby.

Code: Select all

function exportAllElementsToPNG(){
   var dom = fw.getDocumentDOM();
   var filepath = fw.browseForFileURL("save");
   if (filepath == null) return false;
   var defaultname = Files.getFilename(filepath);
   filepath = Files.getDirectory(filepath);
   var elems = new Array().concat(fw.selection);
   dom.selectNone();
   
   dom.setDocumentCanvasColor("#ffffff00");
   var sXO = dom.exportOptions;
   var oldcrop = sXO.crop;
   sXO.crop = true;
   sXO.ditherMode="none";
   sXO.ditherPercent=100;
   sXO.exportFormat="PNG";
   sXO.colorMode = "32 bit";
   sXO.optimized = true;
   sXO.paletteTransparencyType="rgba";
 
   var f = dom.currentFrameNum;
   var n = dom.layers.length;
   var i, j, m, elem;
   
   var visArr = new Array();
   
   for (i=0; i<n; i++){
      if (dom.layers[i].layerType == "web" || dom.layers[i].frames[f].visible == false) continue;
      m = dom.layers[i].frames[f].elements.length;
      for (j=0; j<m; j++){
         elem = dom.layers[i].frames[f].elements[j];
         if (elem.visible) {
            elem.visible = false;
            visArr.push(elem);
         }else{
            visArr["_"+i+"_"+j] = true;
         }
      }
   }
   
   var rect, name, filename, counter = 1;
   for (i=0; i<n; i++){
      if (dom.layers[i].layerType == "web" || dom.layers[i].frames[f].visible == false) continue;
      m = dom.layers[i].frames[f].elements.length;
      for (j=0; j<m; j++){
         if (visArr["_"+i+"_"+j]) continue;
         elem = dom.layers[i].frames[f].elements[j];
         rect = elem.pixelRect;
         elem.visible = true;
         name = elem.name;
         if (name == null) name = defaultname + counter++;
         filename = filepath + "/" + name + ".png";
         sXO.cropLeft = rect.left;
         sXO.cropRight = rect.right;
         sXO.cropTop = rect.top;
         sXO.cropBottom = rect.bottom;
         fw.exportDocumentAs(dom, filename, sXO);
         elem.visible = false;
      }
   }
   
   i = visArr.length;
   while (i--) visArr[i].visible = true;
   
   sXO.crop = oldcrop;
   dom.lastExportDirectory = filepath;
   fw.selection = elems;
   return true;
}
exportAllElementsToPNG();