AnimateでHTML5 Canvasコンテンツをつくる

ゲームのボールを水平にアニメーションさせる

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Animateでつくった素材のボールを、HTMLドキュメントのJavaScriptコードで水平にアニメーションさせます。
講師:
06:44

字幕

この レッスンでは Animate で作った 素材のインスタンスを HTML ドキュメントに書く JavaScript コードでアニメーションさせてみます。 まずこちらが Animate で作った 素材用のコンテンツです。 ボールと板ですね。 ボールの方には ball_mc 板の方には、board_mc という インスタンス名がついています。 それからフレームは二つあります。 ひとつ目にこのボールと板がありまして 二つ目のフレームには Game Over の時に使う用の フレームに文字が 書かれていますけれども この第一フレームでスクリプトがありまして 止まれという事になっています。 という事なので次に進めという JavaScript のコードを どこかで書かない限りは この第一フレームが 表示されたままになるということです。 では、これをパブリッシュしましょう。 特に設定は変えないので パブリッシュ設定は デフォルトのままパブリッシュします。 パブリッシュされたのがこちらの HTML と JS ファイルです。 JS ファイルの方はいじりませんので この HTML ドキュメントに スクリプトを書き加えます。 ただし、何度もパブリッシュしても 書き尽くされないように これは名前を変えておきましょう。 sample としておきます。 これでパブリッシュされる HTML ファイルは assets.html に なりますので このサンプルは消えません。 では、エディタで開きたいと思いますが Dreamweaver で開くことにします。 まずコメントがちょっと邪魔なので 全体が広く見えるようにしたいので 消していきます。 それから行の空きですね。 これも詰めてしまいます。 その方がたくさんコードが見えて 一覧性が増すと思います。 他のコードの所も同様ですね。 ここにスクリプトを 書き加えていこうということです。 まずは初期化の関数 unit ですね この中に新たに 設定をする関数を定めて 呼び出したいと思います。 startAnimation にしましょう。 これから定義します。 ( ) ; ですね そしてこの後に function setAnimation をコピーしちゃいます。 コピーを括弧も含めて持ってきます。 そして { } ということで 今回は先ほどのボールの方を動かします。 インスタンス名が ball_mc でしたね。 それを変数としても設定します。 ball_mc そしたらまずこの startAnimation の最初に この変数の設定を行います。 ball_mc はメインタイムラインに 置いてありました。 メインタイムラインは exportRoot で参照はできますので これをまたコピーで持ってきて そこに置いてある ball_mc に対して 同じ名前で変数を付けましたので この変数にアクセスすれば あのボールのインスタンスを 参照することができます。 ではアニメーション。 アニメーションの定番は ticker に対して addEventlistener で tick というイベントに リスナーを設定します。 ですから、これは重複するので コメントアウトします。 そして コピーをもらっちゃいましょう。 リスナーは違ってきます。 新たにまた設定するリスナー関数で ボールを動かすので moveBall にしましょう そしたら、その関数を 加えなくてはいけません。 書いてもそんなにタイプしないですけれど コピーを持ってきて addEventlistener で イベントに登録をすると イベントオブジェクトを受け取ります。 今回は使わないですが 一応受け取っておきましょう。 名前はまんま eventObject にしておきます。 そして { } と 水平に動かします。 という事は インスタンス ball_mc の X 座標を 設定すればいいわけですね。 X 座標に加算をするという風にすれば 右に動きます。 加算というのは 記号 += これで現在の値に 加算をするという事になります。 10 pixel 動かしたいと思いますが 後で値が変えられるように 変数で設定しておきましょう。 var で speed 水平方向なので X もつけておきます。 speedX としておいて これを 10 pixel ということで 10 と設定します。 これを加算すればいいですね。 speedX タイプは間違いないですね。 それから忘れていけないのは ticker で アニメーションして 描画を更新するという事です。 ここで stage に対して update これで描画が更新されます。 では保存して確認しましょう。 ファイルを保存します。 そして「ブラウザーでプレビュー」 「Google Chrome」です。 動いて板に当たっても 跳ね返りませんし 右を超えても 戻ってくることはありません。 これは板で後で 打ち返そうという設定なので この動きで構いません。 このレッスンでは Animate の HTML 5 document からパブリッシュした 素材のインスタンスを HTML のドキュメントの中に加えた JavaScript コードで アニメーションさせました。 その時に改めてもう一度 確認しておきますけども メインタイムラインのインスタンスに アクセスするときは メインタイムラインに当たるのは exportRoot ですので exportRoot を参照して インスタンスの名前を取り出す それは変数に入れておくと便利ですので その変数に対してコントロールをして 水平にアニメーションをさせる という事をやってみました。

AnimateでHTML5 Canvasコンテンツをつくる

Animate CCではPCやモバイル、Webブラウザなどさまざまなデバイスとプラットフォームに向けたコンテンツが作れます。またHTML5に対応したダイナミックでインタラクティブな表現が可能です。このコースはAnimateで作った素材をJavaScriptでどのようにスクリプティングするのかを基礎から解説します。

2時間43分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年05月19日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。