BTW There is an open source FXG tool online here, http://fxgeditor.7jigen.net/. I was hoping to incorporate this into Radii8 to allow it to create skins. Basically, when you double click on a component in Radii8 the jigen editor would open (in the app) and you could modify the skin. When you were done editing, the editor would close and a new skin would be available to choose from. The jigen editor also creates the SVG and FXG so both an SVG and FXG skin would be created. Since Radii8 generates both HTML and MXML from whatever design you give it generating both the SVG and FXG you would have custom skins for both targets.
On Tue, Aug 5, 2014 at 6:06 PM, jude <flexcapaci...@gmail.com> wrote: > 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 >> > > >> > >> > >
