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="" backgroundColor="0">
		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 {, speed, { countVal:val, ease:Linear.easeOut});
	<mx:Label id="lbText" text="{countVal}"  width="130" textAlign="right"/>


   <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.

One thought on “Animated Score Made Easy

Comments are closed.