<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/03/setting-the-vertical-gap-between-items-in-a-flex-vbox-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:Style>
		HSlider {
			dataTipPlacement: bottom;
			dataTipPrecision: 0;
		}
	</mx:Style>

	<mx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.events.SliderEvent;

			private function slider_change(evt:SliderEvent):void {
				vBox.setStyle("verticalGap", evt.value);
			}

			private function vBox_creationComplete(evt:FlexEvent):void {
				slider.value = vBox.getStyle("verticalGap");
			}
		]]>
	</mx:Script>

	<mx:ApplicationControlBar dock="true">
		<mx:Form styleName="plain">
			<mx:FormItem label="verticalGap:"
					direction="horizontal">
				<mx:HSlider id="slider"
						minimum="0"
						maximum="20"
						liveDragging="true"
						snapInterval="1"
						tickInterval="1"
						change="slider_change(event);" />
				<mx:Label text="{slider.value}" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>

	<mx:VBox id="vBox"
			width="100%"
			creationComplete="vBox_creationComplete(event);">
		<mx:Box width="100%" height="50" backgroundColor="red" />
		<mx:Box width="100%" height="50" backgroundColor="haloOrange" />
		<mx:Box width="100%" height="50" backgroundColor="yellow" />
		<mx:Box width="100%" height="50" backgroundColor="haloGreen" />
		<mx:Box width="100%" height="50" backgroundColor="haloBlue" />
	</mx:VBox>

</mx:Application>