Index > はじめての Adobe Flex SDK 3 , 3D風メニューの作成(air,flex)
Thu, March 6, 2008

はじめての Adobe Flex SDK 3 , 3D風メニューの作成(air,flex)

今回は、3D風メニューをFlashで実現してほしい、 という依頼があり挑戦しました。

FlexSDKをインストール方法は、 こちら(Flex SDK 3インストール)

まず円形(楕円)にテキストを配置するコード

RoundMenu.as

package{
    import flash.display.*;
    import flash.text.*;

    public class RoundMenu extends Sprite{

        public function RoundMenu(width:Number,height:Number,menuItems:Array){

            var xr:Number=width/2;
            var yr:Number=height/2;

            var diffX:Number=xr;
            var diffY:Number=yr;

            var x:Number=0;
            var y:Number=0;
            var degree:Number=0;

            for(var i:int=0; i<menuItems.length; i++){

                // calc position
                degree=i*(360/menuItems.length);
                var theta:Number=degree*Math.PI/180;

                x=xr*Math.cos(theta)+diffX;
                y=yr*Math.sin(theta)+diffY;

                // create text field
                var tf:TextField=new TextField();
                tf.text=menuItems[i];

                var myFormat:TextFormat = new TextFormat();
                myFormat.size=28;
                tf.setTextFormat(myFormat);

                tf.background=true;
                tf.backgroundColor=0xCCCCCC;

                tf.autoSize=TextFieldAutoSize.LEFT;
                tf.selectable=false;

                tf.x=x;
                tf.y=y;
                addChild(tf);
            }
        }
    }
}

RoundMenuクラスを生成するときに、 縦と横のサイズ、およびメニュー用文字列の配列を指定します。 RoundMenuクラスでは、指定されたサイズに収まるように 円形に与えられたメニュー用のテキスト配列を使ってメニュー用テキストを配置します。

結果

続く・・・

参考リンク

 Twitter
follow me on Twitter
 Categories