Home >
Please note:
This example was developed using the Flex 4 SDK nightly build 4.0.0.9033 which can be found here.
I'm going to jump right in from where my last post about Spark skins left off by using the button we created and making some modifications to it. Here's how the button looked when we finished last time:
And here's how it will look after we make a couple of modifications and add the state transitions to our Spark skin:
THE CHANGES
Let's take a quick look at the modifications first just so there is no (or at least less) confusion. First is the change to the drop shadow. I added an id and removed alpha.over, distance.over, blurX.over and blurY.over.
<s:filters>
<s:DropShadowFilter id="dShadow" quality="3"
alpha="0.5" distance="5" inner.down="true"/>
</s:filters>
The next change is to the fill Rect where I added an id and changed radiusX and radiusY. Additionally, you'll notice a namespace change from mx to s for the LinearGradient and GradientEntry (thanks julien). And finally, on the middle GradientEntry, the addition of id and color.over and the removal of 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>
Last but not least in the changes is the SimpleText whose id is "labelDisplay" and whose only change is the addition of color.over.
<s:SimpleText id="labelDisplay" color="#ffffff" color.over="#ffff00"
horizontalCenter="0" verticalCenter="0"
left="10" right="10" top="5" bottom="5"/>
THE TRANSITIONS
Now let's get to the reason I assume you're reading this: transitions. Let's start with s:transitions, which is an array of s:Transition objects. We'll go ahead and put in the two empty state transitions we'll be using. One to go from the up state to the over state and one to go back.
The s:transitions array:
<s:transitions>
<s:Transition fromState="up" toState="over">
</s:Transition>
<s:Transition fromState="over" toState="up">
</s:Transition>
</s:transitions>
Rather than repeat myself for both, I'm going to focus on the first s:Transition which will control the change from the up state to the over state. Since we're going to be playing multiple effects all at the same time, we'll need to wrap them in a s:Parallel effect. We'll also set the duration property (300 milliseconds in this case) of the s:Parallel effect so all of the child effects will take the same amount of time to complete.
The s:Parallel effect:
<s:Transition fromState="up" toState="over">
<s:Parallel duration="300">
</s:Parallel>
</s:Transition>
And now to fill the s:Parallel effect with its child effects. The objects we'll be animating are "fillRect" (the s:Rect), "dShadow" (the s:DropShadowFilter), "midGrade" (the s:GradientEntry) and "labelDisplay" (the s:SimpleText). The effect we'll use for "fillRect", "dShadow" and one for "midGrade" is the s:Animate effect which animates given properties between values. To animate each value, we'll be using the s:SimpleMotionPath class and setting its property and valueTo properties accordingly.
The s:Animate effect for "fillRect":
<s:Animate target="{fillRect}">
<s:SimpleMotionPath property="radiusX" valueTo="0"/>
</s:Animate>
Because we'll be altering the color of a couple of the objects, one more effect we need to add is the s:AnimateColor effect for "midGrade" and "labelDisplay". Since we already have the colors set for the up and over states of these two objects, we only need to set the targets property of the s:AnimateColor effect.
The s:AnimateColor effect for "midGrade" and "labelDisplay":
<s:AnimateColor targets="{[midGrade,labelDisplay]}"/>
Now let's put the transitions from the up state to over state all together. The transitions for going back to the up state from the over state are very similar and you can see them in the full code.
Transition from up to over:
<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>
And finally, the full code for our Spark skin with state transitions:
<?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>
The final skinned button with transitions:
And, just like last time, let's make a couple of changes to play around a bit...
Animate the radiusX of "fillRect" to -5:
<s:Animate target="{fillRect}">
<s:SimpleMotionPath property="radiusX" valueTo="-5"/>
</s:Animate>
Animate the radiusY of "fillRect" to -5. Be sure to animate it back in the over-to-up transition.
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>
That's all there is to it. Thanks so much for reading and again, I encourage you to get in there and play around with all kinds of different Spark skinning (and transitions) in Flex 4. Experiment, learn and most of all, have lots of fun!
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Can we tweak the above codes to get radiusY to 15 (over-to-up)??
Absolutely David. All you have to do is change the value of "valueTo" from 10 to 15.