結合遮罩高光按鈕製作、Tweener 緩動庫、三角函數圓周佈局、深度排序，打造點擊選單項目放大置中、其餘項目圓周分佈旋轉的立體選單互動。

第一部分：高光按鈕製作（視覺基礎）

1. 舞台 600×300，背景放射狀漸變（深藍→黑）。
2. 新建影片剪輯 button：
   • 圓形（放射漸變綠）→ 球體感。
   • 矩形條（綠色）→ 任意變形斜切 → 高光條。
   • Mask 圖層：複製圓形作遮罩，限制高光條顯示範圍。
   • 「按鈕背景」圖層：複製圓形，Alpha 10%、漸變偏移 → 陰影面。
   • 「高光」圖層：橢圓白色線性漸變（Alpha 70%→50%→0%）→ 頂部高光。
   
3. 庫中 button 設 連結類別 Button，基類 Sprite。

第二部分：AS3 程式碼邏輯（文件類/第 1 幀）

import caurina.transitions.Tweener;
import flash.events.MouseEvent;
import flash.display.Sprite;

var container:Sprite = new Sprite();
container.x = stage.stageWidth/2;
container.y = stage.stageHeight/2;
addChild(container);

const NUM:uint = 12;
const R:Number = 100;
var angle:Number = 0;
var clickedX:Number = 0, clickedY:Number = 0;

for (var i:uint = 0; i <= NUM; i++) {
    var btn:Sprite = new Button();
    btn.buttonMode = true;
    btn.name = "mc" + i;
    btn.addEventListener(MouseEvent.CLICK, onClick);
    container.addChild(btn);

    if (i == NUM) { // 中心放大按鈕
        btn.x = clickedX; btn.y = clickedY;
        btn.mouseEnabled = false;
        Tweener.addTween(btn, {scaleX:2, scaleY:2, time:1, transition:"easeInOutQuint"});
    } else { // 圓周分佈
        angle += 30; // 360/12
        var rad:Number = angle * Math.PI/180;
        btn.x = Math.cos(rad) * R;
        btn.y = Math.sin(rad) * R;
    }
}

// 點擊處理：將目標按鈕移至中心放大，原中心按鈕回到圓周
function onClick(e:MouseEvent):void {
    var target:Sprite = e.currentTarget as Sprite;
    // 1. 原中心按鈕（mouseEnabled=false 者）動回圓周
    // 2. 目標按鈕動至中心放大
    // 3. 更新 clickedX/Y、mouseEnabled、角度重排
    // （完整邏輯需配合 Tweener 序列動畫，此處略）
}

核心數學與渲染原理

• 圓周佈局：x = R·cos(θ), y = R·sin(θ)，θ 遞增 30°（12 項）。
• Tweener 緩動：transition:"easeInOutQuint" 產生自然加減速。
• 深度管理：點擊後需重新 sortZ() 或 setChildIndex 確保中心放大按鈕在最上層。
• 座標系：container 置中舞台，所有按鈕座標相對 container 原點。

依賴與現代替代

原教學使用 caurina.transitions.Tweener（約 2008-2010 年流行）。現代專案建議：

• GSAP 3：gsap.to(btn, {scale:2, duration:1, ease:"power3.inOut"});
• 原生 fl.transitions.Tween：無外部依賴。
• CSS/JS 移植：相同數學邏輯可直接用於 HTML5 Canvas/WebGL 專案。