Forum Topic: AS: Text Fields

(2,988 views • 44 replies)

This topic is 2 pages long. [ 1 | 2 ]

<< < > >>
None

GuyWithHisComp

Reply To Post Reply & Quote

Posted at: 11/12/05 08:59 AM

GuyWithHisComp LIGHT LEVEL 27

Sign-Up: 11/10/05

Posts: 4,008

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

None

Toast

Reply To Post Reply & Quote

Posted at: 11/12/05 09:07 AM

Toast DARK LEVEL 09

Sign-Up: 04/02/05

Posts: 8,919

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.


None

GuyWithHisComp

Reply To Post Reply & Quote

Posted at: 11/12/05 09:11 AM

GuyWithHisComp LIGHT LEVEL 27

Sign-Up: 11/10/05

Posts: 4,008

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

None

T-H

Reply To Post Reply & Quote

Posted at: 11/12/05 09:30 AM

T-H LIGHT LEVEL 39

Sign-Up: 01/07/04

Posts: 4,893

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


None

authorblues

Reply To Post Reply & Quote

Posted at: 11/12/05 09:40 AM

authorblues FAB LEVEL 12

Sign-Up: 06/21/05

Posts: 6,360

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...

GENERATION 1-i: The first time you see this, copy it into your sig on any forum. Square it, and then add i to the generation.

BBS Signature

None

Starogre

Reply To Post Reply & Quote

Posted at: 11/12/05 09:50 AM

Starogre NEUTRAL LEVEL 18

Sign-Up: 05/08/04

Posts: 1,719

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"

BBS Signature

None

Blaze

Reply To Post Reply & Quote

Posted at: 11/12/05 09:56 AM

Blaze LIGHT LEVEL 22

Sign-Up: 08/04/05

Posts: 6,989

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


None

Rantzien

Reply To Post Reply & Quote

Posted at: 11/12/05 10:34 AM

Rantzien FAB LEVEL 15

Sign-Up: 01/27/05

Posts: 3,426

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

None

Starogre

Reply To Post Reply & Quote

Posted at: 11/12/05 12:59 PM

Starogre NEUTRAL LEVEL 18

Sign-Up: 05/08/04

Posts: 1,719

Oh, I see now :D

BBS Signature

None

Toast

Reply To Post Reply & Quote

Posted at: 11/13/05 02:45 PM

Toast DARK LEVEL 09

Sign-Up: 04/02/05

Posts: 8,919

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)


None

ZYX3D

Reply To Post Reply & Quote

Posted at: 11/13/05 03:00 PM

ZYX3D DARK LEVEL 21

Sign-Up: 07/31/04

Posts: 437

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.


None

Toast

Reply To Post Reply & Quote

Posted at: 11/13/05 03:06 PM

Toast DARK LEVEL 09

Sign-Up: 04/02/05

Posts: 8,919

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


None

ZYX3D

Reply To Post Reply & Quote

Posted at: 11/13/05 03:12 PM

ZYX3D DARK LEVEL 21

Sign-Up: 07/31/04

Posts: 437

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.


None

Toast

Reply To Post Reply & Quote

Posted at: 11/13/05 03:13 PM

Toast DARK LEVEL 09

Sign-Up: 04/02/05

Posts: 8,919

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


None

ZYX3D

Reply To Post Reply & Quote

Posted at: 11/13/05 03:29 PM

ZYX3D DARK LEVEL 21

Sign-Up: 07/31/04

Posts: 437

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.


Questioning

glomph

Reply To Post Reply & Quote

Posted at: 11/21/05 05:02 PM

glomph NEUTRAL LEVEL 10

Sign-Up: 06/16/05

Posts: 229

can you set font size?

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

BBS Signature

None

SpamBurger

Reply To Post Reply & Quote

Posted at: 11/21/05 05:08 PM

SpamBurger NEUTRAL LEVEL 15

Sign-Up: 07/12/05

Posts: 4,747

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.

"However, the game received only two orders, one of which Molyneux speculated was from his mother." -Peter Molyneux's first game The Entrepreneur


None

authorblues

Reply To Post Reply & Quote

Posted at: 11/21/05 05:14 PM

authorblues FAB LEVEL 12

Sign-Up: 06/21/05

Posts: 6,360

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...

GENERATION 1-i: The first time you see this, copy it into your sig on any forum. Square it, and then add i to the generation.

BBS Signature

None

ZYX3D

Reply To Post Reply & Quote

Posted at: 11/21/05 11:06 PM

ZYX3D DARK LEVEL 21

Sign-Up: 07/31/04

Posts: 437

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).


None

glomph

Reply To Post Reply & Quote

Posted at: 11/22/05 05:00 AM

glomph NEUTRAL LEVEL 10

Sign-Up: 06/16/05

Posts: 229

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

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

BBS Signature

None

ZYX3D

Reply To Post Reply & Quote

Posted at: 11/22/05 05:57 AM

ZYX3D DARK LEVEL 21

Sign-Up: 07/31/04

Posts: 437

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.


Happy

glomph

Reply To Post Reply & Quote

Posted at: 11/22/05 10:49 AM

glomph NEUTRAL LEVEL 10

Sign-Up: 06/16/05

Posts: 229

Thanks!!

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

BBS Signature

None

GuyWithHisComp

Reply To Post Reply & Quote

Posted at: 11/22/05 10:53 AM

GuyWithHisComp LIGHT LEVEL 27

Sign-Up: 11/10/05

Posts: 4,008

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

BBS Signature

None

glomph

Reply To Post Reply & Quote

Posted at: 11/22/05 11:03 AM

glomph NEUTRAL LEVEL 10

Sign-Up: 06/16/05

Posts: 229

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

None

glomph

Reply To Post Reply & Quote

Posted at: 11/22/05 11:21 AM

glomph NEUTRAL LEVEL 10

Sign-Up: 06/16/05

Posts: 229

solved it
no
text.html = true

lol
thanks again

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

BBS Signature

None

GuyWithHisComp

Reply To Post Reply & Quote

Posted at: 11/22/05 11:23 AM

GuyWithHisComp LIGHT LEVEL 27

Sign-Up: 11/10/05

Posts: 4,008

Your welcome :P

BBS Signature

None

glomph

Reply To Post Reply & Quote

Posted at: 11/23/05 02:30 PM

glomph NEUTRAL LEVEL 10

Sign-Up: 06/16/05

Posts: 229

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

None

GuyWithHisComp

Reply To Post Reply & Quote

Posted at: 11/23/05 02:35 PM

GuyWithHisComp LIGHT LEVEL 27

Sign-Up: 11/10/05

Posts: 4,008

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

None

ZYX3D

Reply To Post Reply & Quote

Posted at: 11/23/05 09:05 PM

ZYX3D DARK LEVEL 21

Sign-Up: 07/31/04

Posts: 437

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...


None

ZYX3D

Reply To Post Reply & Quote

Posted at: 11/23/05 09:08 PM

ZYX3D DARK LEVEL 21

Sign-Up: 07/31/04

Posts: 437

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.


All times are Eastern Standard Time (GMT -5) | Current Time: 04:19 PM

<< Back

This topic is 2 pages long. [ 1 | 2 ]

<< < > >>
You need a Grounds Gold Account to post on the NG BBS! If you don't have one, click here to sign up now! It's fast, free, and easy — and opens up tons of great NG features!