Flash Jackpot Rotator and Counter

This tutorial is based on the flash counter tutorial.

This time however we have several jackpots that will quickly be counted up to their current values, we need some kind of animated transition between them too. And it all needs to loop.

The result:


Below we have the code.

Note the use of AS3CoreLib‘s JSON to decode JSON passed in as a flash variable.

The decoded array (jps) contains objects containing their respective jackpot information, the url to the picture to show, and the jackpot amount to show next to it.

Note the animateJp variable in ENTER_FRAME, we use it to keep the amount from counting up so that the image can finish loading before we start counting. When we reach the current jackpot sum we initiate the switch (switchJackpot) to the next jackpot, switchJackpot in conjunction with resetJpTxt, resetImage, jpFadeOut and the imageLoaded basically takes care of the main jackpot loop.

What’s left now are the animations which happens through the TweenLite, this is a part of the greensock library. Thanks for that one Jack!

And that’s that, I’ve grown too old to do the in-depth code explanations of yore.

import flash.utils.*;
import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.net.*;
import agi.utils.Format;
import com.greensock.*;
import com.greensock.easing.*;
import com.adobe.serialization.json.*;

var paramObj:Object = LoaderInfo(this.loaderInfo).parameters;

//For Testing
//var jps_str = '[{"amount": 7564321, "pic": "cash_splash.png", "game": "megah_moolah"}, {"amount": 10000, "pic": "major_millions.png", "game": "megah_moolah"}]';
var jps_str = paramObj['jackpots'];
var jps = JSON.decode(jps_str as String) as Array;
var curJp = 0;
var jackpot, curSum, curGame;
var incWith = 1.05;

//For Testing
//var nextJp = "Your next jackpot? ";

var nextJp = paramObj['text']+' ';
var animateJp = false;

var numFormatter = new Format();

var dropShadow			= new DropShadowFilter();
var glowText			= new GlowFilter(0xFF99FF,1,2,2,5,2);

var curFormat           = new TextFormat();
with(curFormat){
	color     	= 0xFFFF00;
	font        = "Arial Black";
	size		= 30;
	bold		= true;
}

var nextJpFormat           = new TextFormat();
with(nextJpFormat){
	color     	= 0xFFFFFF;
	font        = "Vladimir Script";
	size		= 60;
}

var jpTxt              = new TextField();
with(jpTxt){
	embedFonts     		= true;
	antiAliasType 		= AntiAliasType.ADVANCED;
	autoSize			= TextFieldAutoSize.CENTER;
	selectable     		= false;
	x             		= 200;
	y             		= 20;
	width        		= 450;
	defaultTextFormat 	= curFormat;
	filters 			= [dropShadow];
}

var nextJpTxt           = new TextField();
with(nextJpTxt){
	embedFonts     		= true;
	antiAliasType 		= AntiAliasType.ADVANCED;
	autoSize			= TextFieldAutoSize.LEFT;
	gridFitType			= GridFitType.NONE;
	selectable     		= false;
	x             		= 0;
	y             		= 0;
	width        		= 600;
	defaultTextFormat 	= nextJpFormat;
	filters 			= [dropShadow, glowText];
}

nextJpTxt.text = nextJp;
txtHolder.addChild(nextJpTxt);

var imageLoader:Loader;
imageLoader = new Loader();

function loadImage(url:String):void {
	imageLoader.load(new URLRequest(url));
	imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
}
 
function imageLoaded(e:Event):void {
	animateJp = true;
	resetJpTxt();
	TweenLite.to(imageArea, 1, {x:550, y:2, ease:Elastic.easeOut});
	TweenLite.to(jpArea, 1, {x:0, y:0, ease:Elastic.easeOut});
} 

this.addEventListener(MouseEvent.CLICK, function(){
	ExternalInterface.call("launchGame", curGame);												  
});

function setStuff(){
	jackpot = jps[curJp].amount;
	curGame = jps[curJp].game;
	curSum = jackpot / 10;
}

function switchJackpot(initiate){
	if(initiate){
		setStuff();
		imageArea.addChild(imageLoader);
		loadImage(jps[curJp].pic);
		jpArea.addChild(jpTxt);
		jpTxt.text = curSum;
	}else{
		if(curJp == jps.length - 1)
			curJp = 0;
		else
			curJp++;
			
		setStuff();
	}
}

function resetImage(){
	imageArea.y = -100;
	loadImage(jps[curJp].pic);
}

function resetJpTxt(){
	jpArea.y = -180;
	jpTxt.text = curSum;
	animateJp = true;
}

function jpFadeOut(){
	TweenLite.to(imageArea, 1, {x:550, y:250, ease:Back.easeIn, onComplete:resetImage});
	TweenLite.to(jpArea, 1, {x:0, y:250, ease:Back.easeIn});
}

switchJackpot(true);

this.addEventListener(Event.ENTER_FRAME, function(){
	if(animateJp){
		if(curSum <= jackpot){
			curSum *= incWith;
			jpTxt.text = numFormatter.currency(curSum, 2, '€ ');
		}else{
			animateJp = false;
			switchJackpot(false);
			jpFadeOut();
		}
	}
});

Related Posts

Tags: , , , ,

This entry was posted on Monday, October 31st, 2011 at 7:30 am and is filed under Flex, Flash and AMFPHP. Comments are currently closed.