How to set properties of a modal window - PopUp Style
Posted by Fedele Marotti under ActionScript 3, CSS, Flex
This example shows you how to set blur, duration, transparency, and transparencyColor to a modal window in Flex
This movie requires Flash Player 9
the Application :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="500" height="500">
<mx:Script>
<![CDATA[
import mx.events.ColorPickerEvent;
import mx.events.SliderEvent;
import mx.controls.Alert;
private function setDuration(e:SliderEvent):void{
application.setStyle('modalTransparencyDuration',e.value)
}
private function setColor(e:ColorPickerEvent):void{
application.setStyle('modalTransparencyColor',e.color)
}
private function setBlur(e:SliderEvent):void{
application.setStyle('modalTransparencyBlur',e.value)
}
private function setTransparency(e:SliderEvent):void{
application.setStyle('modalTransparency',e.value)
}
]]>
</mx:Script>
<mx:Style >
/* CSS file */
global {
modalTransparencyBlur: 5;
modalTransparency: 0.8;
modalTransparencyColor: #666666;
modalTransparencyDuration: 500;
}
</mx:Style>
<mx:HBox width="100%">
<mx:Text text="Duration: " width="100"/>
<mx:HSlider minimum="0" value="500" snapInterval="100" maximum="2000" tickInterval="500"
change="{setDuration(event)}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Text text="Transparency:" width="100"/>
<mx:HSlider minimum="0" value="0.5" maximum="1" snapInterval="0.1" tickInterval="0.1"
change="{setTransparency(event)}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Text text="Blur:" width="100"/>
<mx:HSlider minimum="0" value="5" maximum="10" snapInterval="0.5" tickInterval="1"
change="{setBlur(event)}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Text text="Color:" width="100"/>
<mx:ColorPicker change="{setColor(event)}"/>
</mx:HBox>
<mx:Button label="showAlert!!" click="{Alert.show('Hello world from an Alert!!')}"/>
</mx:Application>
the relevant part of the code :
//how to make with CSS:
global {
modalTransparencyBlur: 5;
modalTransparency: 0.8;
modalTransparencyColor: #666666;
modalTransparencyDuration: 500;
}
//the Actionscript way:
application.setStyle('modalTransparencyDuration',500)
application.setStyle('modalTransparencyColor',#666666)
application.setStyle('modalTransparencyBlur',5)
application.setStyle('modalTransparency',0.8)
