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>