moonpixel 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; } } }
- Flash AS3 Links Made Easy - AS3 Link Class - Download Many times when creating banners with multiple clickable areas, it's a pain to do an event listener for each and a function to navigate to that particular URL. I needed something faster and created a "dead simple" as3 link class, which allows creating as3 links in 1 line. You can......
- ia_archiver Bypassed Login Form Recently I came across 2 cases where website's admin area was accessed by an "intruder". In both cases the login credentials were known only to the administrator and this was in both cases a different person. The first site was a simple online questionnaire with a custom CMS for managing......
- CSS / HTML Template - Download I have been using the 960 Grid System CSS Framework , 960px frame divided into 12 or 16 columns, as for the kind of websites I work on (large graphics, less text) the pixel based layout is suitable. After I did about 10-20 sites using this framework I started realising......
- Flash - Add Path to Your Classes - AS3 Classpath When using Flash regularly, as with any other software, there are tasks repeating in many projects over and over again. To speed up this process, it just makes sense creating your own classes and functions and having them available for all projects to use. So how do we do this?......
- Gradient Not Smooth - Photoshop CS4 Banding I had recently an issue with a black to dark gray gradient created in Photoshop CS4. This gradient was used for a website background, repeated along the y-axis, where it produced some annoying vertical blocks of solid color, example below: In order to get rid of this "banding" issue I......
- Watson and Prugh in Lead at Bob Hope Classic At the Bob Hope Classic in La Quinta, California, where no one could ask for more perfect sunny and warm golf weather, Bubba Watson and Alex Prugh are tied for the lead going into the final day. The Classic will wrap up on Monday at the Arnold Palmer Private course,......
- Review: The New Guide to Skiing: A Step by Step Guide in Color by Martin Heckelman Title - The New Guide to Skiing: A Step by Step Guide in Color Author - Martin Heckelman Format - Paperback, 138 pages ISBN - 0393319660 and 978 0393319668 Publisher - W. W. Norton & Company Release Date - December 4, 2000 The New Guide to Skiing: A Step by......
- Beware Private Student Loans! Private Student Loans were big business, until 2007-2008. The number of private loans has grown more than 3 times in the past decade, going from 7% of all loans in 1998 to 23% in 2008. Then the credit crunch hit, and private loans market dried up for a while. Now,......
Tags: as3, as3 draggable, as3 resize textfield, as3 textfield resize, flash, input textfield as3, resizable input, resize input, textfield as3
Hey thanks for sharing, it looks very clean and its a great start to reference from
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;
}
}
1037: Packages cannot be nested.
thats the error I get.
anyone help?
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
I have made some update to this code still many things need to be fixed to make this work properly
Hi Dijup, nice one, I did give your class a go…