Create a font browser with Flash AS3

May 21, 2008 • Actionscript 3, Flash, Tutorials by Emanuele Feronato • 21 Comments

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 4.14 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 21 comments

  1. Kesh

    on May 22, 2008 at 1:31 am

    nice.

  2. Jerry

    on May 22, 2008 at 11:02 pm

    I noticed that some of the fonts do not display. Any of the Wingdings and a few other fonts I have installed.

  3. Osh

    on May 26, 2008 at 12:46 pm

    Jerry: I’ve created a Flex AIR app using this code, and am getting the same issue… Emanuele, any ideas??

  4. Emanuele Feronato

    on May 26, 2008 at 12:59 pm

    nothing at the moment…

  5. Gwyn

    on June 11, 2008 at 11:36 am

    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.

  6. Jody

    on July 14, 2008 at 5:44 pm

    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

  7. Air Font Viewer | Error On Line 1

    on July 30, 2008 at 3:12 am

    [...] 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 [...]

  8. Rick

    on September 20, 2008 at 2:28 pm

    where exactly does this ap get the fonts from? it seems like it justs take the ones I have on my laptop.

  9. marcandre

    on November 11, 2008 at 3:55 pm

    What about the font like webdongs and wingdings ? Why are they displayed as simple arial. I’d like to use this to find the symbol i’m seraching for in these font, but they are not displayed but in arial.

  10. christina

    on September 30, 2009 at 4:45 am

    this is awesome!! thanks so much for posting! you can add code to this for font color change and size right???

  11. Jawn

    on November 8, 2009 at 2:21 pm

    Thanks! This is perfect for my AIR VJ App :D

  12. jaxx

    on January 23, 2010 at 7:19 am

    I COPIED THIS TO MY FLA AND ALL MY BUTTONS DISSAPEARED.. WHAT THE HELL ????

    I understand as3 is a bug on itself but this is borderline viruslike behaviour!

    I cant restore my buttons or any other standard components, and some assets folder keeps popping up.. now i have to replace the components manually on the entire site…

    I saved by mistake and last backup is 5 hours old.. o my god am i angry now…………..

  13. alex

    on February 11, 2010 at 3:51 am

    if you get that error, just put:
    import fl.data.DataProvider;
    at the beginning of your code

  14. Stefan

    on March 25, 2010 at 3:54 pm

    I tried your code and its fantastic! :D I wondered if its possible to use and list the .swf embedde font files and not the system. Anyone no how to go about that?

  15. santosh

    on April 13, 2010 at 9:08 am

    Thanks a lot,understood text event change in a great way.Keep up this spirit to share knowledge and you rock

  16. Oliver

    on May 5, 2010 at 4:49 pm

    Hello,
    it works fantastic, but I `ve a problem with the font size in the List. It must only works on my own PC and I want to use it with a touchscreen monitor. But the Font-Names are to small. How can I get a bigger Size of the Names?

    Thanks

  17. Hardik

    on April 22, 2011 at 11:15 am

    Thanx a lot for this post,

    one question is that, what if i want to mask result dynamic text as it is not visible in mask. ??????????

  18. Arvin

    on August 3, 2011 at 4:18 pm

    Thanks a lot.

    good job :)

  19. Gabby

    on January 19, 2012 at 2:02 pm

    Thanks! :)

  20. FlashPaul

    on January 31, 2012 at 2:59 pm

    gosh, this is what im looking for, but i got an error

    1119: Access of possibly undefined property dataProvider through a reference with static type fl.controls:TextArea.

    1061: Call to a possibly undefined method setTextFormat through a reference with static type fl.controls:TextInput.

    1119: Access of possibly undefined property selectedItem through a reference with static type fl.controls:TextArea.

    that the error , some one help me, i need this in my thesis, , tnx in advance

  21. FlashPaul

    on February 2, 2012 at 5:32 am

    keep on rocking men!!!! . tnx a lot, i made it. this website will be included in my paper!!! THANK YOU!!! GOD BLESS!!

< >