(转载)FLEX 界面SKIN样式设计 - Uyang - Photoshop Flash Flex Apollo 教程 组件 开发 源代码
2007-12-07 20:17
627 查看
导读:
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
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
相关文章推荐
- 【转载】Flex 调用外部JS(中级篇) - Uyang - Photoshop Flash Flex Apollo 教程 组件 开发 源代码
- DirectUI Skin++界面解决方案 界面设计 界面开发 软件UI界面开发 软件UI界面美术设计 界面编程 界面教程 Skin VC VB C# .net pb delphi c builder GUI
- 【转载】完全手册 Flex 3.0 RIA开发详解(光盘内容)(书下载以及书的源代码下载)
- 【易语言界面开发系列教程之(EX_UI使用系列教程(14)--EX组件(组合框))】
- android开发之界面设计---基本组件与布局管理器
- 一个通过Flash设计与Flex结合开发的网站www.mapgle.cn
- Android开发之使用Preferences设计软件设置界面(源代码分享)
- 工作流的设计,业务流程图的绘制与编辑,工作流软件,工作流源代码组件库,开发平台,开发引擎
- 积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)
- Flex皮肤制作教程——修改组件的Skin
- 易语言界面开发系列教程之(EX_UI使用系列教程(15)--EX组件(列表框EX))】
- 积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)
- 工作流的设计,业务流程图的绘制与编辑,工作流软件,工作流源代码组件库,开发平台,开发引擎VC++源码
- Dreamweaver & Flash & Photoshop网页设计基础与实例教程(职业白金版)
- BPM, 业务流程图, 商业智能图,工作流自动化图,设计开发工具,可视化VC++控件源代码组件库
- Flex 4在组件外部重设已在skin class内设置的样式
- 【易语言界面开发系列教程之(EX_UI使用系列教程--EX组件(一键换肤))】
- 界面Skin样式组件代码框架
- 网页设计全套视频教程(html,网页三剑客,CSS,Flash,ASP,Photoshop)
- 用flash制作SWC文件,生成flex自定义组件【站优教程】