Mouse Rollover效果--显示自定义控件 （第一层）

<?xml version="1.0" encoding="utf-8"?>
<!--created:Oct 6, 2010 file:FLEX4EffectExample1.mxml  author:Michael -->
<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"
               backgroundColor="0"
               xmlns:comp="comp.*" viewSourceURL="srcview/index.html">
 
    <s:layout>
        <s:VerticalLayout verticalAlign="middle"
                          horizontalAlign="center"/>
    </s:layout>
 
    <fx:Declarations>
        <s:Animate id="myAnimate"
                   duration="800"
                   easer="{this.linearEasing}">
            <s:SimpleMotionPath property="height"
                                valueFrom="0"
                                valueTo="50"/>
        </s:Animate>
        <s:Animate id="myAnimate1"
                   duration="600"
                   easer="{this.linearEasing}">
            <s:SimpleMotionPath property="height"
                                valueFrom="50"
                                valueTo="0"/>
        </s:Animate>
        <s:Linear id="linearEasing"
                  easeInFraction="0"
                  easeOutFraction="1"/>
    </fx:Declarations>
 
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            private var cover:spark.components.Label;
            private var cover1:spark.components.Label;
 
            protected function bordercontainer1_creationCompleteHandler(event:FlexEvent):void
            {
                cover=new spark.components.Label();
                cover1=new spark.components.Label();
                cover.top=0;
                cover.left=0;
                cover.right=0;
                cover.setStyle("backgroundColor", 0);
                cover.setStyle("backgroundAlpha", .4);
                cover.setStyle("textAlign", "center");
                cover.setStyle("paddingTop", 15);
                cover.setStyle("fontSize", 30);
                cover.setStyle("fontStyle", "italic");
                cover.setStyle("color", "white");
                cover.text="Cosmos lighting";
                cover.setStyle("addedEffect", myAnimate);
                cover.setStyle("removedEffect", myAnimate1);
                cover1.bottom=0;
                cover1.left=0;
                cover1.right=0;
                cover1.setStyle("backgroundColor", 0);
                cover1.setStyle("backgroundAlpha", .4);
                cover1.setStyle("textAlign", "center");
                cover1.setStyle("paddingTop", 15);
                cover1.setStyle("fontSize", 16);
                cover1.setStyle("fontFamily", "Arial");
                cover1.setStyle("color", "white");
                cover1.text="http://www.sxc.hu/";
                cover1.buttonMode=true;
                cover1.addEventListener(MouseEvent.CLICK, onClick);
                cover1.setStyle("addedEffect", myAnimate);
                cover1.setStyle("removedEffect", myAnimate1);
                this.bc.addEventListener(MouseEvent.ROLL_OVER, onOver);
                this.bc.addEventListener(MouseEvent.ROLL_OUT, onOut);
 
            }
 
            private function onOver(e:MouseEvent):void
            {
                this.myAnimate1.end();
                this.bc.addElement(cover);
                this.bc.addElement(cover1);
 
            }
 
            private function onOut(e:MouseEvent):void
            {
                this.myAnimate.end();
                this.bc.removeElement(cover);
                this.bc.removeElement(cover1);
            }
 
            private function onClick(e:MouseEvent):void
            {
                navigateToURL(new URLRequest(e.target.text), "_blank");
            }
        ]]>
    </fx:Script>
    <s:BorderContainer backgroundImage="@Embed('images/images.png')"
                       backgroundImageFillMode="clip"
                       id="bc"
                       width="400"
                       height="296"
                       cornerRadius="4"
                       creationComplete="bordercontainer1_creationCompleteHandler(event)">
    </s:BorderContainer>
</s:Application>