Question

I was working on a little practice project in AS3 and I ran into a problem. I’m making a MS Paint style drawing program and I want the user to be able to change the brush size with an input field. I have two issues. The first is that I don’t know how to make an input field through code, and the second is I don’t know how to pass the variable from the input field on the stage to the variable controlling the brush size.

    package  
{
    import flash.display.Sprite;
    import flash.events.MouseEvent; 
    import flash.text.TextField;
    import flash.events.KeyboardEvent;

    public class DrawingApp extends Sprite
    {
        var square0:Sprite;
        var textField: TextField;
        var textField2: TextField;
        var textField3: TextField;
        var square1:Sprite;
        var square2:Sprite;
        var square3:Sprite;
        var lineColor:uint = 0x000000;
        var brushSize:Number = 1;

        public function DrawingApp() 
        {

            square0 = new Sprite();
            addChild(square0);  
            square0.graphics.lineStyle(1,0x000000);
            square0.graphics.beginFill(0x000000);
            square0.graphics.drawRect(0,0,30,20);
            square0.graphics.endFill();
            square0.x = 500;
            square0.y = 10;

            square1 = new Sprite();
            addChild(square1);  
            square1.graphics.lineStyle(1,0x000000);
            square1.graphics.beginFill(0x0000FF);
            square1.graphics.drawRect(0,0,30,20);
            square1.graphics.endFill();
            square1.x = 500;
            square1.y = 40;

            square2 = new Sprite();
            addChild(square2);  
            square2.graphics.lineStyle(1,0x000000);
            square2.graphics.beginFill(0xff0000);
            square2.graphics.drawRect(0,0,30,20);
            square2.graphics.endFill();
            square2.x = 500;
            square2.y = 70;

            textField = new TextField;
            addChild(textField);
            textField.x = 500;
            textField.y = 100;
            textField.width = 30;
            textField.height = 20;
            textField.text = "Eraser";
            textField.selectable = false;  
            textField.border = true; 

            textField2 = new TextField;
            addChild(textField2);
            textField2.x = 500;
            textField2.y = 130;
            textField2.width = 30;
            textField2.height = 20;
            textField2.text = "Clear";
            textField2.selectable = false;  
            textField2.border = true; 

            textField3 = new TextField;
            addChild(textField3);
            textField3.x = 500;
            textField3.y = 160;
            textField3.width = 30;
            textField3.height = 20;
            textField3.text = brushSize;
            textField3.selectable = true;  
            textField3.border = true; 


            init();
        }

        private function init():void
        {
            graphics.lineStyle(1, lineColor, 1);
            square0.addEventListener(MouseEvent.CLICK, changetoDefault);
            square1.addEventListener(MouseEvent.CLICK, changetoBlue);
            square2.addEventListener(MouseEvent.CLICK, changetoRed);
            textField.addEventListener(MouseEvent.CLICK, changetoEraser);
            textField2.addEventListener(MouseEvent.CLICK, clearAll);
            textField3.addEventListener(KeyboardEvent.KEY_DOWN, adjustSize);
            stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseIsDown);
            stage.addEventListener(MouseEvent.MOUSE_UP, mouseIsUp);
        }

        private function changetoEraser(event: MouseEvent):void
        {
            lineColor = 0xffffff;
            graphics.lineStyle(brushSize, lineColor, 1);
        }

        private function adjustSize(event: KeyboardEvent)
        {
            brushSize = textField3.text;
            graphics.lineStyle(brushSize, lineColor, 1);
        }

        private function clearAll(event:MouseEvent):void
        {
            graphics.clear();
            graphics.lineStyle(brushSize, lineColor, 1);
        }

        private function changetoDefault(event: MouseEvent):void
        {
            lineColor = 0x000000;
            graphics.lineStyle(brushSize, lineColor, 1);
        }

        private function changetoBlue(event: MouseEvent):void
        {
            lineColor = 0x0000ff;
            graphics.lineStyle(brushSize, lineColor, 1);
        }

        private function changetoRed(event: MouseEvent):void
        {
            lineColor = 0xff0000;
            graphics.lineStyle(brushSize, lineColor, 1);
        }

        private function mouseIsDown(event: MouseEvent):void
        {
            graphics.moveTo(mouseX, mouseY);
            stage.addEventListener(MouseEvent.MOUSE_MOVE, moveMyMouse);
        }

        private function mouseIsUp(event: MouseEvent):void
        {
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveMyMouse);
        }

        private function moveMyMouse(event:MouseEvent):void
        {
            graphics.lineTo(mouseX, mouseY);
        }
    }
}

I realized that setting brushSize to textField3.text wouldn’t work because it’s converting string to number. I have no clue how I can make it so that way this works. Thanks to anyone who can shed some light on this for me.

Answer 1

You can make an input field from code in Flash by making a TextField and setting its type to TextFieldType.INPUT.

In order to convert a string to a number you will have to use parseFloat() or parseInt() (I don’t know whether you need an integer or a float by heart).

Though minimal, I do think this should be enough to help you get you going again.