By: moonpixel

moonpixel — Tue, 20 Jul 2010 18:31:38 +0000

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

By: Dijup Tuladhar

Dijup Tuladhar — Tue, 20 Jul 2010 09:06:40 +0000

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);
 
		}
	}
 
}

By: moonpixel

moonpixel — Thu, 03 Jun 2010 05:17:13 +0000

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

By: brad

brad — Wed, 02 Jun 2010 20:32:35 +0000

1037: Packages cannot be nested.

thats the error I get.

anyone help?

By: Ikke

Ikke — Thu, 11 Mar 2010 09:04:44 +0000

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;
}
}

By: Chris

Chris — Sat, 13 Feb 2010 04:31:41 +0000

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

Comments on: Resize Text Field – AS3 Draggable Resizable Input Text Field

By: moonpixel

By: Dijup Tuladhar

By: moonpixel

By: brad

By: Ikke

By: Chris