flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jude <flexcapaci...@gmail.com>
Subject Re: Design tools for creating Flex 4 skins
Date Tue, 05 Aug 2014 23:06:46 GMT
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 <bigosmallm@gmail.com>
wrote:

> 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