Be a Supporter!

AS: Text Fields

  • 4,567 Views
  • 43 Replies
New Topic Respond to this Topic
GuyWithHisComp
GuyWithHisComp
  • Member since: Nov. 10, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
AS: Text Fields Nov. 12th, 2005 @ 08:59 AM Reply

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
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: Text Fields Nov. 12th, 2005 @ 09:07 AM Reply

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
GuyWithHisComp
GuyWithHisComp
  • Member since: Nov. 10, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS: Text Fields Nov. 12th, 2005 @ 09:11 AM Reply

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
T-H
T-H
  • Member since: Jan. 7, 2004
  • Offline.
Forum Stats
Member
Level 40
Blank Slate
Response to AS: Text Fields Nov. 12th, 2005 @ 09:30 AM Reply

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

authorblues
authorblues
  • Member since: Jun. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS: Text Fields Nov. 12th, 2005 @ 09:40 AM Reply

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
Starogre
Starogre
  • Member since: May. 8, 2004
  • Offline.
Forum Stats
Member
Level 18
Artist
Response to AS: Text Fields Nov. 12th, 2005 @ 09:50 AM Reply

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
Blaze
Blaze
  • Member since: Aug. 4, 2005
  • Offline.
Forum Stats
Member
Level 22
Programmer
Response to AS: Text Fields Nov. 12th, 2005 @ 09:56 AM Reply

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

Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Text Fields Nov. 12th, 2005 @ 10:34 AM Reply

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
Starogre
Starogre
  • Member since: May. 8, 2004
  • Offline.
Forum Stats
Member
Level 18
Artist
Response to AS: Text Fields Nov. 12th, 2005 @ 12:59 PM Reply

Oh, I see now :D


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

BBS Signature
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: Text Fields Nov. 13th, 2005 @ 02:45 PM Reply

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
ZYX3D
ZYX3D
  • Member since: Jul. 31, 2004
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Text Fields Nov. 13th, 2005 @ 03:00 PM Reply

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.

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: Text Fields Nov. 13th, 2005 @ 03:06 PM Reply

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
ZYX3D
ZYX3D
  • Member since: Jul. 31, 2004
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Text Fields Nov. 13th, 2005 @ 03:12 PM Reply

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.

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: Text Fields Nov. 13th, 2005 @ 03:13 PM Reply

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


BBS Signature
ZYX3D
ZYX3D
  • Member since: Jul. 31, 2004
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Text Fields Nov. 13th, 2005 @ 03:29 PM Reply

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.

glomph
glomph
  • Member since: Jun. 16, 2005
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS: Text Fields Nov. 21st, 2005 @ 05:02 PM Reply

can you set font size?


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

BBS Signature
authorblues
authorblues
  • Member since: Jun. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS: Text Fields Nov. 21st, 2005 @ 05:14 PM Reply

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
ZYX3D
ZYX3D
  • Member since: Jul. 31, 2004
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Text Fields Nov. 21st, 2005 @ 11:06 PM Reply

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

glomph
glomph
  • Member since: Jun. 16, 2005
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS: Text Fields Nov. 22nd, 2005 @ 05:00 AM Reply

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


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

BBS Signature
ZYX3D
ZYX3D
  • Member since: Jul. 31, 2004
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Text Fields Nov. 22nd, 2005 @ 05:57 AM Reply

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.

glomph
glomph
  • Member since: Jun. 16, 2005
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS: Text Fields Nov. 22nd, 2005 @ 10:49 AM Reply

Thanks!!


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

BBS Signature
GuyWithHisComp
GuyWithHisComp
  • Member since: Nov. 10, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS: Text Fields Nov. 22nd, 2005 @ 10:53 AM Reply

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


BBS Signature
glomph
glomph
  • Member since: Jun. 16, 2005
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS: Text Fields Nov. 22nd, 2005 @ 11:03 AM Reply

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
glomph
glomph
  • Member since: Jun. 16, 2005
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS: Text Fields Nov. 22nd, 2005 @ 11:21 AM Reply

solved it
no
text.html = true

lol
thanks again


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

BBS Signature
GuyWithHisComp
GuyWithHisComp
  • Member since: Nov. 10, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS: Text Fields Nov. 22nd, 2005 @ 11:23 AM Reply

Your welcome :P


BBS Signature
glomph
glomph
  • Member since: Jun. 16, 2005
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS: Text Fields Nov. 23rd, 2005 @ 02:30 PM Reply

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
GuyWithHisComp
GuyWithHisComp
  • Member since: Nov. 10, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS: Text Fields Nov. 23rd, 2005 @ 02:35 PM Reply

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
ZYX3D
ZYX3D
  • Member since: Jul. 31, 2004
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Text Fields Nov. 23rd, 2005 @ 09:05 PM Reply

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

ZYX3D
ZYX3D
  • Member since: Jul. 31, 2004
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Text Fields Nov. 23rd, 2005 @ 09:08 PM Reply

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.

shazwoogle
shazwoogle
  • Member since: Sep. 27, 2004
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: Text Fields Nov. 24th, 2005 @ 05:31 AM Reply

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