RE: Design tools for creating Flex 4 skins

[Kessler CTR Mark J]

Thanks, I'll see if I can squeeze in some tests today with it.

-Mark


-----Original Message-----
From: Jason Taylor [mailto:ja...@dedoose.com]
Sent: Tuesday, August 05, 2014 3:00 PM
To: users@flex.apache.org
Subject: RE: Design tools for creating Flex 4 skins

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