How to Change the Font in a Text Field Component on AS3

Changing the font in a text field component is sometimes done for effect in animations and games. That's because fonts can convey an emotion. Text fonts that resemble spooky characters such as ghosts and witches are often used to create a scary atmosphere. Fonts that resemble landscapes can be used to create an outdoor mood. Because you can change the font in a text field easily with the Flash programming language, ActionScript 3 (AS3), change the mood of Flash video games so they match the action in your game scenes.

Instructions

    • 1

      Start the Flash program. Click "Flash File(ActionScript 3.0)" from the splash window to create a new file for the AS3 Flash multiple-drop target project.

    • 2

      Select "Actions" from the "Window" menu on the main Flash menu bar to open the ActionScript 3 editor. Position your mouse cursor on the first line of the ActionScript 3 editor. Click your mouse button, and type in the code below to import the TextInput utility class so that the methods and properties of the TextInput class, the class that is used to create text field components, can be used:

      import fl.controls.TextInput;

    • 3

      Type the code starting at the next line of the ActionScript 3 editor to declare a text format instance to store the format code needed to format the TextInput text field component that will be created:

      var tf:TextFormat = new TextFormat();

      tf.color = 0x000000;

      tf.font = "Birch Std"

      tf.size = 20;

      tf.align = "center";

      tf.italic = true;

      The TextFormat instance in the code will set the text format of the object to which it is attached so that the TextInput field will have a white background color. It will display the text when entered into the TextInput field with a font of "Birch Std," a font size of 20 points, a style of italic and with alignment in the center of the field.

    • 4

      Type the code starting at the next line of the ActionScript 3 editor to create an instance of a TextInput component, apply the text formatting and place the TextInput component on the stage:

      var text_input_component:TextInput = new TextInput();

      addChild(text_input_component);

      text_input_component.setStyle("textFormat", tf);

      text_input_component.text = "This font is the " + tf.font;

      text_input_component.setSize(350, 50);

      text_input_component.move(100, 50);

      The first line of the code above creates an instance of the TextInput component named "text_input_component," places it on the stage with the "addChild" method, applies the text format with the "setStyle" method, places text in the component that will display the type of font the text is formatted with the ".text property, sets the width and height with the "setSize" method, and positions the component with the move method.

Learnify Hub © www.0685.com All Rights Reserved