百叶窗特效

effects\Blinds.as

JScript code

package effects
{
    
    import effects.effectClasses.BlindsInstance;
    
    import mx.controls.scrollClasses.ScrollBarDirection;
    import mx.effects.IEffectInstance;
    import mx.effects.TweenEffect;
    
    public class Blinds extends TweenEffect
    {
        
        private static var AFFECTED_PROPERTIES:Array = ["mask"];
        
        public function Blinds(target:Object=null)
        {
            super(target);
            instanceClass = BlindsInstance;
        }
        
        public var direction:String = ScrollBarDirection.VERTICAL;
        
        public var blindsFrom:Number;
        
        public var blindsTo:Number;
        
        public var gapFrom:Number;
        
        public var gapTo:Number;
        
        override public function getAffectedProperties():Array
        {
            return AFFECTED_PROPERTIES;
        }
        
        override protected function initInstance(instance:IEffectInstance):void
        {
            super.initInstance(instance);
            var blindsInstance:BlindsInstance = BlindsInstance(instance);
            blindsInstance.direction = direction;
            blindsInstance.blindsFrom = blindsFrom;
            blindsInstance.blindsTo = blindsTo;
            blindsInstance.gapFrom = gapFrom;
            blindsInstance.gapTo = gapTo;
        }
        
    }
    
}

effects\effectClasses\BlindsInstance.as

JScript code

package effects.effectClasses
{
    
    import flash.display.DisplayObject;
    import flash.display.Sprite;
    
    import mx.controls.scrollClasses.ScrollBarDirection;
    import mx.effects.effectClasses.TweenEffectInstance;
    
    public class BlindsInstance extends TweenEffectInstance
    {
        
        public function BlindsInstance(target:Object)
        {
            super(target);
        }
        
        public var direction:String = ScrollBarDirection.VERTICAL;
        
        public var blindsFrom:Number;
        
        public var blindsTo:Number;
        
        public var gapFrom:Number;
        
        public var gapTo:Number;
        
        override public function play():void
        {
            super.play();
            if (isNaN(blindsFrom))
                blindsFrom = 30;
            if (isNaN(blindsTo))
                blindsTo = 30;
            if (isNaN(gapFrom))
                gapFrom = 100;
            if (isNaN(gapTo))
                gapTo = 0;
            blindsFrom = Math.max(Math.min(blindsFrom, 100), 0);
            blindsTo = Math.max(Math.min(blindsTo, 100), 0);
            gapFrom = Math.max(Math.min(gapFrom, 100), 0);
            gapTo = Math.max(Math.min(gapTo, 100), 0);
            tween = createTween(this, [blindsFrom, gapFrom], [blindsTo, gapTo], duration);
        }
        
        override public function onTweenUpdate(value:Object):void
        {
            setBlindsMask(value[0], value[1]);
        }
        
        override public function onTweenEnd(value:Object):void
        {
            setBlindsMask(value[0], value[1]);
            super.onTweenEnd(value);    
        }
        
        private function setBlindsMask(blinds:Number, gap:Number):void
        {
            var currentTarget:DisplayObject = target as DisplayObject;
            if (!currentTarget)
                return;
            var mask:Sprite = new Sprite();
            var targetWidth:Number = currentTarget.width;
            var targetHeight:Number = currentTarget.height;
            var length:Number = 0;
            var gapLength:Number = 0;
            var currentOffset:Number = 0;
            var i:int = 0;
            mask.graphics.clear();
            mask.graphics.beginFill(0x000000, 1);
            if (direction == ScrollBarDirection.VERTICAL)
            {
                blinds = (targetHeight / 2) * (blinds / 100);
                length = (blinds == 0 ? targetHeight : Math.floor(targetHeight / blinds));
                gapLength = Math.round((length / 2) * (gap / 100));
                for (i = 0; i < blinds; i++)
                {
                    mask.graphics.drawRect(0, currentOffset, 
                            targetWidth, Math.max(length - gapLength, 0));
                    currentOffset = currentOffset + length;
                }
                if (currentOffset < targetHeight)
                    mask.graphics.drawRect(0, currentOffset, 
                            targetWidth, targetHeight - currentOffset);
            }
            else
            {
                blinds = (targetWidth / 2) * (blinds / 100);
                length = (blinds == 0 ? targetWidth : Math.floor(targetWidth / blinds));
                gapLength = Math.round((length / 2) * (gap / 100));
                for (i = 0; i < blinds; i++)
                {
                    mask.graphics.drawRect(currentOffset, 0, 
                            Math.max(length - gapLength, 0), targetHeight);
                    currentOffset = currentOffset + length;
                }
                if (currentOffset < targetWidth)
                    mask.graphics.drawRect(currentOffset, 0, 
                            targetWidth - currentOffset, targetHeight);
            }
            mask.graphics.endFill();
            currentTarget.mask = mask;
        }
        
    }
    
}

Test.mxml

XML code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:mx="library://ns.adobe.com/flex/mx"
				xmlns:effect="effects.*" 
				width="100%"
				height="100%"
				backgroundColor="#2D8B21"
				>
	
	<fx:Declarations>
		<effect:Blinds id="hBlinds" 
					   direction="horizontal" duration="1000" 
					   blindsFrom="10" blindsTo="10" gapFrom="100" gapTo="0" />
		
		<effect:Blinds id="vBlinds" 
					   direction="vertical" duration="1000" 
					   blindsFrom="10" blindsTo="10" gapFrom="100" gapTo="0" />
	</fx:Declarations>
	
	<mx:Panel id="panel" width="100%" height="100%" title="Panel" layout="vertical">
		<mx:Label text="Label" />
		<mx:Button label="Button" />
		<mx:TextInput text="TextInput" />
		<mx:HRule width="100%" />
		<mx:Button label="Play(horizontal)" color="#FF0000" click="hBlinds.play([panel])" />
		<mx:Button label="Play(vertical)" color="#FF0000" click="vBlinds.play([panel])" />
	</mx:Panel>
	
</mx:Application>