as - Flash ActionScriptネタなど » メニューにエフェクト

05/03: メニューにエフェクト

Posted by: sato

メニューのベース作成に、マウスを乗せた項目の色を変えたり、ちょっとしたエフェクトを付けてみたいと思います。
今回の記事で↓こんな感じになります。

ライブラリに空ムービークリップシンボルを追加し、名前をempty_mcとします。
リンケージ設定は、ActionScriptに書き出しにチェックを入れて、識別子もempty_mcとします。
前回のmenu_list.asファイルの内容を以下のように変更しました。


class menu_list extends MovieClip {

  var xml_data   :Object;

  var x:Number, y:Number, iwidth:Number, isize:Number;

  //====================================================================

  //コンストラクタ（xml_dataの子供の分だけcreate_itemを呼び出す。）

  //====================================================================

  function menu_list(){

    for(var i in xml_data.childNodes){

      this.create_item(i, xml_data.childNodes[i], x, y+(i*(isize+5)), iwidth, isize);

    }

  }

  //====================================================================

  //メソッド（アイテムのタイトルと背景の四角を作成する。イベントを設定する。）

  //====================================================================

  function create_item(id:Number, node:Object, ix:Number, iy:Number, w:Number, s:Number){

    var item_mc = this.createEmptyMovieClip("l"+id, id);

    var bg_mc   = item_mc.createEmptyMovieClip("bg", 0);

    var tg_mc   = item_mc.createEmptyMovieClip("tg", 1);

    var ch_mc   = item_mc.createEmptyMovieClip("ch", 2);

    var ti_mc   = item_mc.attachMovie("empty_mc","ti", 3, { x2:0, dx:5 });

    ti_mc.createTextField("ititle", 0, ix, iy-2, w, s+5);

    ti_mc["ititle"].text = node.attributes["ititle"];

    //テキストフォーマット

    var tf = new TextFormat();

    tf.size = s;

    tf.color = node.attributes["icolor"];

    ti_mc["ititle"].setTextFormat(tf);

    //塗四角作画

    item_fill(bg_mc, node.attributes["ibgcolor"], ix, iy, w, s+2);

    item_fill(tg_mc, col_down(node.attributes["ibgcolor"], 50), ix, iy, w, s+2);

    tg_mc._visible = false;

    //サブメニューが存在する場合

    if (node.firstChild){

      //塗三角作画

      ch_mc.beginFill(col_down(node.attributes["ibgcolor"], 100), 100);

      ch_mc.moveTo(ix+w-11, iy+(s/2)-3);

      ch_mc.lineTo(ix+w- 5, iy+(s/2)  );

      ch_mc.lineTo(ix+w-11, iy+(s/2)+4);

      ch_mc.endFill();

    }

    //******************************

    //onRollOverイベント

    //******************************

    item_mc.onRollOver = function(){

      //フォーカスを移す

      _parent.focus_item(this._name);

      //子を作成

      _parent.attachMovie("menu_list", "menu", 100, { xml_data:node, x:ix+w+3, y:iy, iwidth:w, isize:s });

    }

    //******************************

    //onPressイベント

    //******************************

    item_mc.onPress = function(){ getURL(node.attributes["iurl"]); }

    //******************************

    //onEnterFrameイベント

    //******************************

    ti_mc.onEnterFrame = function(){

      var x1 = this.x2 * 0.66;

      this._x += x1;

      this.x2 = this.dx - this._x;

    }

  }

  //====================================================================

  //メソッド（塗りの四角を描画する。）

  //====================================================================

  function item_fill(tgt:Object, col:Number, ix:Number, iy:Number, iw:Number, ih:Number){

    tgt.beginFill(col, 100);

    tgt.moveTo(ix   , iy);

    tgt.lineTo(ix   , iy+ih);

    tgt.lineTo(ix+iw, iy+ih);

    tgt.lineTo(ix+iw, iy);

    tgt.endFill();

  }

  //====================================================================

  //メソッド（指定の色の少し暗い色を返す。）

  //====================================================================

  function col_down(col, down){

    var r = ((col & 0xff0000) / 65536) - down; r = (r < 0) ? 0 : r;

    var g = ((col & 0x00ff00) / 256  ) - down; g = (g < 0) ? 0 : g;

    var b = ((col & 0x0000ff)        ) - down; b = (b < 0) ? 0 : b;

    return (r*65536)+(g*256)+b;

  }

  //====================================================================

  //メソッド（子供達のフォーカスを更新する。）

  //====================================================================

  function focus_item(focus_child){

    for(var i in xml_data.childNodes){

      this["l"+i].tg._visible = (("l"+i) == focus_child) ? true : false;

      this["l"+i].ti.dx = (("l"+i) == focus_child) ? 30 : 5;

    }

  }

}