Flash CS4 and AS3 Number Counter
Update: Watch it live on the online casino which was the target project for this one.
If you want to replicate this flash counter you start up CS3 or CS4 (I used CS4 as implied by the title) and create a new ActionScript 3 project. You then:
1.) Set the stage size to 450×120 and the frame rate to 5fps.
2.) Create a new dynamic text field outside the stage area and set it to dynamic, use Arial Black for the font.
3.) Chose embed fonts for the text field and include the 5 top character types (for some reason I had problems when only including numbers and punctuation.
4.) Paste the below code into the first frame in the timeline:
import flash.utils.*;
import flash.display.*;
import flash.filters.*;
import flash.text.*;
import flash.events.*;
import flash.net.*;
import agi.utils.Format;
var paramObj:Object = LoaderInfo(this.loaderInfo).parameters;
var numFormatter = new Format();
var jackpot = Number(paramObj['jackpot']);
var incWith = Number(paramObj['incWith']);
var curSum = jackpot * Number(paramObj['lowerWith']);
var gotoUrl = String(paramObj['gotoUrl']);
var dropShadow = new DropShadowFilter();
var curFormat = new TextFormat();
with(curFormat){
color = 0xFFFF00;
font = "Arial Black";
size = 45;
bold = true;
}
var jpTxt = new TextField();
with(jpTxt){
embedFonts = true;
antiAliasType = AntiAliasType.ADVANCED;
autoSize = TextFieldAutoSize.CENTER;
selectable = false;
x = 0;
y = 80;
width = 450;
defaultTextFormat = curFormat;
filters = [dropShadow];
}
this.addChild(jpTxt);
this.addEventListener(MouseEvent.CLICK, function(){
navigateToURL(new URLRequest(gotoUrl), "_self");
});
this.addEventListener(Event.ENTER_FRAME, function(){
if(curSum <= jackpot)
curSum *= incWith;
jpTxt.text = numFormatter.currency(curSum, 2, '€ ');
});Let’s walk the code:
1.) We import everything we need, that includes Chris Agiasotis’ currency formatter.
2.) We load our flashvars with LoaderInfo and instantiate the number formatter.
3.) We work on the flashvars, converting to numbers and so on. In this case the jackpot variable will contain the target number we want to count up to, incWith will contain a modifier which we will multiply the temporarily lowered jackpot variable with on every frame, curSum is the lowered jackpot by way of multiplying with lowerWith and gotoUrl is the url we want to go to if the user clicks the shockwave.
4.) Next we create a drop shadow filter and a text format object. Note the use of Arial Black as the font in the text format, that is the name of the font which we chose to embed when we setup the project above.
5.) Next we create the text field, note the use of with here in order to be able to refer to the object’s attributes without having to write the full path, it saves ink 🙂 Note that we set embed fonts to true and so on, feel free to play around with the text field values. Anyway, at the end we assign our drop shadow filter and our text format to the text field.
6.) We add the text field to the root clip which is where the code resides so we can simply refer to it by the this word.
7.) We add a mouse click event handler to capture mouse the mouse clicks, and if we do we go to this blog’s start page.
8.) We add a enter frame event listener to update the stage and hence begin counting upwards 5 times per second (remember the 5fps setting?). If we reach the target jackpot sum we stop counting.
Now let’s take a look at the jQuery Flash loader code needed to load our shockwave:
$("#flash-counter").flash({
src: "http://www.prodevtips.com/demos/counter.swf",
width: 450,
height: 120,
wmode: "window",
flashvars: {jackpot: '7000000', incWith: '1.000002', lowerWith: '0.8', gotoUrl: 'http://www.prodevtips.com'}
});Note the flashvars attribute of the parameter object, there you have the numbers currently used in the counter for the above described variables.
Related Posts
Tags: actionscript3, AS3, flash, number counter