Nice! I have had to manually remove all of that whenever I create a new skin.
On Tue, Aug 5, 2014 at 5:53 PM, OmPrakash Muppirala <bigosma...@gmail.com> wrote: > On Tue, Aug 5, 2014 at 3:45 PM, jude <flexcapaci...@gmail.com> wrote: > > > How is FXG broken? Do you mean when you paste it into each of these > > different places they all render differently? If that's true that's > because > > they are converting to their own internal representation. Flash Catalyst > > was great at cleaning up the exported FXG from Illustrator. I would > create > > a vector in Illustrator, go to save (as FXG) and copy the FXG to the > > clipboard, then in FC paste and it would pop open a dialog that let you > > choose how to handle the import. For example, it would rasterize some > > things if you didn't tell it not to. > > > > But I agree that it would not always look the same as the original in > > Illustrator. I think FXG is supposed to be better than SVG (at least 1.0 > > SVG). > > > > > I wrote this tool [1] that cleans up FXG created by Illustrator. I have > been using it successfully for my personal projects and for the Android 4.x > skinning I have been working on for Apache Flex. > > The tool does the following: > > 1. For each Symbol in the Symbols library, creates a new .FXG file > 2. Removes all unnecessary AI related stuff > 3. Removes unnecessary nested Groups. > > I hope others will find this tool useful as well. > > Thanks, > Om > > [1] > > https://github.com/apache/flex-utilities/blob/develop/FXGTools/src/WriteFXG.mxml > > > > > > > On Tue, Aug 5, 2014 at 1:59 PM, Jason Taylor <ja...@dedoose.com> wrote: > > > > > I have found inscape to be very good. FXG is a broken format afaik as > > > flash, illustrator, and flex seem to all do different things depending > on > > > the version. The route I then chose was to go with SVG. Flex's native > > > support of SVG initially was a bit lacking so we developed a component > to > > > better support that. Once vector SVGs were handled well, it has been > > easy > > > to make vector based skins in either Illustrator, or Inkscape (the only > > 2 I > > > tried). When saving the svg from inkscape, as as Optimized SVG. > > > > > > Following is the VectorImage I use for displaying SVG's in flex. Some > of > > > this code was borrowed from a stack overflow answer, and a lot was > > modified > > > to make it work in our use cases. Good luck! > > > > > > ~ JT > > > > > > > > > import flash.display.DisplayObject; > > > import flash.geom.Rectangle; > > > import mx.core.UIComponent; > > > import spark.primitives.Rect; > > > > > > public class VectorImage extends UIComponent > > > { > > > private var _scaleUniform:Boolean = true; > > > > > > public function VectorImage(source:Class = null) > > > { > > > if(source){ > > > this.source = source; > > > } > > > super(); > > > } > > > > > > private var _source : Class; > > > protected var sourceChanged :Boolean = true; > > > > > > > > > public function get source():Class > > > { > > > return _source; > > > } > > > > > > public function set source(value:Class):void > > > { > > > _source = value; > > > sourceChanged = true; > > > this.commitProperties(); > > > invalidateDisplayList(); > > > } > > > > > > protected var imageInstance : DisplayObject; > > > > > > > > > override protected function createChildren():void{ > > > super.createChildren(); > > > > > > // if the source has changed we want to create, or > > > recreate, the image instance > > > if(this.sourceChanged){ > > > // if the instance has a value, then delete it > > > if(this.imageInstance){ > > > this.removeChild(this.imageInstance); > > > this.imageInstance = null; > > > } > > > > > > // if we have a source value; create the source > > > if(this.source){ > > > this.imageInstance = new source(); > > > this.addChild(this.imageInstance); > > > } > > > this.sourceChanged = false; > > > > > > } > > > } > > > > > > /** > > > * @private > > > */ > > > override protected function commitProperties():void{ > > > super.commitProperties(); > > > > > > if(this.sourceChanged){ > > > // if the source changed re-created it; which > is > > > done in createChildren(); > > > this.createChildren(); > > > } > > > } > > > > > > override protected function measure():void > > > { > > > if(imageInstance != null) > > > { > > > this.measuredWidth = imageInstance.width; > > > this.measuredHeight = imageInstance.height; > > > this.minWidth = 5; > > > this.minHeight = 5; > > > } > > > } > > > > > > override public function setActualSize(width:Number, > > > height:Number):void > > > { > > > this.width = width; > > > this.height = height; > > > ScaleImage(width, height); > > > } > > > > > > /** > > > * @private > > > */ > > > override protected function > > > updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ > > > super.updateDisplayList(unscaledWidth, unscaledHeight); > > > > > > // size the element. > > > // I don't remember why I Wrote the code to check for > > > unscaledHeight and unscaledWidth being 0 > > > > > > if(imageInstance != null) > > > { > > > > > > //scale properly > > > ScaleImage(unscaledWidth, unscaledHeight); > > > } > > > } > > > > > > protected function ScaleImage(width:Number, height:Number) > > > { > > > if(imageInstance != null) > > > { > > > if(_scaleUniform == true) > > > { > > > var scale:Number = > > > Math.min(width/imageInstance.width, height/imageInstance.height); > > > > > > var scaleWidth:Number = > > > (int)(imageInstance.width * scale); > > > var scaleHeight:Number = > > > (int)(imageInstance.height * scale); > > > > > > imageInstance.width = scaleWidth; > > > imageInstance.height = scaleHeight; > > > > > > imageInstance.x = (width - > > > imageInstance.width) *.5; > > > imageInstance.y = (height- > > > imageInstance.height) *.5; > > > } > > > else > > > { > > > imageInstance.width = width; > > > imageInstance.height = height; > > > } > > > > > > } > > > } > > > > > > public function get ScaleUniform():Boolean > > > { > > > return _scaleUniform; > > > } > > > > > > public function set ScaleUniform(value:Boolean):void > > > { > > > _scaleUniform = value; > > > } > > > } > > > > > > > > > > > > -----Original Message----- > > > From: Kessler CTR Mark J [mailto:mark.kessler....@usmc.mil] > > > Sent: Friday, August 01, 2014 4:11 AM > > > To: users@flex.apache.org > > > Subject: RE: Design tools for creating Flex 4 skins > > > > > > Inkscape is what I'm waiting on personally. But they've taken years > to > > > work towards this next major release. You can track release progress > > [1]. > > > So a few more months it looks like. > > > > > > > > > [1] http://www.inkscape.org/en/develop/next-release/ > > > > > > -Mark > > > > > > -----Original Message----- > > > From: Sascha Ahrend [mailto:sahr...@icloud.com] > > > Sent: Friday, August 01, 2014 3:49 AM > > > To: users@flex.apache.org > > > Cc: users@flex.apache.org > > > Subject: Re: Design tools for creating Flex 4 skins > > > > > > Inkscape may be an alternative. > > > Check out this article describing the workflow: > > > > > > > > > > > > http://blog.devinholloway.com/2013/08/using-inkscape-to-generate-fxg-from.html?m=1 > > > > > >
