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 22:45:38 GMT
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 <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