wordpress/Adobe Animate CCなどweb技術やブログ運用に関する話をしていきます!検索エンジン最適化に関する実験に関する情報も!
⇒ 本ブログの詳細/連絡先はコチラ!
web技術TOP WordPress アクセスアップ Adobe Animate CC 便利ソフト/サービス紹介 効率化
  1. ホーム
  2. 〇ブログ/web技術
  3. Adobe Animate CC [旧Flash]
  4. [Adobe Animate CC注意点] フィルターを使ったアニメーションは、HTML5 Canvasでは使えません。
■注目記事一覧

高校数学 教科書用シミュレーターの制作に携わりました!!

ブログ記事数500突破!開設から2年3ヵ月のアクセス数変動を振り返ってみた!

WordPressのGutenbergで秒速で設定済みブロックを呼び出す方法!

複数専門ブログと雑記ブログ、両方のいいとこ取りの形態/両立を技術的に実現してみました!

Adobe Animate CC(旧FLASH)が凄い!技術者にこそ是非!

デジハリのAdobe講座がやばすぎる!Adobe Creative Cloudが45%オフで購入可!

画像素材サイト「写真AC」が超お得でおすすめです!
 
全テーマ共通記事一覧

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

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

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

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

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

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

[始点]

[終点]

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

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

[始点](ぼかし度合いが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アニメにして、この問題を回避しましょう

対策2:FLASHとして出力する(FLASHは2020年で廃止)

もう一つが、FALSHとして出力する方法です。FLASHでは、HTML5 Canvasモードよりも高速に動作できるので、フィルターアニメーションでも余裕で処理できます。FLASHならちゃんと、フィルターを保持して出力されます。

けど、FLASHは2020年で廃止予定です。今からFLASH形式で出力するのは、かなりキツいです。対策2は最終手段と思ったほうが良いと思います。

このように、Adobe Animate CCはフィルターアニメーションが使えないという制約があります。どうにかして欲しいとこですが、、、今のところ性能的に難しいようです。なんらかの改善策が出てくることを祈りましょう!

 


⇒「Adobe Animate CC [旧Flash]」カテゴリ記事一覧

その他関連カテゴリ

↓デジハリならAdobe Creative Cloudが45%OFFで契約可能です!




お気軽にコメントお願いします!

Your email address will not be published. Required fields are marked *