利用 Flash Player 10 引入的原生 3D 屬性 rotationY，結合 Tweener 緩動，實現點擊撲克牌翻轉 180° 切換正反面的立體互動效果，並示範文件類架構與幀標籤同步切換。

製作流程

1. 背景與素材準備

• 文件 500×250px，120fps（高幀率確保 3D 轉動流暢）。
• 矩形填充三色放射漸變（綠色系），漸變變形工具調整高光位置。

2. 撲克牌正反面元件

• 建立兩個圖形元件：back（背面）、9（正面 9 點）。
• 註冊點均設中心，尺寸完全一致（關鍵：否則翻轉會位移）。

3. 牌容器影片剪輯

• 新建影片剪輯 Card，類別名同 Card。
• 第 1 幀置入 back，第 2 幀置入 9，兩者皆置中心。
• 時間軸停在 stop(); 靜態等待控制。

4. 文件類 Main.as 完整代碼

package {
    import flash.display.*;
    import flash.events.*;
    import caurina.transitions.Tweener;

    public class Main extends Sprite {
        private var container:Sprite;
        private var pane:MovieClip;
        private var isBack:Boolean = true; // 初始顯示背面
        private var currentPlane:MovieClip;
        private var currentRotationY:Number;

        public function Main() {
            container = new Sprite();
            container.x = stage.stageWidth/2;
            container.y = stage.stageHeight/2;
            addChild(container);

            pane = new Card();
            container.addChild(pane);
            pane.stop();
            pane.buttonMode = true;
            pane.addEventListener(MouseEvent.CLICK, onClick);
        }

        private function onClick(e:MouseEvent):void {
            stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
            currentPlane = MovieClip(e.currentTarget);

            if (isBack) {
                Tweener.addTween(currentPlane, {rotationY: 0, time: 1});
            } else {
                Tweener.addTween(currentPlane, {rotationY: -180, time: 1});
            }
            isBack = !isBack;
        }

        private function onEnterFrame(e:Event):void {
            currentRotationY = currentPlane.rotationY;
            // 旋轉經過 -90°~10° 區間時切換幀（正面↔背面）
            if (currentRotationY >= -90 && currentRotationY <= 10) {
                if (isBack) {
                    currentPlane.gotoAndStop(2); // 顯示正面
                } else {
                    currentPlane.gotoAndStop(1); // 顯示背面
                }
                stage.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
                trace("已清除事件偵聽");
            }
        }
    }
}

關鍵技術解析

• rotationY：繞 Y 軸旋轉，-180° 即翻轉至背面，0° 為正面。
• 幀切換時機：在 ENTER_FRAME 中監聽 rotationY 通過 -90°（側面）時切換 gotoAndStop，避免翻轉過程中露出錯誤面。
• Tweener 緩動：time:1 秒完成旋轉，可換為 easeInOutQuad 等。
• 文件類架構：邏輯與 FLA 分離，Card 類別可復用擴展（如 52 張牌管理類）。

進階變體（代碼註釋部分）

啟用 z 軸位移（Tweener.addTween(currentPlane, {z:-200, time:1});）可產生「翻轉同時放大/縮小」的透視動畫效果，增強立體感。

現代化遷移建議

• 替換 Tweener → GSAP 3：gsap.to(card, {rotationY: 180, duration: 1, ease: "power2.inOut"});
• 使用 Stage3D/Starling 或 Three.js 實現真 GPU 3D，效能更強。
• HTML5 Canvas 方案：CSS 3D Transform transform: rotateY(180deg) + transition 同樣原理。

此教學是 Flash 原生 3D API（非 Stage3D）入門的經典案例，清晰展示 rotationY、幀同步、緩動庫整合三大核心技術。