[Adobe Animate CC注意点] フィルターを使ったアニメーションは、HTML5 Canvasでは使えません。

2018-04-27　

Adobe Animate CCは注意しなければいけない点がたくさんあります。前回は日本語環境で「ダイナミックテキストが複数行にならない」というバグを紹介しました。そのような「意図した通りに動かないパターン」を列挙していこうかなと思います。これさえ抑えれば、Adobe Animate CCを思った通りに動かせるようになるかと思います！

今回は、アニメーションに関する注意点についてです。「フィルターを使ったアニメーションは使えない」という、かなり強い制約です。非常に重要なポイントになります！このポイントをおさえておかないと、作った後、後の祭りになります。十分ご注意を。

1 フィルターアニメーションとは
2 致命的問題：フィルターを使ったアニメーションは、HTML5 Canvasでは使えません
3 このAdobe Animate CCの問題点に対する対策
- 3.1 対策1:GIFアニメで出力する
- 3.2 対策2:FLASHとして出力する(FLASHは2020年で廃止)

フィルターアニメーションとは

まず最初にフィルターアニメーションの説明です。こちらの記事で説明した通り、クラシックトゥイーンでは始点と終点の状態を指定することにより、その間を補完したようなアニメーションがつくれます。フィルターアニメーションは、フィルターを使って始点と終点の状態を変えるアニメーションのことです。

例えば、下図のように始点と終点を指定してアニメーションを作る場合を考えます。

[始点]

[終点]

↓するとプレビュー上は、このアニメーションのように、綺麗なアニメーションが出来上がります。

これは、「ぼかし」というフィルターを使ったアニメーションです。ぼかしは、インスタンスに対してかけられるエフェクトであり、各キーフレームでその強さを変えられます。今回は、下図のように

[始点]（ぼかし度合いが20と小さい）

[終点]（ぼかし度合いが83と強い）

というように、ぼかし度合いを変えて始点/終点を指定しました。すると、ぼかし度合いが少しずつ変わる↑のようなアニメーションgな出来上がるわけです。

致命的問題：フィルターを使ったアニメーションは、HTML5 Canvasでは使えません

上記のように非常に簡単に綺麗なアニメーションが作れる「フィルターアニメーション」ですが、HTML5 Canvasでは使えないんです！上の例のアニメーションをHTML5 Canvasで出力すると、下図のようなアニメになります。

フィルターがうまくかかっていないのが分かりますでしょうか。正確に言うと、フィルターがかかっていないわけではなく、フィルターの強さが変化していない状態です。ぼかしの強さは、HTML5 Canvasは初期値（始点のぼかし強度）から変更しないんです！

これは、バグではなくてAdobe Animate CCの仕様です。なぜこんな仕様があるのか。それは、「動的にフィルターの強さを変えるのは、ものすごく負荷がかかるから」です。HTML5 Canvasは動的に処理を行って、アニメーションを作っています。これがものすごく負荷がかかるため、ブラウザの処理限界を超える可能性があるため、このような制限をかけているようなんです。

…理由はわかりますが、これはかなり痛い仕様です。フィルターアニメーションって、お手軽に綺麗に魅せる一番の手法でしたからね。FLASHの時代には。

このAdobe Animate CCの問題点に対する対策

この痛い仕様に対する対策は、以下のとおりです。

対策1:GIFアニメで出力する

これが一番の対策だと思います。フィルターを使ったアニメーションがHTML5 Canvasモードで認められないのは「動的にフィルターをかける負荷が高すぎる」からです。ですのでプレビュー上では出来るけど、実際のHTMLでは出来ないんです。

だとすれば、静的に「GIFアニメ」として出力すれば、このフィルターアニメーションは維持できるはずなんです！実際に、下図のようにAdobe Animate CCの「ファイル＞書き出し＞アニメーションGIFを書き出し」を選択すれば、このようなフィルターアニメーションを維持して出力できます。ですので、GIFアニメを作る時はフィルターアニメーションが使えます！簡単な作品であれば、GIFアニメにして、この問題を回避しましょう！