apache-flex - Adobe Illustrator 到 Flash Builder 4.6

Question

我有一张 .ai 格式的美国地图。我想在我的 flex 应用程序中使用它。
问题是地图在状态线上切片，我想在应用程序中操作状态。

说明：在我的应用程序中，我希望能够单击一个州以突出显示它，然后将所有其他州从场景中删除，然后将所有州带回来以制作整个国家。就像拼图一样。

我将 FXG 文件从 Adob​​e Illustrator 导入到我在 Flash Builder 4 中的 Flex 应用程序，但我不能一次处理每个状态！

非常感谢帮助！干杯

Answer 1

我最终将 fxg 转换为 MXML ......

我使用以下代码来做到这一点：

FXG 到 MXML 转换器

我改变了

d:用户标签

进入属性 ID，效果非常好！...

Answer 2

有一个FxgParserd:userLabel库，但如果它们在 .fxg 文件中被标记为属性，它似乎不会输出状态名称。你可以修改源来解决这个问题。

就是这样：：

编辑 fxgparser.parser.Path.as 然后在类的顶部添加这个命名空间：

public static const aab:Namespace = new Namespace("aab", "http://ns.adobe.com/fxg/2008/dt");

然后在 parse() 方法的末尾添加：

target.name = data.currentXml.@aab::userLabel;

因为 Illustrator CS6 似乎添加了一个 userLabel 属性而不是 id 或其他东西，而 FxgParser 默认会忽略这一点。

代码将与上面非常相似：

package  {

    import flash.display.*;
    import flash.events.*;
    import flash.geom.Point;
    import flash.net.*;
    import flash.utils.Dictionary;

    import com.greensock.*;
    import fxgparser.FxgDisplay;

    [SWF(width='1368', height='936', backgroundColor='#ffffff', frameRate='30')]
    public class FXGTest extends Sprite{

        private var states:Sprite;//container holding each state Shape
        private var positions:Dictionary = new Dictionary();//original position to restore states to

        public function FXGTest() {
            addEventListener(Event.ADDED_TO_STAGE,init);
        }
        private function init(e:Event):void{
            new URLLoader(new URLRequest("usa-wikipedia.fxg")).addEventListener(Event.COMPLETE,fxgLoaded);
        }
        private function fxgLoaded(e:Event):void{
            //trace(e.target.data);
            var map:FxgDisplay = addChild(new FxgDisplay( new XML(e.target.data) )) as FxgDisplay;
            trace(listChildren(map));
            //map.item.item.item.*
            states = Sprite(Sprite(Sprite(map.getChildAt(0)).getChildAt(0)).getChildAt(0));
            for(var i:int = 0 ; i < states.numChildren; i++){
                var s:DisplayObject = DisplayObject(states.getChildAt(i));//can't add mouse listeners because the states are Shape instances
                positions[s.name] = new Point(s.x,s.y);//store the positions in a hash to get the state position by name
            }
            stage.addEventListener(MouseEvent.CLICK,handleClick);
        }
        private function handleClick(e:MouseEvent):void{
            if(e.target is Stage) restore();
            else blast(getObjectsUnderPoint(new Point(mouseX,mouseY))[0].name);//named shapes are stored in a sprite so use getObjetsUnderPoint
        }
        private function blast(name:String):void{
            var blastRadius:Number = stage.stageWidth+stage.stageHeight;//or some other number
            var c:DisplayObject = states.getChildByName(name);//selected
            for(var i:int = 0 ; i < states.numChildren; i++){
                var s:DisplayObject = states.getChildAt(i);
                if(s != c){//everything else goes except this
                    var angle:Number = Math.atan2(s.y-c.y,s.x-c.x);//direction relative to the clicked state
                    var x:Number = s.x + (Math.cos(angle) * blastRadius);//get a position offset from the clicked state (blast centre) 
                    var y:Number = s.y + (Math.sin(angle) * blastRadius);//outwards at a random angle
                    TweenLite.to(s,1+Math.random() * 2,{x:x,y:y});//tween with different speeds for a bit of depth
                }
            }
        }
        private function restore():void{
            for(var i:int = 0 ; i < states.numChildren; i++){
                var s:DisplayObject = DisplayObject(states.getChildAt(i));
                TweenLite.to(s,.5+Math.random() * .5,{x:positions[s.name].x,y:positions[s.name].y});//tween states back into the original positions
            }
        }
        private function listChildren(d:DisplayObjectContainer):String{
            var result = 'parent: '+d.name+'\n\t';
            for(var i:int = 0 ; i < d.numChildren; i++){
                var c:DisplayObject = d.getChildAt(i);
                result += '\tchild: '+c.name+'\n';
                if(c is DisplayObjectContainer) result += listChildren(DisplayObjectContainer(c));
            }
            return result;
        }


    }

}

您还可以在此处下载上述类、修改后的 fxgparser 库和状态 fxg并在此处查看正在运行的演示 或者您可以使用 SVG 而不是 FXG。同一开发人员也有一个SvgParser库，您可以像这样获得：

svn export http://www.libspark.org/svn/as3/SvgParser

您可以轻松地将 .ai 文件保存为 .svg 文件。这是一个使用来自维基百科的美国地图的简单示例：

package  {
    import flash.display.*;
    import flash.events.*;
    import flash.geom.Point;
    import flash.net.*;
    import flash.utils.Dictionary;

    import svgparser.SvgDisplay;
    import com.greensock.*;

    [SWF(width='1368', height='936', backgroundColor='#ffffff', frameRate='30')]
    public class SVGTest extends Sprite {

        private var states:Sprite;//container holding each state Shape
        private var positions:Dictionary = new Dictionary();//original position to restore states to

        public function SVGTest() {
            addEventListener(Event.ADDED_TO_STAGE,init);//make sure we have the stage ready
        }
        private function init(e:Event):void{
            removeEventListener(Event.ADDED_TO_STAGE,init);//stage ready, load the svg
            new URLLoader(new URLRequest("http://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg")).addEventListener(Event.COMPLETE,svgLoaded);
        }
        private function svgLoaded(e:Event):void{//svg loaded
            var map:SvgDisplay = addChild(new SvgDisplay( new XML(e.target.data) )) as SvgDisplay;//use the parser
            trace(listChildren(map));//quick debug of the maps display list
            states = Sprite(map.getChildAt(0));//we want to access the main container
            for(var i:int = 0 ; i < states.numChildren; i++){
                var s:DisplayObject = DisplayObject(states.getChildAt(i));//can't add mouse listeners because the states are Shape instances
                positions[s.name] = new Point(s.x,s.y);//store the positions in a hash to get the state position by name
            }
            stage.addEventListener(MouseEvent.CLICK,handleClick);
        }
        private function handleClick(e:MouseEvent):void{
            if(e.target is Stage) restore();
            else blast(getObjectsUnderPoint(new Point(mouseX,mouseY))[0].name);//named shapes are stored in a sprite so use getObjetsUnderPoint
        }
        private function blast(name:String):void{
            var blastRadius:Number = stage.stageWidth+stage.stageHeight;//or some other number
            for(var i:int = 0 ; i < states.numChildren; i++){
                var s:DisplayObject = states.getChildAt(i);
                if(s.name != name){//everything else goes except this
                    var angle:Number = Math.random() * Math.PI * 2;//pick a random angle
                    var x:Number = s.x + Math.cos(angle) * blastRadius;//get a position offset from the clicked state (blast centre) 
                    var y:Number = s.y + Math.sin(angle) * blastRadius;//outwards at a random angle
                    TweenLite.to(s,1+Math.random() * 2,{x:x,y:y});//tween with different speeds for a bit of depth
                }
            }
        }
        private function restore():void{
            for(var i:int = 0 ; i < states.numChildren; i++){
                var s:DisplayObject = DisplayObject(states.getChildAt(i));
                TweenLite.to(s,.5+Math.random() * .5,{x:positions[s.name].x,y:positions[s.name].y});//tween states back into the original positions
            }
        }
        private function listChildren(d:DisplayObjectContainer):String{//recursively traverse a display list and list children names
            var result = 'parent: '+d.name+'\n\t';
            for(var i:int = 0 ; i < d.numChildren; i++){
                var c:DisplayObject = d.getChildAt(i);
                result += '\tchild: '+c.name+'\n';
                if(c is DisplayObjectContainer) result += listChildren(DisplayObjectContainer(c));
            }
            return result;
        }

    }

}