AnimatorWatch application source

AnimatorWatch.mxml

<?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" applicationDPI="160" 
	creationComplete="creationCompleteHandler(event)">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@font-face
		{
			fontFamily: Calibri;
			src: url("/assets/fonts/CALIBRI.TTF");
			embedAsCFF: true;
		}  
		@font-face
		{
			fontFamily: CalibriMX;
			src: url("/assets/fonts/CALIBRI.TTF");
			embedAsCFF: false;
		}  
		s|Application{
			chrome-color:#2d3239;
			content-background-color:#313235;
			color:#bdbdbd;
			fontFamily: Calibri;
			background-color:#2d3540;
			symbol-color:#ffff00;
			focus-color:#efefef;
		}  
		
		s|LabelItemRenderer{
			color:#313235;
			fontFamily:CalibriMX;
			fontSize:42;
			selectionColor:#ff0000;
			downColor:#ff0000;
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayList;
			import mx.events.FlexEvent;
			
			private var start:Date;
			private var pause:Date;
			private var resume:Date;
			private var now:Date;
			private var timer:Timer;
			private const TWENTYFOUR:Number =  41.67;
			private const THIRTY:Number =  33.34;
			private var frameCount:Number;
			[Bindable]
			private var lapListProvider:ArrayList = new ArrayList();
			
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				frameCount = THIRTY;
				timer = new Timer(frameCount, 0 );
				timer.addEventListener( TimerEvent.TIMER, onTick ,false,0,true);
				startStopBtn.addEventListener(MouseEvent.CLICK, startStpHandler,false,0,true);
				pauseBtn.addEventListener(MouseEvent.CLICK, pauseHandler,false,0,true);
				frameBtn.addEventListener(MouseEvent.CLICK, frameHandler,false,0,true);
			}
			
			private function onTick( event:TimerEvent ):void 
			{
				now = new Date();
				lblElapsed.text = displayTime;
			}
			
			private function get elapsed():Date
			{
				return new Date( now.time - start.time );	
			}	
			
			private function get displayTime():String
			{
				var time:Date = elapsed;
				var seconds:Number = time.secondsUTC;
				var minutes:Number = time.minutesUTC;
				var hours:Number   = time.hoursUTC;
				var microseconds:int = (time.millisecondsUTC/frameCount);
				var output:String = ""; 
				if (minutes<10) output +="0";
				output += String(minutes)+":";
				if (seconds<10) output +="0";
				output += String(seconds)+":";
				if (microseconds<10) output +="0";
				output += String(microseconds);
				return output;
			}
			private function frameHandler(ev:MouseEvent):void
			{
				if(frameBtn.selected){
					frameCount = TWENTYFOUR;
				}else{
					frameCount = THIRTY;
				}
			}
			
			private function pauseHandler(ev:MouseEvent):void
			{
				if(pauseBtn.selected){
					timer.stop();
					pause = new Date();
				}else{
					lapListProvider.addItem({label:'Lap '+ int(lapListProvider.length+1) + ' - ' +lblElapsed.text});
					timer.start();
					resume = new Date();
					start = new Date( start.time + (resume.time - pause.time));
				}
			}
			
			private function startStpHandler(ev:MouseEvent):void
			{
				resetTimer();
				if(!startStopBtn.selected){
					pauseBtn.selected = false;
				}else{
					timer.start();
					lapListProvider = new ArrayList();
				}
			} 
			
			private function resetTimer():void
			{
				timer.reset();
				start 	= new Date();
				now 	= start;
			}
		]]>
	</fx:Script>
	<s:VGroup width="100%" height="100%"  bottom="{footer.height+5}">
		<s:HGroup width="100%" horizontalAlign="right">
			<s:Label id="lblElapsed" fontSize="72" color="#FFFFFF" />
			<s:Image width="50" height="50"
					 source="{frameBtn.selected ? 'assets//images//24fps.png' : 'assets//images//30fps.png'}"/>
		</s:HGroup>
		<s:List id="lapList" width="100%" height="100%" dataProvider="{lapListProvider}"/>		
	</s:VGroup>
	<s:HGroup width="100%" id="footer" verticalAlign="middle" bottom="5" paddingRight="5">
		<s:ToggleButton id="startStopBtn" width="100%" height="100" label="{startStopBtn.selected ? 'Reset' : 'Start'}" />
		<s:ToggleButton id="pauseBtn" width="100%" height="100" label="{pauseBtn.selected ? 'Resume':'Pause'}"
						visible="{!frameBtn.visible}" includeInLayout="{!frameBtn.visible}"/>
		<s:ToggleButton id="frameBtn" width="100%" height="100" label="{frameBtn.selected ? '24 FPS':'30 FPS'}"
						visible="{!startStopBtn.selected}" includeInLayout="{frameBtn.visible}" />
	</s:HGroup>	
</s:Application>