Animated Score Made Easy

There are many components out there to use in a game for displaying score. But can any of them do the job in 15 lines or less?

The following code makes use of a tweener. Tweeners are extremely powerful, and  typically used to move objects, but can do so much more. The first thing to know about a tweener is that you can tween anything, including custom properties.

Notice how short and compact the score component is:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0">
	<mx:Script>
	  <![CDATA[
		import gs.TweenLite;
		import gs.easing.*;
		[Bindable] public var countVal:int = 0;
		private var speed:Number= 0.8;
 
		public function get count():int { return countVal; }
		public function set count(val:int):void {
			TweenLite.to(this, speed, { countVal:val, ease:Linear.easeOut});
			}
	  ]]>
	</mx:Script>
	<mx:Label id="lbText" text="{countVal}"  width="130" textAlign="right"/>
</mx:Canvas>

Usage:

   <score:AnimCount id="score1"  />
  ...
  <mx:Button label="Hit" click="score1.count += 25" />

This can be a base for any style you can imagine. In fact, I borrowed the digital readout visual style from Cadin Batrack and his tutorial on Activetuts+, and recreated it with the score component in Flex, without even opening Flash CS4.

Check out the code:

See if you can make use of the class and dress it in differrnt styles.