Hextomino

続・MacのDockみたいなに書いたDockっぽいメニューを実用化してみました。

例では、各アイコンをクリックしたときに対応する単語を表示するようにしていますが、ページ移動するような関数を与えれば(後述)、サイトのメニューなんかにも使えるかと。

ソースコードと簡単な解説は続きに。

コンテナクラスに実行したい関数を渡し、クリック時に実行するよう、イベントを追加しています。 Icon0などは外部に定義。

package {
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.display.Stage;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.utils.*;
    
    public class Main extends Sprite {
        public function Main() {
            // 台座
            var base:Sprite = new Sprite();
            base.graphics.beginFill(0x555555);
            base.graphics.drawRect(10, 85, 380, 30);
            base.graphics.endFill();
            stage.addChild(base);
            
            // アイコン
            var icons :Array = new Array();
            icons[0] = new Container(stage, new Icon0(), 0 * 60 + 50, 75, function() :void { /* 実行したい処理 */ });
            icons[1] = new Container(stage, new Icon1(), 1 * 60 + 50, 75, function() :void { /* 同上 */ });
            icons[2] = new Container(stage, new Icon2(), 2 * 60 + 50, 75, function() :void { /* 同上 */ });
            icons[3] = new Container(stage, new Icon3(), 3 * 60 + 50, 75, function() :void { /* 同上 */ });
            icons[4] = new Container(stage, new Icon4(), 4 * 60 + 50, 75, function() :void { /* 同上 */ });
            icons[5] = new Container(stage, new Icon5(), 5 * 60 + 50, 75, function() :void { /* 同上 */ });
        }
    }
}

import flash.events.Event;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.MouseEvent;

class Container extends Sprite {
    const MEASURE = 100;
    
    private var mStage:Stage;
    private var mIcon:MovieClip;
    private var mX:Number;
    private var mY:Number;
    
    public function Container(stage:Stage, icon:MovieClip, x:Number, y:Number, click :Function) :void {
        mStage = stage;
        mIcon = icon;
        mX = x;
        mY = y;
        
        icon.x = mX;
        icon.y = mY;
        this.addEventListener(Event.ENTER_FRAME, this.scaleChange);
        mStage.addChild(mIcon);
        
        // クリック時に渡された関数を実行するイベントを追加
        mIcon.addEventListener(MouseEvent.CLICK, function() :void {
            click.call(null);
        });
    }

    private function scaleChange(evt:Event) :void {
        // カーソルとアイコンの距離に応じて倍率を変える
        var scale:Number = (2 * MEASURE - Math.abs(mIcon.x - mStage.mouseX)) / MEASURE;
        if(scale < 1.0) scale = 1.0;
        mIcon.scaleX = scale;
        mIcon.scaleY = scale;
        mIcon.y = mY + (mIcon.height / 4) * (1.0 - scale);
        
        // X位置を変化
        var dx:Number = (mIcon.x - mStage.mouseX) / MEASURE;
        mIcon.x = mX + dx * Math.exp(-dx * dx) * MEASURE / 4;;
    }
}

20～25行目がアイコンの定義です。 引数は前から順に、現在のステージ、X位置、Y位置、クリック時に実行する関数、となっています。

for文でループさせればもっときれいに書けるんですが、たとえば

var url :Array = new Array();
url[0] = 'http://hextomino.tsukuba.ch';
/* 略 */

for(var i = 0; i < ICONNUM; i++) {
    new Container(stage, new Icon0(), 0 * 60 + 50, 75, function() :void { /* url[i]にページ遷移する処理 */ });
}

のようにすると、常にurl[i] = url[7] ("現在の"iの値)が参照されてしまって、うまくいきません。 Iconクラス内にあらかじめ処理を持たせておく、という方法もありますが、それだとちょっと見通しが悪くなるかと思ったので。

上のコードではContainerクラス自信でstageにアイコンを追加するようにしているので、インスタンス生成時にstageを渡していますが、Containerに保持されているアイコンを返すクラスを用意して、それを使って自分でstageに追加するようにしてもいいかもしれません。 その場合Containerクラスの引数、stageは不要になります。