`

Flex4 切换States实现3D旋转效果

阅读更多
<?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"
               backgroundColor="0x747474"
               creationComplete="application1_creationCompleteHandler(event)" viewSourceURL="srcview/index.html">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <s:states>
        <s:State name="s1"/>
        <s:State name="s2"/>
    </s:states>
    <s:transitions>
        <s:Transition fromState="*"
                      toState="s2">
            <s:Sequence target="{myGroup}">
                <s:Parallel>
                    <s:Fade target="{p2}"
                            alphaFrom="1"
                            alphaTo="0"
                            duration="600"/>
                    <s:Fade target="{p1}"
                            alphaFrom="0"
                            alphaTo="1"
                            duration="600"
                            effectEnd="fade1_effectEndHandler(event)"/>
                    <s:Rotate3D angleYFrom="0"
                                angleYTo="180"
                                duration="600"
                                repeatCount="1"
                                autoCenterTransform="true"/>
 
                </s:Parallel>
                <s:SetAction property="includeInLayout"/>
            </s:Sequence>
 
        </s:Transition>
 
        <s:Transition fromState="s2"
                      toState="*">
            <s:Sequence target="{myGroup}">
                <s:Parallel>
                    <s:Fade target="{p1}"
                            alphaFrom="1"
                            alphaTo="0"
                            duration="600"/>
                    <s:Fade target="{p2}"
                            alphaFrom="0"
                            alphaTo="1"
                            duration="600"
                            effectEnd="fade2_effectEndHandler(event)"/>
 
                    <s:Rotate3D angleYFrom="{angle}"
                                angleYTo="{angle+180}"
                                duration="600"
                                repeatCount="1"
                                autoCenterTransform="true"/>
 
                </s:Parallel>
                <s:SetAction property="includeInLayout"/>
            </s:Sequence>
        </s:Transition>
    </s:transitions>
 
    <fx:Script>
        <![CDATA[
            import mx.events.EffectEvent;
            import mx.events.FlexEvent;
            [Bindable]
            private var angle:Number=0;
            protected function button1_clickHandler(event:MouseEvent):void
            {
                switch (this.currentState)
                {
                    case "s1":
                    {
                        this.currentState='s2';
                        angle=0;
                        break;
                    }
                    case "s2":
                    {
                        this.currentState='s1';
                        angle=180;
                        break;
                    }
                }
 
            }
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                this.vidPlay2.source="assets/002.flv";
                this.vidPlay2.play();
            }
            protected function fade1_effectEndHandler(event:EffectEvent):void
            {
                this.vidPlay1.source="assets/001.flv";
                this.vidPlay1.play();
                this.vidPlay2.source=null;
            }
            protected function fade2_effectEndHandler(event:EffectEvent):void
            {
                this.vidPlay2.source="assets/002.flv";
                this.vidPlay2.play();
                this.vidPlay1.source=null;
            }
        ]]>
    </fx:Script>
    <s:Group id="myGroup"
             horizontalCenter="0"
             verticalCenter="0"
             width="400"
             height="400">
        <s:Group width="100%"
                 height="100%"
                 id="p1">
            <s:VideoPlayer id="vidPlay1"
                           left="0"
                           right="0"
                           top="0"
                           bottom="0"
                           autoPlay="false"
                           includeInLayout.s1="false"/>
        </s:Group>
        <s:Group width="100%"
                 height="100%"
                 id="p2">
            <s:VideoPlayer id="vidPlay2"
                           left="0"
                           right="0"
                           top="0"
                           bottom="0"
                           includeInLayout.s2="false"/>
        </s:Group>
    </s:Group>
    <s:Button label="Change State"
              click="button1_clickHandler(event)"
              horizontalCenter="0"
              verticalCenter="250"/>
 
</s:Application>
 
  • 大小: 67.3 KB
2
6
分享到:
评论

相关推荐

    Flex4权威指南+清晰中文版

    5. **Effects和Transitions**:Flex4引入了强大的效果和过渡机制,允许开发者轻松添加动画效果,如淡入淡出、移动、旋转等,增强了用户体验。 6. **数据绑定**:Flex4的数据绑定机制进一步完善,使得视图和模型之间...

    FLEX4权威指南,随书资源代码

    8. ** States 和 Transitions**:Flex 4引入了状态管理和转换,使得在不同界面状态间切换时可以实现平滑过渡,提升了用户体验。 9. **BlazeDS和LiveCycle Data Services**:Flex 4可以与服务器端进行数据交换,...

    FLEX入门实例--------transition,state的综合运用

    它们可以帮助我们实现诸如淡入淡出、滑动、旋转等各种视觉效果,使得用户界面更加吸引人。在Flex中,我们可以使用`mx.transitions`包下的类来定义和管理过渡。例如,`Fade`类用于创建简单的淡入淡出效果,而`Move`类...

    Flex3控制多个SWF文件在MXML文件里做360度的随机运动

    例如,可以通过定义`_states`元素在MXML中设置不同状态,然后根据应用的逻辑切换这些状态,从而改变SWF的运动方式或位置。 6. **FlowerSwf**:这个文件可能是压缩包中的示例SWF文件,用于演示如何在Flex项目中实现...

    Flex UI组件使用全集

    - **Rotate**: 旋转效果。 - **Sequence**: 顺序执行多个效果。 - **SoundEffect**: 声音效果。 - **WipeDown、WipeLeft、WipeRight、WipeUp**: 各种擦拭效果。 - **Zoom**: 缩放效果。 - **ViewStates**: 视图...

    Flex 3 组件实例与应用(2009版)

    - **Rotate** - 旋转效果。 - **Sequence** - 顺序播放多个效果。 - **SoundEffect** - 声音效果。 - **WipeDown/WipeLeft/WipeRight/WipeUp** - 清除动画效果。 - **Zoom** - 缩放效果。 ##### 2. **ViewStates** ...

    《Flex 3 组件实例与应用(2009版)》(PDF)

    Effects提供了多种视觉效果,如添加项目效果、属性动画、模糊、溶解、淡入淡出、发光、虹膜、移动、并行、暂停、移除项目效果、缩放、旋转、序列、声音效果、向下擦拭、向左擦拭、向右擦拭、向上擦拭和缩放。...

Global site tag (gtag.js) - Google Analytics