8

The only FXG editor I've seen for Flex is by 7jigen, works online or as a Flex app.

Does anyone know of a different one? It can be done in Illustrator I think, but that doesn't really offer a simple export to Flex type option, just gives coordinates.

enter image description here

approxiblue
  • 6,982
  • 16
  • 51
  • 59
Drenai
  • 11,315
  • 9
  • 48
  • 82
  • I removed the new tag request, as someone has added [fxg] to the question, and fixed some minor stuff ("doesnt" > "doesn't"). – approxiblue Oct 31 '15 at 17:00

4 Answers4

15

As far as I know your best bet (if you don't want to use Illustrator) is to grab Inkscape and install the "save as FXG" plug-in. Hats off to JazzyNico for writing what is basically a monster SVG to FXG "XSL Transform" (i.e. XSLT).

How to install:

  1. Install Inkscape.
  2. Grab the plug-in files svg2fxg.inx and svg2fxg.xsl.
  3. Drop both files in your Inkscape "extensions" folder.

    • In GNU/Linux: $HOME/.config/inkscape/extensions
    • In Windows: C:\Documents and Settings\User\Application Data\Inkscape\extensions
    • In OSX: /Applications/Inkscape.app/Contents/Resources/extensions
  4. Restart Inkscape and you'll find a new FXG entry in the "File > Save As" dialog.

This plugin has been a boon for me and my work, since I've become quite comfortable with Inkscape over the years.

Unfortunately (and this may just be my setup), I've found that whenever I save as FXG, a few minutes later Inkscape crashes out (I really should post a bug report). Just in case you have the same problem, make sure you go to the "Save" preferences and turn on auto-backup. Also, keep in mind that certain constructs in SVG have no equivalent in FXG. Don't ask me what they are, I honestly can't remember.

approxiblue
  • 6,982
  • 16
  • 51
  • 59
RIAGrande
  • 326
  • 3
  • 9
3

I have used this process to generate a ton of FXG assets that I have imported into my Flex projects.

1. Draw the shape in Flash CS5
2. Break the shape apart (Ctrl+B)
3. Select the shape
4. File -> Export -> Export Selection
5. Save as FXG

You can then import them directly into Flex and voila! Good to go!

simpulton
  • 29
  • 2
3

Use Inkscape SVG editor: it will allows you to convert svg to fxg starting version 0.49 thanks to the svg2fxg plug-in.

In the mean time (version 0.48) you can install the svg2fxg plug-in manually as explained by RIAGrande:

  1. Install Inkscape http://inkscape.org/download/

  2. Get the 2 svg2fxg plug-in files from here (from head repository):

    http://bazaar.launchpad.net/~inkscape.dev/inkscape/trunk/view/head:/share/extensions/svg2fxg.inx

    http://bazaar.launchpad.net/~inkscape.dev/inkscape/trunk/view/head:/share/extensions/svg2fxg.xsl

  3. and copy them in Inkscape extension folder (C:\Program Files (x86)\Inkscape\share\extensions on Windows 7)

You can now start Inkscape and will get a new "File -> Save As -> Flash XML graphics (*.svg)" entry.

I successfully tested it and used the fxg generated assets in on IPhone: it works fine :-)

Pascal
  • 15,257
  • 2
  • 52
  • 65
  • Is this the same as the answer by myself? Or has the updates by inkscape made it easier – Drenai Nov 09 '11 at 09:11
  • The point in my answer is that the svg extensions should be get from head repository, and not using RIAGrande's links. Head versions seems more stables (no crashes for me). For the rest, the answer is basically the same. – Pascal Dec 21 '11 at 07:04
1

Firstly, RIAGrande's answer is correct. I followed his steps and they worked. Here is a little more information for future reference:

The Inkscape bug report for FXG with downloads available under Patches can be found at https://bugs.launchpad.net/inkscape/+bug/625140. These files (when uncompressed) should be copied to the location mentioned by RIAGrande

I made my little icon, but he exported FXG file was not indented, so used http://xmlindent.com/ to fomat the file, Downloaded, copied to my project in Flash Builder and renamed as .fxg file.

To use the FXG file, did the following:

<s:Group>
    <local:fxgInkscapeIcon height="100" width="100" x="50" y="50"/> 
</s:Group>

For posterity, here is the icon and resulting Inkscape FXG code:

Image created in Inkscape

<?xml version="1.0" encoding="UTF-8"?>
<Graphic xmlns="http://ns.adobe.com/fxg/2008" xmlns:fxg="http://ns.adobe.com/fxg/2008" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd" version="2.0" viewWidth="16" viewHeight="16">
    <mask>
        <Group>
            <Rect width="16" height="16">
                <fill>
                    <SolidColor color="#ffffff" alpha="1"/>
                </fill>
            </Rect>
        </Group>
    </mask>
    <!--Unknown tag: defs-->
    <!--Unknown tag: sodipodi:namedview-->
    <!--Unknown tag: metadata-->
    <Group id="layer1">
        <Group id="g3219">
            <Path data="m 3.4494939 4.7212002 2.7832822 -2.6455548 0 3.6343941 -2.7832822 1.0225951 z" winding="evenOdd" id="path3231">
                <fill>
                    <SolidColor color="#E9E9FF" alpha="1"/>
                </fill>
            </Path>
            <Path data="m 2.4777228 4.4673265 0 2.1671775 0.9717711 0.098131 0 -2.0114344 z" winding="evenOdd" id="path3221">
                <fill>
                    <SolidColor color="#353564" alpha="1"/>
                </fill>
            </Path>
            <Path data="M 2.4777228 4.4673265 4.7752476 1.1915748 6.2327761 2.0756454 3.4494939 4.7212002 z" winding="evenOdd" id="path3223">
                <fill>
                    <SolidColor color="#4D4D9F" alpha="1"/>
                </fill>
            </Path>
            <Path data="M 2.4777228 6.634504 4.7752476 5.3683167 6.2327761 5.7100395 3.4494939 6.7326346 z" winding="evenOdd" id="path3229">
                <fill>
                    <SolidColor color="#AFAFDE" alpha="1"/>
                </fill>
            </Path>
            <Path data="m 4.7752476 1.1915748 0 4.1767419 1.4575285 0.3417228 0 -3.6343941 z" winding="evenOdd" id="path3227">
                <fill>
                    <SolidColor color="#D7D7FF" alpha="1"/>
                </fill>
            </Path>
            <Path data="m 2.4777228 4.4673265 2.2975248 -3.2757517 0 4.1767419 -2.2975248 1.2661873 z" winding="evenOdd" id="path3225">
                <fill>
                    <SolidColor color="#8686BF" alpha="1"/>
                </fill>
            </Path>
        </Group>
        <Group id="g3233">
            <Path data="M 2.7930693 12.065864 4.7752475 14.951316 6.232776 14.048691 3.8532769 11.73947 z" winding="evenOdd" id="path3243">
                <fill>
                    <SolidColor color="#AFAFDE" alpha="1"/>
                </fill>
            </Path>
            <Path data="m 2.7930693 9.5192088 0 2.5466552 1.0602076 -0.326394 0 -2.3422182 z" winding="evenOdd" id="path3235">
                <fill>
                    <SolidColor color="#353564" alpha="1"/>
                </fill>
            </Path>
            <Path data="m 3.8532769 9.3972518 2.3794991 0.8628392 0 3.7886 -2.3794991 -2.309221 z" winding="evenOdd" id="path3245">
                <fill>
                    <SolidColor color="#E9E9FF" alpha="1"/>
                </fill>
            </Path>
            <Path data="M 2.7930693 9.5192088 4.7752475 10.597357 6.232776 10.260091 3.8532769 9.3972518 z" winding="evenOdd" id="path3237">
                <fill>
                    <SolidColor color="#4D4D9F" alpha="1"/>
                </fill>
            </Path>
            <Path data="m 4.7752475 10.597357 0 4.353959 1.4575285 -0.902625 0 -3.7886 z" winding="evenOdd" id="path3241">
                <fill>
                    <SolidColor color="#D7D7FF" alpha="1"/>
                </fill>
            </Path>
            <Path data="m 2.7930693 9.5192088 1.9821782 1.0781482 0 4.353959 -1.9821782 -2.885452 z" winding="evenOdd" id="path3239">
                <fill>
                    <SolidColor color="#8686BF" alpha="1"/>
                </fill>
            </Path>
        </Group>
        <Group id="g3247">
            <Path data="M 4.7301981 10.623124 8.739604 12.846535 10.29713 11.806839 6.1815487 10.285313 z" winding="evenOdd" id="path3257">
                <fill>
                    <SolidColor color="#800080" alpha="1"/>
                </fill>
            </Path>
            <Path data="m 4.7301981 5.3683167 0 5.2548073 1.4513506 -0.337811 0 -4.5780822 z" winding="evenOdd" id="path3249">
                <fill>
                    <SolidColor color="#800080" alpha="1"/>
                </fill>
            </Path>
            <Path data="M 6.1815487 5.7072308 10.29713 4.18074 l 0 7.626099 -4.1155813 -1.521526 z" winding="evenOdd" id="path3259">
                <fill>
                    <SolidColor color="#800080" alpha="1"/>
                </fill>
            </Path>
            <Path data="M 4.7301981 5.3683167 8.739604 3.1376518 10.29713 4.18074 6.1815487 5.7072308 z" winding="evenOdd" id="path3251">
                <fill>
                    <SolidColor color="#800080" alpha="1"/>
                </fill>
            </Path>
            <Path data="m 8.739604 3.1376518 0 9.7088832 1.557526 -1.039696 0 -7.626099 z" winding="evenOdd" id="path3255">
                <fill>
                    <SolidColor color="#800080" alpha="1"/>
                </fill>
            </Path>
            <Path data="m 4.7301981 5.3683167 4.0094059 -2.2306649 0 9.7088832 -4.0094059 -2.223411 z" winding="evenOdd" id="path3253">
                <fill>
                    <SolidColor color="#800080" alpha="1"/>
                </fill>
            </Path>
        </Group>
        <Path data="M 6.7296153 11.713583 4.7609632 10.626386 4.7586994 8.0107245 4.7564356 5.3950627 4.88976 5.2964917 c 0.073328 -0.054214 0.1452487 -0.098571 0.1598229 -0.098571 0.021999 0 0.9221556 -0.4946803 1.1484369 -0.6311227 C 6.2351856 4.544388 6.5155757 4.3883429 6.8211089 4.2200312 7.1266421 4.0517194 7.4712708 3.8603428 7.5869505 3.7947497 7.8155129 3.6651495 8.0560806 3.5353764 8.3378713 3.3896691 8.4369802 3.3384223 8.5536701 3.2649336 8.5971821 3.226361 c 0.043512 -0.038573 0.089217 -0.060028 0.1015661 -0.047679 0.012349 0.012349 0.017293 2.1823735 0.010986 4.822276 l -0.011467 4.7998228 -1.968652 -1.087198 z" winding="nonZero" id="path3261">
            <fill>
                <SolidColor color="#FF00FF" alpha="1"/>
            </fill>
        </Path>
        <Path data="m 2.5039603 5.4963957 c 0 -0.6060218 0.015204 -1.1086152 0.033787 -1.1168743 0.052529 -0.023346 0.2815594 -0.3415436 0.2815594 -0.3911774 0 -0.024366 0.015204 -0.051058 0.033787 -0.059318 0.052529 -0.023346 0.2815594 -0.3415436 0.2815594 -0.3911774 0 -0.024366 0.015204 -0.051059 0.033787 -0.059318 C 3.2209698 3.455185 3.45 3.1369877 3.45 3.0873539 c 0 -0.024366 0.015204 -0.051058 0.033787 -0.059318 0.052529 -0.023346 0.2815594 -0.3415435 0.2815594 -0.3911773 0 -0.024366 0.01689 -0.051059 0.037534 -0.059318 0.020644 -0.00826 0.2131642 -0.26842 0.4278232 -0.5781353 0.214659 -0.3097154 0.4207638 -0.6027185 0.4580106 -0.6511181 0.060562 -0.078696 0.067721 0.1266999 0.067721 1.942875 0 1.5702733 -0.012771 2.0412475 -0.056312 2.0766116 C 4.6691522 5.3929299 4.2485024 5.6303359 3.7653465 5.8953434 3.2821906 6.1603507 2.800724 6.4269177 2.6954207 6.4877142 l -0.1914604 0.1105394 0 -1.1018579 z" winding="nonZero" id="path3263">
            <fill>
                <SolidColor color="#00FF00" alpha="1"/>
            </fill>
        </Path>
        <Path data="M 3.7705821 13.453243 2.8195554 12.06797 2.8194311 10.814691 2.8193069 9.5614117 3.1684406 9.7516131 c 0.1920235 0.1046107 0.5473426 0.2988019 0.789598 0.4315359 0.2422554 0.132735 0.4644582 0.246219 0.493784 0.252187 0.055299 0.01126 0.1254459 0.05844 0.2386022 0.160481 0.056179 0.05066 0.066011 0.371061 0.066011 2.151114 0 1.150371 -0.00784 2.091584 -0.017413 2.091584 -0.00958 0 -0.4453754 -0.623373 -0.9684401 -1.385272 z" winding="nonZero" id="path3265">
            <fill>
                <SolidColor color="#FF0000" alpha="1"/>
            </fill>
        </Path>
        <Path data="m 2.5251337 5.4884758 0.033034 -1.06093 0.1780729 -0.256768 C 2.8341803 4.0295554 2.9845892 3.8126485 3.0704822 3.6887623 3.1563752 3.5648762 3.2921089 3.3701098 3.3721127 3.2559482 3.4521166 3.1417866 3.6000512 2.9289277 3.7008563 2.7829284 3.8016614 2.6369291 4.0652011 2.2657195 4.2864999 1.958018 l 0.4023615 -0.5594572 0.022525 0.942378 c 0.012389 0.5183079 0.012389 1.4067712 0 1.9743628 L 4.6888614 5.3472865 3.6144 5.9483464 C 3.0234462 6.2789291 2.5291749 6.5494059 2.5160193 6.5494059 c -0.013156 0 -0.00905 -0.4774184 0.00911 -1.0609301 z" winding="nonZero" id="path3267">
            <fill>
                <SolidColor color="#FF0000" alpha="1"/>
            </fill>
        </Path>
    </Group>
</Graphic>
Drenai
  • 11,315
  • 9
  • 48
  • 82