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

guangqiang

<?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>