基礎から学ぶActionScript 3.0

矢印キーの方向に1ピクセルずつ移動する ─ if/else ifステートメント

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
if/else ifステートメントでキーコードを調べるのは、これまでの学習のおさらいです。
講師:
10:32

字幕

タイムラインのインスタンスを、 矢印キーで、 上下左右に動かせるムービーを作ってみます。 今、開いている SWF は完成品です。 左向きの矢印を押しますと、 左に移動します。 今、押し続けています。 次、右向きの矢印キーを押し続けると、 右に連続して移動します。 それから、上向き矢印キーを 何度か押してみますと、 その度に、1ピクセルずつ動きます。 下向きの矢印も同様です。 キーボードのイベントを捉えて インスタンスを操作する方法について、 これから解説します。 では、 SWF を閉じましょう。 この Flash ムービー、 「プロファイル」の「タイムライン」には、 インスタンスが置いてあるだけで、 まだスクリプトは書いていません。 スクリプトは、 このムービークリップインスタンスの シンボルの中に書く予定です。 ダブルクリックをして開きましょう。 「シーン1」の右側に、 ムービークリップのアイコンと、 ムービークリップの名前が表示されましたので、 現在、表示されているのは、 ムービークリップの中です。 スクリプト用のレイヤーも、 すでに作ってあります。 但し、空っぽです。 右クリックで、 「アクション」パネルを開きましょう。 キーボードイベントの イベントリスナーは、 通常 Stage に登録します。 stage に対して、 addEventListener で、 「キーボードのキーを押したら教えてね。」 ということを頼みます。 KeyboardEvent で、 KEY_DOWN が、 既にコードヒントでハイライトしてますので、 Enter キーで入れます。 そして、イベントハンドラですけれども、 イベントリスナーですが、 xKeyDown としておきましょう。 このリスナーを、 関数として定めます。 リスナー関数の定め方は、 通常のイベントリスナーの通りですね。 eventObject を受け取ります。 KeyboardEvent の イベントを登録しましたから、 eventObject のデータ型は KeyboardEvent になります。 現在、コードヒントで、 Keyboard がハイライトしています。 Keyboard を全部打つのは 面倒くさいので、 その下に KeyboardEvent が あるはずです。 下向き矢印キーを1回押して Enter キーで KeyboardEvent が入ります。 そして :void ですね。 押したキーは、 KeyboardEvent の eventObject から受け取れます。 eventObject の .KeyCode ですね。 それを入れる変数を宣言します。 整数なんで、 nKeyCode としましょう。 型は Number でもいいんですけれども、 KeyCode は整数です。 しかも 負の数はありません。 マイナスはないです。 マイナスがない整数というのは。 unsigned integer の略で、 uint という指定をします。 そして eventObject これは、打ち間違いすると嫌なので、 コピーをして、 そして KeyCode ですね。 KeyCode が入りました。 trace してみましょう。 nKeyCode の値を trace して、 矢印キーが 何番が出てくるかということですね。 確認してみたいと思います。 では、ムービープレビューで 確かめてみましょう。 「制御」>「ムービープレビュー」です。 押したキーの行動が 「出力」パネルに出てきます。 知りたいのは上下左右の矢印ですから、 順番に押していきます。 まず、左が「出力」パネルに出ます。 37 です。 上が 38 右が 39 下が 40 左から時計方向に、 グルッと回ったかたちで、 連番がふってあります。 では、分かりましたので、 SWF を閉じましょう。 まずは、左の矢印キーを押したら、 左に動くようにしてみたいと思います。 こういう時は上下左右 いっぺんに書かずに、 順番に1個ずつ確かめて、 出来たら、書き出足していくという方が、 間違いがありません。 では if 文ですので、 これ if で使ってしましましょう。 使いまわします。 「KeyCode が何々に等しかったら、」 というのは == です。 = ではありませんので、 ご注意ください。 = は、代入です。 == が、比較です。 「もし、 KeyCode が この番号に等しかったら、」ということで、 左は 37 番でしたね。 まだ、ここに出てますから、分かります。 そして、 {} 左に動かしたいですから、 今、シンボルの中に スクリプト書いてますので、 x 座標を -= ですね。 「1ピクセル左に」ということで、 これで左矢印キーを押せば、 左に行くはずです。 では、ムービープレビューで 確かめましょう。 「制御」>「ムービープレビュー」です。 矢印キーの場合は、 実は大丈夫なんですが、 キーボードのキー操作を確かめる時には、 ムービープレビューのこの画面で、 「キーボードショートカットを無効」に しておいた方が、安心です。 一応、念のため、無効にしておきます。 では、左向きの矢印キーを押してみます。 1個押しました。 押し続けますと、 左に移動します。 大丈夫そうですね。 では、 SWF のパネルを閉じましょう。 次は、右向き矢印ですね。 では、ここに書き足しましょう。 そして、「右向き矢印は KeyCode 何番だったけ?」と、 見ようとすると、 ムービープレビューを もう、一度見ちゃったので、 「出力」パネルが、 きれいにクリアされてしまいました。 勿論、メモしておけばいいでしょうけれども、 こういう時には Keyboard クラスの 定数を使うと、わかりやすいです。 それをご紹介しましょう。 KeyboardEvent ではなく、 Keyboard というクラスがあって、 そのクラスには DOWN 、 LEFT 、 RIGHT 、 UP という、 定数が定められています。 定数というのは プロパティと似たものなんですが、 プロパティが値が変わるのに対して、 定数は、この文字通り、 値が決まったまま 変わらないという性質があります。 そして、定数は大文字で定めるのが 式台になっています。 Keyboard.DOWN Keyboard.LEFT Keyboard.RIGHT Keyboard.UP という定数には、 それぞれ整数が入っています。 その整数というのは、 例の KeyCode の整数です。 例えば、 Keyboard.LEFT という値には、 37 が入っています。 37 のほうは、 ずっとタイプするのが楽でしょうけれども、 スクリプトで書いた時には、 このほうが一目瞭然ですね。 ですから、数字を書く代わりに、 この定数を使ってみたいと思います。 まず、この左向きの矢印の操作ですね。 37 を Keyboard. に 置き換えましょう。 Keyboard.LEFT です。 じゃ、今度 RIGHT なんですが、 RIGHT も大体、同じような感じなので、 コピーしてしまいましょう。 コピーして、 ワンスペース。 そして if は2つ使いません。 else if になりますね。 条件を追加したい時には、 if の後は else if else if は何度でも使えますので、 この後 y の垂直方向の動きにも、 付け加えていきます。 右に動かしたいので、 ここが + になりますね。 そして LEFT は RIGHT です。 じゃ、また、この else if を、 「コピー」して、 「ペースト」します。 UP からにしましょうか。 y の移動です。 垂直方向の移動で、 上はマイナスになりますので、 - と、 では、また、これを「コピー」して、 「ペースト」です。 最後は DOWN キーワードは青くなりますので、 タイプミスしたら、黒くなります。 気をつけてください。 これでいいでしょう。 ムービープレビューで 動きを確かめましょう。 「制御」>「ムービープレビュー」です。 まず、改めて、左からいきます。 左を押します。 押し続けています。 次、放して、 右押し続けます。 大丈夫ですね。 今度は、上を押し続けます。 上、そして、下。 ちゃんと、上下左右に動いているようです。 では、 SWF のウィンドウは閉じましょう。 キーボードの矢印キーを使って、 インスタンスを操作する。 そのスクリプトについての おさらいをしましょう。 まず EventListener は、 stage に対して登録します。 addEventListener そして、今回は、 キーを押した場合、 特に、押し続けた場合に動かしたいので、 KeyboardEvent の KEY_DOWN というイベントに、 リスナーを登録しました。 そして、リスナーが受け取る eventObject の keyCode というプロパティで、 押したキーの番号が分かります。 そして、その番号を if 、else if で 振り分けるわけですが、 番号を覚えておかなくても、 矢印キーについては、 あるいは、特別なキーについては やはり同じように、 定数が定めてあるんですが、 矢印キーについては、 Keyboard のクラスの LEFT 、 RIGHT 、 UP 、 DOWN という中で、 KeyCode が定められていますから、 これを使うと、 スクリプトが見た目、 非常にわかりやすくなります。 あとは if else if の条件判定を使って、 「どのキーが押された時に どういう処理をするか。」 ということを書けば良いわけですね。 以上が Keyboard を使った インスタンスの操作の仕方でした。

基礎から学ぶActionScript 3.0

このコースではFlashのActionScript 3.0を初めて学ぶ方を対象に、ActionScriptの基礎から実際にプログラミングをするところまで学習していきます。簡単なスクリプトによるオブジェクトの操作の仕方から始まり、変数や関数といったプログラミングの基礎、そしてインタラクティブなコンテンツの作成まで詳しく解説いたします。

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

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

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

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