Flex component to display modal popup windows that self-close on delay using the SkinnablePopUpContainer.

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
Michael Ritchie
[email protected]
Copyright 2011 ThanksMister LLC
-->
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx">

        <fx:Style source="style.css"/>
	
	<fx:Script>
		<![CDATA[
			import com.thanksmister.controls.Toast;
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				var toastDialog:Toast = new Toast();
				
				toastDialog.width = this.width;
				toastDialog.height = this.height;
				toastDialog.popToast( "Here is some toast..." );
				toastDialog.open(this, true);
			}
		
		]]>
	</fx:Script>
	
	<s:Button label="PopToast" click="button1_clickHandler(event)"/>
	
</s:WindowedApplication>

style.css

@namespace thanksmister "com.thanksmister.controls.*";

thanksmister|Toast
{
	modalTransparency: .25;
	modalTransparencyBlur: .25;
	modalTransparencyColor: #000000;
}


/*
global
{
	modalTransparency: .25;
	modalTransparencyBlur: .25;
	modalTransparencyColor: #000000;
}
*/

Toast.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--

Michael Ritchie
[email protected]
Copyright 2011, ThanksMister LLC

-->
<s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
						   xmlns:s="library://ns.adobe.com/flex/spark" 
						   backgroundAlpha="0" 
						   skinClass="com.thanksmister.controls.ToastSkin">
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		.toastTextStyle
		{
			fontSize: 22;
			color: #FFFFFF;
		}
	</fx:Style>
	
	<fx:Script>
		<![CDATA[
			import mx.events.EffectEvent;
			
			import spark.effects.Animate;
			import spark.effects.animation.MotionPath;
			import spark.effects.animation.SimpleMotionPath;
			
			
			[Bindable]
			private var message:String = "";
			
			/**
			 * Timer used to remove the toast
			 */
			private var toastTimer:Timer;

			/**
			 * Open a new Toast
			 * @param message
			 */
			public function popToast(message:String, delay:Number = 2000):void
			{
				this.message = message;
				
				toastTimer = new Timer(delay);
				toastTimer.addEventListener(TimerEvent.TIMER, onToastTimer, false, 0, true);
				toastTimer.start();
			}
			
			/**
			 * Clean up / destroy the Toast
			 */
			private function burnToast():void
			{
				toastTimer.stop();
				toastTimer.removeEventListener(TimerEvent.TIMER, onToastTimer);
				toastTimer = null;
				messageDisplay.text = "";
				this.close();
			}
			
			protected function onToastTimer(event:TimerEvent):void
			{
				// Stop the timer
				toastTimer.stop()
				
				// Build and play a fade out animateion
				var motionPath:SimpleMotionPath = new SimpleMotionPath("alpha", 1, 0);
				
				var fadeEffect:Animate = new Animate(this);
					fadeEffect.addEventListener(EffectEvent.EFFECT_END, fadeEffectEndHandler, false, 0, true);
					fadeEffect.target = this;
					fadeEffect.duration = 500;
					fadeEffect.motionPaths = new Vector.<MotionPath>();
					fadeEffect.motionPaths.push(motionPath);
					fadeEffect.play();
			}
			
			protected function fadeEffectEndHandler(event:EffectEvent):void
			{
				burnToast();
			}
		]]>
	</fx:Script>
	
	<s:Group horizontalCenter="0" verticalCenter="0">
		
		<s:Rect width="{messageDisplay.width + 30}" height="{messageDisplay.height + 30}" radiusX="8" radiusY="8">
			<s:fill>
				<s:SolidColor color="0x000000" alpha="0.8"/>
			</s:fill>
			<s:stroke>
				<s:SolidColorStroke color="0xCCCCCC" alpha="0.5" pixelHinting="true" weight="1.5"/>
			</s:stroke>
		</s:Rect>
		
		<s:Label id="messageDisplay" horizontalCenter="0" verticalCenter="0" color="0xFFFFFF" fontSize="13" text="{message}"/>
		
	</s:Group>
	

</s:SkinnablePopUpContainer>

ToastSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--

Michael Ritchie
[email protected]
Copyright 2011, ThanksMister LLC

-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
    
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.SkinnablePopUpContainer")]
    ]]>
    </fx:Metadata> 
    
    <fx:Script fb:purpose="styling">
        <![CDATA[         
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                // Push backgroundColor and backgroundAlpha directly.
                // Handle undefined backgroundColor by hiding the background object.
                if (isNaN(getStyle("backgroundColor")))
                {
                    background.visible = false;
                }
                else
                {
                    background.visible = true;
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                }
                
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>        
    </fx:Script>
    
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
        <s:State name="closed" stateGroups="closedGroup"/>
        <s:State name="disabledAndClosed" stateGroups="closedGroup"/>
    </s:states>
    
    <!-- Transitions for open and close -->
    <s:transitions>
        <s:Transition fromState="closed" toState="normal" autoReverse="true">
            <s:Fade duration="150" target="{chrome}"/>
        </s:Transition>

        <s:Transition fromState="disabledAndClosed" toState="disabled" autoReverse="true">
            <s:Fade duration="150" target="{chrome}"/>
        </s:Transition>
        
        <s:Transition fromState="normal" toState="closed" autoReverse="true">
            <s:Fade duration="150" target="{chrome}"/>
        </s:Transition>

        <s:Transition fromState="disabled" toState="disabledAndClosed" autoReverse="true">
            <s:Fade duration="150" target="{chrome}"/>
        </s:Transition>
    </s:transitions>
        
    <!--- Defines the background and content group used by this skin. -->
    <s:Group id="chrome" left="0" right="0" top="0" bottom="0" visible.closedGroup="false">

        <!--- Defines the appearance of the SkinnablePopUpContainer class's background. -->
		<!--- Setting Background alpha to 0 does not have any effect. -->
        <s:Rect id="background" left="0" right="0" top="0" bottom="0">
            <s:fill>
                <!--- @private -->
                <s:SolidColor id="bgFill" color="#FFFFFF" alpha="0"/>
            </s:fill>
        </s:Rect>
        
        <!--
        Note: Setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
        -->
        <!--- @copy spark.components.SkinnableContainer#contentGroup -->
        <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
            <s:layout>
                <s:BasicLayout/>
            </s:layout>
        </s:Group>
    </s:Group>
    
</s:Skin>