FXGTools - first cut

[OmPrakash Muppirala <bi...@gmail.com>]

I have just checked in the flex-utilities/FXGTools project which supports
the following:

a) Converting an FXG file containing a Library of symbols (created in Adobe
Illustrator) into individual FXG files
b) Optimize i.e. clean up the FXG generated by tools like AI, Photoshop,
etc. by removing the unnecessary Group nodes.

My plan is to keep adding more functionalities to this tool and hopefully
write a plugin for Illustrator, Fireworks, Photoshop, etc.  The UI is very
barebones but that will change soon.

The 'optimized' portion of the tool can be used on our FXG skins that ship
with the Flex sdk.  There were concerns about the performance implications
of the unnecessary group elements created by the image editing tools.

Feedback and requests for features would be wonderful.

Thanks,
Om

Re: FXGTools - first cut

[jude <fl...@gmail.com>]

Does this work in conjunction with the export to FXG features already in
PS, AI? Are they still there? I'm using PS5.5 and don't plan to upgrade
since I've heard the FXG support has been removed in newer versions.

I like both features you've mentioned but I have had issues in the past
with PS mock ups. They usually contain only the up state and exclude the
over, down and disabled states. Flash Catalyst deals with this by showing
you the states of the component you're skinning and what you hasn't been
skinned so far.

Here are some features I can think of. I would use a few of these now and
might have used the others in past projects:

• add the option to convert it to MXML ie change this <Group to <s:Group
• add the option to remove all AI and PS data from the XML
• check for or ask for component type on export and flag if states are
missing (up, over, down, disabled) or let user then identify the states.
this would require some work on your part and the designers part. they may
need a naming convention, "up_group" for a folder name. or they select what
layers are visible in each state.
• when exporting the FXG into files create a simple skin as well.
<skin>
<states><state name="up"/><state name="over"/><state name="down"/><state
name="disabled"/></states>
<fxg:Up includeIn="up"/>
<fxg:Over includeIn="over"/>
<fxg:Down includeIn="down"/>
<fxg:Disabled includeIn="disabled/>
</skin>
• OR export the CSS and a simple skin to switch the fxg:
        s|Image:up {
            skinFXG: "assets/upImage.fxg";
        }
        s|Image:over {
            skinFXG: "assets/downImage.fxg";
        }
        s|Image:down {
            skinFXG: "assets/overImage.fxg";
        }

<skin>
<bitmapimage source="{getStyle('skinFXG')}" width=100% height=100% /><!--i
think this works :P-->
</skin>
• add IDs to symbol
• embed fxg as into a SWF (possibly embed the skins as well)
• export the CSS to use the FXG
• add the option to export the FXG as png's
• add the option to transform FXG to SVG and CSS (for possible future Flex
JS) similar to your earlier experiments. i think i read something that
someone is doing something like this already but straight from the tools
(not FXG). what isn't being done is FXG to SVG for the purposes of creating
HTML skins from preexisting Flex skins.

I think the main thing for me is somehow tying all the FXG together with a
skin. I haven't created a lot of skins from PS lately but I was thinking
about creating a iOS skin set / theme and I had been writing that manually
in FXG / MXMLG by looking at the PS layers and filters. I might have
exported some FXG. It didn't go well. Scaling was an big issue. Actually,
what is your workflow and goals? What are you trying to solve or reuse?

• add option to add code that will automatically scale the contents when
converting to MXMLG or possibly on the graphic. i've done this a few times
and instead of the graphic being a set height or width it scales up or down
when width and height is set to 100%. i haven't seen this documented
anywhere (i might have at one time) but i've done it by removing viewWidth
and viewHeight and making a few other changes. it makes the skin scale with
the component.



On Wed, Jul 31, 2013 at 4:26 AM, OmPrakash Muppirala
<bi...@gmail.com>wrote:

> I have just checked in the flex-utilities/FXGTools project which supports
> the following:
>
> a) Converting an FXG file containing a Library of symbols (created in Adobe
> Illustrator) into individual FXG files
> b) Optimize i.e. clean up the FXG generated by tools like AI, Photoshop,
> etc. by removing the unnecessary Group nodes.
>
> My plan is to keep adding more functionalities to this tool and hopefully
> write a plugin for Illustrator, Fireworks, Photoshop, etc.  The UI is very
> barebones but that will change soon.
>
> The 'optimized' portion of the tool can be used on our FXG skins that ship
> with the Flex sdk.  There were concerns about the performance implications
> of the unnecessary group elements created by the image editing tools.
>
> Feedback and requests for features would be wonderful.
>
> Thanks,
> Om
>