Create a font browser with Flash AS3
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.
Tell me what do you think about this post. I'll write better and better entries.
(1 votes, average: 1 out of 5)
Loading ...They can be easily customized to meet the unique requirements of your project.
7 Responses to “Create a font browser with Flash AS3”
Leave a Reply
-
Latest MochiAds Games
nice.
I noticed that some of the fonts do not display. Any of the Wingdings and a few other fonts I have installed.
Jerry: I’ve created a Flex AIR app using this code, and am getting the same issue… Emanuele, any ideas??
nothing at the moment…
This isn’t working for me. I put the items on the stage and named them as you said, copied your code in, and I get an error when I test it:
1180: Call to a possibly undefined method DataProvider.
Any chance you could post a working FLA, as I’m very interested in getting something like this working within a larger app.
I am creating a website for our family-owned business and I want to list the fonts we have available. I want to have a listing like the one you created above but have the list contain the fonts that we have not the ones on the user’s computer. I assume I have to change the first couple lines pointing to a folder on the server containing our fonts. How would I accomplish this? Thanks - Jody
[...] was browsing the web today and came across a blog post at Emanuele Feronato, Create a font browser with Flash AS3 and decided to work with the code to produce a Air version of the viewer mainly because someone at [...]