flex 学习笔记皮肤（一）

最新推荐文章于 2024-08-18 18:03:33 发布

weixin_34081595

最新推荐文章于 2024-08-18 18:03:33 发布

阅读量95

点赞数

文章标签：大数据

原文链接：http://blog.51cto.com/aqqle/852465

版权

flex 定义为组件定义皮肤有一下方式：

一、图形皮肤

如下所示：

mx|Button{
upSkin:Embed(source="assets/btnup.png");
overSkin:Embed(source="assets/btndown.png");
downSkin:Embed(source="assets/btnup.png");
focusSkin:Embed(source="assets/btnup.png");
disabledSkin:Embed(source="assets/btnup.png");
selectedUpSkin:Embed(source="assets/btndown.png");
selectedDownSkin:Embed(source="assets/btndown.png");
selectedOverSkin:Embed(source="assets/btnup.png");
selectedDisabledSkin:Embed(source="assets/btndown.png");
}

在css文件中，为button控件的八个对应属性添加图形皮肤。（spark 的button没有八个皮肤属性。。。）

二、程序皮肤：

1. .mxml文件程序皮肤：

s|Button{
skin:Cla***eference("skin.ButtonSkin");
}

Buttonskin.mxml文件：

<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark Button component.
@see spark.components.Button
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="21" minHeight="21"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.Group;
/* Define the skin elements that should not be colorized.
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr)
{
cornerRadius = cr;
shadow.radiusX = cornerRadius;
fill.radiusX = cornerRadius;
lowlight.radiusX = cornerRadius;
highlight.radiusX = cornerRadius;
border.radiusX = cornerRadius;
}
if (highlightStroke) highlightStroke.radiusX = cornerRadius;
if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
private var cornerRadius:Number = 2;
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" /> （定义了四种状态）
</s:states>
<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.01"
alpha.down="0" />
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.07"
alpha.down="0.5" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.over="0xBBBDBD"
color.down="0xAAAAAA"
alpha="0.85" />
<s:GradientEntry color="0xD8D8D8"
color.over="0x9FA0A1"
color.down="0x929496"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="270">
<s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
<s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
<s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.33"
alpha.over="0.22"
alpha.down="0.12"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.48"
alpha="0.33"
alpha.over="0.22"
alpha.down="0.12" />
<s:GradientEntry color="0xFFFFFF"
ratio="0.48001"
alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<s:Rect id="border" left="1" right="1" top="1" bottom="1" width="69" height="20" radiusX="2">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
alpha="0.5625"
alpha.down="0.6375" />
<s:GradientEntry color="0x000000"
alpha="0.75"
alpha.down="0.85" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="center"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
left="10" right="10" top="2" bottom="2"
backgroundColor="#C7D2F2">
</s:Label>
</s:SparkButtonSkin>

2 . .as文件程序皮肤：

从别的地方拷贝的，我自己没有做，就那么个意思，可以用as写皮肤:

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 * 该方法必需要覆盖，如果你要自定义自已的皮肤的话，
15 * 该方法当在控件更新外观时将会被自动调用
16 * 会传入两个参数数，第一个是Width，第二个是Height，即是该控件的宽与高
17 * */
18 override protected function updateDisplayList(w:Number,h:Number):void {
19 super.updateDisplayList(w,h);
20
21 var ba:uint = 1; //backgroundAlpha 背景透明度
22 var bg:uint = 0xffffff; //backgroundColor 背景颜色
23 graphics.clear(); //graphics这个属性是父类里已经提供了的
24 var p:Container = parent as Container; //获取该皮肤所应用在的父容器，这里为Panel
25
26 //这里需要注意，一定要判断父容器是否已被设置，在文章里作解释
27 if(p){
28 //获取容器定义的区域边界信息对象
29 var vm:EdgeMetrics = p.viewMetrics;
30 //设置四个角的圆度
31 var radiusContent:Object = {tl:vm.top,tr:0,bl:0,br:vm.top};
32 //标题栏圆度
33 var radiusTitle:Object = {tl:vm.top,tr:0,bl:0,br:0};
34 //画一个圆角矩形，整个背景
35 this.drawRoundRect(0,0,w,h,radiusContent,bg,ba);
36 //画一个圆角矩形，标题栏
37 this.drawRoundRect(0,0,w,vm.top,radiusTitle,0xff0000,.7);
38 //画一个圆角矩形，标题栏的那个高光水晶条
39 this.drawRoundRect(0,0,w,vm.top / 2,radiusTitle,0xffffff,.3);
40
41 //下面是画阴影的。
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 }

其实关键不就是程序皮肤的设计。。

嗯 flex4中关键就是spark.skins.SparkSkin这个类以及\Flex4API\spark\skins\spark

里面的一些默认皮肤的学习，修改以及设计。

转载于:https://blog.51cto.com/aqqle/852465

weixin_34081595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex 学习笔记皮肤（一）

flex 定义为组件定义皮肤有一下方式：一、图形皮肤如下所示：mx|Button{ upSkin:Embed(source="assets/btnup.png"); overSkin:Embed(source="assets/btndown.png"); downSkin:Embed(source="assets...
复制链接

扫一扫