ボタンを円状に配置(circleMenu)

ボタンを円状に配置します。その際に、角度によって拡大する基準点を変更します。基準点は自分が配置されている角度を元に設定されます。

こちらで簡単に解説しています。
http://t2421.jp/archives/588

by t2421 24 Jan 2012

Embed

/**
 * Copyright t2421 ( http://wonderfl.net/user/t2421 )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/abAo
 */

package  
{
    import flash.text.AntiAliasType;
    import flash.text.TextFormat;
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.text.TextField;
    /**
     * ...
     * @author taiga
     */
   
    public class MainCircleMenu extends MovieClip
    {
        private const NUM_BUTTON:uint = 20;
        private const RADIUS:uint = 170;
        private var centerX:Number;
        private var centerY:Number;
        private var logo:TextField;
        
        public function MainCircleMenu() 
        {
            addEventListener(Event.ADDED_TO_STAGE, addedHandler);
        }
        
        private function addedHandler(e:Event):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, addedHandler);
            setLogo();
            
            
            
            initialize();
        }
        
        private function setLogo():void
        {
            logo = new TextField();
            logo.text = "t2421.jp";
            logo.antiAliasType = AntiAliasType.NORMAL;
            logo.selectable = false;
            addChild(logo);
            
            var textformat:TextFormat = new TextFormat();
            textformat.font = "Georgia";
            textformat.bold = true;
            textformat.size = 15;
            
       
            logo.setTextFormat(textformat);
            logo.x = 455-logo.width;
            logo.y = 445;
        }

        
        private function initialize():void 
        {
            centerX = 232;
            centerY = 232;
                        
            //円状に配置
            for (var i:int = 0; i < NUM_BUTTON; i++) 
            {
                var radian:Number = i / NUM_BUTTON * 2 * Math.PI;
                var button:MenuButton = new MenuButton(radian);
                button.x = RADIUS * Math.cos(radian) + centerX;
                button.y = RADIUS * Math.sin(radian) + centerY;
                addChild(button);
                button.initialize();
            }
            dispatchEvent(new Event(Event.COMPLETE));
        }
        
    }

}



    import caurina.transitions.Tweener;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Point;
    /**
     * ...
     * @author taiga
     */
    class MenuButton extends MovieClip
    {
        private var ctrl:MainCircleMenu;
        private var buttonBase:Sprite;
        
        public function MenuButton(radian:Number) 
        {
            
            buttonBase = new Sprite();
            buttonBase.graphics.lineStyle(1, 0x000000);
            buttonBase.graphics.beginFill(0x000000, 0.3);
            buttonBase.graphics.drawRect(0, 0, 34, 34);
            buttonBase.x = -buttonBase.width / 2 - getBasePoint(radian).x;
            buttonBase.y = -buttonBase.height / 2 - getBasePoint(radian).y;
            addChild(buttonBase);
        }
        
        public function initialize():void
        {
            ctrl = MainCircleMenu(this.parent);
            ctrl.addEventListener(Event.COMPLETE, completeHanlder);
        }
        
        //自分の表示される位置に応じて、拡大する基準点を変える。
        private function getBasePoint(radian:Number):Point
        {
            var basePoint:Point = new Point();
            var offset:Number = 0.8;
            //基準点を決めるための円の設定
            var radius:Number = (buttonBase.width/2)*offset;
            
            basePoint.x = radius * Math.cos(radian);
            basePoint.y = radius * Math.sin(radian);
            return basePoint;
            
        }
        
        private function completeHanlder(e:Event):void 
        {
            setEvent();
        }
        
        private function setEvent():void 
        {
            this.addEventListener(MouseEvent.ROLL_OVER, overHandler);
            this.addEventListener(MouseEvent.ROLL_OUT, outHandler);
        }
        
        private function outHandler(e:MouseEvent):void 
        {
            Tweener.addTween(this, {scaleX:1,scaleY:1,time:0.5,transition:"liner"} );
        }
        
        private function overHandler(e:MouseEvent):void 
        {
            Tweener.addTween(this, {scaleX:2,scaleY:2,time:0.5,transition:"liner"} );
        }
        
    }