AboutFlex.net

flex,air,flash …

Archive for the ‘CSS’ Category

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)

Related article