Return to Snippet

Revision: 28039
at June 30, 2010 01:30 by LeeProbert


Initial Code
<?xml version="1.0" encoding="utf-8"?>
<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" 
			   minWidth="955" minHeight="600"
			   >
	
	
	<fx:Declarations>
	
		<s:BlurFilter
			
			id="blurFilter"
			blurY="0"
			/>
		
		<fx:Vector
			id="motionPathVectorIn"
			type="spark.effects.animation.MotionPath"
			>
			<s:SimpleMotionPath
				
				property="blurX"
				valueFrom="0"
				valueTo="100"
				/>
		</fx:Vector>
		
		<fx:Vector
			id="motionPathVectorOut"
			type="spark.effects.animation.MotionPath"
			>
			<s:SimpleMotionPath
				
				property="blurX"
				valueFrom="100"
				valueTo="0"
				/>
		</fx:Vector>
		
		
		<s:Power
			
			id="powerEase"
			easeInFraction=".5"
			exponent="2"
			/>
		
		<s:Parallel
			
			id="moveAndBlurAnimForward"
			target="{buttonGroup}"
			duration="2000"
			>
			
			<s:Sequence>
				<s:AnimateFilter
					
					bitmapFilter="{blurFilter}"
					motionPaths="{motionPathVectorIn}"
					duration="1000"
					/>
				<s:AnimateFilter
					
					bitmapFilter="{blurFilter}"
					motionPaths="{motionPathVectorOut}"
					duration="1000"
					/>
			</s:Sequence>
			
			<s:Move
				
				xFrom="{buttonGroup.x}"
				xTo="{buttonGroup.x+buttonGroup.width}"
				easer="{powerEase}"
				/>
			
		</s:Parallel>
			
		<s:Parallel
			
			id="moveAndBlurAnimBack"
			target="{buttonGroup}"
			duration="2000"
			>
			
			<s:Sequence>
				<s:AnimateFilter
					
					bitmapFilter="{blurFilter}"
					motionPaths="{motionPathVectorIn}"
					duration="1000"
					/>
				<s:AnimateFilter
					
					bitmapFilter="{blurFilter}"
					motionPaths="{motionPathVectorOut}"
					duration="1000"
					/>
			</s:Sequence>
			
			<s:Move
				
				xFrom="{buttonGroup.x}"
				xTo="{20}"
				easer="{powerEase}"
				/>
			
		</s:Parallel>
			
			
	</fx:Declarations>
	
	<s:HGroup
		
		id="buttonGroup"
		x="20"
		y="60"
		>
		<s:Button label="1" width="40" />
		<s:Button label="2" width="40" />
		<s:Button label="3" width="40" />
		<s:Button label="4" width="40" />
		<s:Button label="5" width="40" />
		<s:Button label="6" width="40" />
		<s:Button label="7" width="40" />
		<s:Button label="8" width="40" />
		<s:Button label="9" width="40" />
		<s:Button label="10" width="40" />
		
	</s:HGroup>
	
	<s:VGroup
		
		x="20"
		y="120"
		>
		
		<s:ToggleButton
			
			id="goBtn"
			label="{goBtn.selected? 'BACK' : 'GO'}"
			click="{goBtn.selected? moveAndBlurAnimForward.play() : moveAndBlurAnimBack.play()}"
			/>
		
	</s:VGroup>
	
</s:Application>

Initial URL


Initial Description


Initial Title
Spark Animated Filter example with Move tween

Initial Tags


Initial Language
MXML