why continue to use a format that requires you to jump through hoops and is only supported inside a few particular projects? Save yourself the hassle and just use SVG (1.1+). It makes it a heck of a lot easier to switch between html and flex development. Now that SVG is working properly in Flex, I see no reason to continue forward with FXG. Just my $.02 ~ JT
-----Original Message----- From: jude [mailto:flexcapaci...@gmail.com] Sent: Tuesday, August 05, 2014 3:46 PM To: users@flex.apache.org Subject: Re: Design tools for creating Flex 4 skins 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). 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-f > rom.html?m=1 >
