Looking for a Tutorial - See Screenshot

Hi,

I’m looking for a actionscript tutorial that will allow me to have a number change the fill on the bar to the left of it. The red will grow the higher the number 0-99 or lessen the lower number.

I thought I saw a tutorial here with something similar. I can’t getthe keyword correct to find it again.

Here is the screen of what I need to get working. The Number change the thing called the power level. higher number more red and vice versus.

Thanks,
Gary

I’m guessing the boxes are masking the red MC and then you just control the red MC’s _x value.

It’s all about the ratio…

Let’s say you have a max value of 100 and a min value of 0… now let’s say you want a movieclip to represent this will be 300 pixels maxed out… and 0 when it’s empty… Your code would be your current value divided by it’s possible value, and multiplying it by it’s total width…

Here is an example that you can play with… using health bar as an example


var maxHealth:Number = 100;
var currentHealth:Number = 5;

var healthBarWidth:Number = 300; // max width of health bar
var healthBar:MovieClip = createBox("healthBar", 100, 10, 10, 0xFF0000);
var maxHealthBar:MovieClip = createBox("maxHealthBar", 99, healthBarWidth, 10, 0xCCCCCC);

updateHealthBar();

function updateHealthBar():Void
{
   healthBar._width = ( currentHealth / maxHealth ) * healthBarWidth;
}


function createBox( name:String, depth:Number, width:Number, height:Number, color:Number ) : MovieClip
{
   var box:MovieClip = this.createEmptyMovieClip(name, depth);

   box.beginFill( color, 100 );   

   box.lineTo(0, height);
   box.lineTo(width, height);
   box.lineTo(width, 0);
   box.lineTo(0, 0);
   box.endFill();

   return box;
}

If you need anymore explanation feel free to ask…

TakeCare
_Michael

change the value of currentHealth…

Thanks MichaelxxOA, This answers a lot of my problem. do you know of a way to enter a number in box to the right of the bar and change the current health variable?

Take care,
Gary

Yeah… I’m working on something at the moment, I will be back in a few with a solution. TakeCare.

_Michael

You should be able to play around with this and get an idea of what to do… if not, ask questions and I will answer…


var maxHealth:Number = 100;
var currentHealth:Number = 5;

var healthBarWidth:Number = 300; // max width of health bar
var healthBar:MovieClip = createBox("healthBar", 100, 10, 10, 0xFF0000);
var maxHealthBar:MovieClip = createBox("maxHealthBar", 99, healthBarWidth, 10, 0xCCCCCC);

var inputHealth:TextField = createInput( "inputHealth", 101, healthBarWidth, 0, 40, 20);
inputHealth.onChanged = function()
{
	currentHealth = Math.min( parseFloat(this.text), maxHealth );
	updateHealthBar();
}

updateHealthBar();

function updateHealthBar():Void
{
   healthBar._width = ( currentHealth / maxHealth ) * healthBarWidth;
}


function createInput( name:String, depth:Number, x:Number, y:Number, width:Number, height:Number):TextField
{
	var textfield:TextField = this.createTextField(name, depth, x, y, width, height);
	textfield.type = "input";
	textfield.border = true;
	textfield.restrict = "0123456789";
	
	return textfield;
}
function createBox( name:String, depth:Number, width:Number, height:Number, color:Number ) : MovieClip
{
   var box:MovieClip = this.createEmptyMovieClip(name, depth);

   box.beginFill( color, 100 );   

   box.lineTo(0, height);
   box.lineTo(width, height);
   box.lineTo(width, 0);
   box.lineTo(0, 0);
   box.endFill();

   return box;
}

TakeCare
_Michael

Thanks again for your help Mike, this was even better than the tutorial I thought I had seen before.

Take care,
Gary

No problem, you take care.

_Michael