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.
