Programmatically slicing an image in Fireworks and exporting on whole transparent background, to form a layering effect

Question

I have a large image made up of lots of smaller ones that I want to slice up and export. This can be done with slices, but unfortunately this will export only the cropped image -- I want the whole canvas to be present for each export, with the slice in place, meaning I could overlay each individual export and have the original picture, but in separate layers.

This can't be done with the Fireworks GUI. How can I do this programmatically?

Answer 1

First of all create a white rectangle and place it over the first point you wish to slice. Select both of them and choose Modify -> Mask -> Group as Mask. At this point make sure your canvas is also transparent. Now, run the following code (I used Fireworks Console):

for (y=0;y<14;y++){
    for (x=0;x<20;x++) {
        dom.exportTo("file:///C|/mypath/img/" + ("00"+y).slice(-2) + ("00"+x).slice(-2) + ".png", null);
        if (x == 19) {
            offsetX = -475;
            if (y == 6) {
                offsetY = 425;
            } else {alert('y is 25');
                offsetY = 25;
            }
        } else {
            offsetX = 25;
            offsetY = 0;
        }
        dom.moveElementMaskBy({x: offsetX, y: offsetY});
    }
}

Note: The loops here are bespoke to my needs - you can move it around as you want, even with an array of deltas ({x: offsetX, y: offsetY}) in a loop. Also note the ("00"+y).slice(-2) is just a quicky, dirty method of zerofilling and by no means the fastest way to do it - but in a throwaway script like this, no problem.