动画Alert

Creating a custom creation complete effect on a Flex Alert control

Posted on 2008-01-13 16:03 OldHawk 阅读(1879) 评论(0)  编辑 收藏 网摘 所属分类: Flex

The following example shows how to specify a effect which gets played when an Alert control is displayed by setting the Alert control’s creationCompleteEffect style. You can also see how to embed both the normal and bold font using CSS and @font-face

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
        }

        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
            fontWeight: bold;
        }

        Alert {
            fontFamily: VerdanaEmbedded;
            creationCompleteEffect: myEffect;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private var alert:Alert;

            private function button_click():void {
                alert = Alert.show("The quick brown fox jumped over the lazy dog", "Lorem Ipsum");
            }
        ]]>
    </mx:Script>

    <mx:Sequence id="myEffect">
        <mx:Parallel>
            <mx:Zoom />
            <mx:Fade />
        </mx:Parallel>
        <mx:Rotate />
    </mx:Sequence>

    <mx:Button label="Launch Alert" click="button_click();" />

</mx:Application>

Flex 4 版本代码

<?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/halo" minWidth="1024" minHeight="768">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";

        
        mx|Alert {
            fontFamily: VerdanaEmbedded;
            creationCompleteEffect: myEffect;
        }

    </fx:Style>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function button_click():void
            {
                Alert.show("旋转的弹出窗体！");
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:Sequence id="myEffect">
        <mx:Parallel>
            <mx:Zoom />
            <mx:Fade />
        </mx:Parallel>

        </mx:Sequence>
    </fx:Declarations>

    <mx:Button label="Launch Alert" click="button_click();" />

</s:Application>