二
上一章我对我们项目的登录界面做了一次浅析,接下来,我就把上次所讲的分解一下,首先,要讲到的就是按钮皮肤的制作。
众所周知,设计一套比较好的皮肤,可以增加项目的可观赏性,但是设计皮肤从何入手呢?
作为一个新手,我在学习设计皮肤的时候,是新建一个皮肤文件,然后在此基础之上改善,熟练的同志可以直接设计皮肤,这里我拿Button的皮肤做示例:
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
这些是生成按钮的四个状态,根据它可以设置按钮的不同显示状态;
这个地方是按钮的阴影设置,这个地方可以根据自己对色调的把握来设置;
众所周知,设计一套比较好的皮肤,可以增加项目的可观赏性,但是设计皮肤从何入手呢?
作为一个新手,我在学习设计皮肤的时候,是新建一个皮肤文件,然后在此基础之上改善,熟练的同志可以直接设计皮肤,这里我拿Button的皮肤做示例:
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
这些是生成按钮的四个状态,根据它可以设置按钮的不同显示状态;
<!-- layer 1: shadow -->
<!--- @private -->
<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2"
x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
x.down="0" y.down="0" width.down="61" height.down="25"
x.over="0" y.over="0" width.over="61" height.over="25"
x.up="0" y.up="0" width.up="61" height.up="25">
<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>
这个地方是按钮的阴影设置,这个地方可以根据自己对色调的把握来设置;
<!-- layer 2: fill -->
<!--- @private -->
<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>
这个地方是填充设置,当然,这里除了可以设置背景颜色之外,还可以根据对应状态来设置按钮的样子,下面是我自己定义的按钮的填充:
<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill" radiusX="2"
x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
x.down="0" y.down="0" width.down="61" height.down="25"
x.over="0" y.over="0" width.over="61" height.over="25"
x.up="0" y.up="0" width.up="61" height.up="25">
<s:fill>
<s:BitmapFill source.up="@Embed('assets/main/apply-normal.png')"
source.over="@Embed('assets/main/apply-over.png')"
source.down="@Embed('assets/main/apply-click.png')"
source.disabled="@Embed('assets/main/apply-disabled.png')"/>
</s:fill>
</s:Rect>
第三步就是设置它的低亮度了,下面是系统自动生成的:
<!-- layer 3: fill lowlight -->
<!--- @private -->
<s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2"
x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
x.down="0" y.down="0" width.down="61" height.down="25"
x.over="0" y.over="0" width.over="61" height.over="25"
x.up="0" y.up="0" width.up="61" height.up="25">
<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>
对于这块,如果把握的不够好的话可以切换到设计界面来调节,第四步是设置高亮度,和第三步类似。
其实在设计皮肤的时候,没有完全必要按照这个步骤,只要你美工足够专业,在设计背景图片的时候就可以把这些效果直接做进图片里面,我们只需要进行第二步的fill操作就够了,其余的地方就是第八步的label如果你不确定要放什么,可以直接删掉,通过前端调的时候再给它赋值,皮肤的引用办法如下:
<s:Button skinClass="你皮肤所在的包" label="自己发挥"/>
其余的皮肤设计和这个类似,建议利用系统可以生成的优点,首先读懂该段代码是做什么用的,然后根据自己的需要有选择的去修改,一个好的皮肤需要的是你自己对色调的把握,把握的好,皮肤做的就比较好看,当然这也不是一时间可以做到的,需要的是自己勤加练习。
<!--- @private -->
<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>
这个地方是填充设置,当然,这里除了可以设置背景颜色之外,还可以根据对应状态来设置按钮的样子,下面是我自己定义的按钮的填充:
<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill" radiusX="2"
x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
x.down="0" y.down="0" width.down="61" height.down="25"
x.over="0" y.over="0" width.over="61" height.over="25"
x.up="0" y.up="0" width.up="61" height.up="25">
<s:fill>
<s:BitmapFill source.up="@Embed('assets/main/apply-normal.png')"
source.over="@Embed('assets/main/apply-over.png')"
source.down="@Embed('assets/main/apply-click.png')"
source.disabled="@Embed('assets/main/apply-disabled.png')"/>
</s:fill>
</s:Rect>
第三步就是设置它的低亮度了,下面是系统自动生成的:
<!-- layer 3: fill lowlight -->
<!--- @private -->
<s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2"
x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
x.down="0" y.down="0" width.down="61" height.down="25"
x.over="0" y.over="0" width.over="61" height.over="25"
x.up="0" y.up="0" width.up="61" height.up="25">
<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>
对于这块,如果把握的不够好的话可以切换到设计界面来调节,第四步是设置高亮度,和第三步类似。
其实在设计皮肤的时候,没有完全必要按照这个步骤,只要你美工足够专业,在设计背景图片的时候就可以把这些效果直接做进图片里面,我们只需要进行第二步的fill操作就够了,其余的地方就是第八步的label如果你不确定要放什么,可以直接删掉,通过前端调的时候再给它赋值,皮肤的引用办法如下:
<s:Button skinClass="你皮肤所在的包" label="自己发挥"/>
其余的皮肤设计和这个类似,建议利用系统可以生成的优点,首先读懂该段代码是做什么用的,然后根据自己的需要有选择的去修改,一个好的皮肤需要的是你自己对色调的把握,把握的好,皮肤做的就比较好看,当然这也不是一时间可以做到的,需要的是自己勤加练习。
附:自己设计Button的皮肤
<?xml version="1.0" encoding="utf-8"?>
<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" width.up="61" height.up="25"
width.over="61" height.over="25" width.down="61" height.down="25"
width.disabled="61" height.disabled="25">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- layer 1: shadow -->
<!--- @private -->
<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2"
x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
x.down="0" y.down="0" width.down="61" height.down="25"
x.over="0" y.over="0" width.over="61" height.over="25"
x.up="0" y.up="0" width.up="61" height.up="25">
<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>
<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill" radiusX="2"
x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
x.down="0" y.down="0" width.down="61" height.down="25"
x.over="0" y.over="0" width.over="61" height.over="25"
x.up="0" y.up="0" width.up="61" height.up="25">
<s:fill>
<s:BitmapFill source.up="@Embed('assets/main/apply-normal.png')"
source.over="@Embed('assets/main/apply-over.png')"
source.down="@Embed('assets/main/apply-click.png')"
source.disabled="@Embed('assets/main/apply-disabled.png')"/>
</s:fill>
</s:Rect>
<!-- layer 3: fill lowlight -->
<!--- @private -->
<s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2"
x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
x.down="0" y.down="0" width.down="61" height.down="25"
x.over="0" y.over="0" width.over="61" height.over="25"
x.up="0" y.up="0" width.up="61" height.up="25">
<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>
<!-- layer 4: fill highlight -->
<!--- @private -->
<s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2"
x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
x.down="0" y.down="0" width.down="61" height.down="25"
x.over="0" y.over="0" width.over="61" height.over="25"
x.up="0" y.up="0" width.up="61" height.up="25">
<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:SparkButtonSkin>