00:00
00:00
Newgrounds Background Image Theme

plushyjay just joined the crew!

We need you on the team, too.

Support Newgrounds and get tons of perks for just $2.99!

Create a Free Account and then..

Become a Supporter!

AS: Text Fields

7,257 Views | 43 Replies
New Topic Respond to this Topic

AS: Text Fields 2005-11-12 08:59:28


AS: Main

Introduction
I hope this havent been done before but this tutorial is to learn you to make Dynamic Text Boxes using nothing but ActionScript.

Making The Text Box
First create a new Flash Document.
Press F9 to get to the Actions box.
Here type this code to make a text box:
_root.createTextField("t", 1, 100, 100, 88, 18);
What it does is that it makes a new Dynamic Text Box with a variable name of "t".
The text box is placed x=100 and y=100 and is width=88 and height=18.

Setting The Text Box' Properties
We got our Dynaimc Text Box called "t" and now we're gonna set its properties.
Start with place this piece of AS below the AS where we created the Text Box:
with(t){
}

This is where we will place the properties-codes.
The most important porperty-code is this:
text="hello";
This is what the text will be. Of course you can change "hello" to any text you want inside the text box.

Other Usefull Properties:
_alpha
The transparency value of a text field instance.

background
Indicates if the text field has a background fill.

backgroundColor
Indicates the color of the background fill.

border
Indicates if the text field has a border.

borderColor
Indicates the color of the border.

maxChars
The maximum number of characters that a text field can contain.

password
Indicates if a text field hides the input characters.

restrict
The set of characters that a user can enter into a text field.

textColor
The color of the current text in the text field.

type
Indicates whether a text field is an input text field or dynamic text field.

_visible
A Boolean value that determines whether a text field instance is hidden or visible.

_xmouse
The x coordinate of the cursor.

_ymouse
The y coordinate of the cursor.

Examples:

_root.createTextField("t", 1, 100, 100, 88, 18);
// Creates a new text box
onEnterFrame = function () {
// Using onClipEvent(enterFrame) so it will update the amount
_root.t.text = _xmouse+", "+_ymouse;
// Making so the text box will show where the mouse are
};

----------
Makes a text box where it shows wherever the mouse are
----------

_root.score=0;
// Making the variable "score" with a value of 0
_root.createTextField("t", 1, 100, 100, 160, 18);
// Creates the text box
with (t) {
// The text box' properties
textColor = 0xFF0000;
// Making the text red, not necesarry
}
onEnterFrame = function () {
// Using onClipEvent(enterFrame)
_root.t.text = "Score: "+_root.score;
// Making the text box show Score: 0
};

-------------
Making a text box with the text Score: 0
Can be used for games with score
-------------

//guywithhiscomp
(im from sweden so it may be a little misspelling in the text)


BBS Signature

Response to AS: Text Fields 2005-11-12 09:07:35


Nice one! Well explained. It can be useful for damage, xp, and things like that in games. You know, when a text that says "level up" comes up and fades out.


BBS Signature

Response to AS: Text Fields 2005-11-12 09:11:31


At 11/12/05 09:07 AM, -Toast- wrote: Nice one! Well explained.

Thanks :D

And I can include this to the list which i recently learned:
newline
Makes a new line in the text.

Example:
_root.createTextField("t", 1, 100, 100, 160, 36);
with (t) {
text = "Hi"+newline+"I'm cool";
}


BBS Signature

Response to AS: Text Fields 2005-11-12 09:30:13


That was actually good, considering you have only just started poting here.

you could go into more depth about more text field properties such as selectable and maxscroll, perhaps do anther with CSS formatting if you can. nice job

Response to AS: Text Fields 2005-11-12 09:40:57


nice thread, for a new poster. hope to see some good things out of you.
we need to have some talented people outnumbering the hopeless cases.

hope to see some more from you...


BBS Signature

Response to AS: Text Fields 2005-11-12 09:50:50


At 11/12/05 09:11 AM, guywithhiscomp wrote: And I can include this to the list which i recently learned:
newline
Makes a new line in the text.

Can't you also use \n?

Example: text = "hello\ngoodbye"


the events are merely fictional, written, directed, and acted out by all who create them

BBS Signature

Response to AS: Text Fields 2005-11-12 09:56:51


this is very neat. Also can be very useful. For games!

Response to AS: Text Fields 2005-11-12 10:34:50


At 11/12/05 09:50 AM, Starogre wrote: Example: text = "hello\ngoodbye"

Yes, you can. \n is better to use when line breaking strings, like your example here. That way you don't need to make the equation string+constant+string, it's all contained in one string. The newline constant, however, is better when you separate an object from an object, or a string from another object:

trace(myName+newline+myAge);
trace("My name is:"+newline+myName);


BBS Signature

Response to AS: Text Fields 2005-11-12 12:59:01


Oh, I see now :D


the events are merely fictional, written, directed, and acted out by all who create them

BBS Signature

Response to AS: Text Fields 2005-11-13 14:45:49


I wonder why the depth isn't working...

_root.health=0;
_root.createTextField("txt", 1, 68.5, 18.0, 35, 20);
with (txt) {
textColor = 0xFF0000;
}
onEnterFrame = function () {
_root.txt.text = "Health: "+_root.health;
};
txt.swapDepths(9991)


BBS Signature

Response to AS: Text Fields 2005-11-13 15:00:59


At 11/13/05 02:45 PM, -Toast- wrote: I wonder why the depth isn't working...

(...)
txt.swapDepths(9991)

The depth param works always. The thing that won't work is this swapDepths method, because swapDepths is a movieclip method, but not text field's. It's not very hard to code it, though: simply make a new one in the new depth, copy all properties from the original, then this.removeTextField(). But most surely it'd be easier for you to create that text field into a mc, and then swap the depth of that mc.

Response to AS: Text Fields 2005-11-13 15:06:43


I actually don't want to remove it. I wanted to make its depth higher than the duplicated movieClips.
Actually, I didn't notice I could set the depth when creating it. So now it's working.
_root.createTextField("t", 9999, 100, 100, 88, 18);


BBS Signature

Response to AS: Text Fields 2005-11-13 15:12:17


At 11/13/05 03:06 PM, -Toast- wrote: I actually don't want to remove it. I wanted to make its depth higher than the duplicated movieClips.

Believe me: if you had it duplicated in a higher depth, you'd want it (the first one) erased. Or else you'd have two different objects with the same instance name in the same path.

Bad idea.

Response to AS: Text Fields 2005-11-13 15:13:41


???
I'm not duplicating the textbox, I'm duplicating some ground MC.


BBS Signature

Response to AS: Text Fields 2005-11-13 15:29:25


At 11/13/05 03:13 PM, -Toast- wrote: ???
I'm not duplicating the textbox, I'm duplicating some ground MC.

And I've been explaining how would be the code for the method TextField.swapDepths if you wanted to make it. That's what all these removing textfields goes all about.

Response to AS: Text Fields 2005-11-21 17:02:16


can you set font size?


I have done the deed. Didst thou not hear a noise?

BBS Signature

Response to AS: Text Fields 2005-11-21 17:14:05


At 11/21/05 05:08 PM, SpamBurger wrote: Very nice but Im still confused on how some of these commands work. Like the "type" property, how do you use it? Same with the maxChars and stuff.

type:

_root.txtField.type = "Input"
_root.txtField.type = "Dynamic"

maxChars:

_root.txtField.maxChars = 7
now, you cant put any more than 7 characters in that text box
you could type a phone number, but try to include an area code...


BBS Signature

Response to AS: Text Fields 2005-11-21 23:06:26


At 11/21/05 05:02 PM, glompho wrote: can you set font size?

Yes, in two ways. First (and more complex) is to use a TextFormat object. Second is using HTML tags to set font size just like in HTML. This needs HTML tags to be enabled, and to assign it via ActionScript to the htmlText property of the text field (if set "from Stage", HTML tags appear as literals). Both allow to set font size to substrings of main string (be it either the text or htmlText property).

Response to AS: Text Fields 2005-11-22 05:00:53


to above ^^^^^^
can you post an example?
thanks


I have done the deed. Didst thou not hear a noise?

BBS Signature

Response to AS: Text Fields 2005-11-22 05:57:29


At 11/22/05 05:00 AM, glompho wrote: to above ^^^^^^
can you post an example?

I'll post two. We suppose that the text for the TextField is in string "TextString", and we'll set it all to 12 point size.

TextFormat:

myFormat=new TextFormat();
myFormat.size=12;
myTextField_txt.setTextFormat(myFormat);
myTextField_txt.text=TextString;

By tags:
myTextField_txt.htmlText="<FONT SIZE='12'>" +TextString+"</FONT>";

As you'll see, for little format modifications, is faster/easier to do it by HTML tags; you don't have to define an object nor to call a method, simply redefine the variable.

Response to AS: Text Fields 2005-11-22 10:49:05


Thanks!!


I have done the deed. Didst thou not hear a noise?

BBS Signature

Response to AS: Text Fields 2005-11-22 10:53:09


Yeah, ain't it neat with text fields in AS :D


BBS Signature

Response to AS: Text Fields 2005-11-22 11:03:53


sory i cant get it to work
could you post a full working example
i tryed VVVVVVVVVV

_root.createTextField("myTextField_txt", 1, 225, 200, 100, 180);
myTextField_txt.htmlText="<FONT SIZE='100'>" +"hello"+"</FONT>";
myTextField_txt.html = true
what am i doing wrong?
///

plz help


I have done the deed. Didst thou not hear a noise?

BBS Signature

Response to AS: Text Fields 2005-11-22 11:21:02


solved it
no
text.html = true

lol
thanks again


I have done the deed. Didst thou not hear a noise?

BBS Signature

Response to AS: Text Fields 2005-11-22 11:23:17


Your welcome :P


BBS Signature

Response to AS: Text Fields 2005-11-23 14:30:06


my typeing is terable sory
what i ment was the
text.html = true
was not above the rest
lol
wrong order
also you can store html in arrays :):):):)
text
i never knew...

_root.style=new Array("[b], "[i]", "[u]");

lol


I have done the deed. Didst thou not hear a noise?

BBS Signature

Response to AS: Text Fields 2005-11-23 14:35:48


At 11/23/05 02:30 PM, glompho wrote: also you can store html in arrays :):):):)

Nice to hear but you should take this to the AS: Arrays thread instead :P


BBS Signature

Response to AS: Text Fields 2005-11-23 21:05:09


At 11/23/05 02:30 PM, glompho wrote:

(...)

also you can store html in arrays :):):):)
text
i never knew...

_root.style=new Array("[b], "[i]", "[u]");

lol

lol :D What's this supposed to do?
HTML tags MUST have start and end, unless you want to make a damn mess. Besides, its correct syntax is:, not [b].

The good idea is to add a couple o' methods to the String object, like in:

String.prototype.toBold=function(){return ""+this+""}

which returns the string between bold tags w/o changing the original text. You only have to use the method like, say, the toUpperCase one, like that:

_root.T_txt.htmlText=("Hello").toUpperCase
().toBold();

You could use the array here to make a truly complicated method, that'd need like a binary code to mix up the styles. It's more clear to use separate methods for each style, they can pile up like the above.

Remember that prototype changes only apply to those objects created after the change...

Response to AS: Text Fields 2005-11-23 21:08:28


At 11/23/05 09:05 PM, ZYX3D wrote:

:(...)

String.prototype.toBold=function(){return ""+this+""}

which returns the string between bold tags w/o changing the original text. You only have to use the method like, say, the toUpperCase one, like that:

_root.T_txt.htmlText=("Hello").toUpperCase
().toBold();

Damn, I didn't count that I couldn't use literally the tags. To make the start tag, type <, then b, then >. The closing tag is < plus / plus b plus >. Delete the "plus" and thens and ,. KTX.

Response to AS: Text Fields 2005-11-24 05:31:52


&lt;that was a pretty good tut...