Код рисования ActionScript из векторной графики? - PullRequest
8 голосов
/ 24 июня 2011

Существует ли распространенный способ преобразования нарисованной векторной графики в Flash Professional в код для API рисования?

код этих нарисованных или импортированных объектов векторной графики доступен в исходных файлах (.xfl)как данные XML.например, следующая нарисованная векторная графика представляет собой завершающие данные XML.

enter image description here

<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, который содержит ветку для ActionScript 3.0 для чтения данных SVG и добавления их в список отображения.,библиотека позволяет разработчикам создавать SVG-графику и встраивать исходный код в XML-литерал.хотя это все еще не открывает возможности простого редактирования графики с помощью API рисования, редактировать SVG XML не так сложно, и это позволяет избежать использования ресурсов .swf для графики в Flash Builder.библиотека не идеальна, за короткое время, проведенное с ней, я понял, что она не отображает радиальные градиенты более чем с 2 цветами и не позволяет масштабировать (кажется, вы можете только изменить ширину исвойства высоты, что странно и очень печально), но по крайней мере теперь я могу включить код для графики вместо использования ресурсов.

source: com.zavoo.labs - Новые Flex и FlashКомпоненты SVGWeb

Ответы [ 4 ]

1 голос
/ 24 июня 2011

Лично на данный момент я предпочитаю подход .swc, потому что вы получаете меньший размер файла, так как в итоге вы получаете сжатый двоичный файл, и доступны только ресурсы, которые понадобятся позже в ActionScript.

Было бы замечательно, если бы группы / объекты рисования / графические символы имели бы имена / идентификаторы, но в настоящее время их нет. Это означает, что по маршруту XML вы должны загрузить большой файл и пройти его, чтобы получить нужную часть (если вы не экспортируете отдельные файлы XML).

XFL будет целым документом. Я бы предложил File> Export Image> FXG, так как вы можете экспортировать отдельные активы. Уже есть as3 FXGParser , который я использовал раньше, и это довольно хорошо.

На данный момент, вероятно, FXG, SWC или SWF (используя замечательную библиотеку AS3SWF от @Claus Wahlers) были бы достойными способами доступа к ресурсам дизайнера из as3.

Насколько я понимаю, использование XFL в качестве активов в проекте Flash Builder избавит от дополнительного этапа компиляции / экспорта ресурсов из Flash Professional / Authoring в другие форматы. Конструктор XFL (который также может быть правильно настроен) может использоваться напрямую, в отличие от промежуточного шага и формата рабочего процесса, что интересно. Моя единственная задача - иметь дело с большими / грязными и сложными в управлении файлами xfl (и да, дизайнеры, как правило, 'грязные' с их активами).

К сожалению, XFL - это не совсем FXG, и спецификации XFL пока нет (хотя для FXG есть спецификация). Проверьте эти ответы на XFL specs и XFL Edge определения . Либо кто-то должен испачкать руки и перепроектировать / документировать формат XFL, либо подождать, пока Adobe сделает это. Последнее в основном означает заполнение формы запроса функций и форумов , обращение к евангелистам , с кампанией до тех пор, пока они не сделают это. Насколько я понимаю, если LOT людей сочтут это полезным, я полагаю, что Adobe захочет потратить на это время.

Короче говоря, наличие подходящей библиотеки для анализа / поиска / извлечения ресурсов из файлов XFL может быть довольно удобным, и в долгосрочной перспективе будет полезна возможность импорта / экспорта XFL из других инструментов.

1 голос
/ 05 июля 2011

ActionScript Viewer имел эту функцию начиная с версии 3.1 и выше (выпущен в 2002 году).Инструмент не является бесплатным.

Они занимаются анализом векторной графики, хранящейся в формате SWF.

Цитата из их класса рисунка (написано Питером Джоэлом):

    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 полезное.

0 голосов
/ 10 апреля 2013

Я только что узнал о Drawscript , расширении Adobe Illustrator, которое преобразует чертежи в код для AS3, C ++, JavaScript и т. Д., Что выглядит очень многообещающе.

0 голосов
/ 24 июня 2011

Я не знаю способа конвертации файлов XML, которые используются для хранения мувиклипов в структурах файлов XFL. Если вы пытаетесь сделать ресурсы Flash IDE для проекта ActionScript в Flash Builder, вы можете просто экспортировать их как файлы SWC. Если вы действительно пытаетесь создать инструмент конвертации, вы можете попробовать конвертировать файлы FXG в версии API рисования. Формат FXG похож на SVG в том, как он описывает пути. Нотация должна легко переводиться в команды и данные FlashPath drawPath.

Пока вы работаете, вы можете перенести код для HTML5 canvas.

...