Flex特效的一个小示例(state、呈示器、mxml外观用法)

Flex特效的一个小示例，其中用到了自定义Mxml项呈示器和Mxml外观：
具体是看NewsListItemRenderer类中的state和特效的用法。

----MyTest 主应用程序
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
xmlns:myTest="myTest.*">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:VGroup x="92" y="177">
<myTest:NewsViewTest/>
</s:VGroup>
</s:Application>

---NewsViewTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
xmlns:myTest="myTest.*">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var dp:ArrayCollection = new ArrayCollection([
{info:'The company picnic was a success! Over 500 employees brought family ...', path:'assets/images/Picnic.jpg', title:'Company Picnic'},
{info:'Congratulations Susan Kim! Susan has been with Spark Inc. since 2001 ...', path:'assets/images/employee_of_the_month.jpg', title:'Employee of the Month'},
{info:'Jim Summers heads up the Quality Control team at Spark ...', path:'assets/images/featured_employee.jpg', title:'Leader Board'},
{info:'Find out how investments for your future are taking shape ...', path:'assets/images/401k.jpg', title:'Your 401k'},
{info:'Spark Inc stock prices have risen steadily since early last quarter ...', path:'assets/images/bar_chart.jpg', title:'Market Watch'},
{info:'The annual company meeting is going to be held in the cafeteria next Tuesday ...', path:'assets/images/meeting.jpg', title:'Company Meeting'}
]);

]]>
</fx:Script>

<s:List skinClass="myTest.NewsListTest" dataProvider="{dp}"/>

</s:Group>

---NewsListTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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="112"
alpha.disabled="0.5" blendMode="normal" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:myTest="myTest.*">

<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.List")]
]]>
</fx:Metadata>

<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:HScrollBar viewport="{dataGroup}" x="10" y="183" width="100%"/>
<mx:Image source="@Embed('assets/images/Globe.png')" x="14" y="14"/>
<s:DataGroup id="dataGroup" itemRenderer="myTest.NewsListItemRendererTest" height="100" x="10" y="75" width="100%">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:DataGroup>

<s:transitions>
<s:Transition fromState="normal" toState="disabled" autoReverse="true">
<s:Parallel target="{dataGroup}">
<s:Resize duration="0"/>
<s:Move autoCenterTransform="true" duration="0"/>
</s:Parallel>
</s:Transition>
</s:transitions>
</s:SparkSkin>

----NewsListItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true"
useHandCursor="true" buttonMode="true">
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
<s:State name="disabled"/>
</s:states>
<fx:Declarations>
<s:DropShadowFilter id="ds"
color="0x69696969"
distance="5" alpha="0.5"/>
</fx:Declarations>
<mx:Image id="img" source="{data.path}" width="100" height="81" alpha.hovered="0.5"/>

<s:Rect width="100" height="100" y="80" y.hovered="20" id="rect1">
<s:fill>
<s:LinearGradient rotation="90">
<s:entries>
<s:GradientEntry color="0xeae6e4" ratio="0.10"/>
<s:GradientEntry color="0xFFFFFF" ratio="0.90"/>
</s:entries>
</s:LinearGradient>
</s:fill>
</s:Rect>

<s:Label text="{data.title}" x="2" y="83" excludeFrom="hovered"/>
<s:Label text="{data.info}" includeIn="hovered" x="2" y="25" width="80" height="55" styleName="NewsTeaser"/>

<s:transitions>
<s:Transition toState="hovered">
<s:Parallel targets="{rect1}" duration="200" effectStart="rect1.filters = [ds];">
<s:Move yFrom="80" yTo="20"/>
<s:Rotate3D angleYTo="30" angleXTo="30" target="{img}"/>
</s:Parallel>
</s:Transition>

<s:Transition fromState="hovered">
<s:Parallel target="{rect1}" duration="200" effectEnd="rect1.filters = [];">
<s:Move yFrom="20" yTo="80"/>
<s:Rotate3D angleYTo="0" angleXTo="0" targets="{img}"/>
</s:Parallel>
</s:Transition>
</s:transitions>
</s:ItemRenderer>