CreateJS実践講座

オブジェクトをドラッグする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オブジェクトをドラッグするには、ふたつのマウスイベントを使う必要があります。
講師:
07:21

字幕

このレッスンではオブジェクトをドラッグする その処理の書き方をご紹介します ステージに星形のインスタンスが 1つありますけれども これはマウスでドラッグする事ができます ボタンを離せばその場に止まります そしてまたドラッグをするという事ができます Dreamweaver で開いたのは 「ドラッグで動く」ではなく 「クリックするとインスタンスが回る」という スクリプトを書いた HTML ドキュメントです どのような構成になっているかというと シェイプのインスタンスに対して addEventListner でクリックした時に ローテートというリスナー関数を 実行しなさいとなっています リスナー関数はイベントオブジェクトから クリックしたインスタンスを取ってきて そのローテーションを15度回転して 描画を更新しています 動きを確認しましょう ファイルで ブラウザでプレビューです 星形のシェイプインスタンスを クリックすると回転します このスクリプトを書き換えて ドラッグでこの星型が動くようにします さて EventListner のEvent から 書き換えましょう このシェイプのオブジェクトに addEventListner しているところですけれども click でなくて mouseDown にします リスナー関数はまだ変えないでおきましょう 回転します では保存して確認してみましょう ブラウザでプレビューです マウスボタンを押すと回転します 何が違うんだろう?とビデオで お見せするのはとても難しいんですけれども 実はクリックという動作は マウスボタンを押し そのままそのオブジェクトの上で マウスボタンを離したのがクリックです 例えばこんなボタンにしても 押して 「やっぱりやーめた」と外で離すと 何も起こりませんね これがクリックです 押した上で その上で 離した時に反応するのがクリック マウスダウンというのは押した瞬間に 後悔をする間もなく動いてしまう ビデオで見ると同じなんでしょうが 今この星形というのは 私がマウスボタンを押した瞬間に動いています 離すまでもなく動く そういうイベントの違いがあります ドラッグで動かすという時には 離すのを待っていてはいけません 押した瞬間に ドラッグが スタートしないといけませんので マウスダウンというイベントを使いました では その続きでドラッグの方に移りましょう さてマウスボタンを押した瞬間に このリスナー関数が 実行されるようになりました そうしたらこのリスナー関数の中で 次のステップに進みます その前に もう回るのはやめますから 名前を変えましょう startDrag にします 名前を変えたのでこの名前をコピーして こちらにペーストです そして回転はしません その代わりに 新しいイベントリスナーを登録です またお願い先は このシェイプのインスタンスです addEventListner しますので ちょうどここに良いものがありますから コピーをもらいましょう コピーしてきます ドラッグというのはマウスボタンを押したまま 動かしたらですね まさにそういうイベントがあります pressMove です そうしたらどうするかと言うと ドラッグしてくださいという事のなので 次はまた drag という リスナー関数を定義します ではこれも この辺をコピーして いただいちゃいましょう コピーをします 名前は drag ですので忘れずに 変えないといけません 閉じます あとこちらも一緒ですね イベントオブジェクトからその操作をした― マウス操作をしたインスタンス オブジェクトを取り出します そしてどうするかと言うと 位置を変えるわけです ここもコピーをして― X座標をまず変えましょう さあここで どこにX座標を 持っていったらいいかと言うと マウスポインタの座標ですよね マウスポインタの座標って どうやって分かるんだろう? イベントオブジェクトに聞いてください イベントオブジェクトをコピーしまして ステージにおけるマウス座標 stage X というのが ステージにおけるX座標です その座標にインスタンスのX座標を 合わせてくださいという事になりました ではこれで確認します ファイルを保存して ブラウザでプレビューします インスタンスを マウスボタンを押します そして動かすと 動かない なぜだかお分かりになるでしょうか? Dreamweaver の方に戻ります 問題はステージのアップデートが されていないことです 逆にマウスボタンを押した瞬間は特に アップデートする必要がありませんので これをこちらに持ってきてしまいましょう では改めまして ファイルを保存して ブラウザでプレビューします マウスボタンを押して動かします もちろんまだX座標の方しか 処理していませんので 水平にしか動きませんけど 確かにマウスポインタの後を追っています ではY座標も同じように設定しましょう X座標の処理をコピーして 使ってしまいましょう コピーして ペーストです そしてXをYに変え こちらもXを大文字のYに変えます では再確認です ファイルを保存して ブラウザでプレビューしましょう マウスボタンを押したまま動かすと ドラッグができます マウスボタンを離すと止まります このレッスンではオブジェクトをドラッグする 処理の書き方についてご紹介しました ドラッグと言うのはマウスボタンを 押した瞬間に始まり 押したまま動かした時に 座標がついてくるという事ですね という事でシェイプに addEvenListner をするのは まずマウスボタンを押した時 ドラッグを開始すると ドラッグを開始するというのは 今度はまた新しいイベントリスナーを登録して 押したまま動かしたら座標を変えましょう そしてそのリスナーが インスタンスに対してX座標とY座標 イベントオブジェクトのstageX stageYというのでマウス座標が分かりますので その座標にオブジェクトを設定しました

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

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

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

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

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