Flash 2 SVG (플래시를 SVG로 변환)

역시 구글과 Adobe Communities는 숨겨진 보물들이 즐비하다.

소개할 Exchange의 이름은 Flash 2 SVG 다. 플래시를 기반으로 드로잉이나 애니메이션까지 모두 SVG로 변환해 주기때문에

자바스크립트를 사용한다거나.. XML의 괴랄한 좌표 애니메이션으로 머리싸맬 고민이 필요없어졌다.

더욱이 유용한 가장 큰 이유는 SVG자체에 애니메이션 정보를 가지고 있기때문에 순수 SVG 독립형 객체라는 것이다.

플러그인을 만든 DavidBelais가 제작한 많은 툴이 있지만 공식 서포트 페이지의 주소는 http://dissentgraphics.com/tools/flash2svg 

이기 때문에, 아래 그림처럼 보이는 어도비 공식 사이트에서의 사람들의 반응은 없다. 내가 리뷰 한줄 적은것 빼고는.

어쨌든 설치를 마쳤다는 가정하에 단순히 변환 과정 부분만 살펴보겠다.

아래는 내가 직접 플래시에서 작업하고 변환한 그라데이션 로딩 애니메이션이다.

물론 코드로도 표현할수는 있겠지만..엄청난 시행착오와 머리를 쥐어짜야 할것이다...

...대충 보고 닫자.. 

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: flash2svg, http://dissentgraphics.com/tools/flash2svg -->

<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="Untitled-3" image-rendering="auto" baseProfile="basic" version="1.1" x="0px" y="0px" width="550" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 400">

  <defs>

    <filter id="filter" filterUnits="objectBoundingBox" width="100%" height="100%" x="0%" y="0%">

      <feColorMatrix id="feColorMatrix" type="matrix" in="SourceGraphic" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 9999999999999.99 0" result="colorEffect_percent"/>

      <feComponentTransfer id="feComponentTransfer" in="colorEffect_percent" result="colorEffect_amount">

        <feFuncR id="feFuncR" type="linear" slope="1" intercept="1"/>

        <feFuncG id="feFuncG" type="linear" slope="1" intercept="1"/>

        <feFuncB id="feFuncB" type="linear" slope="1" intercept="1"/>

        <feFuncA id="feFuncA" type="linear" slope="1" intercept="0"/>

      </feComponentTransfer>

    </filter>

    <linearGradient gradientUnits="userSpaceOnUse" color-interpolation="sRGB" x1="26" y1="198.5" x2="530" y2="198.5" id="linearGradient">

      <stop stop-color="#FFF" stop-opacity="1" offset="0"/>

      <stop stop-color="#00C654" stop-opacity="1" offset="0.51765"/>

      <stop stop-color="#FFF" stop-opacity="1" offset="1"/>

    </linearGradient>

    <symbol id="Symbol_1" viewBox="-50 -50 604 137">

      <g id="Symbol_1_0">

        <g id="element32">

          <path id="path1" fill="url(#linearGradient2)" d="M504,37 L504,0 0,0 0,37 504,37z"/>

        </g>

      </g>

    </symbol>

    <linearGradient gradientUnits="userSpaceOnUse" color-interpolation="sRGB" x1="0" y1="18.5" x2="504" y2="18.5" id="linearGradient1">

      <stop stop-color="#FFF" stop-opacity="1" offset="0"/>

      <stop stop-color="#007FC2" stop-opacity="1" offset="0.51765"/>

      <stop stop-color="#FFF" stop-opacity="1" offset="1"/>

    </linearGradient>

    <linearGradient gradientUnits="userSpaceOnUse" color-interpolation="sRGB" x1="0" y1="18.5" x2="504" y2="18.5" id="linearGradient2">

      <stop stop-color="#FFF" stop-opacity="1" offset="0"/>

      <stop stop-color="#007FC2" stop-opacity="1" offset="0.51765"/>

      <stop stop-color="#FFF" stop-opacity="1" offset="1"/>

    </linearGradient>

    <linearGradient gradientUnits="userSpaceOnUse" color-interpolation="sRGB" x1="26.55" y1="199.05" x2="530.55" y2="199.05" id="linearGradient3">

      <stop stop-color="#FFF" stop-opacity="1" offset="0"/>

      <stop stop-color="#FFF" stop-opacity="1" offset="0.51765"/>

      <stop stop-color="#FFF" stop-opacity="1" offset="1"/>

    </linearGradient>

  </defs>

  <g id="Scene_2" overflow="visible">

    <mask id="Scene_1_0_0">

      <g id="g">

        <g id="element">

          <path id="path" fill="url(#linearGradient3)" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" d="M530.55,217.55 L530.55,180.55 26.55,180.55 26.55,217.55 530.55,217.55z" stroke-opacity="1"/>

        </g>

      </g>

    </mask>

    <g id="masked" mask="url(#Scene_1)">

      <g id="Scene_1_2_16">

        <use xlink:href="#Symbol_1" id="element31" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 526 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.616;0.808;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_15">

        <use xlink:href="#Symbol_1" id="element30" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 524.05 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.577;0.616;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_14">

        <use xlink:href="#Symbol_1" id="element29" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 518.2 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.539;0.577;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_13">

        <use xlink:href="#Symbol_1" id="element28" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 508.4 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.5;0.539;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_12">

        <use xlink:href="#Symbol_1" id="element27" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 494.75 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.462;0.5;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_11">

        <use xlink:href="#Symbol_1" id="element26" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 477.15 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.423;0.462;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_10">

        <use xlink:href="#Symbol_1" id="element25" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 455.7 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.385;0.423;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_9">

        <use xlink:href="#Symbol_1" id="element24" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 430.3 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.346;0.385;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_8">

        <use xlink:href="#Symbol_1" id="element23" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 401 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.308;0.346;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_7">

        <use xlink:href="#Symbol_1" id="element22" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 367.8 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.269;0.308;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_6">

        <use xlink:href="#Symbol_1" id="element21" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 330.7 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.231;0.269;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_5">

        <use xlink:href="#Symbol_1" id="element20" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 289.65 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.192;0.231;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_4">

        <use xlink:href="#Symbol_1" id="element19" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 244.75 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.154;0.192;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_3">

        <use xlink:href="#Symbol_1" id="element18" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 195.9 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.115;0.154;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_2">

        <use xlink:href="#Symbol_1" id="element17" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 143.2 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.077;0.115;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_1">

        <use xlink:href="#Symbol_1" id="element16" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 86.55 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.038;0.077;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_2_0">

        <use xlink:href="#Symbol_1" id="element15" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 26 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.038;1" values="inline;none;none"/>

      </g>

      <g id="Scene_1_1_23">

        <use xlink:href="#Symbol_1" id="element14" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 26 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.885;1" values="none;inline;none"/>

      </g>

      <g id="Scene_1_1_22">

        <use xlink:href="#Symbol_1" id="element13" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 23 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.846;0.885;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_21">

        <use xlink:href="#Symbol_1" id="element12" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 14.1 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.808;0.846;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_20">

        <use xlink:href="#Symbol_1" id="element11" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 -0.699 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.769;0.808;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_19">

        <use xlink:href="#Symbol_1" id="element10" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 -21.499 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.731;0.769;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_18">

        <use xlink:href="#Symbol_1" id="element9" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 -48.299 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.693;0.731;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_17">

        <use xlink:href="#Symbol_1" id="element8" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 -81.049 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.654;0.693;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_16">

        <use xlink:href="#Symbol_1" id="element7" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 -119.749 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.616;0.654;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_15">

        <use xlink:href="#Symbol_1" id="element6" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 -164.399 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.577;0.616;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_14">

        <use xlink:href="#Symbol_1" id="element5" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 -214.999 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.539;0.577;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_13">

        <use xlink:href="#Symbol_1" id="element4" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 -271.549 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.5;0.539;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_12">

        <use xlink:href="#Symbol_1" id="element3" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 -334.049 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.462;0.5;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_11">

        <use xlink:href="#Symbol_1" id="element2" width="604" height="137" x="-50" y="-50" overflow="visible" viewBox="-50 -50 604 137" transform="matrix(1 0 0 1 -402.499 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.423;0.462;1" values="none;inline;none;none"/>

      </g>

      <g id="Scene_1_1_10">

        <use xlink:href="#Symbol_1" id="element1" width="604" height="137" x="-50" y="-50" overflow="visible" transform="matrix(1 0 0 1 -476.899 180)"/>

        <animate attributeName="display" begin="0s" repeatCount="indefinite" dur="1.083s" keyTimes="0;0.385;0.423;1" values="none;inline;none;none"/>

      </g>

    </g>

  </g>

</svg>

결과)  크롬 브라우저에서 볼것

---

작업 공정은 다음과 같다.

1. 사용하기전에 작업할 정보를 살펴본다. 주의할것은 AS3.0 이라는 것과 Flash버전 정도. 

2. 플래시에서 무비클립같은 객체에서 작업하지 말고 직접 메인타임라인을 기준으로 작업한다.

3. 작업된 fla 를 저장해준다.

4. 메뉴에서 Windows > Other Panels > SVG 를 클릭하면 다음과 같은 패널창이 뜬다.

5. 여기에서 Export 버튼을 누르면 변환이 시작된다.

ps.도저히 다운로드 받는데 애로사항이 있다면 댓글요청. (설치문의는 제외..귀찮..)