くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[Flash]イベントハンドラメソッド

ボタンを押すと何かが動く、のようなイベントをつくります。

 

1.その前段階として、星が横に動くようにしてみます。

動きはタイムラインに直書き、ではなく、アクション用のレイヤーに書き込みます

使用するメソッドは onEnterFrame です

 

f:id:pleasure10501:20150413223326p:plain

  1. 星はイラストレーターで作成して保存しておく(IllustratorFlashのバージョンが同じ場合は、イラストレーターでコピー&ペーストが可能)。
    ファイル>読み込み>ステージに読み込み をします
  2. 星をシンボルに変換します 修正>シンボルに変換>種類:ムービークリップ
  3. シンボルに「星」、インスタンスに「star_mc」(mcはムービークリップ)と命名します
  4. レイヤーを新規作成し、星のレイヤーと動き(Action)のレイヤーを分けます。f:id:pleasure10501:20150413223519p:plain
  5. Actionレイヤーに以下のスクリプトを記述しますf:id:pleasure10501:20150413223516p:plain
    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.ボタンを押すと星が回る

新たにボタンを付けます。ボタンを押して離した時に回るようにします(ストップはしない)

f:id:pleasure10501:20150414180452p:plain

・ボタンを追加

・アクションスクリプトの書き方

① 変数宣言で、ボタンを宣言

② インスタンスがタイムラインに読み込まれると、{}内の処理が呼び出される、
  という内容の関数。この場合は「動く角度が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;
 }

 

 

広告を非表示にする