Adobe Animateのメインタイムラインから綺麗なGIFを書き出すJSFL

  • 6
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

はじめに

Adobe Animate(旧:Adobe Flash Professional)から書き出すGIFは256色をうまく調整してくれないものだから、変色具合が絶望的。「Animateで連番PNGに書き出し→PhotoshopからGIF書き出し」できれいに書き出せるけれど、気軽に書き出したいのにわざわざPhotoshop使うのもだるいので、JSFLからGIFを書き出すコマンドを作った。いろいろできるとは思うものの、とりあえずタイムラインの全体を一巡しループする形にした。

※ JSFL経由で別途ソフトウェア(ImageMagick)を使用してます。

環境

  • Mac OS X El Capitan 10.11.5
  • Animate CC 2015.2
  • ImageMagick

Animate CCのGIF書き出しがどれだけ汚いかを示すGIF(とにかく見てくれこの酷さ)

https://gyazo.com/14344da5be7460dd199d15e7e871f9ad
▲本来書き出したいアニメ(swfをGyazo GIFで撮ったスクリーンショット)

publi.gif
▲パブリッシュで書き出されるGIF(あきらかに日焼けしてる)

名称未設定 - 1.gif
▲ムービーから書き出すで書き出せるGIF(ぴっぴかちゅー)

movie.gif

▲今回書き出すGIF(きゃわわ)

JSFLから画像変換コマンドを呼び出す。

1. ImageMagickという画像変換ツールをbrewからインストールする

(参考「Mac OS X El Capitan - HomebrewでImageMagickのインストール」)。

2. JSFLを用意する。

myCommandの先頭がImageMagickのパス。brewから入れたらみんなおなじになるかな?ちょっとわからない。ちなみに$PATHはJSFLで解消してくれないようなので、おそらく絶対パスの指定が必要になる。

このJSFLの流れは次になります。

  • 書き出しフォルダーの選択
  • 連番pngの書き出し
  • ImageMagickのコマンドを叩いて、GIFアニメを作る
GIFアニメ作成.jsfl

function main() {
    // フォルダーを選択する
    var folder = fl.browseForFolderURL("Select a folder.");

    if (folder) {
        // 画像のdelay時間を設定する
        var myDelay = 100 / fl.getDocumentDOM().frameRate;
        var platformPNGPath = FLfile.uriToPlatformPath(folder + "/frame*.png");
        var platformMoviePath = FLfile.uriToPlatformPath(folder + "/movie.gif");
        var platformFolder = FLfile.uriToPlatformPath(folder);

        var myCommand = "/usr/local/bin/convert" + " -delay " + myDelay + " -alpha Remove -loop 0 \"" + platformPNGPath + "\" \"" + platformMoviePath + "\"";

        // 連番pngを書き出す
        exportToPNGSequence(folder);

        // GIF書き出しのコマンドを実行する
        FLfile.runCommandLine(myCommand);
        // 保存先ディレクトリーを開く
        FLfile.runCommandLine("open '" + platformFolder + "'");
    }
}

function exportToPNGSequence(folder) {
    var document = fl.getDocumentDOM();
    var tl = document.getTimeline();
    var frameCount = tl.frameCount;

    for (var i = 0; i < frameCount; i++) {
        tl.currentFrame = i;
        var fileURI = folder + "/frame" + ("0000"+i).slice(-5) + ".png";
        document.exportPNG(fileURI, true, true);
    }
}

main();


ちょい足しtips

今回作成したexportToPNGSequence()関数はあくまでメインタイムラインのPNGを書き出すために作ったものなので、シンボルの画像をPNGシーケンスの書き出しだと、symbolItem.exportToPNGSequence()メソッドを使用できます。次のコードは、ライブラリアイテムの1つめのシンボルのPNGシーケンスを作成できます(実行してないからもし動かなかったらごめんね)。

fl.getDocumentDOM().library.items[0].exportToPNGSequence(FLfile.uriToPlatformPath(folder + "/frame.png"));

3. 上記のJSFLを実行する。

メニューの[コマンド]→[コマンドの実行]から実行できるけど、Commandsフォルダーに置いておくのがおすすめ(Commandsフォルダに関しては記事「Flash ProがAnimate CCへアップデートされたので、JSFL信者の私が行った作業」をどうぞ)。

4. ファイルの書き出し先を選択する

JSFLが保存先ディレクトリーを聞いてくるので、選択します。すると、frame*.pngとmovie.gifが書き出されます。

https://gyazo.com/5fe0f64179b0f6d5248cee8b79f4a7f5
▲ 3,4の手順を実行したGIF

おわりに

FLfile.runCommandLineが$PATH解決してくれないのがめんどくさかった。