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>