CreateJSを応用したダイナミックなアニメーション

リングをCanvasのランダムな位置に置く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLドキュメントを開いたとき、リングをCanvasのランダムな位置に配置します。
講師:
08:41

字幕

この HTML ドキュメントに書いた JavaScript コードは EaselJS のライブラリを使って リングを描き それを Canvas の中央に置いています。 この置く位置をランダムな位置に 変えてみたいと思います。 また少しスクリプトを関数で 整理してみるということも行ってみます。 ブラウザーのウィンドウは閉じましょう。 そして現在 Dreamweaver で コードを開いていますが この内容を簡単に確認してみます。 Shape インスタンスを作って リングを描き それを返すという関数を createCircle という名前で 定義しています。 この内容を簡単に見ていきますが 先ず Shape のオブジェクトを作ります。 new createjs.Shape そして それを返す return ですね。 その間にあるのが描画のメソッドです。 描画は Shape インスタンスの Graphics という参照を取り出して プロパティから参照を取り出して それに対して どんな太さの線を描くのか setStrokeStyle そして線の描き始め beginStroke これにはカラーを指定します。 そして実際の描画は drawCircle というメソッドで 円を描いています。 x y 座標と半径を指定します。 これらのパラメータはこの関数が 太さ カラー 半径という 引数として受け取ります。 そうして作って返された Shape インスタンスの x y 座標を指定し Stage の子どもとして加え Stage を描画し直せば 先程のようにリングが Canvas 中央に 描かれるということです。 リングの Shape インスタンスの位置を ランダムにする前に 後々色々追加しやすいように 変数や関数を 少し整理しておきたいと思います。 先ずこの円を描く リングを返す関数は 今回使いませんので 畳んでおきましょう。 先ず変数ですけれども canvasElement の幅と高さ これは後々使うので 変数に別にとっておきます。 改行を入れまして nWidth としましょう。 そしてコピーで持っていきます。 Ctrl もしくはCommand+ ドラッグでコピー 同様に高さですね。 nHeight にしましょう。 こちらからコピーを持っていきます。 Ctrl もしくは Command で ドラッグします。 そうしたらこの部分 変数に置き換えてしまって 良いんじゃないか ということなのですが 確かにその通りなんですけれど ここはちょっと書き方を変えるので 一旦コメントとして外しておきます。 どうするかというと circle のリングの位置決めを 関数で定めたいと思います。 x や y 位置決めを 関数で定めます。 まだ書いていませんが もう関数を決めてしまいます。 setAppearance 見た目を 設定するということですね。 という関数に どうするかというと このインスタンスの座標を ここ ここに指定してねと 先ずインスタンスを ドラッグコピーで渡し それから設定した x y 座標を渡します。 nX nY としましょう。 この変数はまだ定めていません。 ですから この変数を定めることにします。 変数宣言は 続けて書いていくことにしましょう。 nX nY この後に書きます。 var の nX これは元の値と取り敢えず 同じにしておきますので 但しここは変数になりますよね。 なので ドラッグコピーします Ctrl もしくは Command ドラッグ 割ることの 2 ですね。 同様に変数 nY 一応コピーとります。 ドラッグコピーで割ることの 2 ちょっと邪魔なので もう削除してしまいます。 そして関数を定める ということですね。 function ちょっと長いので コピーすることにします。 Ctrl もしくは Command ドラッグ 変数はもらうのはインスタンスです。 ですから instance という 変数名にします。 あと nX nY はこのまま もらってしまいましょうか。 同じ名前にしておきます。 そして括弧閉じ ここに処理を書いていきます。 関数 setAppearance の処理は 極めて簡単ですね。 ただこう分けておくと 見た目を調整するような 処理がここに どんどん どんどん 書き加えていきやすいです。 ドラッグコピーしています。 instance に対して x 座標の nX に指定し またコピーして y 座標を nY とします。 変数や関数の整理を しただけですから 動作は変わっていては いけないんですけれども 確認しておきましょう。 ファイルを保存します。 そしてブラウザーで プレビューしてみます。 Canvas の中央にリングが 問題なく描かれました。 動作は変わっていませんので ではブラウザーを閉じましょう。 リングの位置を決めているのは setAppearance の呼び出しです。 そして座標は nX nY にしています。 現在は Canvas の半分ずつ ということで中央にしていますが ここをランダムの値に変えてあげれば良い ということになりますね。 どうするかというと ランダムな数値を返す Math クラスのメソッドがあります。 それをここに書き加えます。 ランダムなと言いますけれども 具体的にどういう値かというと 0 以上 1 未満の値です。 ということはステージの中 どこでも良いからランダムと言えば ここにそれを掛け算すれば良いですね。 掛けることの Math.random としてあげると 0 以上 1 未満ですから 幅を掛けてあげれば 0 以上幅未満ですね。 高さも同様です。 これをコピーしてしまいましょう。 コピーして そしてここにペーストです。 ファイルを保存したら ブラウザーで確認してみましょう。 先ず保存です。 そしてブラウザーでプレビューします。 リングが左上に置かれました。 ランダムの値 両方ともかなり 0 に近かったようですね。 本当に毎回ランダムか ちょっと確認してみましょう。 更新します。 リロードですね。 上の方にいますね。 少し下にきました。 また上ですね。 なんだか 上が好きそうですね。 下にきました。 これくらい見ればランダムだということは お分かりいただけたでしょうか。 ではブラウザーを閉じることにします。 今回は後々拡張しやすいように ということを考えて 少し整理をしました。 先ず Stage のと言いますか Canvas のですね。 幅と高さを変数にとって 色々と使いやすいようにしました。 実際にはここで ランダムで使っています。 それから位置を決めるという ごく簡単な処理なんですけれども その他にも色々見た目を変える処理が 後々加わるかもしれないということで インスタンスに対して 取り敢えずは x 座標と y 座標を 指定するという関数を定め それを初期化の関数から 呼び出すようにしました。 そしてランダムな値の求め方です。 Math.random というメソッドは 0 以上 1 未満のランダムの値を返します。 今回はステージいっぱいをランダムに 動きたいということだったので ステージの幅に Math.random の値を掛け 高さに Math.random の値を 同じように掛けています。 そうすることによって ステージの端から端まで ランダムの値が設定される ということになりました。

CreateJSを応用したダイナミックなアニメーション

このコースではCreateJSの基礎を学んだ方に、ダイナミックでインタラクティブなアニメーションの作り方を解説します。JavaScriptであまり扱われない項目や、数学や物理などスクリプト以外の考え方も合わせて解説しています。CreateJSでぜひFlashに負けないコンテンツを作ってみましょう。

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

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

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

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