# Prototyping TextFields !?

**URL:** <https://forum.kirupa.com/t/prototyping-textfields/17086>\
**Category:** flash\
**Created:** [April 1, 2003, 7:16am UTC](https://forum.kirupa.com/t/prototyping-textfields/17086 "2003-04-01T07:16:28Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![mindfriction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mindfriction/32/172_2.png) [@mindfriction](https://forum.kirupa.com/u/mindfriction)\
**Post date:** [April 1, 2003, 7:16am UTC](https://forum.kirupa.com/t/prototyping-textfields/17086/1 "2003-04-01T07:16:28Z")

</div>

Hi,

Im creating many textfields dynamically and I dont want to have to repeat the same code over and over for each field. Currently I have something like below which deosnt work. Any ideas? Am I even close?

```auto

labelFormat = new TextFormat();
labelFormat.font = "Verdana";
labelFormat.size = 5;
labelFormat.color = 0xFFFFFF
labelFormat.bold = true;
labelFormat.leftMargin = 0
labelFormat.rightMargin = 0
labelFormat.indent = 0
labelFormat.leading = 0
labelFormat.align = "center";

TextField.prototype.buildLabel = function(tempText) {
	trace("prototype buildLabel");
	this.border = false;
	this.type = "input";
	this.text = tempText;
	this.maxChars = "2";
	this.setTextFormat(labelFormat);
}

```

With the main script I call the porotype like so

```auto

this._parent[newName].createTextField("myTextBox", i+1000, this[newName]._x-7, this[newName]._y-5, 15, 10).buildLabel(i);

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 1, 2003, 10:02pm UTC](https://forum.kirupa.com/t/prototyping-textfields/17086/2 "2003-04-01T22:02:36Z")

</div>

I’m not into prototyping much (not yet), but the last line looks to me as if you’re applying the method/proto you created for textfield (buildLabel) to the clip method createTextField, and not to the created textfield itself (myTextbox);  
try removing that from the end, then add a line  
myTextBox.buildLabel(i);  
afterwards, once the textfield exists…get the path right!  
here’s an example in german:  
[AS]// beliebter Schreibmaschineneffekt  
TextField.prototype.typeWriter = function(str, ms) {  
var me = this, i = 0;  
var itv = setInterval(function () {  
me.text = str.substring(0, i);  
i++;  
if (i \> str.length) {  
clearInterval(itv);  
}  
updateAfterEvent();  
}, ms);  
};  
//  
// NUR ZUM TESTEN  
mystring = “kleiner typewriter, viel spass damit”;  
\_root.createTextField(“mytext”, 1, 20, 20, 100, 100);  
mytext.multiline = true;  
mytext.wordWrap = true;  
// usage:  
mytext.typeWriter(mystring, 50);[/AS]

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 1, 2003, 10:07pm UTC](https://forum.kirupa.com/t/prototyping-textfields/17086/3 "2003-04-01T22:07:33Z")

</div>

Eyez, you can attach it to the end like that. I do it all the time. Like when I have my clip draw something. Lets say I have a prototype called drawSquare that uses the drawing API to draw a square shape. I could easily just do…  
[AS]\_root.createEmptyMovieClip(“container”, 1).drawSquare();[/AS]  
and it will draw the square in the clip “container”

I don’t know the exact problem in this case, and I don’t have time to figure it out right now.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 1, 2003, 11:53pm UTC](https://forum.kirupa.com/t/prototyping-textfields/17086/4 "2003-04-01T23:53:54Z")

</div>

Yeah Lost I think it was from you that I picked up the whole ‘attaching it to the end bit’ method. Hmm I have a feeling its something to do with: this.\_parent[newName]. reference. Anyway thanks guys, if you come up with anything else I would be glad to know 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 2, 2003, 2:33am UTC](https://forum.kirupa.com/t/prototyping-textfields/17086/5 "2003-04-02T02:33:41Z")

</div>

well no such luck with creating a prototype of TextField, but I figured since createTextField makes the textfield the ‘child’ of the movie clip maybe I could initialise TextFields with a MovieClip prototype as below

```auto

MovieClip.prototype.buildLabel = function(i) {
	this.createTextField("myTextBox", i+1000, _parent._x-7, _parent._y-5, 15, 10);
	trace("prototype buildLabel");
	this.myTextBox.border = true;
	this.myTextBox.type = "input";
	this.myTextBox.text = "2345";
	this.myTextBox.maxChars = "4";
	this.myTextBox.setTextFormat(labelFormat);
}

```

It works, but is it possible to do the same with a TextField type prototype. :-\

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 2, 2003, 3:13am UTC](https://forum.kirupa.com/t/prototyping-textfields/17086/6 "2003-04-02T03:13:54Z")

</div>

Hmm, Eyez was right actually.

I guess the daisychaining only works with MovieClip prototypes!

[AS]labelFormat = new TextFormat();  
labelFormat.font = “Verdana”;  
labelFormat.size = 10;  
labelFormat.color = 0xFF0000;  
labelFormat.bold = true;  
labelFormat.leftMargin = 0;  
labelFormat.rightMargin = 0;  
labelFormat.indent = 0;  
labelFormat.leading = 0;  
labelFormat.align = “center”;  
TextField.prototype.buildLabel = function(tempText) {  
trace(“prototype buildLabel”);  
this.border = true;  
this.type = “input”;  
this.text = tempText;  
this.maxChars = “2”;  
this.setTextFormat(labelFormat);  
};  
this.createTextField(“myTextField”, 1, 275, 200, 25, 15);  
myTextField.buildLabel(1);[/AS]

That works fine for me.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 2, 2003, 3:54am UTC](https://forum.kirupa.com/t/prototyping-textfields/17086/7 "2003-04-02T03:54:45Z")

</div>

Thanks Lost :). I dont know if you remember the drawing thing I was doing with the circles.Im using this to fix the ‘bug’ where the mouse seems to snap to the middle and turn into a cursor when dragging the circle. I figure if I do below then replace textfield with contents on release it may fix it! 🙂

```auto

function newPress() {
	trace("function newPress()")
	
	if(circleMode==true)
	{
		tempText = this._parent.myTextBox.text;
		trace("tempText: " + tempText);
		this._parent.removeTextField();
			
		//increase swapDepths() variable to switch to a higher depth
		_root.z += 2;
		//swapDepths() to the higher depth
		this._parent.swapDepths(_root.z);
		//startDrag(this, true);
		//instead of startDrag I just used the _xmouse and _ymouse position
		//reason: new method wouldn't work with startDrag()
					//if the mouse is over the canvas
		this.onEnterFrame = function() {
		
        //if the mouse is over the canvas
		//if (canvas.hitTest(this._xmouse, this._ymouse, true)) {
			if(canvas.hitTest(_parent._parent._xmouse, _parent._parent._ymouse, true)) {//25/3
			
				//"drag" the clip
				
				this._parent._x += (this._xmouse-_parent._parent._x)/2;//25/3
				this._parent._y += (this._ymouse-_parent._parent._y)/2;//25/3
			
			}
    	};
		
	}

}

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 2, 2003, 4:10am UTC](https://forum.kirupa.com/t/prototyping-textfields/17086/8 "2003-04-02T04:10:50Z")

</div>

Well as long as that textbox is in the center I don’t think there is a way to get rid of that cursor. I don’t think there is a useTextCursor for textboxes option like the useHandCursor option they have for buttons.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 2, 2003, 4:23am UTC](https://forum.kirupa.com/t/prototyping-textfields/17086/9 "2003-04-02T04:23:15Z")

</div>

well I’ll give my idea a whirl and will post the results. Its just a small usability issue, I mean after playing with it there seems only a very small hit area that can be pressed before the cursor comes up. I had someone else play they too commented on how annoying it was , oh well back to it

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 2, 2003, 4:29am UTC](https://forum.kirupa.com/t/prototyping-textfields/17086/10 "2003-04-02T04:29:28Z")

</div>

Thats why in the original version I created I allowed them to write their own label and then I applied it to the newly created clip via an unselectable dynamic text box.

But give your idea a whirl and let me know how it goes.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 2, 2003, 6:25am UTC](https://forum.kirupa.com/t/prototyping-textfields/17086/11 "2003-04-02T06:25:21Z")

</div>

Ok well here’s my solution, it stops the ‘snapping to cursor’. All I need to do is tighten the textbox, and make sure all indents=0 I guess.

My prototype

```auto

var tempText="";

MovieClip.prototype.buildLabel = function(addText) {
	this.createTextField("myTextBox", i+1000, _parent._x-7, _parent._y-5, 15, 10);
	trace("prototype buildLabel");
	this.myTextBox.border = true;
	this.myTextBox.type = "input";
	this.myTextBox.text = addText;
	this.myTextBox.maxChars = "4";
	this.myTextBox.setTextFormat(labelFormat);
}

```

My press and release functions

```auto

function newPress() {
	trace("function newPress()")
	
	if(nodeMode==true)
	{
		tempText = this._parent.myTextBox.text;
		this._parent.myTextBox.removeTextField();//store text in temp var to use later when reinitilise textfield
		
		
		_root.z += 2;
		//swapDepths() to the higher depth
		this._parent.swapDepths(_root.z);
		
		this.onEnterFrame = function() {
		
        //if the mouse is over the canvas
		//if (canvas.hitTest(this._xmouse, this._ymouse, true)) {
			if(canvas.hitTest(_parent._parent._xmouse, _parent._parent._ymouse, true)) {//25/3
			
				//"drag" the clip
				
				this._parent._x += (this._xmouse-_parent._parent._x)/2;//25/3
				this._parent._y += (this._ymouse-_parent._parent._y)/2;//25/3
			
			}
    	};
		
	}

}
function newRelease() {
	
	trace("function newRelease()");
			
			this._parent.buildLabel(tempText);//call prototype and pass temp var which has stored text

			//delete the onEnterFrame used in the onPress
			//increase swapDepths() variable to switch to a higher depth
			_root.z += 2;
			//bring circlei to the higher depth (used _parent as talking about whole clip)
			this._parent.swapDepths(_root.z);
			delete this.onEnterFrame;
	
}

```