基礎から学ぶActionScript 3.0

クリック時のイベントリスナーを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスでインスタンスをクリックすると、MouseEvent.CLICKイベントが発生します。クリックしたときに行いたい処理は、このイベントにリスナー関数として加えます。
講師:
07:47

字幕

タイムラインにあるインスタンスを クリックしたら、 アニメーションが始まる、 という処理にしてみたいと思います。 「クリックしたら」というのもイベントです。 ActionScript 3.0 の イベントリスナーの仕組みというのは、 あらゆるイベントを addEventListener () というメソッドで扱うことができます。 つまり、イベントリスナーの仕組みを 1つ覚えてしまえば、 ActionScript 3.0 では 非常に応用範囲が広いのです。 今、開いている、 この fla ファイルのアニメーションを、 まず、確認しておきましょう。 ムービープレビューです。 「制御」> 「ムービープレビュー」を実行します。 秒針のインスタンスが、1秒刻みで ただちに動き出します。 これを「クリックしたら動く」 という風にしたいと思います。 このイベントリスナーのスクリプトは、 ムービークリップシンボルの中に 書いてありますので、 そこに、また新たなイベントリスナーの スクリプトを追加してみましょう。 SWF のウィンドウは閉じます。 ムービークリップシンボルの中の スクリプトを書き換えますので、 メインタイムラインにある ムービークリップインスタンスを ダブルクリックして、 シンボルの編集状態にします。 「シーン 1」の右側に、 シンボルを示す Bar という 名前が表示されました。 現在は シンボルの中を見ています。 スクリプトは このシンボルの中の「タイムライン」、 scripts のレイヤーの 第1フレームに書いてあります。 右クリックで、 「アクション」パネルを開きましょう。 まず、今、書かれているアニメーションの スクリプトを確認しましょう。 アニメーションを行う場合には、 addEventListener の 第1引数に定めるイベントは Event.ENTER_FRAME になります。 addEventListener で お願い先は、 このムービークリップインスタンス自身です。 this. は省略しても構いません。 そして、 実行したい関数を xRotate としました。 関数の指定には () は入れないでください。 () を入れると、関数を呼び出す ということになってしまいます。 ここでは、登録するだけで 呼び出してはいけません。 ですから、関数名を指定するだけです。 呼び出しは、 Flash Player が ENTER_FRAME のときに 行ってくれます。 言ってみれば、 Flash Player が () を付けて、この呼び出しを行うので、 ユーザーは、これを指定する時は () は付けない ということです。 そして、xRotate という 関数ですけれども、 イベントリスナーとして登録した addEventListener () の メソッドで登録した場合には、 引数として 必ず eventObject を受け取ります。 データ型は,イベント指定した この最初の 「クラス」と言うんですが、 クラスと同じ名前を指定します。 : の後は void 今のところ お決まりです。 そして { }の中に 行うべき処理を定めます。 ここでは getTimer で 経過ミリ秒数を調べ、 それを 1000 で割って、 秒数に直して変数に入れ、 その変数の小数点以下を Math.floor () メソッドで 切り捨てて、 1秒当たりの回転角6度を このインスタンスの rotation プロパティ、 つまり、角度に設定します。 ですから、アニメーションで、 秒数に従ってインスタンスの角度が変わった、 ということです。 このフレームアクションに、新たに、 「クリックしたら」という、 イベントリスナーを登録します。 イベントリスナーの登録は、 もちろん、 addEventListener です。 間違えないように コピーしてしまいましょう。 そして、イベントなんですが、 MouseEvent.CLICK です。 覚えていれば、 タイプして構わないんですが。 キーボードから、 Windows は Ctrl+Space Mac の場合には、 Command+Space を打つと、 コードヒントが出てきて 探しやすいです。 MouseEvent. ですが、 コードヒントには Event. しか 出てきませんね。 M と打つと、 MouseEvent の リストの方に移ります。 幸いにして、一番トップが MouseEvent.CLICK ですので、 Enter を押してしまえば、 イベントが入ります。 2行目に何か入りましたが、 ここは気にしないで結構です。 1 行目2行目は import という ステートメントなんですが、 これは、置いておいても大丈夫ですし、 消しても問題はありません。 そして、 実行したい関数は、 まだ定めていませんが、 アニメーションを始めますので、 xStart にしましょう。 その関数を定めます。 function ですね。 コピーしても良いですが、 ショートカットがありました。 Esc キーを1回、 アルファベットの F のキーを1回、 N のキーを 1 回打ちます。 そうすると Esc+F+N で、 function () {} が入ります。 とても便利ですね. そして、ここに名前を、 タイプしてもそんなに 間違わないでしょうけれども、 コピーします。 それから、やはり、 addEventListener () で 登録した関数は、 必ず、 eventObject を 受け取ります。 ですから、 eventObject と、 名前は別に変わってもいいんですが、 揃えておきましょう。 : の後に 定めるイベントなんですが、 ENTER_FRAME の場合には、 : 後 Event にしました。 けれども、今回、 MouseEvent.CLICK というイベントですから、 この MouseEvent と 同じにしなければいけません。 今、コードヒントが出てたんで、 その中から拾ってもいいんですが、 必ず、登録と eventObject の受取り、 登録と eventObject の受取りで、 クラスを一致させる必要があります。 そして、この中で 何を行えばいいかというと、 Mouse[Event].CLICK 「このインスタンスの上でクリックした時」に、 eventObject 「イベントリスナーを登録して」、 Event.ENTER_FRAME で、 「アニメーションを行ってください」と、 ここで登録をすればいいですね。 そうすると、 「マウスでインスタンスをクリックした時に、 このリスナー関数が実行され、 クリックした時、 初めて ENTER_FRAME で 回転のアニメーションをやって下さい」 という指定をすることになります。 ということで、「クリックをすると アニメーションが始まる」 というスクリプトが これで出来上がりました。 では、このスクリプトの結果を 確認してみましょう。 「制御」>「ムービープレビュー」です。 インスタンスをクリックすると、 動き始めます。 SWF のウィンドウは閉じましょう。 今回は、イベントリスナーを 新たにもう1つ追加しました。 「インスタンスをクリックしたら」 というイベントは、 MouseEvent.CLICK でした。 そして、インスタンスを クリックした時に、 そのリスナー関数で 新たに Event.ENTER_FRAME 描画が更新される時の アニメーションの処理を実行する、 というかたちで、 クリックしたらアニメーションが始まる というかたちにしました。 今回は、特に「クリックしたら」という MouseEvent.CLICK に対する、 イベントリスナーの登録を ご説明しました。

基礎から学ぶActionScript 3.0

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

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

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

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

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