从Spark 皮肤开始：转换

本文来自：

http://www.insideria.com/2009/08/getting-started-with-spark-ski-1.html

请注意：
此范例使用了Flex 4 SDK nightly build 4.0.0.9033 （可在此找到）
我打算使用我们创建的按钮，修改下，就直接进入我上个关于Spark皮肤的帖子里。下面是我们上次结束时按钮的样子：
这里是它在我们对Spark皮肤进行一些修改，添加了状态转换之后的样子：

更改

首先，我们来快速看下进行的修改，以尽量避免混淆。第一个就是对阴影的修改。我添加了一个id, 然后移除alpha.over,distance.over, blurX.over 和 blurY.over。

<s:filters>
<s:DropShadowFilter id="dShadow" quality="3"
alpha="0.5" distance="5" inner.down="true"/>
</s:filters>

下一个更改就是在添加id处填入Rect, 更改radiusX 和radiusY。你还会注意到命名空间为从LinearGradient 和GradientEntry将mx改成了s（感谢julien）。最后，在中间的GradientEntry，添加id和color.over, 移除ratio.over。

<s:Rect id="fillRect" left="0" right="0" top="0" bottom="0" radiusX="10" radiusY="10">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#0a5c00" ratio="0.00"/>
<s:GradientEntry id="midGrade" color="#84a381" color.over="#bae4b6" ratio="0.40"/>
<s:GradientEntry color="#0a5c00" ratio="0.80"/>
</s:LinearGradient>
</s:fill>
</s:Rect>

<s:SimpleText id="labelDisplay" color="#ffffff" color.over="#ffff00"
horizontalCenter="0" verticalCenter="0"
left="10" right="10" top="5" bottom="5"/>

转换
现在，我们来看看为什么会这样。我猜想你正在看：转换。我们就从转换开始，这是s数组：Transition objects。我们继续，插入将要使用的两个空状态转换。一个从up state到over state，另一个反之。

The s:transitions数组:

<s:transitions>
<s:Transition fromState="up" toState="over">
</s:Transition>
<s:Transition fromState="over" toState="up">
</s:Transition>
</s:transitions>

无需再重复，我将关注第一个s:Transition, 它将控制从up state到over state的改变。既然我们将在同一时间制造多重效果，我们需要将它们打包到s:Parallel effect。我们也将设置s:Parallel effect 的duration 属性（在本例中，是300毫秒），因此所有的子代效果需要同样长的时间完成。

The s:Parallel effect:

<s:Transition fromState="up" toState="over">
<s:Parallel duration="300">
</s:Parallel>
</s:Transition>

现在，把子代效果填入s:Parallel effect。我们将要启动的对象是"fillRect" (s:Rect), "dShadow" (the s:DropShadowFilter), "midGrade" (thes:GradientEntry) 和"labelDisplay" (the s:SimpleText)。我们将要用于"fillRect"和 "dShadow"的效果，用于"midGrade"的效果都是s:Animate effect，它启动值之间的给予属性。为了启动每个值，我们将使用given properties类，设定相应的属性和valueTo属性。

The s:Animate effect for "fillRect":

<s:Animate target="{fillRect}">
<s:SimpleMotionPath property="radiusX" valueTo="0"/>
</s:Animate>

因为我们将改变几个对象的颜色，我们需要添加的一个效果就是"midGrade" 和"labelDisplay"的s:AnimateColor effect。既然我们已经为这两个对象的up state和over state设定了颜色，我们只需设定s:AnimateColor effect的目标属性TargetProperty.

The s:AnimateColor effect for "midGrade" and "labelDisplay":
<s:AnimateColor targets="{[midGrade,labelDisplay]}"/>
现在，我们将从up state到over state的转换放在一起。从over state回到up state的转换非常相似，你可以在全部代码理看到。
从up state到over state的转换

<s:Transition fromState="up" toState="over">
<s:Parallel duration="300">
<s:Animate target="{fillRect}">
<s:SimpleMotionPath property="radiusX" valueTo="0"/>
</s:Animate>
<s:Animate target="{dShadow}">
<s:SimpleMotionPath property="distance" valueTo="20"/>
<s:SimpleMotionPath property="blurX" valueTo="15"/>
<s:SimpleMotionPath property="blurY" valueTo="15"/>
<s:SimpleMotionPath property="alpha" valueTo="0.3"/>
</s:Animate>
<s:Animate target="{midGrade}">
<s:SimpleMotionPath property="ratio" valueTo="0.25"/>
</s:Animate>
<s:AnimateColor targets="{[midGrade,labelDisplay]}"/>
</s:Parallel>
</s:Transition>

最后，Spark皮肤有状态转换的全部代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.Adobe.com/mxml/2009"
xmlns:s="library://ns.Adobe.com/Flex/spark"
xmlns:mx="library://ns.Adobe.com/Flex/halo">

<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>

<s:transitions>
<s:Transition fromState="up" toState="over">
<s:Parallel duration="300">
<s:Animate target="{fillRect}">
<s:SimpleMotionPath property="radiusX" valueTo="0"/>
</s:Animate>
<s:Animate target="{dShadow}">
<s:SimpleMotionPath property="distance" valueTo="20"/>
<s:SimpleMotionPath property="blurX" valueTo="15"/>
<s:SimpleMotionPath property="blurY" valueTo="15"/>
<s:SimpleMotionPath property="alpha" valueTo="0.3"/>
</s:Animate>
<s:Animate target="{midGrade}">
<s:SimpleMotionPath property="ratio" valueTo="0.25"/>
</s:Animate>
<s:AnimateColor targets="{[midGrade,labelDisplay]}"/>
</s:Parallel>
</s:Transition>

<s:Transition fromState="over" toState="up" >
<s:Parallel duration="300">
<s:Animate target="{fillRect}">
<s:SimpleMotionPath property="radiusX" valueTo="10"/>
</s:Animate>
<s:Animate target="{dShadow}">
<s:SimpleMotionPath property="distance" valueTo="5"/>
<s:SimpleMotionPath property="blurX" valueTo="4"/>
<s:SimpleMotionPath property="blurY" valueTo="4"/>
<s:SimpleMotionPath property="alpha" valueTo="0.5"/>
</s:Animate>
<s:Animate target="{midGrade}">
<s:SimpleMotionPath property="ratio" valueTo="0.4"/>
</s:Animate>
<s:AnimateColor targets="{[midGrade,labelDisplay]}"/>
</s:Parallel>
</s:Transition>
</s:transitions>

<s:states>
<mx:State name="up"/>
<mx:State name="down"/>
<mx:State name="over"/>
<mx:State name="disabled"/>
</s:states>

<s:filters>
<s:DropShadowFilter id="dShadow" quality="3"
alpha="0.5" distance="5" inner.down="true"/>
</s:filters>

<s:Rect id="fillRect" left="0" right="0" top="0" bottom="0" radiusX="10" radiusY="10">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#0a5c00" ratio="0.00"/>
<s:GradientEntry id="midGrade" color="#84a381" color.over="#bae4b6" ratio="0.40"/>
<s:GradientEntry color="#0a5c00" ratio="0.80"/>
</s:LinearGradient>
</s:fill>
</s:Rect>

<s:SimpleText id="labelDisplay" color="#ffffff" color.over="#ffff00"
horizontalCenter="0" verticalCenter="0"
left="10" right="10" top="5" bottom="5"/>

<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Skin>

最后的转换皮肤按钮：

像 上一次一样，我们来进行几个改变…
启动"fillRect"的radiusX 到 -5:
<s:Animate target="{fillRect}">
<s:SimpleMotionPath property="radiusX" valueTo="-5"/>
</s:Animate>
启动"fillRect"的"fillRect"到-5。确定在over-to-up的转换中，使之回复到之前的状态。
radiusY to -5 (up-to-over):
<s:Animate target="{fillRect}">
<s:SimpleMotionPath property="radiusY" valueTo="-5"/>
</s:Animate>
radiusY to 10 (over-to-up):
<s:Animate target="{fillRect}">
<s:SimpleMotionPath property="radiusY" valueTo="10"/>
</s:Animate>

就是这样了。感谢阅读。再重复遍，我希望您能尝试Flex 4里所有不同的Spark皮肤（和转换）。试一试，学一学，很有趣的哟！