読者です 読者をやめる 読者になる 読者になる

ボタンアクションとthis

AnimateCC(Flash Pro)

f:id:web-design-lesson:20160508132050p:plain

ActionScriptとは

  • ActionScriptは、国際標準プログラミング言語である「ECMAScript」を基礎としています
  • ActionScript2とActionScript3があります
  • ActionScript3.0は、ECMA-262 3rd edition に準拠しています
  • 「AnimateCC」では、ActionScript3のみが使用できますが「オブジェクト指向」を理解するためには、「ActionScript2」を理解することが近道です
  • ActionScript2は、FlashCS6まででしか記述ができないため、環境を整えることが困難な人はActionScript3で挑戦してみましょう
ActionScriptの動作のしくみ

オブジェクト指向 JavaScript 入門

  • オブジェクト指向プログラミング (OOP) は、実世界を元にしたモデルの作成に抽象化を使用する、プログラミングのパラダイムです
  • OOP では、各々のオブジェクトがメッセージを受信し、データを処理し、また他のオブジェクトへメッセージを送信できます
  • 各々のオブジェクトは明確な役割や責任を持つ、独立した小さな機械であると見なせます
オブジェクトとインスタンスFlashの場合)
  • 関連するデータの集合と、それに対する手続き(メソッド)を「オブジェクト」と呼びます
  • 「ライブラリ」パネルに格納されているシンボルは、「オブジェクト」です
  • シンボルとは、ムービー内で再利用するためにライブラリパネルに格納されるムービークリップやグラフィック、ボタンなどのことを指します
  • インスタンスとは、ムービー(ステージ)上に配置されたシンボルのコピー(正確にはシンボルを参照するエイリアスのようなもの)です

タイムラインアニメーション

  • 「1/24秒」に1フレーム同期する時間軸を利用します
  • 「モーショントゥイーン」「クラシックトゥイーン」ともに、「キーフレーム」間の移動を「1/24秒」に1フレームの割合で、間歇してくれる機能です
  • タイムラインアニメーションは、基本的には自動再生のため閲覧者の判断の入る余地がなくなってしまいます
  • そこで「ボタンを押したら再生する」ように、イベントを追加していきます
ActionScriptの種類
  1. フレームアクション
  2. ブービークリップアクション
  3. ボタンアクション

イベント

  • この段階でのイベントは、2種類しかありません
    1. ムービーがロードされたとき
    2. ボタンが押されたとき
onハンドラ
  • マウスとキーの動きにより発生したイベントを感知します
  • ActionScriptで命令とその命令がいつ実行されればよいかを記述します

実際のアニメーション

f:id:web-design-lesson:20160508163120p:plain

  • 「ライブラリパネル」に格納された「シンボル」は、オブジェクトです
  • 「ステージ」上に配置されたシンボルは、「インスタンス」として扱われます

ActionScriptを記述

  • ActionScript2でフレームアクションとボタンアクションをそれぞれ記述する(古い記述法)
  • フレームとインスタンスに記述します
自動再生を止める(タイムラインを停止)
  • Actionレイヤー「1フレーム」に「フレームアクション」を記述する

f:id:web-design-lesson:20160508164807p:plain

  • この「this」は、メインのタイムライン「_root」として認識されます
  • この「this」は、スクリプトを定義したタイムラインを参照します
タイムラインを再生

f:id:web-design-lesson:20160508171426p:plain

この場合、車のムービークリップActionScriptを書いて停止させることはできません。
ボタンクションの「this」がボタン自身ではなく配置されたタイムラインを参照するという仕様は、Flash5以前との互換性を保つためのものです。
FlasMXから新しく採用された「イベントハンドラメソッドJavaScriptでは、無名関数)」では、「this」がボタンインスタンス自身を参照します。

イベントハンドラメソッド

  • Actionレイヤー「1フレーム」に「フレームアクション」で全ての命令を記述する
 this.onLoad = function() {
	this.stop();
  }
 start_btn.onRelease = function() {
	play();
  }
 stop_btn.onRelease = function() {
	stop();
  }
 back_btn.onRelease = function() {
	gotoAndStop(1);
  }

ここで「this」をボタンインスタンスにつけると、メインのタイムライン「_root」を参照しにいかないため動かなくなります。
以下の場合も同様です。

車のムービークリップを押した時に停止させるためには
car_mc.onRelease = function(){
	this.stop();
}

と記述すると停止しません。
なぜなら、この時の「this」は、車のムービークリップ内のタイムラインを参照しているため、そこにクラシックトゥイーンで時間軸が動く命令がないからです。

car_mc.onRelease = function(){
	stop();
}

のように「this」を記述しないことにより、メインのタイムライン「_root」を参照させ停止させることができます。


今回の事例は、タイムラインを制御する命令でした。