1 package com.jiangzone
 2 {
 3     import mx.skins.Border
 4     import mx.core.EdgeMetrics;
 5     import mx.core.Container;
 6     import mx.graphics.RectangularDropShadow;
 7    
 8     public class MyPanelBorderSkin extends Border {
 9        
10         public function MyPanelBorderSkin():void {
11         }
12        
13         /**
14          * è¯¥æ–¹æ³•å¿…需要覆盖，如果你要自定义自已的皮肤的话åQ?br /> 15          * è¯¥æ–¹æ³•å½“在控件更新外观时ž®†ä¼š(x¨¬)被自动调ç”?br /> 16          * ä¼?x¨¬)传入两个参数数åQŒç¬¬ä¸€ä¸ªæ˜¯WidthåQŒç¬¬äºŒä¸ªæ˜¯HeightåQŒå³æ˜¯è¯¥æŽ§äšg的宽与高
17          * */
18         override protected function updateDisplayList(w:Number,h:Number):void {
19             super.updateDisplayList(w,h);
20            
21             var ba:uint = 1;                //backgroundAlpha    èƒŒæ™¯é€æ˜Žåº?/span>
22             var bg:uint = 0xffffff;            //backgroundColor    èƒŒæ™¯é¢œè‰²
23             graphics.clear();                //graphics˜q™ä¸ªå±žæ€§æ˜¯çˆ¶ç±»é‡Œå·²¾læä¾›äº†çš?/span>
24             var p:Container = parent as Container;        //获取该皮肤所应用在的父容器，˜q™é‡Œä¸ºPanel
25            
26             //˜q™é‡Œéœ€è¦æ³¨æ„ï¼Œä¸€å®šè¦åˆ¤æ–­çˆ¶å®¹å™¨æ˜¯å¦å·²è¢«è®¾¾|®ï¼Œåœ¨æ–‡ç« é‡Œä½œè§£é‡?/span>
27             if(p){
28                 //获取容器定义的区域边界信息对è±?nbsp;          
29                 var vm:EdgeMetrics = p.viewMetrics;       
30                 //讄¡½®å››ä¸ªè§’的圆度
31                 var radiusContent:Object = {tl:vm.top,tr:0,bl:0,br:vm.top};   
32                 //标题栏圆åº?nbsp;  
33                 var radiusTitle:Object = {tl:vm.top,tr:0,bl:0,br:0};       
34                 //ç”ÖM¸€ä¸ªåœ†è§’矩形，整个背景
35                 this.drawRoundRect(0,0,w,h,radiusContent,bg,ba);
36                 //ç”ÖM¸€ä¸ªåœ†è§’矩形，标题æ ?nbsp;  
37                 this.drawRoundRect(0,0,w,vm.top,radiusTitle,0xff0000,.7);
38                 //ç”ÖM¸€ä¸ªåœ†è§’矩形，标题栏的那个高光水晶æ?/span>
39                 this.drawRoundRect(0,0,w,vm.top / 2,radiusTitle,0xffffff,.3);
40                
41                 //下面是画阴媄的ã€?/span>
42                 var dropShadow:RectangularDropShadow = new RectangularDropShadow();
43                 dropShadow.distance = 8;
44                 dropShadow.angle = 60;
45                 dropShadow.color = 0x000000;
46                 dropShadow.alpha = 0.4;
47        
48                 dropShadow.tlRadius = radiusContent.tl;
49                 dropShadow.trRadius = radiusContent.tr;
50                 dropShadow.blRadius = radiusContent.bl;
51                 dropShadow.brRadius = radiusContent.br;
52        
53                 dropShadow.drawShadow(graphics, 0, 0, w, h);
54             }
55         }
56     }
57 }

 1 <mx:Application
 2     xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"
 3     layout="absolute">
 4 
 5     <mx:Style>
 6         .myPanelSkin {
 7             borderSkin: ClassReference( "com.jiangzone.MyPanelBorderSkin" );
 8         }
 9     </mx:Style>
10    
11     <mx:Panel borderSkin="com.jiangzone.MyPanelBorderSkin"
12               width="200" height="150"  x="24" y="23"/>
13    
14 </mx:Application>

 1 package com.jiangzone.flex.effects {
 2     import mx.effects.Effect;
 3     import mx.effects.EffectInstance;
 4    
 5     public class MyEffect extends Effect {
 6         private var _color:Number = 0xFF0000;
 7                
 8                 public function set color(value:Number):void {
 9                          _color = value;
10                 }
11 
12         public function MyEffect(newTarget:Object = null) {
13             super(newTarget);
14             instanceClass = MyEffectInstance;
15         }
16        
17         override public function getAffectedProperties( ):Array {
18             return [];
19         }
20        
21         override protected function initInstance(instance:EffectInstance):void {
22             super.initInstance(instance);
23                         MyEffectInstance(instance).color = _color;
24         }
25     }
26 }

1 override public function getAffectedProperties( ):Array {
2     return ["rotation"];
3 }

1 private var _color:Number = 0xFF0000;
2 public function set color(value:Number):void {
3         _color = value;
4 }

1 override protected function initInstance(instance:EffectInstance):void {
2     super.initInstance(instance);
3         MyEffectInstance(instance).color = _color;
4 }

 1 package com.jiangzone.flex.effects {
 2     import mx.effects.EffectInstance;
 3     import flash.display.Shape;
 4     import flash.events.Event;
 5    
 6     public class MyEffectInstance extends EffectInstance {
 7                
 8         private var _color:Number;
 9         private var shape:Shape;
10        
11         public function set color(value:Number):void {
12             _color = value;
13         }
14        
15         public function MyEffectInstance(newTarget:Object) {
16             super(newTarget);
17         }
18        
19         override public function play( ):void {
20             super.play( );
21             drawShape();
22         }
23        
24         private function drawShape():void{
25             shape = new Shape();
26             shape.graphics.beginFill(_color);
27             shape.graphics.drawRect(target.width * -0.5,target.height * -0.5,target.width,target.height);
28             shape.graphics.endFill();
29             shape.x = target.x + target.width * 0.5;
30             shape.y = target.y + target.height * 0.5;
31             target.parent.rawChildren.addChild(shape);
32             target.addEventListener(Event.ENTER_FRAME,onEnterFrame);
33         }
34        
35         private function onEnterFrame(e:Event):void{
36             shape.scaleX += 0.1;
37             shape.scaleY += 0.1;
38             shape.alpha -= 0.05;
39             if(shape.alpha <= 0){
40                 target.parent.rawChildren.removeChild(shape);
41                 target.removeEventListener(Event.ENTER_FRAME,onEnterFrame);
42             }
43         }
44     }
45 }

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml"
 3                                                         xmlns:pf="com.jiangzone.flex.effects.*">
 4         <pf:MyEffect id="myEffect" color="0xFFFFFF" />
 5         <mx:VBox x="100" y="43">
 6                 <mx:TextInput focusInEffect="{myEffect}" />
 7                 <mx:TextInput focusInEffect="{myEffect}" />
 8                 <mx:TextInput focusInEffect="{myEffect}" />
 9                 <mx:TextInput focusInEffect="{myEffect}" />
10         </mx:VBox>
11 </mx:Application>

 1 package com.jiangzone.flex.effects {
 2     import mx.effects.effectClasses.TweenEffectInstance;
 3     import flash.display.Shape;
 4     import flash.events.Event;
 5     import mx.effects.Tween;
 6    
 7     public class MyEffectInstance extends TweenEffectInstance {
 8                
 9         private var _color:Number;
10         private var shape:Shape;
11        
12         public function set color(value:Number):void {
13             _color = value;
14         }
15        
16         //构造函æ•?/span>
17         public function MyEffectInstance(newTarget:Object) {
18             super(newTarget);
19         }
20        
21         //同样的要重写play()æ–ÒŽ(gu¨©)³•ä¸Žè°ƒç”¨çˆ¶¾cÕdŒåæ–¹æ³?/span>
22         override public function play( ):void {
23             super.play();
24             drawShape();        //先创å»ÞZ¸€ä¸ªçŸ©å½?/span>
25             /*注意åQšç”¨Tween效果写法的话åQŒå°±ä¸€å®šè¦åˆ›å¾ä¸€ä¸ªTween对象
26             ½W¬ä¸€ä¸ªå‚数是侦听器，即侦听Update与End的，˜q™ä¸¤ä¸ªæ–¹æ³•éƒ½åœ¨è¿™ä¸ªç±»é‡Œï¼Œ
27             æ‰€ä»¥è¿™é‡Œå°±å†™this,½W¬äºŒå’Œç¬¬ä¸‰ä¸ªå‚数都是一个数¾l?br /> 28             ½W¬äºŒä¸ªå‚数是初始值数¾l„，½W¬ä¸‰ä¸ªæ˜¯¾l“果值数¾l„，都要一一对应åQŒç¬¬å››ä¸ªæ˜¯å˜åŒ–æ—¶é—?br /> 29             ˜q™é‡Œçš„是[1,1]分别是初始时的scale比例与alphaåQŒ[3,0]ž®±æ˜¯æœ€¾lˆç»“果数å€?br /> 30             ¾pȝ»Ÿä¼?x¨¬)自动åœ?000毫秒里åã^分这些值来得到渐变效果
31             òq¶å°†æ¯ä¸€‹Æ¡æ•°å€¼çš„改变时调用Updateæ–ÒŽ(gu¨©)³•åQŒç»“束后调用Endæ–ÒŽ(gu¨©)³•
32                     ä½ ä¹Ÿå¯ä»¥ž®†æ—¶é—´çš„参数发布到工厂类属性里åQŒå¯ä»¥æ–¹ä¾¿è®¾¾|®æ’­æ”¾æ—¶é—ß_(d¨¢)¼ŒåƒFlex自带效果一æ ?br /> 33                          */
34             new Tween(this,[1,1],[3,0],1000);
35         }
36        
37         override public function onTweenUpdate(value:Object):void{
38             //˜q™é‡Œž®†æ”¹å˜çš„数值应用到¾l„äšg对象中。注意：(x¨¬)也要与上面的数值数¾l„相对应ã€?/span>
39             shape.scaleX = Number(value[0]);
40             shape.scaleY = Number(value[0]);
41             shape.alpha = Number(value[1]);
42         }
43        
44         override public function onTweenEnd(value:Object):void {
45             //当播攑֮Œæ—¶ä¼š(x¨¬)自动调用该方法，˜q™é‡Œž®±åšåˆ é™¤è¯¥çŸ©å½¢çš„操作å?/span>
46             target.parent.rawChildren.removeChild(shape);
47         }
48        
49         private function drawShape():void{
50             shape = new Shape();
51             shape.graphics.beginFill(_color);
52             shape.graphics.drawRect(target.width * -0.5,target.height * -0.5,target.width,target.height);
53             shape.graphics.endFill();
54             shape.x = target.x + target.width * 0.5;
55             shape.y = target.y + target.height * 0.5;
56             target.parent.rawChildren.addChild(shape);
57         }
58     }
59 }