0 Replies Latest reply on Jul 10, 2009 9:01 PM by saveth

    Observed bloat issues with FXG


      First off I think FXG is great and really appreciate Adobe helping out the design community when it comes to Flex applications. That being said I have found some issues with generated FXG files from CS4 applications. I've been working a lot with FXG and Flash Builder 4 lately. I was curious how clean the markup was that Illustrator and other CS4 applications generate. I have to say there is a lot of useless markup that come along with saving to FXG.


      Observation 1

      The handling of gradients seems to be poorly implemented. Saving from illustrator generates the following code:

            <Ellipse width="15" height="15" ai:knockout="0">
                <LinearGradient x="7.5" y="15" scaleX="15" rotation="-90">
                  <GradientEntry color="#bcbcbc" ratio="0"/>
                  <GradientEntry color="#ffffff" ratio="1"/>

      I don't understand the need for the ai:knockout junk, if I'm going to be re-doing stuff in illustrator I'm just going to work with the original AI file instead of modifying the FXG so I don't see much utility to have FXG modifiable. This could just be me.


      The x/y coordinates have no affect I can notice while rendering along with the scaleX property because it knows it already from the height and width of the overall Ellipse.


      rotation should just be 90 and the colors should be flipped because I want white on top and my gray on the bottom along with the ratios flip flopped.


      Observation 2

      There is a lot of extra markup that is generated when you have a rounded rectangle in illustrator and it is saved as FXG. You get something that looks like the following:

                <Path winding="nonZero" ai:knockout="0" data="M15.5 30.5C7.229 30.5 0.5 23.7715 0.5 15.5 0.5 7.22852 7.229 0.5 15.5 0.5L512.5 0.5C520.771 0.5 527.5 7.22852 527.5 15.5 527.5 23.7715 520.771 30.5 512.5 30.5L15.5 30.5Z" >
                    <LinearGradient x="263.5" y="29.4414" scaleX="28.8819" rotation="-90">
                      <GradientEntry color="#1e1e1e" ratio="0"/>
                      <GradientEntry color="#272727" ratio="0.125"/>
                      <GradientEntry color="#303030" ratio="0.5"/>
                      <GradientEntry color="#272727" ratio="0.875"/>
                      <GradientEntry color="#1e1e1e" ratio="1"/>
                <Path winding="nonZero" ai:knockout="0" data="M512.5 1C520.495 1 527 7.50488 527 15.5 527 23.4951 520.495 30 512.5 30L15.5 30C7.50488 30 1 23.4951 1 15.5 1 7.50488 7.50488 1 15.5 1L512.5 1M512.5 0L15.5 0C6.93945 0 0 6.93945 0 15.5 0 24.0605 6.93945 31 15.5 31L512.5 31C521.061 31 528
       24.0605 528 15.5 528 6.93945 521.061 0 512.5 0L512.5 0Z" >
                    <SolidColor color="#303030"/>

      When the following does the job cleaner and easier to understand:

      <s:Rect height="31" radiusX="15.5" radiusY="15.5" width="528" x="266.7253" y="410.25">
                          <s:SolidColorStroke color="0x303030" />
                          <s:LinearGradient rotation="90">
                              <s:GradientEntry color="#1e1e1e" ratio="0" />
                              <s:GradientEntry color="#303030" ratio="0.5" />
                              <s:GradientEntry color="#1e1e1e" ratio="1" />

      Observation 3

      I don't want this to be a huge post so I will just say there is a ton of over grouping of items.


      Thanks for taking the time to listen to me gripe. As I said before I love the new directions Adobe is taking Flex and the addition of FXG support adds so much value to the product. If some of these smaller issues can be resolved it will make it even better.