(转载）FLEX 界面SKIN样式设计 - Uyang - Photoshop Flash Flex Apollo 教程 组件 开发 源代码...

导读：
　　FLEX对界面设计的支持是非常优秀的,如果你想修改一个UI的样式可以用很多方法,但是如果你还不满足,还想做出更多更复杂的表现呢?比如一个Canvas的边框是双线形式的,或者三线,或者其他效果,双线效果如下图.
　　
　　
　　
　　那该怎么来实现呢?这样我们就需要拓展一些样式类,比如线条是extends RectangularBorder
　　//在主程序的<style>里加入,自定义线条样式 <br>　　Canvas{ <br>　　borderSkin: ClassReference('com.uyang.canvasNewSkin'); <br>　　} <br>　　//主程序 <br>　　<canvas width="300" height="300" backgroundcolor="#e1e1e1" horizontalcenter="-11" verticalcenter="22.5"></canvas><br>　　然后我在com文件夹下的uyang文件夹下,新建立canvasNewSkin类,代码如下: <br>　　package com.uyang{ <br>　　import mx.skins.RectangularBorder; <br>　　import flash.display.Graphics; <br>　　public class canvasNewSkin extends RectangularBorder{ <br>　　public function canvasNewSkin() {} <br>　　private var _backgroundColor:uint; <br>　　private var g:Graphics = graphics; <br>　　private var g1:Graphics = graphics; <br>　　 <br>　　override protected function updateDisplayList <br>　　(unscaledWidth:Number, unscaledHeight:Number):void { <br>　　super.updateDisplayList(unscaledWidth, unscaledHeight); <br>　　_backgroundColor = getStyle("backgroundColor"); <br>　　 <br>　　g.beginFill(_backgroundColor,1.0); <br>　　g.lineStyle(0,0x000000,1); <br>　　g.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,5,5,5,5); <br>　　g.endFill(); <br>　　 <br>　　g1.lineStyle(0,0xff0000,1); <br>　　g1.drawRoundRectComplex(2,2,unscaledWidth-4,unscaledHeight-4,5,5,5,5); <br>　　g1.endFill(); <br>　　//如果需要三线,那就再加一个g2的graphics等 <br>　　} <br>　　} <br>　　} <br>　　这样就完成了一个双线边框样式的制作,当然随便哪个组件他们所需要拓展的边框类是一样的，别忘了，那个边框还可以画出其他更多的可能性哦，比如半圆,或者可以加点其他效果,投影,模糊等.如加个模糊效果: <br>　　package com.uyang{ <br>　　import mx.skins.RectangularBorder; <br>　　import flash.display.Graphics; <br>　　import flash.filters.DropShadowFilter; <br>　　import flash.filters.BlurFilter; <br>　　public class canvasNewSkin extends RectangularBorder{ <br>　　public function canvasNewSkin() {} <br>　　private var _backgroundColor:uint; <br>　　private var g:Graphics = graphics; <br>　　private var g1:Graphics = graphics; <br>　　private var dropShadow:DropShadowFilter = new DropShadowFilter(); <br>　　private var blueF:BlurFilter = new BlurFilter(); <br>　　 <br>　　override protected function updateDisplayList <br>　　(unscaledWidth:Number, unscaledHeight:Number):void { <br>　　super.updateDisplayList(unscaledWidth, unscaledHeight); <br>　　_backgroundColor = getStyle("backgroundColor"); <br>　　 <br>　　g.beginFill(_backgroundColor,1.0); <br>　　g.lineStyle(0,0x000000,1); <br>　　g.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,5,5,5,5); <br>　　g.endFill(); <br>　　 <br>　　g1.lineStyle(0,0xff0000,1); <br>　　g1.drawRoundRectComplex(2,2,unscaledWidth-4,unscaledHeight-4,5,5,5,5); <br>　　g1.endFill(); <br>　　//模糊效果 <br>　　blueF.blurX =5; <br>　　blueF.blurY =5; <br>　　filters = [blueF]; <br>　　//投影效果 <br>　　dropShadow.color = 0x000000; <br>　　dropShadow.blurX = 10; <br>　　dropShadow.blurY = 10; <br>　　dropShadow.angle = 90; <br>　　dropShadow.alpha = 0.5; <br>　　dropShadow.distance = 5; <br>　　filters = [dropShadow]; <br>　　} <br>　　} <br>　　} <br>　　PS:文章为一次性写完,实在不能保证没有遗漏,如有问题可以提问.如果此代码对你造成心里困扰,或者其他负面问题,本人概不负责.:) <br>　　 <br>　　Tags: flex, skin, 界面设计, classreference <br><br>本文转自 <br><a href="http://www.uncool.cn/blogs/read.php?149">http://www.uncool.cn/blogs/read.php?149</a></body></html></style>