Edited at

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

More than 3 years have passed since last update.


はじめに

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解決してくれないのがめんどくさかった。