利用threshold實現的遮罩引導

點擊“開始引導”，則進入引導操作。除指定的按鈕可以操作外，其它區域均不可點擊。這種應用當新功能或是新產品上線後，用來引導用戶來使用產品/功能，是十分有用的。facebook也有類似的引導，方法也很簡單：用4個絕對定位的DIV(指定一個背景 + 一定透明度)遮住其它部分，這樣可以被操作的區域就“留空”出來。

用flash實現上面的效果（比如在一個網頁遊戲中，使用此方法引導新手操作遊戲），用BitmapData類的threshold方法是比較容易做到上面這個效果的。

threshold共有8個參數，其中前5個參數爲必須要傳入的。

threshold(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, operation:String, threshold:uint, color:uint = 0, mask:uint = 0xFFFFFFFF, copySource:Boolean = false):uint

利用InteractivePNG可“穿透”點擊的特性，構建一個指定區域佈滿整個舞臺大小的白色非透明的Bitmap，在另外一個層，創建一個指定大小、位置的“引導框”（注意要設置爲透明），然後使用前面創建的Bitmap與“引導框”進行色值比較，符合要求的就使用另外一種顏色填充(使用透明進行填充，例如：0x00FFFFFF)，這樣滿足條件的“引導框”位置的地方就被“透明”了。

示例的核心的代碼：

package
{
    import com.mosesSupposes.bitmap.InteractivePNG;
    
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.geom.ColorTransform;
    import flash.geom.Matrix;
    import flash.geom.Point;
    import flash.geom.Rectangle;
    
    import mx.core.Application;
    import mx.core.UIComponent;
    import mx.effects.Fade;
    
    public class AppGuideMaskUIComponent extends UIComponent
    {
        
        private var line_UI:UIComponent;
        private var ui:InteractivePNG;
        private var temp_movie:Sprite;
        private var fade:Fade;
        
        public function AppGuideMaskUIComponent()
        {
            super();
            
            this.mouseEnabled  = false;
            this.mouseChildren = true;
            
            ui = new InteractivePNG();
            ui.alpha = 0.6;
            ui.mouseChildren = false;
            addChild(ui);
            
            line_UI = new UIComponent();
            line_UI.mouseChildren = false;
            line_UI.mouseEnabled  = false;
            addChild(line_UI);
            
            temp_movie = new Sprite();
            temp_movie.mouseChildren = false;
            temp_movie.mouseEnabled = false;
            addChild(temp_movie);
            
            //動畫閃爍
            fade = new Fade();
            fade.target = line_UI;
            fade.duration = 1000;
            fade.repeatCount = 0;
        }
        
        /**
         * 初始化引導框 
         * 
         * @param x
         * @param y
         * @param w
         * @param h
         * 
         */        
        public function initView(x:Number, y:Number, w:Number, h:Number):void
        {
            clear();
            
            createMask(x, y, w, h);
            
            inverseMask();
            
            ui.drawBitmapHitArea();
            ui.enableInteractivePNG();
            
            startFade();
        }
        
        private function createMask(x:Number, y:Number, w:Number, h:Number):void
        {
            var _x:Number = x;
            var _y:Number = y;
            var _w:Number = w;
            var _h:Number = h;
            
            var sprite:Sprite = new Sprite();
                sprite.x = _x;
                sprite.y = _y;
                sprite.graphics.beginFill(0xFFFFFF, 1);
                sprite.graphics.drawRect(0, 0, _w, _h);
                
            temp_movie.addChild(sprite);
            
            //勾勒紅色提示框
            line_UI.graphics.clear();
            line_UI.graphics.lineStyle(3, 0xFF0000, 1);
            line_UI.graphics.moveTo(_x, _y);
            line_UI.graphics.lineTo(_x + _w, _y);
            line_UI.graphics.lineTo(_x + _w, _y + _h);
            line_UI.graphics.lineTo(_x, _y + _h);
            line_UI.graphics.lineTo(_x, _y);
        }
        
        /**
         * 創建遮罩 
         * 
         */        
        private function inverseMask():void
        {
            var _w:Number = Application.application.width;
            var _h:Number = Application.application.height;
            
            var _bmp:BitmapData = new BitmapData(_w, _h, true, 0xFFFFFFFF);
            
            var transform:ColorTransform = new ColorTransform(0, 0, 0, 1);
            var matrix:Matrix = new Matrix();
                matrix.translate(temp_movie.x, temp_movie.y);
            
            _bmp.draw(temp_movie, matrix, transform);
            //使用白色進行檢測，色值小於白色色值的將被設置爲透明    http://www.liuhuan.com/blog/article.asp?id=1081
            _bmp.threshold(_bmp, new Rectangle(0, 0, _bmp.width, _bmp.height), new Point(0, 0), "<", 0xFFFFFFFF, 0x00FFFFFF);

            clear();
            
            var tempBmp:Bitmap = new Bitmap(_bmp);
            ui.addChild(tempBmp);
        }
        
        public function startFade():void
        {
            line_UI.alpha = 1;
            fade.stop();
            fade.play(null, true);
        }
        
        public function stopFade():void
        {
            line_UI.alpha = 0;
            fade.stop();
        }
        
        public function clear():void
        {
            while (temp_movie.numChildren)
            {
                temp_movie.removeChildAt(0);
            }
            
            while (ui.numChildren)
            {
                ui.removeChildAt(0);
            }
            
            stopFade();
        }
    }
}

下載本示例的完整代碼>>