FLEX 界面SKIN样式设计 大 | 中 | 小

   FLEX对界面设计的支持是非常优秀的,如果你想修改一个UI的样式可以用很多方法,但是如果你还不满足,还想做出更多更复杂的表现呢?比如一个Canvas的边框是双线形式的,或者三线,或者其他效果,双线效果如下图.
     
     那该怎么来实现呢?这样我们就需要拓展一些样式类,比如线条是extends RectangularBorder

//在主程序的<mx:Style>里加入,自定义线条样式
Canvas{
   borderSkin: ClassReference('com.uyang.canvasNewSkin');
   }
//主程序
<mx:Canvas  width="300" height="300" backgroundColor="#e1e1e1" horizontalCenter="-11" verticalCenter="22.5"/>

    然后我在com文件夹下的uyang文件夹下,新建立canvasNewSkin类,代码如下:

package com.uyang{
   import mx.skins.RectangularBorder;
   import flash.display.Graphics;

   public class canvasNewSkin extends RectangularBorder{

   public function canvasNewSkin() {}

      private var _backgroundColor:uint;
   private  var g:Graphics = graphics;
   private  var g1:Graphics = graphics;
     
       override protected function updateDisplayList
       (unscaledWidth:Number, unscaledHeight:Number):void  {

           super.updateDisplayList(unscaledWidth, unscaledHeight);
           _backgroundColor = getStyle("backgroundColor");
         
     g.beginFill(_backgroundColor,1.0);
     g.lineStyle(0,0x000000,1);
     g.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,5,5,5,5);      
     g.endFill();
     
     g1.lineStyle(0,0xff0000,1);
     g1.drawRoundRectComplex(2,2,unscaledWidth-4,unscaledHeight-4,5,5,5,5);
     g1.endFill();    
     //如果需要三线,那就再加一个g2的graphics等                          
       }
   }
}

    这样就完成了一个双线边框样式的制作,当然随便哪个组件他们所需要拓展的边框类是一样的，别忘了，那个边框还可以画出其他更多的可能性哦，比如半圆,或者可以加点其他效果,投影,模糊等.如加个模糊效果:

package com.uyang{
   import mx.skins.RectangularBorder;
   import flash.display.Graphics;
   import flash.filters.DropShadowFilter;
   import flash.filters.BlurFilter;

   public class canvasNewSkin extends RectangularBorder{

   public function canvasNewSkin() {}

      private var _backgroundColor:uint;
   private  var g:Graphics = graphics;
   private  var g1:Graphics = graphics;
   private var dropShadow:DropShadowFilter = new DropShadowFilter();
   private var blueF:BlurFilter = new BlurFilter();
     
       override protected function updateDisplayList
       (unscaledWidth:Number, unscaledHeight:Number):void  {

           super.updateDisplayList(unscaledWidth, unscaledHeight);
           _backgroundColor = getStyle("backgroundColor");
         
     g.beginFill(_backgroundColor,1.0);
     g.lineStyle(0,0x000000,1);
     g.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,5,5,5,5);      
     g.endFill();
     
     g1.lineStyle(0,0xff0000,1);
     g1.drawRoundRectComplex(2,2,unscaledWidth-4,unscaledHeight-4,5,5,5,5);
     g1.endFill();  
     //模糊效果
      blueF.blurX =5;
      blueF.blurY =5;      
      filters = [blueF];  
//投影效果      
   dropShadow.color = 0x000000;      
     dropShadow.blurX = 10;      
     dropShadow.blurY = 10;      
     dropShadow.angle = 90;      
     dropShadow.alpha = 0.5;      
     dropShadow.distance = 5;      
     filters = [dropShadow];                      
       }
   }
}

转自： http://www.uncool.cn/blogs/read.php?149