Emanuele Feronato

Talking about Actionscript 3, Flash and Tutorials.

When I am looking for an interesting font for my web design, the first site I look at is dafont.com.

What I like of this site is the capability to preview the font I am going to use with a sample text.

We are going to build something like a font viewer with AS3, previewing the fonts currently installed in our computer.

This script is based on a tip found on Cristalab. I suggest to read this site if you can read spanish.

In order to do this (learning spanish? No! The font browser) we need three object on the stage: an input text area instanced as sampletext, where we will write the text to be displayed in the selected font, a List User Interface component instanced as font_list, that we will populate with all fonts, and a dynamic text instanced as displayer to show the result.

Then, in the first frame of the movie timeline, this is the actionscript:

var fonts:Array = Font.enumerateFonts(true).sortOn("fontName");
var fonts_array:Array = new Array();
for (var i:int = 0; i < fonts.length; i++) {
	fonts_array.push(new String(fonts[i].fontName));
}
font_list.dataProvider = new DataProvider(fonts_array);
font_list.addEventListener(Event.CHANGE, change_font);
sampletext.addEventListener(Event.CHANGE,change_text);
function change_font(event:Event):void {
	var font:TextFormat = new TextFormat();
	font.font = new String(font_list.selectedItem.data);
	displayer.setTextFormat(font);
}
function change_text(event:Event) {
	displayer.text = sampletext.text;
}

Line 1: Creation of an array called fonts with all currently available embedded fonts, sorted by font name.

Line 2: Declaring a new array called fonts_array

Line 3: Loop scanning all fonts array. Notice that with AS3 in the for conditions you must declare the index variable, and this code

for (i = 0; i < fonts.length; i++) {}

that worked fine in AS2, does not work anymore with AS3

Line 4: Pushing the ith fontName property of the fonts array into the fonts_array array. What a mess!

I am just passing in the array created at line 2 only the fontName property of the font contained in the fonts array created at line 1.

I need to do this because a font has three properties: fontName, fontStyle and fontType, and I need only the first one.

Line 6: Populating the list with the content of the fonts_array array. Now we have a list with all font names

Line 7: Adding a listener to the list that will call the change_font function when I select a list element

Line 8: Adding a listener to input text that will call the change_text function when I change the text in the input text area

Line 9: Beginning of the function to be executed when I select an item from the list

Line 10: Declaration of a new TextFormat class called font. The TextFormat class is used to stylize both static and dynamic text fields.

Line 11: Assigning to the font TexFormat font the value of the selected item in the list. In this way I am defining the font of the font TextFormat

Line 12: Applying the text format to the displayer text area

Line 14: Beginning of the function to be executed when I change the text in the input text area

Line 15: Changing the text in the displayer text area according to the text actually in the input text area

And that's it...

Download the source code and enhance it.