wordpress/Adobe Animate CCなどweb技術やブログ運用に関する話をしていきます!検索エンジン最適化に関する実験に関する情報も!
⇒ 本ブログの詳細/制作者プロフィール/連絡先/現在の行動状況はコチラ!
⇒ 本ブログは複数のテーマ(色)を持った階層構造になってます!詳しくはコチラ!
web/ブログ全般 SEO/アクセスアップ WordPress(KUSANAGI) Adobe Animate CC(旧FLASH) 便利ソフト/サービス紹介 効率化
  1. ホーム
  2. [Adobe Animate CC注意点] フィルターを使ったアニメーションは、HTML5 Canvasでは使えません。
■注目記事一覧

Adobe Animate CC(旧FLASH)が凄すぎる!その表現力と効率性を痛感!技術者にこそ是非!

画像素材サイトの「料金」と「検索結果の画像数」を比較してみた!やっぱり純日本製のサイトが使いやすい!?

「写真AC」が超オススメ!画像素材サイトとして、3年以上使い続けてます!

エックスサーバーが凄すぎる!本ブログでの超カスタマイズWordPressでも、高速レスポンスを誇る高品質サーバー!

ポイントサイト「げん玉」が凄すぎてビックリ!開始から10分で2000円以上稼げた!買い物のポイント還元もスゴイ!

[Adobe Animate CC使い方講座] Adobe Animate CCって何?まずはFlashからの変遷から解説!

デジハリのAdobeマスター講座がやばすぎる!Adobe Creative Cloudが50%オフで購入可!5分で使用可能に(超重要)!
 

[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 Creative Cloud製品オススメです!

[関連コンテンツ]




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

Your email address will not be published.