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

ハンドルのパーツをつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Shapeオブジェクトでハンドル用のパーツをつくります。
講師:
11:24

字幕

これから このチャプターで後で使うパーツを 1 つ作りたいと思います 小さくて見にくいかもしれませんが 画像の右上隅にある小さい丸です これは Shape で作り 円形で青く塗りつぶしています 今開いている HTML ドキュメントは CreateJS の EaselJS と PreloadJS を使って 外部画像ファイルを読み込み Bitmap のオブジェクトの中に入れて Canvas の中央に配置するところまで できています まだ Shape のパーツは 全く作っていません 今の段階のドキュメントの表示を ブラウザーで確かめておきましょう ファイルメニューから ブラウザーでプレビューです 画像を読み込んだ Bitmap オブジェクトが ステージの中央に配置されています ここに Shape の丸い形 青い Shape を描き加えましょう ブラウザーのウィンドウは閉じます 先ず Shape のパーツを入れるための 変数を宣言しておきます 後でドラッグできるようにする という予定があるので handle という名前にします そして Bitmap を作った後に handle を作ることにします 念のためドラッグコピーしましょう handle を変数を コントロールもしくは コマンドドラッグでコピーして そこに代入するのですが 関数をやはり作りましょう 関数は createHandle ということで作ります そして渡す引数を決めましょう 引数は先ず丸い Shape の半径です それからカラーですね 青くしましょうということで blue にします この関数をこれから定めます Bitmap の扱いをしている所は 取り敢えずたたんでおきましょう そしてこの後に 関数を定めることにします function の一応コピーしましょう コントロールもしくは コマンドドラッグです 丸括弧を先に閉じてしまって 中括弧も閉じます 閉じ括弧はできるだけ早く閉じた方が 閉じ忘れて対応が 合わなくなるということが防げます そして引数ですね 次に引数ですけれども半径 radius そしてカラーは color で良いでしょうね Shape を作る処理を ここに加えていきます 先ず Shape オブジェクトを 作りますので それを入れる変数を宣言します myShape としましょう そしてもちろん作り方は new ですね createjs の Shape です 引数は特にありません これも呼び出した 関数を呼び出した後 それを変数に入れています ということは作った Shape は 返さないといけないということで return も早めに書いておきましょう myShape ドラッグコピーします もちろん このままでは透明ですので 何か書かないと見えません 何か書くには Shape のオブジェクトの Graphics というプロパティから Graphics オブジェクトをとることが必要です その変数を宣言します myGraphics そして Shape からもらいます myShape ドットですね graphics 丸を描きます 先ず塗り色の定めが必要です これをコピーしておきましょうか それでペーストです 塗りの定めは beginFill です 描画のアプリケーションで 何か描く時も必ず バケツで塗りを指定するとか 鉛筆で線を指定するとかありますね これは塗りの指定になります 塗りの指定は引数でもらっていますから これを渡せば良いですね ドラッグコピーです 次に実際に円を描きます myGraphics コピーしてあったはずですので大丈夫ですね ここで円をサークルを描くというメソッドです drawCircle そして渡してあった- 半径を使うんですが先ず x y 座標ですね x y 座標を定めて そして半径 そして作った Shape のオブジェクトを 実際にステージに表示するには addChild を呼ぶ必要がありますが それは xSetAppearance という 関数を定めてあって その中で行うことになっています 位置決めと それからステージへの表示ですね しかし位置は画像の右上隅にしたい ということは 画像を読み込み終わった後でないと その位置が分かりませんね 先程たたんだ所を広げます この中で draw という関数が ありますけれども これは画像を読み込み終わった時に 呼び出されるように定められています LoadQueue のオブジェクトに対して addEventListener ファイルがロードし終わったら draw を呼んでくださいと お願いしていますので この時点で画像の読み込みができています そして実際画像を取り出し eventObject の result というプロパティで画像を取り出して 画像の幅や高さも変数にとっています ですからこれを使えば 作った Shape 丸い Shape ですね あれを配置することもできます 最後で良いでしょうか SetAppearance のメソッドを 関数を呼び出します ドラッグコピーです コントロールもしくはコマンドドラッグ そしてハンドルは handle という変数に 入れることになっていましたので handle ですね 座標は先ず x 座標は myBitmap これが画像の参照です その x 座標を基準にして x 座標これを使えますね コピーしてしまいましょう コントロールもしくは コマンドを押しながらドラッグ これはビットマップの 左上隅になりますから 右上にしたかったら 幅を足せば良いですね 足すことの imageWidth これが画像の幅をとっていますので 足し込みます 水平座標はこれで決まりました 垂直座標は画像の左上隅の あの座標で良いですね ということなので Bitmap オブジェクトの y 座標を使いましょう ドラッグコピーします コントロールもしくはコマンドドラッグ 結果を確かめましょう 先ずファイルは保存して それからブラウザーでプレビューします 画像の右上隅に 青い丸の Shape が描かれました ではブラウザーのウィンドウを閉じて おさらいしましょう 先ず Shape のパーツを入れる変数を 宣言しました そしてその変数に Shape を作って返す関数を定めて 呼び出しています この関数は ここに定めてありますけれども 引数に大きさを決める半径 それから色が渡されます そうすると この関数は 先ず Shape を作ります new createjs.Shape そして作った結果は 返さないといけないので返しています それで返された Shape オブジェクトが この変数に入るという流れです ただこれでは透明になってしまいますので 絵を描いています 絵の描き方は Shape のオブジェクトから graphics プロパティを参照して 絵を描くための Graphics オブジェクトをとります 塗り色の指定は beginFill カラーは引数からもらいました 次に円を描くのが drawCircle x y 座標と半径 これは引数からもらっていますので その引数を渡しています これで Shape のオブジェクトが 出来上がりました 円形で青い塗りです 但しまだステージに置かれていませんので このままでは画面に見えません この青い Shape を配置する場所は 画像の右上隅ですから その右上隅がどこかは 画像を読み込まないと分かりませんね ですから配置は画像の読み込みを 待たなければならないということです ですから ここは一旦たたんでしまって 逆にたたんであるのを開きます この draw という関数が イベントリスナーとして登録されていて 画像が読み込み終わると fileload のイベントが発行されると draw という関数が呼び出されます ですからここでハンドルの Shape を 配置すれば良いということですね そこで実際 xSetAppearance という関数がありまして この関数が位置決めと ステージに加えて表示するという処理を 担っていますので draw に 1 行書き加えて xSetAppearance の 呼び出しをして handle Shape を渡し Bitmap オブジェクトの x 座標に 画像の幅を足しています そうすると右端ですね 次に y 座標は 画像の左上と同じですので その値を渡しています そうすることによって画像の右上隅に 作った Shape の青い円の インスタンスが置かれました

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

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

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

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

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

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