从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皮肤（和转换）。试一试，学一学，很有趣的哟！