有一种常用的方法可以将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种颜色的径向渐变,并且它不允许缩放(看起来你只能改变宽度和高度属性,既奇怪又非常不幸),但至少现在我可以包含图形代码而不是使用资产。
答案 0 :(得分:1)
就个人而言,就目前而言,我更喜欢.swc方法,因为您获得了较小的文件大小,因为您最终获得了压缩的二进制文件,并且只有以后在actionscript中需要的资产可用。
如果组/绘图对象/图形符号具有名称/ ID,但目前它们不是很好,那将会很棒。这意味着你将加载一个大文件的xml路径并遍历它以获取你需要的部分(除非你导出单独的xml文件)。
XFL将是整个文件。我建议使用File&gt;导出图像&gt; FXG,因为您可以导出个人资产。我已经as3 FXGParser已经used了,而且非常好。
目前,FXG,SWC或SWF(使用@Claus Wahlers的精彩AS3SWF库)可能是从as3访问设计师资产的不错方式。
据我所知,使用XFL作为Flash Builder项目中的资源将节省从Flash Professional / Authoring编译/导出资产到其他格式的额外步骤。设计师XFL(也可以正确版本化)可以直接使用,而不是具有中间工作流程步骤和格式,这很有趣。我唯一担心的是处理大/杂乱且难以管理的xfl文件(是的,设计师通常对他们的资产来说是“混乱的”)。
不幸的是,XFL并不完全是FXG,并且还没有XFL规范(尽管有一个用于FXG)。 在XFL specs和XFL Edge definitions上查看这些答案。 有人需要弄脏他们的手并反向工程/记录XFL格式或等待Adobe这样做。后者基本上意味着充斥feature request form和forums,联系evangelists,campaigning直到他们这样做。据我所知,如果 LOT 的人觉得这很有用,我想Adobe会愿意花时间来做这件事。简而言之,拥有一个像样的库来解析/搜索/从XFL文件中获取资产可能非常方便,从长远来看,能够从其他工具导入/导出XFL将是有益的。
答案 1 :(得分:1)
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在我看来是一个很好的工具,虽然它没有定期更新。我记得它是市场上最可靠的反编译器的日子。 :)
如果你要自己实现类似的东西,你可能会发现this great explanation of SWF file format有用。
答案 2 :(得分:0)
我不知道如何转换用于在XFL文件结构中存储MovieClip的XML文件。如果您尝试将Flash IDE资源制作为Flash Builder中的ActionScript项目,则可以将它们导出为SWC文件。如果您真的想要创建转换工具,可以尝试从FXG文件转换为绘图API版本。 FXG格式与SVG类似,描述了路径。该表示法应该很容易转换为Flash的drawPath命令和数据。
当你在它时,你可以移植HTML5画布的代码。
答案 3 :(得分:0)
我刚刚了解了Drawscript,这是一个Adobe Illustrator扩展程序,可将图形转换为AS3,C ++,JavaScript等代码,看起来非常有前途。