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:[email protected]]
Sent: Friday, August 01, 2014 4:11 AM
To: [email protected]
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:[email protected]]
Sent: Friday, August 01, 2014 3:49 AM
To: [email protected]
Cc: [email protected]
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
