Skip to main content
hidekia34521119
Participant
May 9, 2017
Question

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

  • May 9, 2017
  • 1 reply
  • 2007 views

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

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

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

現在は、

全画面swfの中に、

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

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

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

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

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

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

この構成を維持したまま

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

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

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

宜しくお願い致します。

This topic has been closed for replies.

1 reply

448jp
Inspiring
May 12, 2017

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

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

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

hidekia34521119
Participant
May 15, 2017

448jp様

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

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

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

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

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

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

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

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

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

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

1つのCanvas(アニメーション箇所)を切り替えられる様に

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

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

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

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

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

また可能な場合、

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

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

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

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

宜しくお願い致します。

448jp
Inspiring
May 15, 2017

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

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

はい、その通りです。

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

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

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

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

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

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

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

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

また可能な場合、

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

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

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

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

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

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