You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by jm...@apache.org on 2014/08/10 13:20:39 UTC

[4/6] Added more spark examples

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
new file mode 100644
index 0000000..68da5d6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
@@ -0,0 +1,50 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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" viewSourceURL="srcview/index.html">
+	
+	<s:Panel title="Spinner Control Example" height="100%" width="100%"
+			 skinClass="skins.TDFPanelSkin">
+		<s:VGroup width="100%" height="100%" left="10" top="10">
+			<s:HGroup>
+				<mx:Text text="Use the arrows to change tabs:"/>            
+				<s:Spinner id="mySpinner" maximum="3"/>                    
+			</s:HGroup>
+				
+			<!-- Two way binding is being used so that changes to the tab navigator remain synced with Spinner value -->
+			<mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}">
+				<mx:HBox label="Tab 1">
+					<mx:Text text="Text on Tab 1 " fontSize="14" color="red"/>
+				</mx:HBox>    	
+				<mx:HBox label="Tab 2">
+					<mx:Text text="Text on Tab 2" fontSize="16" color="blue"/>
+				</mx:HBox>    	    
+				<mx:HBox label="Tab 3">
+					<mx:Text text="Text on Tab 3" fontSize="18" color="green"/>
+				</mx:HBox>    	    
+				<mx:HBox label="Tab 4">
+					<mx:Text text="Text on Tab 4" fontSize="20" color="purple"/>
+				</mx:HBox>    
+			</mx:TabNavigator>  
+		</s:VGroup>
+		
+	</s:Panel>          
+</s:Application> 
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
new file mode 100644
index 0000000..721d16b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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"
+			   currentState="hide">
+	
+
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			public var items:ArrayCollection = new ArrayCollection([
+				{label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"}, 
+				{label:"Small Red Polo", itemNum:2022144432, price:"$40.00"}, 
+				{label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]);
+
+			protected function myBtn_clickHandler(event:MouseEvent):void
+			{
+				if (showBtn.selected) 
+					this.currentState="show";
+				else this.currentState="hide";
+			}
+		]]>
+	</fx:Script>
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		
+		ToggleButton:upAndSelected,
+		ToggleButton:overAndSelected {
+			baseColor: #000000;
+			color: #FFFFFF;
+		}
+		ToggleButton:downAndSelected {
+			baseColor: #336699;
+			color: #FFFFFF;
+		}
+		ToggleButton:disabledAndSelected {
+			baseColor: #E2E2E2;
+			color: #212799;
+		}
+		ToggleButton:up {
+			baseColor: #C0C0C0;
+			color: #323232;
+		}
+		ToggleButton:over {
+			baseColor: #FFFFFF;
+			color: #000000;
+		}
+		ToggleButton:down {
+			baseColor: #014f9f;
+			color: #FFFFFF;
+		}
+	</fx:Style>
+	<s:states> 
+		<s:State name="show"/>    
+		<s:State name="hide"/> 
+	</s:states> 
+	
+	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+	source tabs for each sample.	-->
+	<s:Panel width="100%" height="100%" 
+			 horizontalCenter="0" 
+			 title="ToggleButton Sample"
+			 skinClass="skins.TDFPanelSkin">
+				
+			<s:HGroup left="5" top="5" width="100%" height="100%">
+				<s:VGroup color="0x000000">
+						<s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
+						<s:Label text="Order Number: 904234113441-2342"/>
+						<s:VGroup width="80%"  horizontalCenter="0">
+							<s:Label text="Purchaser: Anna Thomas"/>
+							<s:Label text="Date: 7/20/2009"/>
+							<s:Label text="Order Total: $114.00"/>
+							<s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+											click="myBtn_clickHandler(event)"/>
+						</s:VGroup>
+				</s:VGroup>
+				<s:HGroup right="50" top="5">
+					<s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170"  
+							color="#FFFFFF" includeIn="show">
+						<mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+					</s:Panel>
+				</s:HGroup>
+			</s:HGroup>
+			<s:HGroup horizontalCenter="0" bottom="15"  verticalAlign="middle" width="88%">
+			<s:Label fontSize="13" color="0x323232" verticalAlign="justify" width="100%"
+						  text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click
+the button again to toggle it back to the up state."/>
+		</s:HGroup>
+	</s:Panel>	
+	
+	
+	<!--
+	<s:Group width="100%" height="100%">
+		<s:Rect left="0" right="0" bottom="0" top="0">
+			<s:fill>
+				<s:LinearGradient rotation="90" >
+					<s:GradientEntry color="0xE2E2E2" />
+					<s:GradientEntry color="0x000000" />
+				</s:LinearGradient>
+			</s:fill>
+		</s:Rect>
+		<s:VGroup left="15" top="5" color="0x000000">
+			<s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
+			<s:Label text="Order Number: 904234113441-2342"/>
+			<s:VGroup width="80%"  horizontalCenter="0">
+				<s:Label text="Purchaser: Anna Thomas"/>
+				<s:Label text="Date: 7/20/2009"/>
+				<s:Label text="Order Total: $114.00"/>
+				<s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+								click="myBtn_clickHandler(event)"/>
+				<mx:Spacer height="40"/>
+				<s:Label color="#FFFFFF" width="199" 
+							  verticalAlign="justify"
+							  text="Clicking the button toggles it between the up and an down states. If you click the button while it is in the up state, it toggles to the down state. You must click the button again to toggle it back to the up state."/>
+			</s:VGroup>
+		</s:VGroup>
+		<s:HGroup right="50" top="5">
+			<s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="200"  
+					 color="#FFFFFF"  includeIn="show" baseColor="#000000">
+				<mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+			</s:Panel>
+		</s:HGroup>
+		
+	</s:Group>-->
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
index 7bce8ec..422a185 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
@@ -40,11 +40,10 @@
 	<fx:Declarations>
 		
 		<fx:Array id="dp">
-			<fx:String>Flash</fx:String>
 			<fx:String>Flex</fx:String>
-			<fx:String>AIR</fx:String>
-			<fx:String>ColdFusion</fx:String>
-			<fx:String>LiveCycle</fx:String>
+			<fx:String>Flex JS</fx:String>
+			<fx:String>Falcon</fx:String>
+			<fx:String>Falcon JX</fx:String>
 		</fx:Array>
 		
 	</fx:Declarations>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
new file mode 100644
index 0000000..d1ca0ca
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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" 
+			   currentState="hide" viewSourceURL="srcview/index.html">
+	
+
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			public var items:ArrayCollection = new ArrayCollection([
+				{label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"}, 
+				{label:"Small Red Polo", itemNum:2022144432, price:"$40.00"}, 
+				{label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]);
+
+			protected function myBtn_clickHandler(event:MouseEvent):void
+			{
+				if (showBtn.selected) 
+					this.currentState="show";
+				else this.currentState="hide";
+			}
+		]]>
+	</fx:Script>
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		
+		ToggleButton:upAndSelected,
+		ToggleButton:overAndSelected {
+			baseColor: #000000;
+			color: #FFFFFF;
+		}
+		ToggleButton:downAndSelected {
+			baseColor: #336699;
+			color: #FFFFFF;
+		}
+		ToggleButton:disabledAndSelected {
+			baseColor: #E2E2E2;
+			color: #212799;
+		}
+		ToggleButton:up {
+			baseColor: #C0C0C0;
+			color: #323232;
+		}
+		ToggleButton:over {
+			baseColor: #FFFFFF;
+			color: #000000;
+		}
+		ToggleButton:down {
+			baseColor: #014f9f;
+			color: #FFFFFF;
+		}
+	</fx:Style>
+	<s:states> 
+		<s:State name="show"/>    
+		<s:State name="hide"/> 
+	</s:states> 
+	
+	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+	source tabs for each sample.	-->
+	<s:Panel width="100%" height="100%" 
+			 horizontalCenter="0" 
+			 title="ToggleButton Sample" 
+			 skinClass="skins.TDFPanelSkin">
+		
+			
+			<s:HGroup left="5" top="5" width="100%" height="100%">
+				<s:VGroup color="0x000000">
+						<s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
+						<s:Label text="Order Number: 904234113441-2342"/>
+						<s:VGroup width="80%"  horizontalCenter="0">
+							<s:Label text="Purchaser: Anna Thomas"/>
+							<s:Label text="Date: 7/20/2009"/>
+							<s:Label text="Order Total: $114.00"/>
+							<s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+											click="myBtn_clickHandler(event)"/>
+						</s:VGroup>
+				</s:VGroup>
+				<s:HGroup right="50" top="5">
+					<s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170"  
+							color="#FFFFFF"  includeIn="show">
+						<mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+					</s:Panel>
+				</s:HGroup>
+			</s:HGroup>
+			<s:HGroup horizontalCenter="0" bottom="15"  verticalAlign="middle" clipAndEnableScrolling="true" width="88%">
+			<s:Label fontSize="13" color="0x323232" verticalAlign="justify" width="100%"
+						  text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click
+the button again to toggle it back to the up state."/>
+			</s:HGroup>
+	</s:Panel>	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
new file mode 100644
index 0000000..5f64a2a
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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"
+			   viewSourceURL="srcview/index.html">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.events.ItemClickEvent;
+			import mx.collections.ArrayCollection;
+			
+			private function playPauseChange(event:Event):void 
+			{
+				videoPlayer.playPauseButton.enabled = checkPlay.selected;
+			}
+		]]>
+	</fx:Script>
+	
+	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+	source tabs for each sample.	-->
+	<s:Panel title="VideoPlayer Sample" 
+			 width="100%" height="100%" 
+			 skinClass="skins.TDFPanelSkin">
+		<s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232" 
+					  text="The VideoPlayer control lets you play progressively downloaded or streaming
+video, live or recorded video. It supports multi-bit rate streaming when used with a server that supports
+multi-bit rate streaming, such as Flash Media Server 3.5. The VideoPlayer control contains a full UI 
+to let users control playback of video. It contains a play/pause toggle button; a scrub bar to let 
+users seek through video; a volume bar; a timer; and a button to toggle in and out of fullscreen mode."/>
+		
+		<!-- note: source can point to a server location or URL -->
+		<s:VGroup left="10">
+			<s:HGroup width="35%">
+				<s:CheckBox id="checkRewind"
+							label="Auto-Rewind"
+							selected="true" />
+				<s:CheckBox id="checkPlay"
+							label="Play/Pause Button"
+							selected="true"
+							change="playPauseChange(event)" />	
+			</s:HGroup>
+			<s:VideoPlayer id="videoPlayer" 
+						   horizontalCenter="-2" y="50"
+						   source="assets/sample_vid.flv"
+						   autoPlay="false"
+						   autoRewind="{checkRewind.selected}"/>	
+			</s:VGroup>
+		</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png
new file mode 100644
index 0000000..ec61099
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png
new file mode 100644
index 0000000..f8c8ec6
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png
new file mode 100644
index 0000000..e6f75d2
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png
new file mode 100644
index 0000000..bf9be79
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif b/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif
new file mode 100644
index 0000000..9bcda93
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif b/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif
new file mode 100644
index 0000000..fb181ab
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml
new file mode 100644
index 0000000..23b529e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml
@@ -0,0 +1,184 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!--
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+			 minWidth="21" minHeight="21"
+			 alpha.disabled="0.5">
+	
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata>
+	
+	<fx:Script>
+		<![CDATA[         
+			/* Define the skin elements that should not be colorized. 
+			For button, the graphics are colorized but the label is not. */
+			static private const exclusions:Array = ["labelDisplay"];
+			
+			
+			/** 
+			 * @copy spark.skins.SparkSkin#colorizeExclusions
+			 */     
+			override public function get colorizeExclusions():Array {return exclusions;}
+			
+		]]>        
+		
+	</fx:Script>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" />
+		<s:State name="down" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- layer 1: shadow -->
+	<s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF"
+								 alpha="0.01"
+								 alpha.down="0" />
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF" 
+								 alpha="0.07"
+								 alpha.down="0.5" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 2: fill -->
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0xFFFFFF" 
+								 color.over="0xBBBDBD" 
+								 color.down="0xAAAAAA" 
+								 alpha="0.85" />
+				<s:GradientEntry color="0xD8D8D8" 
+								 color.over="0x9FA0A1" 
+								 color.down="0x929496" 
+								 alpha="0.85" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 3: fill lowlight -->
+	<s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" alpha="0.0099" />
+				<s:GradientEntry color="0x000000" alpha="0.0627" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 4: fill highlight -->
+	<s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:SolidColor color="0xFFFFFF" 
+						  alpha="0.33" 
+						  alpha.over="0.22" 
+						  alpha.down="0.12" />
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 5: highlight stroke (all states except down) -->
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+				<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	
+	<!-- layer 6: highlight stroke (down state only) -->
+	<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="2" top="1" right="2" height="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.25" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.09" />
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+	<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0x000000" 
+								 alpha="0.5625"
+								 alpha.down="0.6375" />
+				<s:GradientEntry color="0x000000" 
+								 alpha="0.75" 
+								 alpha.down="0.85" />
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	<!-- layer 8: text -->
+	<!--- 
+	@copy spark.components.supportClasses.ButtonBase#labelDisplay
+	-->
+	<s:Rect left="0" top="0" right="0" bottom="0" >
+		<s:fill>
+			<s:BitmapFill source="@Embed('../iconclose.gif')"/>
+		</s:fill>
+	</s:Rect>
+	 
+	<s:Label id="labelDisplay"
+				  textAlign="center"
+				  verticalAlign="middle"
+				  maxDisplayedLines="1"
+				  horizontalCenter="0" verticalCenter="1"
+				  left="10" right="10" top="2" bottom="2">
+	</s:Label>
+</s:SparkSkin>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml
new file mode 100644
index 0000000..d125964
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+
+<!--- The default skin class for a Spark Panel container.  
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" blendMode="normal">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Panel")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script>
+		/* Define the skin elements that should not be colorized. 
+		For panel, border and title backround are skinned, but the content area and title text are not. */
+		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgfill"];
+		
+		/** 
+		 * @copy spark.skins.SparkSkin#colorizeExclusions
+		 */     
+		override public function get colorizeExclusions():Array {return exclusions;}
+		
+		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+		static private const contentFill:Array = [];
+		
+		/**
+		 * @inheritDoc
+		 */
+		override public function get contentItems():Array {return contentFill};
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- background fill -->
+	<s:Rect left="0" right="0" bottom="0" top="0" >
+		<s:fill>
+			<s:LinearGradient rotation="90" >
+				<s:GradientEntry color="0xFFFFFF" />
+				<s:GradientEntry color="0x1a1919" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	<!-- title bar fill -->
+	<s:Rect left="0" right="0" top="0" height="30">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" />
+				<s:GradientEntry color="0xC0C0C0" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- text layer -->
+	<!--- Defines the appearance of the PanelSkin class's title bar. -->
+	<s:Label id="titleDisplay" lineBreak="explicit"
+				  right="4" top="2" height="30"
+				  verticalAlign="middle" fontWeight="bold" 
+				  color="0xE2E2E2">
+	</s:Label>
+	
+	<!--
+	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
+	-->
+	<s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" minWidth="0" minHeight="0"/>
+	
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
new file mode 100644
index 0000000..c130849
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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" viewSourceURL="srcview/index.html">
+	<fx:Style>
+		#submitButton {
+			baseColor: #1E407E;
+			color: #FFFFFF;
+		}
+		
+	</fx:Style>
+	<fx:Script>
+		<![CDATA[
+			private function clickHandler():void
+			{
+				text1.text = "Thank you " + firstName.text + " " + lastName.text;
+			}
+			private function resetClickHandler():void
+			{
+				firstName.text = "";
+				lastName.text = "";
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel height="100%" width="100%"
+			 horizontalCenter="0" verticalCenter="0"
+			 title="Advanced CSS: ID Selector Example" 
+			 skinClass="skins.TDFPanelSkin">
+		<s:Label top="20" left="30" width="140" color="0x323232" verticalAlign="justify" 
+					  text="Only the Button with the id 'submitButton' will have custom colors."/>
+		
+		<s:VGroup horizontalCenter="0" horizontalAlign="center" verticalCenter="0">
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="First Name:"/>
+					<s:TextInput id="firstName" width="100"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Last Name:"/>
+					<s:TextInput id="lastName" width="100"/>
+				</s:HGroup>
+			<s:HGroup>
+				<s:Button id="submitButton" label="Submit Form" click="clickHandler()"/>
+				<s:Button id="resetButton" label="Reset" click="resetClickHandler()"/>
+			</s:HGroup>
+			<s:Label id="text1"/>
+		</s:VGroup>
+		
+	</s:Panel>
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
new file mode 100644
index 0000000..6082791
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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"
+			   viewSourceURL="srcview/index.html">
+	
+	<!-- NOTE: This sample was compiled with Flex SDK version 4.0.0.13875 -->
+	
+	<fx:Declarations>
+		<s:Animate id="a" 
+				   duration="750" 
+				   target="{tileGroup}" 
+				   repeatBehavior="reverse" 
+				   repeatCount="2">
+			<s:SimpleMotionPath valueFrom="1"
+								valueTo="15"
+								property="horizontalGap" />
+			<s:SimpleMotionPath valueFrom="1"
+								valueTo="15"
+								property="verticalGap" />
+			<s:SimpleMotionPath valueFrom="0"
+								valueTo="-50"
+								property="z" />
+		</s:Animate>
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:HorizontalLayout 
+			horizontalAlign="center" 
+			gap="100" 
+			paddingTop="8"/>
+	</s:layout>
+	
+	<s:TileGroup id="tileGroup" 
+				 horizontalGap="1" 
+				 verticalGap="1" 
+				 direction="ltr" 
+				 columnWidth="50"
+				 rowHeight="50" 
+				 useHandCursor="true" 
+				 buttonMode="true">
+		
+		<mx:Image source="@Embed('assets/images/2.jpg')" click="a.play()" />
+		<mx:Image source="@Embed('assets/images/3.jpg')" click="a.play()" />
+		<mx:Image source="@Embed('assets/images/4.jpg')" click="a.play()" />
+		<mx:Image source="@Embed('assets/images/5.jpg')" click="a.play()" />
+		<mx:Image source="@Embed('assets/images/6.jpg')" click="a.play()" />
+		<mx:Image source="@Embed('assets/images/7.jpg')" click="a.play()" />
+		<mx:Image source="@Embed('assets/images/8.jpg')" click="a.play()" />
+		<mx:Image source="@Embed('assets/images/9.jpg')" click="a.play()" />
+		
+	</s:TileGroup>
+	
+	<s:HGroup top="8" right="8">
+		<s:VGroup width="100%" >
+			<s:Label text="Animate Properties Sample" 
+					 fontSize="18" 
+					 color="#B7B6B6"/>
+			
+			<s:Label width="250" 
+					 verticalAlign="justify" 
+					 color="#323232" 
+					 text="With the Spark Animate class, you can animate any arbitrary property of an object by using MotionPaths or SimpleMotionPaths. In this sample, the horizontalGap, verticalGap, and z properties of the TileGroup are being incremented over the course of the animation."/>
+			
+			<s:Label text="{'horizontalGap = ' + tileGroup.horizontalGap}"/>
+			<s:Label text="{'verticalGap = ' + tileGroup.verticalGap}" />
+		</s:VGroup>
+	</s:HGroup>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
new file mode 100644
index 0000000..e6307a1
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
@@ -0,0 +1,116 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" 
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Declarations>
+			<s:AnimateTransform id="bounceEffect"
+							target="{myImage}">
+				
+				<s:motionPaths>
+					<s:MotionPath property="translationX" >
+						<s:keyframes>
+							<s:Keyframe time="250" value="0"/>
+							<s:Keyframe time="550" value="60"/>
+							<s:Keyframe time="850" value="100"/>
+							<s:Keyframe time="1150" value="140"/>
+							<s:Keyframe time="1450" value="180"/>
+							<s:Keyframe time="1750" value="220"/>
+							<s:Keyframe time="2050" value="140"/>
+							<s:Keyframe time="2350" value="100"/>
+							<s:Keyframe time="2650" value="60"/>
+							<s:Keyframe time="2950" value="0"/>
+						</s:keyframes>
+					</s:MotionPath>
+				
+					<s:MotionPath property="translationY" >
+						<s:keyframes>
+							<s:Keyframe time="250" value="100"/>
+							<s:Keyframe time="550" value="0"/>
+							<s:Keyframe time="850" value="100"/>
+							<s:Keyframe time="1150" value="0"/>
+							<s:Keyframe time="1450" value="100"/>
+							<s:Keyframe time="1750" value="0"/>
+							<s:Keyframe time="2050" value="100"/>
+							<s:Keyframe time="2350" value="0"/>
+							<s:Keyframe time="2650" value="100"/>
+							<s:Keyframe time="2950" value="0"/>
+						</s:keyframes>
+					</s:MotionPath>
+				</s:motionPaths>
+		</s:AnimateTransform>
+	</fx:Declarations>
+	
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		
+		Button:up{ 
+			baseColor: #000000; 
+			color: #FFFFFF; 
+			fontWeight: "bold";
+		}
+		Button:over{ 
+			baseColor: #878787; 
+			color: #FFFFFF; 
+			fontWeight: "bold";
+		}
+		Button:down{ 
+			baseColor: #878787; 
+			color: #000000; 
+			fontWeight: "bold";
+		}
+		Button:disabled { 
+			baseColor: #FFFFFF; 
+			color: #878787; 
+			fontWeight: "bold";
+		}
+		Label { 
+			fontFamily: "Arial";
+			fontWeight: "bold";
+		}
+	</fx:Style>
+	
+	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+	source tabs for each sample.	-->
+	<s:Panel title="AnimateTransform Effect Sample (Bounce)" 
+			 width="100%" height="100%" 
+			 skinClass="skins.TDFPanelSkin">
+		
+		<s:Group left="3">
+			<mx:Image y="0" id="myImage" 
+					  source="@Embed(source='assets/ApacheFlexIcon.png')"
+					  click="bounceEffect.end();bounceEffect.play();"/>	
+		</s:Group>
+		
+		<s:HGroup bottom="5" left="3">
+			<s:Label text="Click the Apache Flex logo to bounce it!" color="0x000000"/>
+		</s:HGroup>
+		<s:HGroup top="5" right="5">
+			<s:VGroup width="100%" >
+				<s:Label text="Cross Fade Sample" fontSize="18" color="#B7B6B6"/>
+				<s:Label width="250" verticalAlign="justify" color="#323232" 
+							  text="Unlike the Animate class, which you can use to animate any target property, the AnimateTransform effect only supports the animation of certain properties on the target. To use keyframes and motion paths with the AnimateTransform effect, use the MotionPath class to specify keyframes for one or more of the following properties of the AnimateTransform class:
+							  movement (translationX, translationY, and translationZ), rotation (rotationX, rotationY, and rotationZ), scale (scaleX, scaleY, and scaleZ)."/>
+			</s:VGroup>
+		</s:HGroup>
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
new file mode 100644
index 0000000..4ce258e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<s:Application
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<s:states>
+		<s:State name="default"/>
+		<s:State name="flipped"/>
+	</s:states>
+	
+	<s:transitions>
+		<s:Transition id="t1" autoReverse="true">
+			<s:CrossFade
+				target="{holder}" 
+				duration="1000" />
+		</s:Transition>
+	</s:transitions>
+	
+	<s:Panel title="CrossFade Effect Sample with Transition"
+		width="100%" height="100%" 
+		skinClass="skins.TDFPanelSkin">
+		
+		<s:HGroup verticalCenter="0" horizontalCenter="0">
+			<s:VGroup>
+				<s:Group id="holder">
+					<s:BitmapImage
+						source="@Embed('assets/ApacheFlexLogo.png')"
+						visible="true" visible.flipped="false"/>
+					<s:BitmapImage
+						source="@Embed('assets/ApacheFlexLogo.png')"
+						visible="false" visible.flipped="true"/>
+	
+				</s:Group>
+				<s:Button id="playButton" left="264" bottom="174"
+						  label="Cross Fade"
+						  click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" y.default="-33"/>
+			</s:VGroup>
+			<mx:Spacer width="50"/>
+			<s:VGroup width="100%" >
+				<s:Label text="Cross Fade Sample" fontSize="18" color="#B7B6B6"/>
+				<s:Label width="250" verticalAlign="justify" color="#323232" 
+						 text="The CrossFade effect performs a bitmap transition effect by running a crossfade between the first and second bitmaps. 
+						 The crossfade blends the two bitmaps over the duration of the animation."/>
+			</s:VGroup>
+		</s:HGroup>
+		
+	</s:Panel>	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
new file mode 100644
index 0000000..e2dba36
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
@@ -0,0 +1,60 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:s="library://ns.adobe.com/flex/spark">	
+	
+	<fx:Declarations>
+		<s:Fade id="fadeEffect" target="{targetImg}" alphaFrom="{Number(fromVal.text)}" alphaTo="{Number(toVal.text)}"
+				repeatCount="2" repeatBehavior="reverse" effectStart="playButton.enabled=false"
+				effectEnd="playButton.enabled=true;"/>
+	</fx:Declarations>
+	
+	<s:Panel title="Fade Effect Sample"
+			 width="100%" height="100%" 
+			 skinClass="skins.TDFPanelSkin">
+		
+		<s:HGroup verticalCenter="0" horizontalCenter="0">
+			<s:VGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Fade alpha from:" verticalAlign="bottom"/>
+					<s:TextInput id="fromVal" text="1.0" widthInChars="3"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Fade alpha to:" verticalAlign="bottom"/>
+					<s:TextInput id="toVal" text="0.0" widthInChars="3"/>
+				</s:HGroup>
+				<s:Button id="playButton"
+						  left="5" bottom="5"
+						  label="Fade" click="fadeEffect.play();"/>
+			</s:VGroup>
+			
+			<s:BitmapImage id="targetImg" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+			
+			<s:VGroup width="100%" >
+				<s:Label text="Fade Sample" fontSize="18" color="#B7B6B6"/>
+				<s:Label width="180" verticalAlign="justify" color="#323232" 
+							 text="The Fade effect changes the alpha of a target using the following parameters: alphaFrom, alphaTo. Click 'Fade' to watch the effect."/>
+			</s:VGroup>	
+		</s:HGroup>
+		
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
new file mode 100644
index 0000000..8d7f0b3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
@@ -0,0 +1,114 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		Label { 
+			baseColor: #000000; 
+			fontFamily: "Arial";
+			fontWeight: "bold";
+			fontSize: "11";
+			advancedAntiAliasing: true;
+		}
+		Button:up{ 
+			baseColor: #000000; 
+			color: #FFFFFF; 
+			fontWeight: "bold";
+		}
+		Button:over{ 
+			baseColor: #878787; 
+			color: #FFFFFF; 
+			fontWeight: "bold";
+		}
+		Button:down{ 
+			baseColor: #878787; 
+			color: #000000; 
+			fontWeight: "bold";
+		}
+		Button:disabled { 
+			baseColor: #FFFFFF; 
+			color: #878787; 
+			fontWeight: "bold";
+		}
+	</fx:Style>
+	
+	<fx:Declarations>
+		<s:Rotate3D id="rotateEffect" target="{targetImg}"  
+				    angleXFrom="0.0" angleXTo="{Number(xVal.text)}" 
+					angleYFrom="0.0" angleYTo="{Number(yVal.text)}" 
+					angleZFrom="0.0" angleZTo="{Number(zVal.text)}"
+					duration="{duration.value}"
+					repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+				   	effectStart="this.targetImg.alpha=.8" effectEnd="this.targetImg.alpha=1.0;"/>
+	</fx:Declarations>
+	
+	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+	source tabs for each sample.	-->
+	<s:Panel width="100%" height="100%" 
+			 horizontalCenter="0" 
+			 title="Rotate3D Effect Sample" 
+			 skinClass="skins.TDFPanelSkin">
+		
+		<s:HGroup horizontalCenter="0" top="10">
+			<s:VGroup >
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Rotate X To" verticalAlign="bottom"/>
+					<s:TextInput id="xVal" text="0.0" widthInChars="3"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Rotate Y By" verticalAlign="bottom"/>
+					<s:TextInput id="yVal" text="360.0" widthInChars="3"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Rotate Z To" verticalAlign="bottom"/>
+					<s:TextInput id="zVal" text="0.0" widthInChars="3"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Repeat Num" verticalAlign="bottom"/>
+					<s:NumericStepper id="repeatCnt" value="2" width="35" minimum="1"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Duration" verticalAlign="bottom"/>
+					<s:NumericStepper id="duration" width="58" 
+									  minimum="100" maximum="9999"  
+									  value="1000"  
+									  snapInterval="100" />
+				</s:HGroup>
+				<s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+				<s:Button id="playButton"
+						  label="Rotate Image" click="rotateEffect.play();"/>
+			</s:VGroup>
+			<s:HGroup horizontalCenter="0" height="60%" verticalAlign="middle" width="10%">
+				<s:BitmapImage id="targetImg" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+			</s:HGroup>
+			<s:VGroup top="0" right="5" horizontalAlign="right">
+				<s:Label text="Rotate3D Effect Sample" fontSize="18" color="#B7B6B6"/>
+				<s:Label color="#323232" width="200" verticalAlign="justify"
+							  text="The Rotate3D class rotates a target object in three dimensions around the x, y, or z
+axes. The rotation occurs around the transform center of the target." textAlign="left"/>
+			</s:VGroup>
+		</s:HGroup>
+		
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
new file mode 100644
index 0000000..afb5702
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
@@ -0,0 +1,118 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		Label { 
+			baseColor: #000000; 
+			fontFamily: "Arial";
+			fontWeight: "bold";
+			fontSize: "11";
+			advancedAntiAliasing: true;
+		}
+		Button:up{ 
+			baseColor: #000000; 
+			color: #FFFFFF; 
+			fontWeight: "bold";
+		}
+		Button:over{ 
+			baseColor: #878787; 
+			color: #FFFFFF; 
+			fontWeight: "bold";
+		}
+		Button:down{ 
+			baseColor: #878787; 
+			color: #000000; 
+			fontWeight: "bold";
+		}
+		Button:disabled { 
+			baseColor: #FFFFFF; 
+			color: #878787; 
+			fontWeight: "bold";
+		}
+	</fx:Style>
+	
+	<fx:Declarations>
+		<s:Scale3D id="scaleEffect" target="{targetImg}" 
+				   scaleXFrom="1.0" scaleXTo="{Number(xVal.text)}" 
+				   scaleYFrom="1.0" scaleYBy="{Number(yVal.text)}" 
+				   scaleZFrom="1.0" scaleZTo="{Number(zVal.text)}"
+				   duration="{duration.value}"
+				   repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+				   effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0;"/>
+	</fx:Declarations>
+	
+	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+	source tabs for each sample.	-->
+	<s:Panel width="100%" height="100%" 
+			 horizontalCenter="0" 
+			 title="Scale3D Effect Sample" 
+			 skinClass="skins.TDFPanelSkin">
+		
+		<s:HGroup left="5" top="5" width="100%" height="100%" horizontalCenter="0">
+			<s:VGroup width="40%">
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Scale X To" verticalAlign="bottom"/>
+					<s:TextInput id="xVal" text="1.0" widthInChars="3"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Scale Y By" verticalAlign="bottom"/>
+					<s:TextInput id="yVal" text="1.0" widthInChars="3"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Scale Z To" verticalAlign="bottom"/>
+					<s:TextInput id="zVal" text="1.0" widthInChars="3"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Repeat Num" verticalAlign="bottom"/>
+					<s:NumericStepper id="repeatCnt" width="35" 
+									  value="2" minimum="1"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Duration" verticalAlign="bottom"/>
+					<s:NumericStepper id="duration" width="58" 
+									  minimum="100" maximum="9999"  
+									  value="1000"  
+									  snapInterval="100" />
+				</s:HGroup>
+				<s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+				<s:Button id="playButton"
+						  label="Scale Image" click="scaleEffect.play();"/>
+			</s:VGroup>
+			<s:HGroup horizontalCenter="0" height="30%" verticalAlign="middle" width="40%">
+				<s:BitmapImage id="targetImg" source="@Embed(source='assets/ApacheFlexLogo.png')"/>				
+			</s:HGroup>
+			<s:VGroup top="0" right="5" horizontalAlign="right" width="30%">
+				<s:Label text="Scale3D Effect Sample" fontSize="18" color="#B7B6B6"/>
+				<s:Label color="#323232" width="200" verticalAlign="justify"
+							  text="The Scale3D class scales a target object in three dimensions around the transform center. A scale of 
+2.0 means the object has been magnified by a factor of 2, and a scale of 0.5 means the object has been 
+reduced by a factor of 2. A scale value of 0.0 is invalid."/>
+			</s:VGroup>
+		</s:HGroup>
+	
+			
+		
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png
new file mode 100644
index 0000000..e68d831
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg
new file mode 100644
index 0000000..2533129
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg
new file mode 100644
index 0000000..b98cd8a
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg
new file mode 100644
index 0000000..657c12b
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg
new file mode 100644
index 0000000..e296f9c
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg
new file mode 100644
index 0000000..5ebc534
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg
new file mode 100644
index 0000000..3047de0
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg
new file mode 100644
index 0000000..4e3f9ca
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg
new file mode 100644
index 0000000..ed4e5fe
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
index b1b5403..e7557f4 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
@@ -20,8 +20,7 @@
 <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" 
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
 		<![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
index 5448411..075743b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
@@ -20,8 +20,7 @@
 <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" 
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
 		<![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
index dc23a5d..780d0da 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
@@ -20,8 +20,7 @@
 <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" 
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
 		<![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
index 52c7628..3347796 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
@@ -20,8 +20,7 @@
 <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" 
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
 		<![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
index 4bd5339..4ffe293 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
@@ -21,8 +21,7 @@
 			   xmlns:s="library://ns.adobe.com/flex/spark" 
 			   xmlns:mx="library://ns.adobe.com/flex/mx" 
 			   xmlns:local="*"
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
 		<![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
index 2da53d0..eb82cfb 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
@@ -20,8 +20,7 @@
 <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" 
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
 		<![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
index d1c345d..07c52f5 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
@@ -20,8 +20,7 @@
 <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" 
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
 		<![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
index 77ca8ee..5162dd5 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
@@ -20,8 +20,7 @@
 <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" 
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
         <![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
index 62f5bda..e0c9127 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
@@ -20,8 +20,7 @@
 <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" 
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
 		<![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
index e0f35ab..49f114c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
@@ -20,8 +20,7 @@
 <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" 
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
 		<![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
index fec712f..084d0aa 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
@@ -20,8 +20,7 @@
 <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" 
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
         <![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
index 14afe89..16ab586 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
@@ -20,8 +20,7 @@
 <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" 
-			   skinClass="TDFGradientBackgroundSkin" 
-			   viewSourceURL="srcview/index.html">
+			   skinClass="TDFGradientBackgroundSkin">
 	
 	<fx:Script>
         <![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
new file mode 100644
index 0000000..3e123ea
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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/halo">
+	
+	<s:Panel width="100%" height="100%"
+			 title="DropShadows with MXML Graphics Example"
+			 skinClass="skins.TDFPanelSkin" x="0">
+			  
+	    <s:Group horizontalCenter="0" y="5" width="117">
+			<s:Graphic id="ellipse1">
+				<s:filters>
+					<s:DropShadowFilter color="0x6080a0" alpha="0.6" distance="5" />
+				</s:filters>
+				<s:Ellipse x="30" y="20" width="60" height="60">
+					<s:fill>
+						<s:SolidColor color="0x60a0e0" />
+					</s:fill>
+				</s:Ellipse>
+			</s:Graphic>
+			<s:Graphic id="rect1" x="47" y="0" width="100">
+				<s:filters>
+					<s:DropShadowFilter color="0x002020" alpha="0.9" distance="8" angle="10"/>
+				</s:filters>
+				<s:Rect right="15" x="120" y="100" width="90" height="90">
+					<s:fill>
+						<s:SolidColor color="0x4060c0" />
+					</s:fill>
+				</s:Rect>
+			</s:Graphic>
+			<s:Graphic id="image1">
+				<s:filters>
+					<s:DropShadowFilter color="0xFF6600" alpha="0.7" distance="10" angle="-30"/>
+				</s:filters>
+				<s:BitmapImage source="@Embed('assets/ApacheFlexIcon.png')" x="180" y="20" />
+			</s:Graphic>
+			
+		</s:Group>
+	    <s:Label width="250" verticalAlign="justify" color="#323232" x="10" y="30" 
+	    			  text="The DropShadowFilter class lets you add a drop shadow to display
+objects. The shadow algorithm is based on the same box filter that the blur filter uses. You have 
+several options for the style of the drop shadow, including inner or outer shadow and knockout mode. 
+You can apply the filter to any display object (that is, objects that inherit from the DisplayObject 
+class), such as MovieClip, SimpleButton, TextField, and Video objects, as well as to BitmapData objects."/>
+	    	
+	    
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
new file mode 100644
index 0000000..19ce21f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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/halo" minWidth="1024" minHeight="768">
+	<s:layout>
+		<s:BasicLayout/>
+	</s:layout>
+    
+	<fx:Script>
+		<![CDATA[
+			
+			private function addMatrix(): void
+			{
+				ellipse1.transform.matrix = rotation20Matrix;
+				descriptionText.text = "A matrix transform was applied moving the Ellipse to coordinates: 100, 310 and skewing it to a 20 degree rotation.";
+				trace(ellipse1.width);
+			}
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- This matrix should cause the rotation of the Ellipse be 20 degrees -->
+		<s:Matrix id="rotation20Matrix"
+				  a="0.939692620786"
+				  b="0.34202014332"
+				  c="0.34202014332"
+				  d="0.939692620786"
+				  tx="100"
+				  ty="310"
+				  />
+	</fx:Declarations>
+	
+	<s:Label text="An Ellipse Using a Transform for Rotation" fontWeight="bold" fontSize="14" horizontalCenter="0"
+				  y="20" />
+	
+	<s:Label id="descriptionText" horizontalCenter="0" y="45" width="300"/>
+	<s:Ellipse id="ellipse1" width="60" height="70" horizontalCenter="0" y="90">
+		<s:fill>
+			<s:LinearGradient>
+				<s:GradientEntry color="#00FF00" alpha="1" ratio="0"/>
+				<s:GradientEntry color="#000000" alpha="0" ratio="1"/>
+			</s:LinearGradient>
+		</s:fill>
+		<s:stroke>
+			<s:SolidColorStroke color="0x666666" weight="1"/>
+		</s:stroke>
+	</s:Ellipse>
+	<s:Button label="Apply Transform" click="addMatrix()" x="40" y="330" />
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
new file mode 100644
index 0000000..71fd6aa
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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/halo" viewSourceURL="srcview/index.html">
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="LinearGradient Control" 
+			  width="100%" height="100%"
+			 skinClass="skins.TDFPanelSkin">
+		
+		<s:HGroup horizontalCenter="0" top="10">
+		<s:Label verticalAlign="justify" color="#323232" x="10" y="30" width="200"
+					  text="The LinearGradient class lets you specify the fill of a graphical element, where a gradient specifies a gradual color transition in the fill color. You add a series of GradientEntry objects to the LinearGradient object's entries Array to define the colors that make up the gradient fill."/>	
+		<s:Rect id="rect1" height="150" width="160" >
+			<s:fill>
+				<s:LinearGradient id="gradient1" scaleX="20" x="0">
+					<s:entries>
+						<s:GradientEntry color="0xFF0000" />
+						<s:GradientEntry color="0xFFFFFF" />
+						<s:GradientEntry color="0x0000FF" />
+					</s:entries>
+				</s:LinearGradient>
+			</s:fill>
+		</s:Rect>
+		<s:VGroup>
+			
+			<s:Label text="scaleX value: " />
+			<s:HSlider id="scaleXVal" value="20" maximum="200" change="gradient1.scaleX=scaleXVal.value"/>
+			<s:Label text="x value: " />
+			<s:HSlider id="XVal" value="0" maximum="200" change="gradient1.x=XVal.value"/>
+			<s:Label text="select a spreadMethod: " />
+			<s:DropDownList id="spreadValue" selectedIndex="0" 
+						dataProvider="{new ArrayCollection(['pad', 'reflect', 'repeat'])}"  
+						change="gradient1.spreadMethod=spreadValue.selectedItem"/>	
+		</s:VGroup>
+			
+		</s:HGroup>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg b/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg
new file mode 100644
index 0000000..601841c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<Graphic version="1.0" xmlns="http://ns.adobe.com/fxg/2008" xmlns:fw="http://ns.adobe.com/fxg/2008/fireworks"  viewHeight= "134" viewWidth= "136">
+	<Library>
+	</Library>
+
+	<Group id="Page_1" fw:type="page">
+		<Group id="State_1" fw:type="state">
+			<Group id="Layer_1" fw:type="layer">
+				<Group id="undefined">
+					<Path winding="evenOdd" data="M 68 12 L 85 48 L 125 54 L 96 82 L 103 121 L 68 103 L 32 121 L 39 82 L 10 54 L 50 48 L 68 12 Z " blendMode="normal" alpha="1">
+						<fill>
+							<LinearGradient x = "67" y = "42" scaleX = "113" rotation = "70">
+								<GradientEntry color="#ff6600" ratio="0" alpha="1"/>
+								<GradientEntry color="#ff6600" ratio="0.08" alpha="1"/>
+								<GradientEntry color="#ffcc00" ratio="0.32" alpha="1"/>
+								<GradientEntry color="#ffff99" ratio="0.53" alpha="1"/>
+								<GradientEntry color="#dedede" ratio="0.99" alpha="1"/>
+								<GradientEntry color="#ffffcc" ratio="0.72" alpha="1"/>
+							</LinearGradient>
+						</fill>
+						<stroke>
+							<SolidColorStroke color="#ff6600" weight="6"/>
+						</stroke>
+					</Path>
+				</Group>
+			</Group>
+		</Group>
+	</Group>
+</Graphic>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
new file mode 100644
index 0000000..37b9be0
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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" 
+               xmlns:fxg="*" viewSourceURL="srcview/index.html">
+	
+	
+	<s:Panel width="100%" height="100%"
+			 title="Static FXG Sample"
+			 skinClass="skins.TDFPanelSkin">
+		<s:Label verticalAlign="justify" color="#323232" x="10" y="30" width="200"
+					  text="You can use a static file of fxg within your MXML. You include the inline
+component as shown here."/>
+					  		
+		<fxg:OrangeCrayonStar id="crayonStar" right="160"/>
+		
+		<s:VGroup right="180" bottom="20">
+				<s:VGroup bottom="100">
+					<s:HSlider id="star_width" maximum="400" change="crayonStar.width=star_width.value" 
+							   horizontalCenter="-90" y="250" />
+					<s:Label horizontalCenter="-90" y="269" text="width"/>
+				</s:VGroup>
+				<s:VGroup bottom="60">
+					<s:HSlider id="star_height" maximum="400" change="crayonStar.height=star_height.value" 
+							   horizontalCenter="90" y="250" />
+					<s:Label horizontalCenter="90" y="269" text="height"/>	
+				</s:VGroup>	
+			
+		</s:VGroup>
+	</s:Panel>
+	
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexIcon.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexIcon.png b/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexIcon.png
new file mode 100644
index 0000000..e68d831
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexIcon.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
index 89f51e1..815f269 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
@@ -20,8 +20,7 @@
 <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"
-			   width="100%" height="100%" creationComplete="compareStrings()"
-			   viewSourceURL="srcview/index.html">
+			   width="100%" height="100%" creationComplete="compareStrings()">
 	<fx:Style>
 		@namespace s "library://ns.adobe.com/flex/spark";
 		@namespace mx "library://ns.adobe.com/flex/mx";

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
index d69e63d..96af06a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
@@ -20,8 +20,7 @@
 <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"
-			   width="100%" height="100%" creationComplete="matchRB_clickHandler()"
-			   viewSourceURL="srcview/index.html">
+			   width="100%" height="100%" creationComplete="matchRB_clickHandler()">
 	<fx:Style>
 		@namespace s "library://ns.adobe.com/flex/spark";
 		@namespace mx "library://ns.adobe.com/flex/mx";

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
index 6d7cd1b..1c24727 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
@@ -20,7 +20,7 @@
 <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"
-			   width="100%" height="100%" viewSourceURL="srcview/index.html">
+			   width="100%" height="100%">
 	<fx:Style>
 		@namespace s "library://ns.adobe.com/flex/spark";
 		@namespace mx "library://ns.adobe.com/flex/mx";