矢量图形的ActionScript绘图代码？

| 有没有一种通用的方法可以将Flash Professional中绘制的矢量图形转换为Drawing API的代码？这些绘制或导入的矢量图形资产的代码在源文件（.xfl）中作为XML数据提供。例如，以下绘制的矢量图形是尾随XML数据。

<DOMSymbolItem xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns=\"http://ns.adobe.com/xfl/2008/\" name=\"MSprite\" itemID=\"4e03ae4f-00002c0f\" linkageExportForAS=\"true\" linkageBaseClass=\"flash.display.Sprite\" linkageClassName=\"MSprite\" sourceLibraryItemHRef=\"Symbol 1\" lastModified=\"1308864079\" isSpriteSubclass=\"true\">
  <timeline>
    <DOMTimeline name=\"MSprite\">
      <layers>
        <DOMLayer name=\"Layer 1\" color=\"#4FFF4F\" current=\"true\" isSelected=\"true\">
          <frames>
            <DOMFrame index=\"0\" keyMode=\"9728\">
              <elements>
                <DOMShape>
                  <fills>
                    <FillStyle index=\"1\">
                      <SolidColor color=\"#00CCFF\"/>
                    </FillStyle>
                  </fills>
                  <strokes>
                    <StrokeStyle index=\"1\">
                      <SolidStroke scaleMode=\"normal\">
                        <fill>
                          <SolidColor/>
                        </fill>
                      </SolidStroke>
                    </StrokeStyle>
                  </strokes>
                  <edges>
                    <Edge fillStyle0=\"1\" strokeStyle=\"1\" edges=\"!6883 745S5[6369 340 5741 148!5741 148[5534 85 5314 78!5314 78[4037 36 2754 2!2754 2[1956 -18 1222 211!1222 211[693 376 393 745!393 745[139 1056 48 1512!48 1512[-130 2404 354 3085!354 3085[799 3713 1505 3927!1505 3927[1675 3979 1817 3876
!1817 3876[1970 3765 2071 3564!2071 3564|1474 3205!1474 3205[1230 2199 2029 1548!2029 1548[2144 1454 2274 1365!2274 1365|2834 1365!2834 1365|3194 1585!3194 1585|3254 1705!3254 1705|3434 2245!3434 2245|3514 2305!3514 2305[3652 1520 4512
 1353!4512 1353[5351 1190 5981 1839!5981 1839[6054 1915 6115 1995!6115 1995[6394 2358 6314 2845!6314 2845[6188 3617 6664 4084!6664 4084[6710 4129 6761 4171!6761 4171[6898 4282 7071 4308!7071 4308[7421 4359 7733 4184!7733 4184[7760 4134
 7785 4084!7785 4084[8238 3170 7920 2182!7920 2182[7733 1598 7325 1156!7325 1156[7115 929 6883 745\"/>
                    <Edge cubics=\"!5741 148(;5603,106 5461,83 5314,78q5741 148Q5534 85q5314 78);\"/>
                    <Edge cubics=\"!5981 1839(;6030,1890 6074,1942 6115,1995q5981 1839Q6054 1915q6115 1995);\"/>
                    <Edge cubics=\"!6115 1995(;6301,2237 6367,2520 6314,2845q6115 1995Q6394 2358q6314 2845);\"/>
                    <Edge cubics=\"!6761 4171(;6852,4245 6956,4291 7071,4308q6761 4171Q6898 4282q7071 4308);\"/>
                    <Edge cubics=\"!6314 2845(;6230,3363 6348,3778 6664,4084q6314 2845Q6188 3617q6664 4084);\"/>
                    <Edge cubics=\"!6664 4084(;6699,4118 6729,4145 6761,4171q6664 4084 6761 4171);\"/>
                    <Edge cubics=\"!7733 4184(;7751,4152 7768,4119 7785,4084q7733 4184 7785 4084);\"/>
                    <Edge cubics=\"!7785 4084(;8086,3476 8132,2842 7920,2182q7785 4084Q8238 3170q7920 2182);\"/>
                    <Edge cubics=\"!4512 1353(;5071,1244 5561,1406 5981,1839q4512 1353Q5351 1190q5981 1839);\"/>
                    <Edge cubics=\"!7071 4308(;7304,4342 7525,4301 7733,4184q7071 4308Q7421 4359q7733 4184);\"/>
                    <Edge cubics=\"!7920 2182(;7795,1793 7597,1451 7325,1156q7920 2182Q7733 1598q7325 1156);\"/>
                    <Edge cubics=\"!7325 1156(;7188,1007 7043,872 6883,745q7325 1156Q7115 929q6883 745);\"/>
                    <Edge cubics=\"!6883 745(;6546,478 6163,277 5741,148q6883 745Q6369 340q5741 148);\"/>
                    <Edge cubics=\"!2029 1548(;2106,1485 2187,1424 2274,1365q2029 1548Q2144 1454q2274 1365);\"/>
                    <Edge cubics=\"!2834 1365(;2834,1365 3194,1585 3194,1585q2834 1365 3194 1585);\"/>
                    <Edge cubics=\"!2274 1365(;2274,1365 2834,1365 2834,1365q2274 1365 2834 1365);\"/>
                    <Edge cubics=\"!2754 2(;2222,-11 1711,58 1222,211q2754 2Q1956 -18q1222 211);\"/>
                    <Edge cubics=\"!3254 1705(;3254,1705 3434,2245 3434,2245q3254 1705 3434 2245);\"/>
                    <Edge cubics=\"!3434 2245(;3434,2245 3514,2305 3514,2305q3434 2245 3514 2305);\"/>
                    <Edge cubics=\"!1505 3927(;1618,3962 1722,3945 1817,3876q1505 3927Q1675 3979q1817 3876);\"/>
                    <Edge cubics=\"!1222 211(;870,321 594,498 393,745q1222 211Q693 376q393 745);\"/>
                    <Edge cubics=\"!393 745(;224,951 109,1207 48,1512q393 745Q139 1056q48 1512);\"/>
                    <Edge cubics=\"!1474 3205(;1311,2534 1496,1982 2029,1548q1474 3205Q1230 2199q2029 1548);\"/>
                    <Edge cubics=\"!3194 1585(;3194,1585 3254,1705 3254,1705q3194 1585 3254 1705);\"/>
                    <Edge cubics=\"!48 1512(;-71,2107 31,2631 354,3085q48 1512Q-130 2404q354 3085);\"/>
                    <Edge cubics=\"!354 3085(;651,3504 1034,3784 1505,3927q354 3085Q799 3713q1505 3927);\"/>
                    <Edge cubics=\"!3514 2305(;3606,1782 3939,1464 4512,1353q3514 2305Q3652 1520q4512 1353);\"/>
                    <Edge cubics=\"!5314 78(;4463,50 3609,25 2754,2q5314 78Q4037 36q2754 2);\"/>
                    <Edge cubics=\"!2071 3564(;2071,3564 1474,3205 1474,3205q2071 3564 1474 3205);\"/>
                    <Edge cubics=\"!1817 3876(;1919,3802 2004,3698 2071,3564q1817 3876Q1970 3765q2071 3564);\"/>
                  </edges>
                </DOMShape>
              </elements>
            </DOMFrame>
          </frames>
        </DOMLayer>
      </layers>
    </DOMTimeline>
  </timeline>
</DOMSymbolItem>

这证明了肯定有可能创建一个可以将XML代码移植到AS3的实用程序。这样，AS3开发人员就不必担心处理矢量资产，尤其是如果它们从Flash Professional迁移到Flash Builder时。就个人而言，如果没有可用的工具，我最终会为此创建实用程序，但是我想知道是否已有可用的工具？ [编辑] 自发布此问题以来，我已经了解了SVG Web项目，该项目包含ActionScript 3.0的分支，用于读取SVG数据并将其添加到显示列表中。该库允许开发人员创建SVG图形并将源代码嵌入为XML文字。尽管这仍然没有提供使用Drawing API简单地编辑图形的可能性，但是编辑SVG XML并不是那么困难，并且可以避免在Flash Builder中为图形使用.swf资产。该库不是完美的，我花了很短的时间来学习它似乎并不能渲染超过2种颜色的径向渐变，并且它不允许缩放（看来您只能更改width和height属性，这既奇怪又很不幸），但至少现在我可以包括图形代码而不使用资产了。来源：com.zavoo.labs-新的Flex和Flash SVGWeb组件

已邀请:

4 个回复

淑灯

就个人而言，目前，我更喜欢.swc方法，因为您得到的文件大小较小，因为您最终得到的是压缩的二进制文件，并且仅可使用actionscript中稍后需要的资产。如果组/图形对象/图形符号具有名称/标识，但它们当前没有，那就太好了。这意味着要进行xml路由，您将加载一个大文件并遍历该文件以获取所需的部分（除非您导出单独的xml文件）。 XFL将是整个文档。我建议“文件”>“导出图像”>“ FXG”，因为您可以导出单个资产。我以前已经使用过一个as3 FXGParser，它非常好。就目前而言，FXG，SWC或SWF（使用@Claus Wahlers提供的出色的AS3SWF库）可能是从as3访问设计器资产的不错方法。据我了解，在Flash Builder项目中将XFL用作资产将省去将资产从Flash Professional / Authoring / Authoring /导出为其他格式的额外步骤。与具有中间工作流程步骤和格式的情况相反，可以直接使用设计器XFL（也可以进行适当的版本控制），这很有趣。我唯一关心的是处理大型/混乱且难以管理的xfl文件（是的，设计人员通常对资产很“混乱”）。不幸的是，XFL并非完全是FXG，并且还没有XFL规范（尽管FXG有一个规范）。查看有关XFL规范和XFL Edge定义的这些答案。要么有人需要弄脏双手，然后对XFL格式进行反向工程/记录，要么等待Adobe这样做。后者基本上意味着充斥功能请求表和论坛，联系传播者，进行宣传，直到他们这样做为止。据我所知，如果很多人觉得这有用，我想Adobe会愿意为此花时间。简而言之，拥有一个不错的库来从XFL文件中解析/搜索/获取资产可能非常方便，从长远来看，能够从其他工具导入/导出XFL将会是有益的。

恋卡

ActionScript Viewer从3.1版开始（2002年发布）具有该功能。该工具不是免费的。他们所做的是解析以SWF格式存储的矢量图形。他们的绘画课（由彼得·乔尔（Peter Joel）撰写）的引文：

    The data array is a special format, which can be obtained from graphics in a swf, using
    It is structured as a list of commands, which correspond to the movieClip methods moveTo, 
lineTo etc. Each command is a two-element array. The first element is a string, indicating the
type of command and the second element is another array, containing arguments. The following 
commands are supported:
    [\'M\',[x,y]]  -  moveTo(x,y)
    [\'L\',[x,y]]  -  lineTo(x,y)
    [\'C\',[cx,cy,ax,ay]]  -  moveTo(cx,cy,ax,ay)
    [\'S\',[th,col,alph]]  -  lineStyle(th,col,alph)
    [\'F\',[col,alph]]  -  beginFill(col,alph)
    [\'EF\']  -  endFill()
    [\'GF\',[a,b,c,d,e,f]]  -  beginGradientFill(a,b,c,d,e,f)

输出可能看起来像（此处是ASV5的示例输出）：

//Created by Action Script Viewer - http://www.buraks.com/asv
//ASVDrawing Data format specification by Peter Hall (http://www.peterjoel.com)
//See ASV help file for more information.
//bounding rectangle (95,69) (427,327)
var data=new Array([\'S\',[1,0xFF0000,100]],[\'M\',[426.5,132.5]],[\'L\',[426.5,326.5]],[\'L\',[358.5,326.5]]
,[\'L\',[358.5,246.5]],[\'L\',[249.5,246.5]],[\'L\',[249.5,305.5]],[\'L\',[157.5,305.5]],[\'L\',[157.5,246.5]],[\'L\',[116.5,246.5]]
,[\'L\',[116.5,177.5]],[\'L\',[95.5,177.5]],[\'L\',[95.5,69.5]],[\'L\',[414.5,69.5]],[\'L\',[414.5,132.5]],[\'L\',[426.5,132.5]]
,[\'M\',[414.5,132.5]],[\'L\',[414.5,177.5]],[\'L\',[358.5,177.5]],[\'L\',[358.5,246.5]],[\'M\',[157.5,246.5]],[\'L\',[157.5,177.5]]
,[\'L\',[116.5,177.5]],[\'M\',[249.5,246.5]],[\'L\',[249.5,177.5]],[\'L\',[157.5,177.5]],[\'M\',[358.5,177.5]],[\'L\',[249.5,177.5]]
);

要么

//Created by Action Script Viewer - http://www.buraks.com/asv
//bounding rectangle (95,69) (427,327)
lineStyle(1,0xFF0000,100);
moveTo(426.5,132.5);
lineTo(426.5,326.5);
lineTo(358.5,326.5);
lineTo(358.5,246.5);
lineTo(116.5,246.5);
moveTo(414.5,132.5);
// ......

我认为ASV是一个不错的工具，尽管它不会定期更新。我记得当时它是市场上最可靠的反编译器。 :) 如果您打算自己实施类似的操作，则可能会发现对SWF文件格式的这种出色解释很有用。

导力疵谜

我不知道一种转换用于在XFL文件结构中存储MovieClip的XML文件的方法。如果您试图将Flash IDE资产制作为Flash Builder中的ActionScript项目，则可以将它们导出为SWC文件。如果您确实要创建转换工具，则可以尝试从FXG文件转换为图形API版本。 FXG格式在描述路径方面类似于SVG。该符号应易于转换为Flash的drawPath命令和数据。在此期间，您可以移植HTML5 canvas的代码。

社攻取墟槽

我刚刚了解了Drawscript，这是一个Adobe Illustrator扩展，它将图形转换为AS3，C ++，JavaScript等代码，这看起来非常有前途。

要回复问题请先登录或注册

矢量图形的ActionScript绘图代码？

4 个回复

发起人

flash

translation

graphics

actionscript_3

xml

问题状态

矢量图形的ActionScript绘图代码？

与内容相关的链接

4 个回复

发起人

flash

translation

graphics

actionscript_3

xml

问题状态