ActionScript Examples

Getting started with the TLFTextField class in ActionScript 3.0 and Flash CS5

Peter deHaan — Tue, 04 May 2010 07:09:59 +0000

The following examples show how you can get started with the TLFTextField class in ActionScript in Adobe Flash Professional CS5.

The following example(s) require Adobe Flash Professional CS5.
Click here to download the Adobe Flash Professional trial.

Download ZIP

The following example shows how you can create a simple TLFTextField instance using ActionScript:

import fl.text.TLFTextField;
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.x = tlfTxt.y = 20;
addChild(tlfTxt);

If you want to set word wrap on a TLFTextField instance, you can set the Boolean wordWrap property, as seen in the following example:

import fl.text.TLFTextField;
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.x = tlfTxt.y = 20;
addChild(tlfTxt);

By default a TLFTextField instance is 100px by 100px. If you want to automatically resize the TLFTextField instance to the measured text width/height, you can set the autoSize property to one of the static constants from the flash.text.TextFieldAutoSize class, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 20;
addChild(tlfTxt);

If you want to set rich text formatting, you can set the htmlText instead of the text format, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.htmlText = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 20;
addChild(tlfTxt);

If you want to set a custom text format to set the font color, face, size, etc., you can set the defaultTextFormat to a TextFormat object, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
 
var fmt:TextFormat = new TextFormat();
fmt.color = 0xFF0000; // red
fmt.font = "Arial";
fmt.size = 32;
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.defaultTextFormat = fmt;
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.width = 300;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);

The defaultTextFormat property must be set before the text property.

If you want to apply a custom text format to all characters or a range of characters in a TLFTextField, you can use the setTextFormat() method, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
 
var fmt:TextFormat = new TextFormat();
fmt.color = 0xFF0000; // red
fmt.font = "Arial";
fmt.size = 32;
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.setTextFormat(fmt);
tlfTxt.wordWrap = true;
tlfTxt.width = 300;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);

The setTextFormat() method must be called after setting the text property.

To set a custom text format to a range of characters, you can pass the optional start index and end index to the setTextFormat() method, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
 
var defaultFmt:TextFormat = new TextFormat();
defaultFmt.font = "Arial";
defaultFmt.size = 32;
 
var redFmt:TextFormat = new TextFormat();
redFmt.color = 0xFF0000; // red
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.defaultTextFormat = defaultFmt;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.setTextFormat(redFmt, 4, 9);
tlfTxt.wordWrap = true;
tlfTxt.width = 300;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);

To set the text alpha on the TLFTextField instance you can set the alpha property, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
tlfTxt.alpha = 0.3;
addChild(tlfTxt);

Unlike the TextField class which only supports setting text alpha on a TextField with an embedded font, the TLFTextField class supports setting text alpha on device (non-embedded) fonts.

To set the text rotation on the TLFTextField instance you can set the rotation property, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
tlfTxt.rotation = 15;
addChild(tlfTxt);

Unlike the TextField class which only supports setting text rotation on a TextField with an embedded font, the TLFTextField class supports setting text retotation on device (non-embedded) fonts.

Similar to setting the htmlText property, setting the tlfMarkup allows you to set rich text formatting on the TLFTextField instance, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
 
var tFlow:String = "The quick brown fox jumps over the lazy dog.";
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.tlfMarkup = tFlow;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);

Or, if you want to apply some more complex formatting (such as hyperlinks, bold, italics, superscript/subscript, or strike through text, you can use a more complex TextFlow string object, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
import flash.events.Event;
 
var tFlow:String = "The quick brown fox jumps over the lazy dog.";
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.tlfMarkup = tFlow;
tlfTxt.wordWrap = true;
tlfTxt.width = 300;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);

Or you can load a TextFlow markup string dynamically at runtime using ActionScript, as seen in the following example:

import fl.text.TLFTextField;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequest;
import flash.text.TextFieldAutoSize;
 
var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.wordWrap = true;
tlfTxt.width = 300;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);
 
var ldr:URLLoader = new URLLoader();
ldr.dataFormat = URLLoaderDataFormat.TEXT;
ldr.addEventListener(Event.COMPLETE, ldr_complete);
ldr.load(new URLRequest("markup.xml"));
 
function ldr_complete(evt:Event):void {
	tlfTxt.tlfMarkup = ldr.data;
}

And the TLF markup file, markup.xml, is as follows:

 xmlns='http://ns.adobe.com/textLayout/2008' fontFamily='Arial' fontSize='24'>
>The  fontStyle='italic'>quick>  fontWeight='bold'>brown>  lineThrough='true'>fox>  color='#FF0000'>jumps>  baselineShift='superscript'>over>  typographicCase='uppercase'>the>  href='http://actionscriptexamples.com/'>lazy> dog.>
>

Download ZIP

Adding tick marks to a Slider control in Flash using ActionScript 3.0

Peter deHaan — Sat, 07 Mar 2009 08:26:17 +0000

The following example shows how you can add tick marks to a Flash/ActionScript 3.0 Slider control by setting the tickInterval property.

Full code after the jump.

// ActionScript 3.0
/**
 * Requires:
 * - Slider control in the Flash library.
 */
import fl.controls.Slider;
 
var slider:Slider = new Slider();
slider.tickInterval = 1;
slider.move(20, 20);
addChild(slider);

Creating a vertical Slider control in Flash using ActionScript 3.0

Peter deHaan — Thu, 05 Mar 2009 15:10:29 +0000

The following example shows how you can create a horizontal or vertical Slider control in Flash using ActionScript 3.0 by setting the Slider control’s direction property to one of the static constants in the fl.controls.SliderDirection class (SliderDirection.HORIZONTAL or SliderDirection.VERTICAL).

Full code after the jump.

/** THIS EXAMPLE REQUIRES A COMBOBOX AND SLIDER COMPONENT IN YOUR FLASH LIBRARY */
// ActionScript 3.0
import fl.controls.ComboBox;
import fl.controls.Slider;
import fl.controls.SliderDirection;
import fl.data.DataProvider;
 
var dp:DataProvider = new DataProvider();
dp.addItem({label:SliderDirection.HORIZONTAL});
dp.addItem({label:SliderDirection.VERTICAL});
 
var comboBox:ComboBox = new ComboBox();
comboBox.dataProvider = dp;
comboBox.selectedIndex = 1;
comboBox.move(20, 20);
comboBox.addEventListener(Event.CHANGE, comboBox_change);
addChild(comboBox);
 
var slider:Slider = new Slider();
slider.direction = SliderDirection.VERTICAL;
slider.move(20, 50);
addChild(slider);
 
function comboBox_change(evt:Event):void {
    slider.direction = comboBox.selectedItem.label;
}

Creating a custom context menu item in Flash using ActionScript 3.0

Peter deHaan — Thu, 05 Mar 2009 08:23:10 +0000

The following example shows how you can add a custom context menu item to a Sprite object by setting the Sprite’s contextMenu property to a ContextMenu object.

Full code after the jump.

// ActionScript 3.0
var red_cmi:ContextMenuItem = new ContextMenuItem("red");
red_cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, cmi_menuItemSelect);
 
var cm:ContextMenu = new ContextMenu();
cm.customItems.push(red_cmi);
cm.hideBuiltInItems();
 
var spr:Sprite = new Sprite();
spr.contextMenu = cm;
spr.graphics.beginFill(0x000000);
spr.graphics.drawRect(0, 0, 120, 90);
spr.graphics.endFill();
spr.x = 10;
spr.y = 10;
addChild(spr);
 
function cmi_menuItemSelect(evt:ContextMenuEvent):void {
    spr.graphics.clear();
    spr.graphics.beginFill(0xFF0000);
    spr.graphics.drawRect(0, 0, 120, 90);
    spr.graphics.endFill();
}

Rotating a Sprite object around its x-axis in Flash using ActionScript 3.0 and Flash Player 10

Peter deHaan — Fri, 27 Feb 2009 03:45:27 +0000

The following example shows how you can 3D rotate a Sprite object around its x-axis with Flash, ActionScript 3.0, and Flash Player 10 by setting the object’s rotationX property.

Full code after the jump.

// http://actionscriptexamples.com/2009/02/26/rotating-a-sprite-object-around-its-x-axis-in-flash-using-actionscript-30-and-flash-player-10/
// ActionScript 3.0
/** Requires:
 *  - Slider control in Flash library.
 *  - Publish for Flash Player 10.
 */
 
[SWF(width="400", height="300")]
 
import fl.controls.Slider;
import fl.controls.SliderDirection;
import fl.events.SliderEvent;
 
var slider:Slider = new Slider();
slider.direction = SliderDirection.HORIZONTAL;
slider.minimum = 0;
slider.maximum = 360;
slider.value = 45;
slider.tickInterval = 45;
slider.snapInterval = 1;
slider.liveDragging = true;
slider.addEventListener(SliderEvent.CHANGE, slider_change);
slider.move(10, 10);
addChild(slider);
 
var spr:Sprite = new Sprite();
spr.graphics.lineStyle(2, 0xFF0000);
spr.graphics.drawRect(0, 0, 100, 80);
spr.x = Math.round((stage.stageWidth - spr.width)/2);
spr.y = Math.round((stage.stageHeight - spr.height)/2);
spr.rotationX = 45;
addChild(spr);
 
function slider_change(evt:SliderEvent):void {
    spr.rotationX = evt.value;
}

Detecting when the user changes the color in a ColorPicker control in Flash using ActionScript 3.0

Peter deHaan — Sun, 28 Dec 2008 16:03:20 +0000

The following example shows how you can detect when the selected color in a Flash ActionScript 3.0 ColorPicker component by listening for the change event (using the static ColorPickerEvent.CHANGE constant).

Full code after the jump.

// ActionScript 3.0
/* Requires:
 * - ColorPicker control in the Flash library
 */
import fl.controls.ColorPicker;
import fl.events.ColorPickerEvent;
 
var bg:Sprite = new Sprite();
bg.graphics.beginFill(0x000000);
bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
bg.graphics.endFill();
addChild(bg);
 
var colorPicker:ColorPicker = new ColorPicker();
colorPicker.addEventListener(ColorPickerEvent.CHANGE, colorPicker_change);
colorPicker.move(10, 10);
addChild(colorPicker);
 
function colorPicker_change(evt:ColorPickerEvent):void {
    trace(evt.color, colorPicker.textField.text);
    bg.graphics.beginFill(evt.color); // 16711680 #ff0000
    bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
    bg.graphics.endFill();
}

Getting the currently selected color as a hexadecimal value on a ColorPicker control in Flash using ActionScript 3.0

Peter deHaan — Tue, 23 Dec 2008 22:33:36 +0000

The following example shows how you can get the currently selected color as a hexadecimal value on a Flash ActionScript 3.0 ColorPicker component by using the read-only hexValue property.

Full code after the jump.

// ActionScript 3.0
/* Requires:
 * - ColorPicker control in Flash library
 * - Label control in Flash library
 */
import fl.controls.ColorPicker;
import fl.controls.Label;
import fl.events.ColorPickerEvent;
 
var colorPicker:ColorPicker = new ColorPicker();
colorPicker.addEventListener(ColorPickerEvent.CHANGE, colorPicker_change);
colorPicker.move(10, 10);
addChild(colorPicker);
 
var lbl:Label = new Label();
lbl.text = colorPicker.hexValue;
lbl.move(10, 40);
addChild(lbl);
 
function colorPicker_change(evt:ColorPickerEvent):void {
    lbl.text = colorPicker.hexValue; // ff0000
}

Toggling the text field on the ColorPicker control in Flash using ActionScript 3.0

Peter deHaan — Tue, 23 Dec 2008 18:46:23 +0000

The following example shows how you can toggle the text field on the Flash ActionScript 3.0 ColorPicker control by setting the Boolean showTextField property.

Full code after the jump.

// ActionScript 3.0
/* Requires:
 * - CheckBox control in Flash library
 * - ColorPicker control in Flash library
 */
import fl.controls.CheckBox;
import fl.controls.ColorPicker;
 
var checkBox:CheckBox = new CheckBox();
checkBox.selected = true;
checkBox.label = "showTextField";
checkBox.addEventListener(Event.CHANGE, checkBox_change);
checkBox.textField.autoSize = TextFieldAutoSize.LEFT;
checkBox.move(10, 10);
addChild(checkBox);
 
var colorPicker:ColorPicker = new ColorPicker();
colorPicker.move(10, 40);
addChild(colorPicker);
 
function checkBox_change(evt:Event):void {
    colorPicker.close();
    colorPicker.showTextField = checkBox.selected;
    colorPicker.open();
}

Creating a vertical Slider control in Flash using ActionScript 3.0

Peter deHaan — Tue, 23 Dec 2008 18:31:24 +0000

The following example shows how you can create a vertical Flash ActionScript 3.0 Slider component by setting the direction property to one of the static constants in the SliderDirection class.

Full code after the jump.

// ActionScript 3.0
/* Requires:
 * - Slider control in Flash library
 */
import fl.controls.Slider;
import fl.controls.SliderDirection;
 
var slider:Slider = new Slider();
slider.direction = SliderDirection.VERTICAL;
slider.tickInterval = 1;
slider.move(20, 10);
addChild(slider);

Setting the number of columns on a ColorPicker control in Flash using ActionScript 3.0

Peter deHaan — Tue, 23 Dec 2008 18:21:35 +0000

The following example shows how you can set the number of columns on a Flash ActionScript 3.0 ColorPicker control’s pop up menu by setting the columnCount style.

Full code after the jump.

// ActionScript 3.0
/* Requires:
 * - ColorPicker control in Flash library
 * - Slider control in Flash library
 */
import fl.controls.ColorPicker;
import fl.controls.Slider;
import fl.events.SliderEvent;
 
var slider:Slider = new Slider();
slider.minimum = 9;
slider.maximum = 36;
slider.value = 18;
slider.snapInterval = 1;
slider.tickInterval = 1;
slider.liveDragging = true;
slider.addEventListener(SliderEvent.CHANGE, slider_change);
slider.width = 200;
slider.move(10, 10);
addChild(slider);
 
var colorPicker:ColorPicker = new ColorPicker();
colorPicker.move(10, 30);
addChild(colorPicker);
 
function slider_change(evt:SliderEvent):void {
    colorPicker.close();
    colorPicker.setStyle("columnCount", evt.value);
    colorPicker.open();
}