Animated counter in ActionScript 3 and Flash

Download Source Files

The idea

I few weeks ago I was asked to create a counter for a website. The first thing came into my mind was an old-school ticker used on old cassette players. The key is the seamless flow of numbers. To achieve the effect I’ve created an image with all the digits below each other from 9 to 0 then I added 9, 8 and 7 to the end of it. I needed to be careful and place the numbers to their exact position. By doing so you make everything a lot more easier later on, because you won’t have to doodle with adjusting.

In the next step I created a new Movie Clip and I put the digits into it, then converted them to MCs as well. Here is the class for digits:

package  {

	import flash.display.MovieClip;
	import com.greensock.*
	import com.greensock.easing.*

	public class Digit extends MovieClip{

		private var currentValue:Number = 0;
		private var nextDigit:Digit = null;
		private var assoc:Array = new Array(-135, -105, -75, -45, -15, 15, 45, 75, 105, -165);
		private var speed:Number = 0.09;

		public function Digit() {

		}

		public function setCurrentValue(v:Number):void {
			currentValue = v;
			this.y = assoc[v];
		}

		public function setNextDigit(d:Digit):void {
			nextDigit = d;
		}

		public function setSpeed(s:Number):void {
			speed = s;
		}

		public function s(v:Number):void {
			currentValue = v;
			update();
		}

		public function update():void {
			if(currentValue == 0) if(nextDigit) nextDigit.update();
			if(currentValue == 8 ) TweenLite.to(this, speed, { y:this.assoc[currentValue], onComplete:isEight } ); else TweenLite.to(this, speed, { y:this.assoc[currentValue] } );
			currentValue++;
			if(currentValue == 10) currentValue = 0;
		}

		public function isEight(){
			 this.y = -195;
		}

	}

}

One of the most important part is the assoc array. It stores the assigned coordinates of the digits, you can fine tune them if needed. I tried to name and make everything self-explanatory. The best is to download the source code and check how things related to each other.

Have fun