Need ActionScript 3 coding for input boxes that will determine amount of color fill in a movieclip

Question

If I put a numerical value in an input textbox1 and another value in input textbox2, then the percentage of both these input boxes will determine how much boxA will fill. For example, I put the value 10000 in textbox1 and 5000 in textbox2, then boxA will fill 50%.

Help in coding. I am a graphic designer and new to AS3 coding.

Answer 1

As @Organis suggested you should try to attempt to solve the problem yourself and show the code used in your efforts so that we may assist you.

I will provide some code to get you started but you should try to understand this code and expand upon it yourself to make it your own.

// Create 2 text boxes.
var input1:TextField = new TextField();
var input2:TextField = new TextField();

// Set the type, background and position of both text boxes.
input1.type = input2.type = TextFieldType.INPUT;
input1.background = input2.background = true;
input2.y = input1.height + 10;

// Only allow characters 0 through 9 to be entered into the text boxes.
input1.restrict = input2.restrict = "0-9";

// Add text boxes to the stage.
addChild(input1);
addChild(input2);

// Add event listeners so that each time the contents of either text boxes
// gets changed, the handleChange function will be called.
input1.addEventListener(Event.CHANGE, handleChange);
input2.addEventListener(Event.CHANGE, handleChange);

function handleChange(e:Event):void {
    // Convert the text content of the text boxes to numbers.
    const value1:Number = Number(input1.text);
    const value2:Number = Number(input2.text);
    // Ratio between the numbers as a fraction - e.g. 1000, 500 -> 0.5
    const fraction:Number = value2 / value1;
    // Ratio between the numbers as a percentage - e.g. 1000, 500 -> 50
    const percentage:Number = fraction * 100;
}

I'm not sure exactly what you want when you say this should determine the how much boxA will fill.

If boxA is a MovieClip you could control its opacity:

boxA.alpha = fraction;

Or could control its height etc.

boxA.scaleY = fraction;

I'm sure you can experiment with this yourself.