[Flash]イベントハンドラメソッド
ボタンを押すと何かが動く、のようなイベントをつくります。
1.その前段階として、星が横に動くようにしてみます。
動きはタイムラインに直書き、ではなく、アクション用のレイヤーに書き込みます
使用するメソッドは onEnterFrame です
- 星はイラストレーターで作成して保存しておく(IllustratorとFlashのバージョンが同じ場合は、イラストレーターでコピー&ペーストが可能)。
ファイル>読み込み>ステージに読み込み をします - 星をシンボルに変換します 修正>シンボルに変換>種類:ムービークリップ
- シンボルに「星」、インスタンスに「star_mc」(mcはムービークリップ)と命名します
- レイヤーを新規作成し、星のレイヤーと動き(Action)のレイヤーを分けます。
- Actionレイヤーに以下のスクリプトを記述します
var star_mc:MovieClip; ・・星のインスタンスがムービークリップであると宣言
var speed:Number =10; ・・動くスピードの設定
star_mc.onEnterFrame = function() {
star_mc._x += speed;
} ・・星のインスタンスの動きについての関数の定義。
「x軸方向に10のスピードで動く」
_x += speed となっているので、タイムラインの1コマ目を読込む ⇒ x軸方向に10動く ⇒ タイムラインの1コマ目を読込む ⇒ x軸方向に10動く
の繰り返しで、連続的な動きとなります。
[メモ]進行方向の制御
-x軸方向(左): vstar_mc._x -= speed 向きが反対になるのでマイナスになる
y軸方向(下): star_mc._x += speed; のxをyにする
y軸方向(上): star_mc._y -= speed;
2.星が回る
今度は星が回るようにしてみます。
1と違う点:
・変数宣言 var angle : Number =10;
・star_mc._rotation : += angle;
_rotationはムービークリップの配置角度。つまり、angleで設定した数値分角度で傾くということ。
var star_mc:MovieClip;
var angle:Number =10;
star_mc.onEnterFrame = function() {
star_mc._rotation += angle;
}
3.ボタンを押すと星が回る
新たにボタンを付けます。ボタンを押して離した時に回るようにします(ストップはしない)
・ボタンを追加
・アクションスクリプトの書き方
① 変数宣言で、ボタンを宣言
② インスタンスがタイムラインに読み込まれると、{}内の処理が呼び出される、
という内容の関数。この場合は「動く角度が10度」
③ ボタンがクリックされて離れた時に処理される内容を{}内に書いている。
再生タイムラインの1コマ目のstar_mcが10度動く ⇒ 1コマ目を読み込む
⇒10度動く ⇒ 1コマ目を読み込む ・・・を繰り返す
* onReleaseは、厳密には「マウスをクリックして離した瞬間」の動きを指す。
var star_mc:MovieClip;
var play_btn:Button; ・・・①
var angle:Number;
this.onLoad = function() { ・・・②
angle = 10;
}
this.play_btn.onRelease = function(){ ・・・③
star_mc.onEnterFrame = function() {
star_mc._rotation += angle;
}
}
4.ボタンを押し続ける間 星が回る(ボタンを離すと止まる)
ボタンを押している時 : onPress
ボタンを離した時 : onRelease
ボタンを押していない(onRelease)時の動きは、onEnterFrameのstar_mcの動きを「未定義(undefined)」にすることで、止めることができる
this.play_btn.onRelease = function() {
star_mc.onEnterFrame = undefined;
}