Animate CC で loadMovieの様なHTML5 Canvas の書き出し

[hidekia34521119]

フルコンテンツFlash(swf)のコンテンツを制作していますが、

いよいよAndroidなどのモバイル対応もする事になり、

HTML5での対応が必要となりました。

現在は、

全画面swfの中に、

・他ページ(html)へのリンクを設置したヘッダー(swf)

・メインとなるアニメーション(swf)

をloadMovieで読み込んでいます。

上記の様な構成となっており、

左側のメニューで右側のアニメーションが切り替わります。

この様に切り替わるアニメーションが100以上あります。

この構成を維持したまま

（動的にアニメーションを切り替えられる）

HTML5 CANVASに変更したいのですが、

Animate CCで制作する事は可能でしょうか。

宜しくお願い致します。

[448jp]

出力対象をHTML5 Canvasとする場合、これまでのSWFと違って基本的にJavaScriptで出力されることになりますので、loadMovieと同じような機能を自分で実装する必要があります。そういう意味では、可能です。

ただ、1つのHTMLの中に複数のCanvasを配置すると、特に古いAndroidでは極端にパフォーマンスが落ちる可能性が高いです。また、現状のレイアウトをそのままモバイルに持ち込むと、使いやすさに難が残る（ボタンが小さくて押しにくい、アニメーションの表示エリアが小さくて見にくい、など）ことも考えられます。

そのため、構成から見直した方が賢明かもしれません。

[hidekia34521119]

448jp様

ご回答いただき、ありがとうございます。

お返事が遅くなり申し訳ありません。

実装は可能だが、少なくともAnimate CC単体から

この形を維持したままの書き出しは難しいという事ですね？

> 1つのHTMLの中に複数のCanvasを配置すると、特に古いAndroidでは極端にパフォーマンスが落ちる可能性が高い

と仰いますのは、今回の例で言うと、

画面本体、ヘッダー、右側アニメーションの３つという事ですね？

画面本体とヘッダー部分については 特にアニメーションする様な処理はありませんが、

それでもやはりパフォーマンスは落ちますでしょうか？

いずれにしても、 HTMLおよびjavascript から

１つのCanvas（アニメーション箇所）を切り替えられる様に

構成し直した方が現実的という事ですね。

では、重ねての質問で申し訳ありませんが、

上記構成が出来たとして、

このCanvasに読み込んだアニメーションを

この下部にある[一時停止/再生], [早送り] という制御は 可能なのでしょうか。

また可能な場合、

この制御もAnimate CCからではなく、

javascript で自作の必要があるのでしょうか。

早送りについては、現在のASでは

ボタンを押している間 currentFrame+3 となる様にしています。

宜しくお願い致します。

[448jp]

実装は可能だが、少なくともAnimate CC単体から

この形を維持したままの書き出しは難しいという事ですね？

はい、その通りです。

と仰いますのは、今回の例で言うと、

画面本体、ヘッダー、右側アニメーションの３つという事ですね？

画面本体とヘッダー部分については 特にアニメーションする様な処理はありませんが、

それでもやはりパフォーマンスは落ちますでしょうか？

はい、3箇所の認識で間違いありません。「特に古いAndroidでは極端にパフォーマンスが落ちる可能性が高い」と、あえてぼかすような書き方にしたのは、AndroidはOSや機種ごとにCanvasの再生パフォーマンスに極端な差があるため、最終的にどこまで許容範囲とするかは、コンテンツの制作者や動作対象とする機種によって変わってくるからです。

そのため、小さいプロトタイプを作るなどして試していくのがベストかと思います。

このCanvasに読み込んだアニメーションを

この下部にある[一時停止/再生], [早送り] という制御は 可能なのでしょうか。

また可能な場合、

この制御もAnimate CCからではなく、

javascript で自作の必要があるのでしょうか。

早送りについては、現在のASでは

ボタンを押している間 currentFrame+3 となる様にしています。

一時停止/再生、早送りともに技術的には可能です。ただし、早送りについては前述のパフォーマンスの問題で、どの程度までスムーズに描画できるかどうかは、実際に試してみる必要があるかと思います。

実装としては、JavaScriptを使うことになりますが、HTML5 Canvasドキュメントの場合、Animate CCのフレームにもJSを記述することができます。もちろん、書き出し後にJSを追加することでも実装可能です。

[hidekia34521119]

448jp様

再度ご回答いただき、ありがとうございます。

デバイスの問題、canvasへの読み込みの問題、制御の問題と、

パフォーマンス面での壁は高そうですね。

そもそもなんですが、

質問をしてからご回答をいただくまでの間に、

読み込みたいアニメーションをcanvas書き出ししたところ、

このアニメーション単体でも（PC上の再生で）

実用に耐えないほど重いものがいくつもありました。

おそらく、CADから出した機構設計データを

多用しているからだと思われます。

ネット環境のインフラが整っていない海外などでは、

さらに条件は厳しくなるのでしょうね。

（未定ですが今後対応の可能性はありますので・・・）

その上で、上記の様な課題がある事を考えると

やはり、このコンテンツをcanvasで実現する事自体が

厳しい様に思えます。

貴重なご意見を度々いただき、

ありがとうございました。

一時停止/再生、早送りなど、

技術的に可能である事が分かっただけでも

今後の別案として得るものがありました。

ありがとうございました。