Flex4提示框效果

Alert 提示框效果

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" width="240" height="160" 
       backgroundColor="0x000000" backgroundAlpha="0.8" cornerRadius="5" fontFamily="微软雅黑,黑体" >
 <s:layout>
  <s:BasicLayout/>
 </s:layout>
 
 <fx:Script>
  <![CDATA[
   import mx.core.UIComponent;
   import mx.effects.Parallel;
   import mx.events.EffectEvent;
   import mx.managers.PopUpManager;
   
   import spark.components.Application;
   import spark.components.SkinnableContainer;
   import spark.components.TitleWindow;
   import spark.effects.Fade;
   import spark.effects.Move3D;
   [Bindable]
   public var content:String = "";
   /**
    * 显示rocAlert
    * text:alert的内容
    * parent:显示的父
    * model:是否模态窗口
    * */
   public function show(text:String,rocAlert:RocAlert,parent:DisplayObject,model:Boolean):void{
    this.content = text;
    var p:Point = localToGlobal(new Point(parent.x,parent.y))
    rocAlert.x = p.x+parent.width/2-rocAlert.width/2;
    rocAlert.y = p.y-rocAlert.height+30;
    
    PopUpManager.addPopUp(rocAlert,parent,model);
    rocAlert.mask = drawMask(parent as SkinnableContainer);
    var move:Move3D = new Move3D();
    move.yFrom = p.y-rocAlert.height;
    move.yTo = p.y+30;
    /* move.zFrom = -200;
    move.zTo = 0; */ 
    move.duration = 500;
    move.target = rocAlert;
    
    var fade:Fade = new Fade();
    fade.duration = 500;
    fade.alphaFrom= 0;
    fade.alphaTo = 1;
    fade.target = rocAlert;
    
    var par:Parallel = new Parallel();
    par.addChild(move);
    par.addChild(fade);
    par.play();
   }
   /**
    * 蒙版
    * */
   private function drawMask(bounds:SkinnableContainer):UIComponent{
    var largeMask:UIComponent = new UIComponent();
    largeMask.graphics.beginFill(0xfff000, 0.5);
    
    var topOffset:Number = 0;
    if(bounds is TitleWindow){
     var phh:Number = TitleWindow(bounds).getStyle('headerHeight');
     topOffset += (phh)? phh : 32;
    } 
    largeMask.graphics.drawRoundRect(bounds.x-10, bounds.y+topOffset, bounds.width+20,
     bounds.height+10, 0);   
    largeMask.graphics.endFill();
    if(bounds is Application){
     bounds.addElement(largeMask);
    }else{
     bounds.parentApplication.addElement(largeMask);
    }
    return largeMask;
   } 
   /**
    * 点击确定添加移除特效，并且移除窗口
    * */
   protected function button1_clickHandler(event:MouseEvent):void
   {
    var move:Move3D = new Move3D();
    move.duration = 500;
    move.target = this;
    /* move.zFrom= 160;
    move.zTo = -200; */
    move.yFrom = this.y+this.height;
    move.yTo = this.y+20;
    
    var fade:Fade = new Fade();
    fade.duration = 500;
    fade.alphaFrom= 1;
    fade.alphaTo = 0;
    fade.target = this;
    
    var p:Parallel = new Parallel();
    p.addChild(move);
    p.addChild(fade);
    p.play();
    p.addEventListener(EffectEvent.EFFECT_END,removeAlertPopUp);
   }
   public function removeAlertPopUp(event:EffectEvent):void{
    PopUpManager.removePopUp(this);
   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
 </fx:Declarations>
 <s:filters>
  <s:DropShadowFilter color="#000000" alpha="0.6" angle="45" distance="5"/>
 </s:filters>
 <mx:Image source="warn.png" x="11" y="38" width="20" height="20"/>
 <s:Button x="158" y="127" label="确定" click="button1_clickHandler(event)" useHandCursor="true" buttonMode="true"/>
 <s:Label x="84" y="53" text="{content}" color="0xffffff" width="135" height="44"/>
</s:BorderContainer>

 

应用

<?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:filters="org.gonta.filters.*">

 <fx:Script>
  <![CDATA[
   protected function alert_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
    var newAlert:RocAlert = new RocAlert();
    newAlert.show("nihao",newAlert,this,true);
   }
  ]]>
 </fx:Script>

 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
 </fx:Declarations>
 <s:BitmapImage id="img1" source="@Embed('back.gif')" x="133" y="33" width="443" height="298">
  <s:filters>
   <filters:WetFloorFilter alpha="0.4" y="{img1.height}" height="{img1.height/3}"/>
  </s:filters>
 </s:BitmapImage>
 
 <s:Button id="alert" label="alert" click="alert_clickHandler(event)"/>
</s:Application>