flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From OmPrakash Muppirala <bigosma...@gmail.com>
Subject Re: Design tools for creating Flex 4 skins
Date Tue, 05 Aug 2014 22:53:04 GMT
On Tue, Aug 5, 2014 at 3:45 PM, jude <flexcapacitor@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 <jason@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.ctr@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:sahrend@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
> >
>

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message