自己做的Effect特效

下面这个示例是用Move3D特效来进行两个视图（view）间的移动，给人一种以滑动的效果。为了做测试，这里用了两个方向(x和y方向),根据改变state来触发该特效。

 

还有一个知识点需要注意（与该示例无关）的就是   Transition 中的fromState和toState,分别用来指定应用过渡时的原视图状态和目标视图状态，指定为星号（*）的话，表示任意的视图状态。如：fromState = "*" toState = "*"。

 

<?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:local="*">

    <s:states>

        <s:State name="stateView1"/>

        <s:State name="normal"/>

    </s:states>

    <fx:Script>

        <![CDATA[

            [Bindable]

            protected var showVisible:Boolean = false;

        ]]>

    </fx:Script>

   

    <s:transitions>

        <s:Transition fromState="stateView1" toState="normal">

            <s:Sequence duration="150">

                <s:Move3D xFrom="57" xTo="260" target="{view2}" effectEnd="showVisible = true"/>

                <s:Move3D xFrom="300" xTo="57" target="{view1}" />

            </s:Sequence>

        </s:Transition>

        <s:Transition fromState="normal" toState="stateView1">

            <s:Sequence duration="150">

                <s:Move3D yFrom="57" yTo="260" target="{view1}" effectEnd="showVisible = false"/>

                <s:Move3D yFrom="300" yTo="57" target="{view2}" />

            </s:Sequence>

        </s:Transition>

    </s:transitions>

 

    <s:BorderContainer width="300" height="260" backgroundColor="0x696969">

        <s:Button label="我的老婆" x="129" y="91" height="49" width="89" click="this.currentState = 'stateView1' "/>

        <s:Button label="我的小艳艳" x="129" y="152" height="49" width="89" click="this.currentState='normal' "/>

       

        <mx:Image id="view1" source="@Embed('assets/images/TimesheetOverBtn.png')" visible="{!showVisible}"/>

        <mx:Image id="view2" source="@Embed('assets/images/EmailBtn.png')" visible="{showVisible}"/>

    </s:BorderContainer>

</s:Application>

 

 

---下面是从网上看到的篇帖子，给出的特效也不错，搬来学习一下：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" paddingTop="100" viewSourceURL="srcview/index.html"> <!-- ====================================淡出淡入效果 ==================================== -->    <!-- <mx:Dissolve id="xiaoshi" duration="1000" alphaFrom="1.0" alphaTo="0.0" />     <mx:Dissolve id="xianshi" duration="1000" alphaFrom="0.0" alphaTo="1.0" />         <mx:Image visible="{aaas.selected}" source="@Embed('E:/WS workspace/Flex/image/001.png')" hideEffect="{xiaoshi}" showEffect="{xianshi}" />     <mx:CheckBox id="aaas" label="显示/隐藏" selected="true" />-->    <!-- ==================================== over ==================================== -->       <!-- ====================================以矩形 淡出淡入效果 ==================================== -->    <!--<mx:Iris id="xianshi" duration="1000" showTarget="true" />    <mx:Iris id="xiaoshi" duration="1000" showTarget="false" />        <mx:Image visible="{abc.selected}" source="@Embed('E:/WS workspace/Flex/image/002.png')" hideEffect="{xianshi}" showEffect="{xiaoshi}"/>     <mx:CheckBox id="abc" visible="true" selected="true" label="巨型显示和出现" />-->     <!-- ==================================== over ==================================== -->          <!-- ==================================== 左右移动图片 ==================================== -->      <mx:Script>     <![CDATA[        import mx.controls.Alert;        private function moveImage(e:MouseEvent){                var point:Point = new Point(mouseX,mouseY);         var localPoint:Point = canvas.globalToContent(point);                 myMove.xTo = localPoint.x+200;         myMove1.xTo = localPoint.x+200;         myMove2.xTo = localPoint.x+200;         myMove.play();        }               private function outImage(e :MouseEvent){                 var point:Point = new Point(mouseX,mouseY);         var localPoint:Point = canvas.globalToContent(point);                 myMove.xTo = myMove.yTo-200;         myMove1.xTo = myMove.yTo-200;         myMove2.xTo = myMove.yTo-200;        myMove.end();        }     ]]>     </mx:Script>     <mx:Move id="myMove" target="{img}" xTo="200" yTo="200"/>     <mx:Move id="myMove1" target="{img1}" xTo="200" yTo="200"/>     <mx:Move id="myMove2" target="{img2}" xTo="200" yTo="200"/>             <mx:HBox id="canvas" width="100%" borderStyle="inset" height="397">          <mx:Image id="img" source="@Embed('E:/WS workspace/Flex/image/001.png')" mouseOver="moveImage(event)" mouseOut="outImage(event)"/>          <mx:Image id="img1" source="@Embed('E:/WS workspace/Flex/image/002.png')" mouseOver="moveImage(event)" mouseOut="outImage(event)"/>          <mx:Image id="img2" source="@Embed('E:/WS workspace/Flex/image/003.png')" mouseOver="moveImage(event)" mouseOut="outImage(event)"/>    </mx:HBox>     <!-- ==================================== over ==================================== --> </mx:Application>