Resize Text Field – AS3 Draggable Resizable Input Text Field
December 17th, 2009 by Michal Miksik Share |

Draggable, resizable Input Text Field with Actionscript 3. Text Field gets resized in particular direction by dragging one of its corner handles.

This movie requires Flash Player 9
package {
 
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldType;	
	import flash.events.MouseEvent;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
 
	public class ResizableTextField extends Sprite {
 
		private var textCustomField:TextField;
 
		//handles
		private var square1:Sprite;
		private var square2:Sprite;
		private var square3:Sprite;
		private var square4:Sprite;
 
		//dragging
		private var origX:int;
		private var origY:int;
		private var dragTimer:Timer = new Timer(10,10000);
		private var handleHolder:Object;
 
		// Initialization:
		public function ResizableTextField()
		{
			textCustomField = new TextField();
			textCustomField.type = TextFieldType.INPUT;
			textCustomField.multiline = true;
			textCustomField.wordWrap = true;
			textCustomField.width=200;
			textCustomField.height=100;
			textCustomField.x=50;
			textCustomField.y=50;
			textCustomField.text="type here";
			textCustomField.border=true;
			createHandles();
			this.addChild(textCustomField);
		}
 
		//create 4 draggable handles
		private function createHandles():void
		{
 
			square1 = new Sprite();
			square1.graphics.lineStyle(1,0x000000);
			square1.graphics.beginFill(0xFFFFFF);
			square1.graphics.drawRect(0,0,10,10);
			square1.graphics.endFill();
 
			square2 = new Sprite();
			square2.graphics.lineStyle(1,0x000000);
			square2.graphics.beginFill(0xFFFFFF);
			square2.graphics.drawRect(0,0,10,10);
			square2.graphics.endFill();
 
			square3 = new Sprite();
			square3.graphics.lineStyle(1,0x000000);
			square3.graphics.beginFill(0xFFFFFF);
			square3.graphics.drawRect(0,0,10,10);
			square3.graphics.endFill();
 
			square4 = new Sprite();
			square4.graphics.lineStyle(1,0x000000);
			square4.graphics.beginFill(0xFFFFFF);
			square4.graphics.drawRect(0,0,10,10);
			square4.graphics.endFill();
 
			updateHandlePositions();
 
			this.addChild(square1);
			square1.buttonMode=true;
			this.addEventListener(MouseEvent.MOUSE_OUT,hideHandles);
			square1.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
 
			this.addChild(square2);
			square2.buttonMode=true;
			this.addEventListener(MouseEvent.MOUSE_OUT,hideHandles);
			square2.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
 
			this.addChild(square3);
			square3.buttonMode=true;
			this.addEventListener(MouseEvent.MOUSE_OUT,hideHandles);
			square3.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
 
			this.addChild(square4);
			square4.buttonMode=true;
			this.addEventListener(MouseEvent.MOUSE_OUT,hideHandles);
			square4.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
		}
 
		private function hideHandles(e:MouseEvent):void
		{
			square1.alpha=0;
			square2.alpha=0;
			square3.alpha=0;
			square4.alpha=0;
			this.textCustomField.border=false;
			this.addEventListener(MouseEvent.MOUSE_OVER,showHandles);
		}
 
		private function showHandles(e:MouseEvent):void
		{
			square1.alpha=1;
			square2.alpha=1;
			square3.alpha=1;
			square4.alpha=1;
			this.textCustomField.border=true;
		}
 
		private function startHandleDrag(e:MouseEvent):void
		{
			handleHolder=e.target;
			origX=mouseX;
			origY=mouseY;
			dragTimer.addEventListener(TimerEvent.TIMER, resizeField);
            dragTimer.start();
		}
 
		private function stopHandleDrag(e:MouseEvent):void
		{
			removeEventListener(MouseEvent.MOUSE_UP,stopHandleDrag);
			dragTimer.stop();
			dragTimer.reset();
		}
		// resize text field depending on which direction dragging
		private function resizeField(e:TimerEvent):void
		{
			addEventListener(MouseEvent.MOUSE_UP,stopHandleDrag);
			var updatedX:int = mouseX-origX;
			var updatedY:int = mouseY-origY;
			if(handleHolder===square1)
			{
				this.textCustomField.width-=updatedX;
				this.textCustomField.height-=updatedY;
				this.textCustomField.x+=updatedX;
				this.textCustomField.y+=updatedY;
			}
			else if(handleHolder===square2)
			{
				this.textCustomField.width+=updatedX;
				this.textCustomField.height-=updatedY;
				this.textCustomField.y+=updatedY;
			}
			else if(handleHolder===square3)
			{
				this.textCustomField.width-=updatedX;
				this.textCustomField.height+=updatedY;
				this.textCustomField.x+=updatedX;
			}
			else if(handleHolder===square4)
			{
				this.textCustomField.width+=updatedX;
				this.textCustomField.height+=updatedY;
			}
 
			origX=mouseX;
			origY=mouseY;
			updateHandlePositions();
			e.updateAfterEvent();
		}
		//adjust handles to the new size/position
		private function updateHandlePositions():void
		{
			square1.x=textCustomField.x-square1.width;
			square1.y=textCustomField.y-square1.height;
			square2.x=textCustomField.x+textCustomField.width;
			square2.y=textCustomField.y-square2.width;
			square3.x=textCustomField.x-square3.height;
			square3.y=textCustomField.height+textCustomField.y;
			square4.x=textCustomField.x+textCustomField.width;
			square4.y=textCustomField.height+textCustomField.y;
		}
	}
 
}

Tags: , , , , , , , ,

  • Chris

    Hey thanks for sharing, it looks very clean and its a great start to reference from :)

  • Ikke

    nice class but add this at the appropriate spots,
    it´s a beauty detail but still,
    it will make the text “type here” dissapear the moment you start typing (click the textfield),

    i don´t have a compiler here so i didn´t test but i think it´s without writing mistakes,

    private var txtClicked:Boolean = false;

    //add this to the bottom of public function ResizableTextField()
    //{
    textCustomField.addEventListener(MouseEvent.CLICK,txtClick)
    //}

    private function txtClick(event:MouseEvent):void
    {
    if(txtClicked == false)
    {
    event.target.text = “”;
    txtClicked = true;
    }
    }

  • brad

    1037: Packages cannot be nested.

    thats the error I get.

    anyone help?

    • http://moonpixel.com/michal-miksik/ moonpixel

      could be that you’re pasting the code into a keyframe on the timeline?
      it that’s the case then you need to save it externally into an .as file

  • http://www.dijup.com Dijup Tuladhar

    I have made some update to this code still many things need to be fixed to make this work properly

    package resizemc{
     
    	import flash.display.Sprite;
    	//for text format
    	import flash.text.TextField;
    	import flash.text.TextFormat;
    	import flash.text.TextFormatAlign;
    	import flash.text.TextFieldType;	
    	import flash.text.AntiAliasType;
     
    	import flash.events.MouseEvent;
    	import flash.events.FocusEvent;
    	import flash.utils.Timer;
    	import flash.events.TimerEvent;
     
    	public class ResizableTextField extends Sprite {
     
    		private var textCustomField:TextField;
     
    		//handles
    		private var square1:Sprite;
    		private var square2:Sprite;
    		private var square3:Sprite;
    		private var square4:Sprite;
    		private var square5:Sprite;
    		private var square6:Sprite;
    		private var square7:Sprite;
    		private var square8:Sprite;
     
    		//dragging
    		private var origX:int;
    		private var origY:int;
    		private var dragTimer:Timer = new Timer(10,10000);
    		private var handleHolder:Object;
    		private var txtClicked:Boolean = false;
     
    		//text format
    		public var myFont = new Font1();
    		private var myFormat:TextFormat = new TextFormat();
     
    		// Initialization:
    		public function CreateTextField()
    		{
     
    		}
    		public function ResizableTextField()
    		{
    			//text format set
    			myFormat.size = 15;
    			myFormat.font = myFont.fontName;
     
    			textCustomField = new TextField();
    			textCustomField.defaultTextFormat = myFormat;
     
    			textCustomField.embedFonts = true;
    			textCustomField.antiAliasType = AntiAliasType.ADVANCED;
    			textCustomField.type = TextFieldType.INPUT;
    			textCustomField.multiline = true;
    			textCustomField.wordWrap = true;
    			textCustomField.width=200;
    			textCustomField.height=100;
    			textCustomField.x=50;
    			textCustomField.y=50;
    			textCustomField.text="Type here";
    			textCustomField.border=true;
    			textCustomField.borderColor=0x32B5FE;
    			createHandles();
    			this.addChild(textCustomField);
    			textCustomField.addEventListener(MouseEvent.CLICK,txtClick) 
    		}
     
    		//remove type here text
    		private function txtClick(event:MouseEvent):void
    		{
    			if(txtClicked == false)
    			{
    			event.target.text = "";
    			txtClicked = true;
    			}
    		}
     
     
    		//create 4 draggable handles
    		private function createHandles():void
    		{
     
    			square1 = new Sprite();
    			square1.graphics.lineStyle(1,0x32B5FE);
    			square1.graphics.beginFill(0xFFFFFF);
    			square1.graphics.drawRect(0,0,4,4);
    			square1.graphics.endFill();
     
    			square2 = new Sprite();
    			square2.graphics.lineStyle(1,0x32B5FE);
    			square2.graphics.beginFill(0xFFFFFF);
    			square2.graphics.drawRect(0,0,4,4);
    			square2.graphics.endFill();
     
    			square3 = new Sprite();
    			square3.graphics.lineStyle(1,0x32B5FE);
    			square3.graphics.beginFill(0xFFFFFF);
    			square3.graphics.drawRect(0,0,4,4);
    			square3.graphics.endFill();
     
    			square4 = new Sprite();
    			square4.graphics.lineStyle(1,0x32B5FE);
    			square4.graphics.beginFill(0xFFFFFF);
    			square4.graphics.drawRect(0,0,4,4);
    			square4.graphics.endFill();
     
    			square5 = new Sprite();
    			square5.graphics.lineStyle(1,0x32B5FE);
    			square5.graphics.beginFill(0xFFFFFF);
    			square5.graphics.drawRect(0,0,4,4);
    			square5.graphics.endFill();
     
    			square6 = new Sprite();
    			square6.graphics.lineStyle(1,0x32B5FE);
    			square6.graphics.beginFill(0xFFFFFF);
    			square6.graphics.drawRect(0,0,4,4);
    			square6.graphics.endFill();
     
    			square7 = new Sprite();
    			square7.graphics.lineStyle(1,0x32B5FE);
    			square7.graphics.beginFill(0xFFFFFF);
    			square7.graphics.drawRect(0,0,4,4);
    			square7.graphics.endFill();
     
    			square8 = new Sprite();
    			square8.graphics.lineStyle(1,0x32B5FE);
    			square8.graphics.beginFill(0xFFFFFF);
    			square8.graphics.drawRect(0,0,4,4);
    			square8.graphics.endFill();
     
    			updateHandlePositions();
     
    			this.addChild(square1);
    			square1.buttonMode=true;
    			this.addEventListener(FocusEvent.FOCUS_OUT,hideHandles);
    			square1.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
     
    			this.addChild(square2);
    			square2.buttonMode=true;
    			this.addEventListener(FocusEvent.FOCUS_OUT,hideHandles);
    			square2.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
     
    			this.addChild(square3);
    			square3.buttonMode=true;
    			this.addEventListener(FocusEvent.FOCUS_OUT,hideHandles);
    			square3.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
     
    			this.addChild(square4);
    			square4.buttonMode=true;
    			this.addEventListener(FocusEvent.FOCUS_OUT,hideHandles);
    			square4.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
     
    			this.addChild(square5);
    			square5.buttonMode=true;
    			this.addEventListener(FocusEvent.FOCUS_OUT,hideHandles);
    			square5.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
     
    			this.addChild(square6);
    			square6.buttonMode=true;
    			this.addEventListener(FocusEvent.FOCUS_OUT,hideHandles);
    			square6.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
     
    			this.addChild(square7);
    			square7.buttonMode=true;
    			this.addEventListener(FocusEvent.FOCUS_OUT,hideHandles);
    			square7.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
     
    			this.addChild(square8);
    			square8.buttonMode=true;
    			this.addEventListener(FocusEvent.FOCUS_OUT,hideHandles);
    			square8.addEventListener(MouseEvent.MOUSE_DOWN,startHandleDrag);
    		}
     
    		private function hideHandles(e:FocusEvent):void
    		{
    			square1.alpha=0;
    			square2.alpha=0;
    			square3.alpha=0;
    			square4.alpha=0;
    			square5.alpha=0;
    			square6.alpha=0;
    			square7.alpha=0;
    			square8.alpha=0;
    			this.textCustomField.border=false;
    			this.addEventListener(MouseEvent.MOUSE_OVER,showHandles);
    		}
     
    		private function showHandles(e:MouseEvent):void
    		{
    			square1.alpha=1;
    			square2.alpha=1;
    			square3.alpha=1;
    			square4.alpha=1;
    			square5.alpha=1;
    			square6.alpha=1;
    			square7.alpha=1;
    			square8.alpha=1;
    			this.textCustomField.border=true;
    			textCustomField.borderColor=0x32B5FE;
    		}
     
    		private function startHandleDrag(e:MouseEvent):void
    		{
    			handleHolder=e.target;
    			origX=mouseX;
    			origY=mouseY;
    			dragTimer.addEventListener(TimerEvent.TIMER, resizeField);
                dragTimer.start();
    		}
     
    		private function stopHandleDrag(e:MouseEvent):void
    		{
    			trace("stopHandleDrag");
    			removeEventListener(MouseEvent.MOUSE_UP,stopHandleDrag);
    			dragTimer.stop();
    			dragTimer.reset();
    		}
    		// resize text field depending on which direction dragging
    		private function resizeField(e:TimerEvent):void
    		{
    			addEventListener(MouseEvent.MOUSE_UP,stopHandleDrag);
    			var updatedX:int = mouseX-origX;
    			var updatedY:int = mouseY-origY;
    			if(handleHolder===square1)
    			{
    				this.textCustomField.width-=updatedX;
    				this.textCustomField.height-=updatedY;
    				this.textCustomField.x+=updatedX;
    				this.textCustomField.y+=updatedY;
    			}
    			else if(handleHolder===square2)
    			{
    				this.textCustomField.width+=updatedX;
    				this.textCustomField.height-=updatedY;
    				this.textCustomField.y+=updatedY;
    			}
    			else if(handleHolder===square3)
    			{
    				this.textCustomField.width-=updatedX;
    				this.textCustomField.height+=updatedY;
    				this.textCustomField.x+=updatedX;
    			}
    			else if(handleHolder===square4)
    			{
    				this.textCustomField.width+=updatedX;
    				this.textCustomField.height+=updatedY;
    			}
    			else if(handleHolder===square5)
    			{
    				this.textCustomField.height-=updatedY;
    				this.textCustomField.y+=updatedY;
    			}
    			else if(handleHolder===square6)
    			{
    				this.textCustomField.width+=updatedX;
    				//this.textCustomField.y+=updatedY;
    			}
    			else if(handleHolder===square7)
    			{
    				this.textCustomField.height+=updatedY;
    			}
    			else if(handleHolder===square8)
    			{
    				this.textCustomField.width-=updatedX;
    				this.textCustomField.x+=updatedX;				
    			}
     
    			origX=mouseX;
    			origY=mouseY;
    			updateHandlePositions();
    			e.updateAfterEvent();
    		}
    		//adjust handles to the new size/position
    		private function updateHandlePositions():void
    		{
    			square1.x=textCustomField.x-square1.width+3;
    			square1.y=textCustomField.y-square1.height+3;
    			square2.x=textCustomField.x+textCustomField.width-2;
    			square2.y=textCustomField.y-square2.width+3;
    			square3.x=textCustomField.x-square3.height+3;
    			square3.y=textCustomField.height+textCustomField.y-2;
    			square4.x=textCustomField.x+textCustomField.width-2;
    			square4.y=textCustomField.height+textCustomField.y-2;
     
    			//
    			square5.x=textCustomField.x-square1.width+(textCustomField.width/2);
    			square5.y=textCustomField.y-square1.height+3;
    			square6.x=textCustomField.x-square1.width+textCustomField.width+3;
    			square6.y=textCustomField.y-square1.height+(textCustomField.height/2);
    			square7.x=textCustomField.x-square1.width+(textCustomField.width/2)+3;
    			square7.y=textCustomField.y-square1.height+textCustomField.height+3;
    			square8.x=textCustomField.x-square1.width+3;
    			square8.y=textCustomField.y-square1.height+(textCustomField.height/2);
     
    		}
    	}
     
    }
    • http://moonpixel.com/michal-miksik/ moonpixel

      Hi Dijup, nice one, I did give your class a go…

    • Nickaroony

      Hi I tried out your modification and its pretty nifty.  I am having a couple issues though and was wondering if you knew how to fix them.

      1.  When the movie first initializes the text is chunky and blurry.
      2.  Resizing the box leaves the original and its sprites behind.

  • Billywilliamton

    When I got your code up and running I seem to have some type of ghosting issue where the initial box never seems to go away or become resized.  Rather it spawns resized clones of itself.  Any ideas?

    • http://moonpixel.com Moonpixel

      are you creating multiple instances of it?

      • Billywilliamton

        No, it’s the strangest thing.  Once I resize it and one of the clones spawns.  The clone behaves as expected, but the initial box never seems to budge.  I’ve tried removing it from the stage, but that seems to fail as it is just “burned in”.

      • Billywilliamton

        Here is what it looks like after resizing:

        http://imgur.com/s8iOh

        Here is the code I’m using to conjure it up if it helps:

        var testField:ResizableTextField = new ResizableTextField()//new Point(15,550));
        addChild(testField);

        • http://moonpixel.com Moonpixel

          if you’re using Flash to compile it, then just link the as code as a document class and remove your 2 lines posted…

          • Billywilliamton

            That worked perfectly, but I must admit I don’t understand why.  I’ve never used a document class before now.  If its not too much of a bother why is this necessary and why does it not work when I instance the object in the way I tried above?

          • http://moonpixel.com Moonpixel

            For simplicity in this example I’m instantiating a text field already in the constructor :
            textCustomField = new TextField();
            the package linked in the document class it executed when the swf plays so if you’re creating a new instance of it in the timeline you’re doubling up…

  • Me

    beautiful! you saved my day!!!

    • http://moonpixel.com Moonpixel

      glad… :)

  • Morenna

    Hello there,
    I really, really like this to post on my website as well. I’m using Macromedia Flash Professional 8 to create my site and it seems I cannot get it to work. If someone can upload a working example for using this in Flash, I’ll be more than excited!!!
    I’m at the beginning with the scripting and I do not have much experience in working with these right now.
    Thank you everyone in advance!!

    • http://moonpixel.com Moonpixel

      Hi Morenna, are you making the whole website in flash or you just can’t get the text field working?

  • Search Moonpixel

  • Blog Categories

  • Ads
    LoungePad
  • AdSense
  • Chitika
  • Subscribe for Updates

  • Moonpixel on Facebook

  • @moonpixel on Twitter