No description or website provided.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Fw to JSON.jsf
LICENSE
README.ja.md
README.md
utilities.fss

README.md

Fireworks to JSON

JSON to Layers HERO

This command can export structure of the Fireworks PNG as a JSON file.

I have not test on Windows. Please send a report.

TL;DR: Fireworks to Sketch 3 — QuickCast.

Instllation

Download the plugin zip and unzip, rename "Fw-to-JSON-master" to "Fw to JSON". And put the fonlder to the Fireworks "Commands" folder.

Usage

  1. Open the Firworks document.
  2. Commands › Fw to JSON › Fw to JSON.
  3. Select export folder.
  4. Export completion when displayed alert.

Note

  • You have to revert the document. Because symbol is detach instance, you don't save absolutely the document.
  • If you have installed "Fireworks Console" and "DOM Inspector", Please disable.
  • This command looks for the original texture and pattern file.
  • Patterned fill is exported as Fireworks PNG file.
  • Bitmap export as it is.

JSON Format

Top Level Properties

{
    "fileVersion": "1.0.0",
    "documentSetting": {},
    "pages": [],
    "symbols": {},
    "resExportedDir": "fw2json-exported-document name"
}

"documentSetting" Properties

{
    "documentSetting": {
        "grid": {
            "gridSize": {
                "x": 36,
                "y": 36
            },
            "gridOrigin": {
                "x": 0,
                "y": 0
            }
        },
        "pageCount": 1,
        "docName": "document name (without extension)"
    }
}

"pages" Properties

{
    "pages": [
        {
            "pageName": "page name",
            "backgroundColor": "#ffffff",
            "width": 500,
            "height": 500,
            "guides": {
                "x": [10, 20, 30],
                "y": [50, 60]
            },
            "frames": []
        }
    ]
}

"symbols" Properties

  • elements: same elems
{
    "key_name": {
        "symbolName": "Original Symbol Name",
        "width": 75,
        "height": 75,
        "top": 31,
        "left": 387
        "elements": [],
    }
}

"frames" Properties

{
    "frame": [
        {
            "toplayers": [{}]
        }
    ]
}

"topLayers" Properties

{
    "topLayers": [
        {
            "name": "layer name",
            "type": "layer",
            "locked": false,
            "visible": true,
            "parentLayerNum": -1,
            "hasChildren": true,
            "elems": []
        }
    ]
}

"elems" Properties (common properties)

  • layer
  • rectangle
  • text
  • path
  • group
  • symbol
  • slice
  • layer
  • bitmap

"type = layer" Properties

parentLayerNum: Array index of parent layer. -1 is topLayer.

{
    "elems": [
        {
            "type": "layer",
            "name": "layer name",
            "visible": true,
            "locked": false,
            "parentLayerNum": -1,
            "hasChildren": true
        }
    ]
}

"type = rectangle" Properties (same common properties)

  • pathAttributes: [object]
  • effectList: [object|null]
  • mask: [object|null]
{
    "elems": [
        {
            "type": "rectangle",
            "name": "elems name",
            "width": 100,
            "height": 100,
            "top": 300,
            "left": 300,
            "blendMode": "normal",
            "opacity": 100,
            "visible": true,
            "locked": false,
            "pixelRect": {
                "left": 300,
                "right": 400,
                "top": 300,
                "bottom": 400
            },
            "transform": {
                "matrix": [1, 0, 0, 0, 1, 0, 0, 0, 1]
            },
            "pathAttributes": {},
            "effectList": {},
            "mask": {}
        }
    ]
}

"type = symbol" Properties

{
    "elems": [
        {
            "type": "symbol",
            "name": "symbol instance name",
            "width": 100,
            "height": 100,
            "top": 0,
            "left": 0,
            "blendMode": "normal",
            "opacity": 100,
            "visible": true,
            "locked": false,
            "pixelRect": {
                "left": 0,
                "right": 100,
                "top": 0,
                "bottom": 100
            },
            "symbolName": "symbol name",
            "symbolID": "symbolID",
            "elements": "key_name"
        }
    ]
}

"type = bitmap" Properties

{
    "elems": [
        {
            "type": "bitmap",
            "name": "bitmap layer name",
            "width": 100,
            "height": 100,
            "top": 0,
            "left": 0,
            "blendMode": "normal",
            "opacity": 100,
            "visible": true,
            "locked": false,
            "pixelRect": {
                "left": 0,
                "right": 100,
                "top": 0,
                "bottom": 100
            },
            "uri": "file:///path/to/resource-1.png"
        }
    ]
}

"type = text" Properties

{
    "elems": [
        {
            "type": "text",
            "name": "text layer name",
            "width": 179,
            "height": 17,
            "top": 642,
            "left": 123,
            "blendMode": "normal",
            "opacity": 100,
            "visible": true,
            "locked": false,
            "pixelRect": {
                "left": 125,
                "right": 300,
                "top": 646,
                "bottom": 657
            },
            "transform": {
                "matrix": [1, 0, 0, 0, 1, 0, 0, 0, 1]
            },
            "pathAttributes": {},
            "effectList": {},
            "mask": {},
            "rawHeight": 13,
            "rawWidth": 175,
            "rawTop": 644,
            "rawLeft": 125,
            "autoExpand": true,
            "antiAliasMode": "smooth",
            "antiAliased": true,
            "autoKern": true,
            "orientation": "horizontal left to right",
            "textChars": "text value",
            "fontFace": "AvenirNext-Bold",
            "fontSize": "11",
            "alignment": "right",
            "underline": false,
            "fillColor": "#5a3f35",
            "baselineShift": 0,
            "paragraphIndent": 0,
            "paragraphSpacingBefore": 0,
            "paragraphSpacingAfter": 0,
            "leading": 31.9,
            "textRuns": [
                {
                    "characters": "text value",
                    "size": "11",
                    "face": "AvenirNext-Bold",
                    "bold": false,
                    "italic": false,
                    "underline": false,
                    "fillColor": "#5a3f35",
                    "baselineShift": 0,
                    "leading": 31.9
                }
            ]
        }
    ]
}

"type = group" Properties

  • elements: same elmes properties
{
    "elems": [
        {
            "type": "group",
            "name": "group layer name",
            "width": 100,
            "height": 100,
            "top": 0,
            "left": 0,
            "blendMode": "normal",
            "opacity": 100,
            "visible": true,
            "locked": false,
            "pixelRect": {
                "left": 0,
                "right": 100,
                "top": 0,
                "bottom": 100
            },
            "effectList": {},
            "mask": {},
            "elements": []
        }
    ]
}

"type = slice" Properties

{
    "elems": [
        {
            "type": "slice",
            "name": "slice layer name",
            "width": 100,
            "height": 100,
            "top": 0,
            "left": 0,
            "blendMode": "normal",
            "opacity": 100,
            "visible": true,
            "locked": false,
            "pixelRect": {
                "left": 0,
                "right": 100,
                "top": 0,
                "bottom": 100
            },
            "baseName": "export name",
            "exportOptions": {
                "exportFormat": "PNG",
                "jpegQuality": 80
            }
        }
    ]
}

"type = path" Properties

{
    "elems": [
        {
            "type": "path",
            "name": "path",
            "width": 1.9254150390625,
            "height": 3.3251953125,
            "top": 583.602783203125,
            "left": 342.29315185546875,
            "blendMode": "normal",
            "opacity": 100,
            "visible": true,
            "locked": false,
            "pixelRect": {
                "left": 342,
                "right": 345,
                "top": 583,
                "bottom": 587
            },
            "pathAttributes": {},
            "effectList": {},
            "mask": {},
            "bezierPath": [
                {
                    "isClosed": true,
                    "nodes": [
                        {
                            "isCurvePoint": false,
                            "x": 342.5592041015625,
                            "y": 585.4647216796875,
                            "succX": 342.5592041015625,
                            "succY": 585.4647216796875,
                            "predX": 342.5592041015625,
                            "predY": 585.4647216796875
                        },
                        {
                            "isCurvePoint": false,
                            "x": 343.86846923828125,
                            "y": 583.602783203125,
                            "succX": 343.86846923828125,
                            "succY": 583.602783203125,
                            "predX": 343.86846923828125,
                            "predY": 583.602783203125
                        },
                        {
                            "isCurvePoint": false,
                            "x": 344.21856689453125,
                            "y": 583.7606811523438,
                            "succX": 344.21856689453125,
                            "succY": 583.7606811523438,
                            "predX": 344.21856689453125,
                            "predY": 583.7606811523438
                        },
                        {
                            "isCurvePoint": false,
                            "x": 342.29315185546875,
                            "y": 586.927978515625,
                            "succX": 342.29315185546875,
                            "succY": 586.927978515625,
                            "predX": 342.29315185546875,
                            "predY": 586.927978515625
                        }
                    ]
                }
            ]
        }
    ]
}

"pathAttributes" Properties

  • brush: [object|null]
  • brushColor: [#RRGGBB|#RRGGBBAA]
  • brushTexture: [object|null]
  • fill: [object|null]
  • fillColor: [#RRGGBB|#RRGGBBAA]
  • fillTexture: [object|null]
  • fillType: [flat|gradient|pattern|null]
{
    "pathAttributes": {
        "brush": {},
        "brushColor": "#3d6b3a",
        "brushPlacement": "center",
        "brushTexture": {},
        "fill": {},
        "fillColor": "#578199",
        "fillHandle1": {
            "x": 259.8141174316406,
            "y": 613.6799926757812
        },
        "fillHandle2": {
            "x": 270.8706359863281,
            "y": 613.6762084960938
        },
        "fillHandle3": {
            "x": 259.62554931640625,
            "y": 585.099609375
        },
        "fillOnTop": false,
        "fillType": "pattern"
        "fillTexture": {},
    }
}

"brush" Properties

{
    "brush": {
        "alphaRemap": "none",
        "angle": 0,
        "antiAliased": false,
        "aspect": 100,
        "blackness": 38,
        "category": "bc_Charcoal",
        "concentration": 100,
        "dashOffSize1": 4,
        "dashOffSize2": 4,
        "dashOffSize3": 4,
        "dashOnSize1": 40,
        "dashOnSize2": 2,
        "dashOnSize3": 2,
        "diameter": 3,
        "feedback": "brush",
        "flowRate": 0,
        "maxCount": 14,
        "minSize": 30,
        "name": "bn_Creamy",
        "numDashes": 0,
        "sense_hdir_angle": 0,
        "sense_hdir_blackness": 0,
        "sense_hdir_hue": 0,
        "sense_hdir_lightness": 0,
        "sense_hdir_opacity": 0,
        "sense_hdir_saturation": 0,
        "sense_hdir_scatter": 0,
        "sense_hdir_size": 0,
        "sense_pressure_angle": 0,
        "sense_pressure_blackness": 60.2,
        "sense_pressure_hue": 0,
        "sense_pressure_lightness": 0,
        "sense_pressure_opacity": 50,
        "sense_pressure_saturation": 0,
        "sense_pressure_scatter": 9.4,
        "sense_pressure_size": 89.8,
        "sense_random_angle": 0,
        "sense_random_blackness": 0,
        "sense_random_hue": 0,
        "sense_random_lightness": 0,
        "sense_random_opacity": 0,
        "sense_random_saturation": 0,
        "sense_random_scatter": 6.3,
        "sense_random_size": 0,
        "sense_speed_angle": 0,
        "sense_speed_blackness": 50,
        "sense_speed_hue": 0,
        "sense_speed_lightness": 0,
        "sense_speed_opacity": 0,
        "sense_speed_saturation": 0,
        "sense_speed_scatter": 0,
        "sense_speed_size": 79.7,
        "sense_vdir_angle": 0,
        "sense_vdir_blackness": 0,
        "sense_vdir_hue": 0,
        "sense_vdir_lightness": 0,
        "sense_vdir_opacity": 0,
        "sense_vdir_saturation": 0,
        "sense_vdir_scatter": 0,
        "sense_vdir_size": 0,
        "shape": "circle",
        "softenMode": "bell curve",
        "softness": 0,
        "spacing": 31,
        "textureBlend": 36,
        "textureEdge": 96,
        "tipColoringMode": "random",
        "tipCount": 4,
        "tipSpacing": 0,
        "tipSpacingMode": "random",
        "type": "natural"
    }
}

"fill" Properties

  • gradient: [object|null]
  • pattern: [object|null]
{
    "fill": {
        "category": "fc_Pattern",
        "ditherColors": [
            "#000000",
            "#000000"
        ],
        "edgeType": "antialiased",
        "feather": 0,
        "gradient": {},
        "name": "pattern",
        "pattern": {},
        "shape": "pattern",
        "stampingMode": "blend opaque",
        "textureBlend": 0,
        "webDitherTransparent": false
    }
}
"gradient" Properties
{
    "gradient": {
        "dither": false,
        "name": "cn_BlackWhite",
        "nodes": [
            {
                "color": "#ff0000",
                "isOpacityNode": false,
                "position": 0
            },
            {
                "color": "#00ff00",
                "isOpacityNode": false,
                "position": 0.5
            },
            {
                "color": "#0000ff",
                "isOpacityNode": false,
                "position": 1
            }
        ],
        "opacityNodes": [
            {
                "color": "#00000023",
                "isOpacityNode": true,
                "position": 0.19697000086307526
            },
            {
                "color": "#000000",
                "isOpacityNode": true,
                "position": 0.5
            },
            {
                "color": "#00000089",
                "isOpacityNode": true,
                "position": 0.8030300140380859
            }
        ],
        "gradientType": "linear"
    }
}
"pattern" Properties
{
    "pattern": {
        "image": null,
        "name": "Impressionist-Blue",
        "patternURI": "file:///path/to/resource/resource-1.png",
        "filePath": false,
        "alias": "Impressionist_Blue"
    }
}
"fillTexture" Properties
{
    "fillTexture": {
        "name": "Grid 4",
        "filePath": "file:///path/to/resource/Grid_4.png",
        "alias": "Grid_4"
    }
}

"mask" Properties

{
    "mask": {
        "mode": "mask to image",
        "element": []
    }
}

Bug reports

  1. Submit via Github issues with the version of your OS and Fireworks.

Lisence

This software is released under the MIT License, see LICENSE.