# Looking for a Tutorial - See Screenshot

**URL:** <https://forum.kirupa.com/t/looking-for-a-tutorial-see-screenshot/186808>\
**Category:** flash\
**Created:** [April 24, 2006, 7:30pm UTC](https://forum.kirupa.com/t/looking-for-a-tutorial-see-screenshot/186808 "2006-04-24T19:30:58Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![garyzero](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@garyzero](https://forum.kirupa.com/u/garyzero)\
**Post date:** [April 24, 2006, 7:30pm UTC](https://forum.kirupa.com/t/looking-for-a-tutorial-see-screenshot/186808/1 "2006-04-24T19:30:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![benFusion](https://avatars.discourse-cdn.com/v4/letter/b/919ad9/32.png) [@benFusion](https://forum.kirupa.com/u/benFusion)\
**Post date:** [April 24, 2006, 7:45pm UTC](https://forum.kirupa.com/t/looking-for-a-tutorial-see-screenshot/186808/2 "2006-04-24T19:45:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MichaelxxOA](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@MichaelxxOA](https://forum.kirupa.com/u/MichaelxxOA)\
**Post date:** [April 24, 2006, 7:59pm UTC](https://forum.kirupa.com/t/looking-for-a-tutorial-see-screenshot/186808/3 "2006-04-24T19:59:26Z")

</div>

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

```auto

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

---

<div class="post-metadata">

**Author:** ![MichaelxxOA](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@MichaelxxOA](https://forum.kirupa.com/u/MichaelxxOA)\
**Post date:** [April 24, 2006, 8:00pm UTC](https://forum.kirupa.com/t/looking-for-a-tutorial-see-screenshot/186808/4 "2006-04-24T20:00:08Z")

</div>

change the value of currentHealth…

---

<div class="post-metadata">

**Author:** ![garyzero](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@garyzero](https://forum.kirupa.com/u/garyzero)\
**Post date:** [April 24, 2006, 8:49pm UTC](https://forum.kirupa.com/t/looking-for-a-tutorial-see-screenshot/186808/5 "2006-04-24T20:49:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MichaelxxOA](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@MichaelxxOA](https://forum.kirupa.com/u/MichaelxxOA)\
**Post date:** [April 24, 2006, 8:51pm UTC](https://forum.kirupa.com/t/looking-for-a-tutorial-see-screenshot/186808/6 "2006-04-24T20:51:00Z")

</div>

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

\_Michael

---

<div class="post-metadata">

**Author:** ![MichaelxxOA](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@MichaelxxOA](https://forum.kirupa.com/u/MichaelxxOA)\
**Post date:** [April 24, 2006, 9:28pm UTC](https://forum.kirupa.com/t/looking-for-a-tutorial-see-screenshot/186808/7 "2006-04-24T21:28:29Z")

</div>

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…

```auto

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

---

<div class="post-metadata">

**Author:** ![garyzero](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@garyzero](https://forum.kirupa.com/u/garyzero)\
**Post date:** [April 25, 2006, 12:15pm UTC](https://forum.kirupa.com/t/looking-for-a-tutorial-see-screenshot/186808/8 "2006-04-25T12:15:50Z")

</div>

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

Take care,  
Gary

---

<div class="post-metadata">

**Author:** ![MichaelxxOA](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@MichaelxxOA](https://forum.kirupa.com/u/MichaelxxOA)\
**Post date:** [April 25, 2006, 3:29pm UTC](https://forum.kirupa.com/t/looking-for-a-tutorial-see-screenshot/186808/9 "2006-04-25T15:29:05Z")

</div>

No problem, you take care.

\_Michael