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

最新推荐文章于 2023-09-02 16:50:37 发布

原创最新推荐文章于 2023-09-02 16:50:37 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #flash #import #function #class #tags

RIA 专栏收录该内容

178 篇文章

订阅专栏

本文介绍如何在Flex中创建自定义的边框样式，包括双线边框及添加模糊和投影效果的方法，并提供具体实现代码。

导读：
　　FLEX对界面设计的支持是非常优秀的,如果你想修改一个UI的样式可以用很多方法,但是如果你还不满足,还想做出更多更复杂的表现呢?比如一个Canvas的边框是双线形式的,或者三线,或者其他效果,双线效果如下图.
　　
　　

　　
　　那该怎么来实现呢?这样我们就需要拓展一些样式类,比如线条是extends RectangularBorder
　　//在主程序的里加入,自定义线条样式
　　Canvas{
　　borderSkin: ClassReference('com.uyang.canvasNewSkin');
　　}
　　//主程序
　　
　　然后我在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];
　　}
　　}
　　}
　　PS:文章为一次性写完,实在不能保证没有遗漏,如有问题可以提问.如果此代码对你造成心里困扰,或者其他负面问题,本人概不负责.:)
　　
　　Tags: flex, skin, 界面设计, classreference

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