RSS link icon

Create and style textfields with AS3 

 

In this Flash actionscript 3.0 tutorial you will see how to dynamically create a textfield on the stage, giving it properties and add some styling to it, all done with actionscripting.

 

dynamic textfield

 

As I just mentioned, this is an actionscript tutorial, so we do not need to do anything in design view, only thing I did was to change the stage height and width to 200 x 100 px.

 

This actionscript will contain 3 sections.

Section 1 where we create an instance of the textfield object.

In section 2 we will be adding properties to our new textfield, such as proportions, placement, border etc.

In the last section we will add some formatting to our text field, like color and font size.

 

I have typed in the code below for you to copy in, all my code descriptions will be inline with the code, and start with "//" as comments in flash actionscript.

 

// Creating the textfield object and naming it "myTextField"

var myTextField:TextField = new TextField();

 

// Here we add the new textfield instance to the stage with addchild()

addChild(myTextField);

 

// Here we define some properties for our text field, starting with giving it some text to contain.

// A width, x and y coordinates.

myTextField.text = "some text here!";

myTextField.width = 250;

myTextField.x = 25;

myTextField.y = 25;

 

// Here are some great properties to define, first one is to make sure the text is not selectable, then adding a border.

myTextField.selectable = false;

myTextField.border = true;

 

// This last property for our textfield is to make it autosize with the text, aligning to the left.

myTextField.autoSize = TextFieldAutoSize.LEFT;

 

//This is the section for our text styling, first we create a TextFormat instance naming it myFormat

var myFormat:TextFormat = new TextFormat();

 

// Giving the format a hex decimal color code

myFormat.color = 0xAA0000;

 

// Adding some bigger text size

myFormat.size = 24;

 

// Last text style is to make it italic.

myFormat.italic = true;

 

// Now the most important thing for the textformat, we need to add it to the myTextField with setTextFormat.

myTextField.setTextFormat(myFormat);

 

Thats it, test your flash movie, you should have a full customized textfield made in actionscript.

 


Admin Bob says: Sunday, July 06, 2008

hi chelsea, you could try emailing me the flash project and I will take a look at it for you.


chelsea says: Thursday, June 26, 2008

how would you create smooth scrolling
so that on a mouse_down, the scroll kept moving.

i tried using this:
// sets scrolling for the Up Scroller
var pressingUp:Boolean = false;
up_btn.addEventListener(MouseEvent.MOUSE_DOWN, scrollUp);
function scrollUp(myevent:MouseEvent):void{
pressingUp = true;
}

up_btn.addEventListener(MouseEvent.MOUSE_UP, letgoUp);
function letgoUp(myevent:MouseEvent):void{
pressingUp = false;
}

// sets scrolling for the Down Scroller
var pressingDown:Boolean = false;
down_btn.addEventListener(MouseEvent.MOUSE_UP, scrollDown);
function scrollDown(myevent:MouseEvent):void{
pressingDown = true;
}

down_btn.addEventListener(MouseEvent.MOUSE_UP, letgoDown);
function letgoDown(myevent:MouseEvent):void{
pressingDown = false;
}

//enterframe event for scroller

external_txt.addEventListener(Event.ENTER_FRAME, scroll);
function scroll(myevent:Event):void{
if(pressingDown==true){
external_txt.scrollV ++;
}
if(pressingUp==true){
external_txt.scrollV --;
}

}

but had problems.


Admin Bob says: Monday, June 16, 2008

hi prakash, send me an email with your problem explained, and I will try to answer, its a bit difficult through the comment section.


Admin Bob says: Monday, June 16, 2008

hi rahul, you do that from the properties panel, (by default its located and docked to the bottom of the screen in flash).


prakash says: Monday, June 16, 2008

sorry! with out writing a many new variables this is the concept.



prakash says: Monday, June 16, 2008

dear sir
i want to create multiple textfields with different name but with out writing a new var please tell me sir how to do
this is my mail id here: prakasha99@gmail.com


prakash says: Monday, June 16, 2008

Create and style textfields with AS3 ia very good ,till i not understood before reading this but now i under the role of connecting a format var to textfield
thank you very much sir/madam


rahul says: Monday, June 09, 2008

how to set the type to input type and get that input

   


 

 

 

 5

 
 
 

All rights reserved, Copyright 2008. Contact