On Tue, Aug 5, 2014 at 4:58 PM, Jason Taylor <ja...@dedoose.com> wrote:
> 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 > I agree with you. I think we need to update Apache Flex to use SVG instead of FXG natively for skinning. I might put some work into that sometime in the future. Although, there are some structural problems with SVG (like missing 9-slice skinning, etc.) that needs to be overcome first. In the meantime, look for some of these concepts in FlexJS. Since it is a new framework, the risk is low to implement SVG based skinning here. Thanks, Om > ~ 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 > > >
