はじめに

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（とにかく見てくれこの酷さ）

▲本来書き出したいアニメ(swfをGyazo GIFで撮ったスクリーンショット)

▲パブリッシュで書き出されるGIF（あきらかに日焼けしてる）

▲ムービーから書き出すで書き出せる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が書き出されます。

▲ 3,4の手順を実行したGIF

おわりに

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

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