Develop a Useful Font Picker App with ActionScript 3.0

Carlos Yanez on Jun 26th 2009 with 36 comments

When working with typography, like designing logos, choosing the correct font is crucial. The selection process can be a little slow if you’re testing each font in a design application. This tutorial will help you create your own font-testing app using Flash and ActionScript 3.0.

Step 1: Brief Overview

We’re going to create an interface using Components and the Flash Tools. You’ll be able to choose any font installed in your system using the List Component and change the Background or Font color using the Color Picker Component. The interface also has some tweens which are handled by the built-in Tween Class but you can use whatever you prefer, like TweenLite.

Step 2: Fla Properties

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to your desired dimensions. I’ve used 600 x 300px.

Step 3: Creating the Backgrounds

Select the Rectangle Tool and draw 2 rectangles, the sizes are 600 x 40px and 600 x 20px and the color is #202020. Align the first one in the top-center and the other one in the bottom-center.

Create another rectangle to use as the background color, you’ll be able to change this color using the Color Picker Component at runtime. This is 600 x 240px and the color is #EFEFEF.

Convert it to MovieClip and set its instance name to "bg".

Step 4: Adding the Input Text

The next item will contain the word or words that the user will be able to change.

Create an InputText of 580 x 80px, choose a size and a common font to show as default, like Arial 50px. Name the TextField "txt" and center it to the stage.

Step 5: Color Pickers

To change the color of the Background and the InputText we’ll use the Color Picker component. Open the Components Panel (Window > Components) and drag a ColorPicker component to the stage. Duplicate it (Cmd + D) and position them. Add some text to indicate which one is for the Background and which is for the font.

Step 6: Creating a Fonts Menu

In order to display the installed fonts we’ll use a List Component. This component will get its data from an Array that we’ll create later.

We’ll display the List Component in a Panel using a Tween, so let’s start by making that panel.

Create a 300 x 150px rectangle and fill it with #DFDFDF. Drag a List Component from the Components Panel, resize it to 280 x 120px and center it.

We’ll also need a Button to hide that window, so begin by selecting the Oval Tool and drawing a 20 x 20px circle. Fill it white and go to Edit > Duplicate. Resize the second to 16 x 16px and use a black fill. Then draw a little "x" in the center to tell the user that it will close the actual panel.

Name the button "closeBtn", the component "fontsList", convert all to a MovieClip, name it "fontsMenu" and position the panel at x: -160, y: 115.

Step 7: Showing the Fonts Menu

We’ll use a button on the stage to show the menu.

Create a button, name it "infobutton" and place it at the bottom-right of the stage.

Step 8: Main Class

In this application we’re going to use a single class that will take care of all the elements in the stage, animations and color.

Create a new ActionScript file and save it as Main.as in your classes folder.

Step 9: Importing the Necessary Classes

Create a new ActionScript file and import the necessary classes:

package
{

	import flash.display.Sprite;
	import flash.text.TextFormat;
	import fl.transitions.Tween;
	import fl.transitions.easing.Elastic;
	import flash.text.Font;
	import fl.data.DataProvider;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import fl.events.ListEvent;
	import fl.events.ColorPickerEvent;
	import flash.geom.ColorTransform;

Step 10: Extending the Class

public class Main extends Sprite
{

Altough we’re using MovieClips, we extend the class using Sprite because the MovieClips on stage are not using a Timeline; therefore they’re treated as Sprites.

Step 11: Variables

private var systemFonts:Array = new Array(); //Will store all the system fonts
private var fontNames:Array = new Array(); //Will store all the system fonts as Strings
private var fmt:TextFormat = new TextFormat(); //Textformat of the TextInput
private var tween:Tween; //Tween object

These are all the variables we’ll use.

Step 12: Constructor

public function Main()
{
	showColorPicker(false);
	loadFonts();
	addListeners();
}

This is the constructor function, it calls the starting functions.

Step 13: Hide Elements

private function showColorPicker(val:Boolean):void
{
	bgColorText.visible = val;
	fontColorText.visible = val;
	bgColorPicker.visible = val;
	fontColorPicker.visible = val;
}

With this function we only need to specify a parameter to show or hide the color picker text and components.

Step 14: Loading System Fonts

private function loadFonts():void
{
	systemFonts = Font.enumerateFonts(true); //Returna an array of the installed fonts
	systemFonts.sortOn("fontName"); //Sorts the font by name

	/* Convert the Fonts Objects to Strings */

	for (var i:int = 0; i < systemFonts.length; i++)
	{
		fontNames.push(systemFonts[i].fontName);
	}

	/* Set List data */

	fontsMenu.fontsList.dataProvider = new DataProvider(fontNames);
}

At the end of this function we'll have a List Component filled with all the installed fonts!

Step 15: Info Button Actions

Remember the info button? That's the button we created to show the fonts menu, this code will take care of that.

private function showFonts(e:MouseEvent):void
{
	/* Animate the fonts panel and the textInput*/

	tween = new Tween(fontsMenu,"x",Elastic.easeOut, -  fontsMenu.width,stage.stageWidth / 2,1,true);
	tween = new Tween(txt,"y",Elastic.easeOut,txt.y,txt.y + 85,1,true);

	e.target.visible = false; //Hide the info button

	showColorPicker(true); //Show the color pickers
}

Step 16: Browsing Fonts

When you click a font name in the List component the TextInput will automatically change the font to the selected one.

private function onChange(e:Event):void
{
	fmt.font = new String(e.target.selectedItem.data);
	txt.setTextFormat(fmt);
}

Step 17: Choosing a Font

When you're sure of the font you want to use, you can double-click it or use the close button. This will hide the font choosing menu and set back the position of the TextInput.

private function choosed(e:ListEvent):void
{
	infoButton.visible = true;

	tween = new Tween(fontsMenu,"x",Elastic.easeOut,stage.stageWidth / 2,stage.stageWidth + fontsMenu.width,2,true);
	tween = new Tween(txt,"y",Elastic.easeOut,txt.y,txt.y - 85,1,true);

	showColorPicker(false);
}

/* Cancel function */

private function cancel(e:MouseEvent):void
{
	infoButton.visible = true;

	tween = new Tween(fontsMenu,"x",Elastic.easeOut,stage.stageWidth / 2,stage.stageWidth + fontsMenu.width,2,true);
	tween = new Tween(txt,"y",Elastic.easeOut,txt.y,txt.y - 85,1,true);

	showColorPicker(false);
}

Step 18: Color Picker Actions

These functions will handle the color pickers for the background and the text.

private function changeFontColor(e:ColorPickerEvent):void
{
	fmt.color = "0x" + fontColorPicker.hexValue;
	txt.setTextFormat(fmt);
}

private function changeBgColor(e:ColorPickerEvent):void
{
	var colorTransform:ColorTransform = new ColorTransform();
	colorTransform.color = int("0x" + bgColorPicker.hexValue);
	bg.transform.colorTransform = colorTransform;
}

Step 19: Adding the Listeners

Create a function to add all the listeners at the same time. This function was called in the constructor.

private function addListeners():void
{
	infoButton.addEventListener(MouseEvent.MOUSE_UP, showFonts);
	fontsMenu.fontsList.addEventListener(Event.CHANGE, onChange);
	fontsMenu.fontsList.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, choosed);
	fontColorPicker.addEventListener(ColorPickerEvent.CHANGE, changeFontColor);
	bgColorPicker.addEventListener(ColorPickerEvent.CHANGE, changeBgColor);
	fontsMenu.closeBtn.addEventListener(MouseEvent.MOUSE_UP, cancel);
}

Step 20: Linking the Class

Go back to the Fla document, open the properties panel and in the "class" textfield write "Main" to link this as the Document Class.

Test the movie and see your Font Picker application run!

Conclusion

This is a very useful app for testing fonts, using this tut you can create your own app to satisfy your specific needs.

Thanks for reading and remember to clean your font library!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Carlos Yanez

Rollover to read this author's bio or click through to see a full list of posts by this author.

Carlos is a Web/Logo Designer, Flash Developer with passion for great designs and cool applications.  

Plus Premium
 
 
Add Comment

Discussion 36 Comments

  1. André says:
    June 26, 2009 at 4:18 am

    Hey dude, very nice work, congratulations and thanks for sharing.
    This is really very usefull.

    Reply
  2. imran says:
    June 26, 2009 at 6:07 am

    cooooooooool

    Reply
  3. Mark says:
    June 26, 2009 at 6:19 am

    Followed this to the ‘T’ and got 32 errors. Left out a few things, but pretty easy to get a handle on getting them fixed. Sweet tut regardless as they were easy fixes.

    Reply
  4. Dario Gutierrez says:
    June 26, 2009 at 6:40 am

    Nice tool and very useful Carlos.

    Reply
  5. Brian says:
    June 26, 2009 at 6:43 am

    Very Nice. Keep it up dude, get more source here : http://www.brianwiltshire.net/lab

    Reply
  6. cyber says:
    June 26, 2009 at 7:28 am

    VERY NICE,CARLOS VERY USEFUL

    Reply
  7. Mihail says:
    June 27, 2009 at 4:14 am

    Very useful! Bravo, Carlos! I am going to need such functionallity in a project that I am to develop soon. Thank you very much!

    Reply
  8. Diego SA says:
    June 28, 2009 at 12:18 pm

    WOW, useful my ass! It’s more than useful! It’s a rare found! Dude, do you have any idea of how f…ing awesome it is? This is wonderful!
    Thanks a lot!
    And sorry about my words used here! =P

    Reply
  9. Fajars says:
    June 29, 2009 at 6:53 pm

    Awesome….

    Reply
  10. viaria says:
    June 30, 2009 at 6:25 am

    uselfull and great

    Reply
  11. Nat says:
    July 2, 2009 at 2:25 am

    how do i convert to MovieClip im an amatuer soz

    Reply
  12. CgBaran Tuts says:
    July 2, 2009 at 9:33 pm

    Useful tutorial thanks

    Reply
  13. Bluey says:
    July 5, 2009 at 2:34 am

    I get the error …

    TypeError: Error #1010: A term is undefined and has no properties.
    at Main/loadFonts()
    at Main()

    For a newbie trying to learn flash, its a little hard to follow since this article does not tell the reader some essential instructions of naming elements.

    Great tutorial non the less though.

    Reply
  14. Ricardo says:
    July 6, 2009 at 7:22 am

    I also get this error:

    TypeError: Error #1010: A term is undefined and has no properties.
    at Main/loadFonts()
    at Main()

    You’ve developed a very useful application with relatively simple code, but this isn’t as much as a tutorial as it is a description of all the code you used, and there’s a difference. A little more depth about what does what would be much appreciated. But thanks for the time, even though I can’t get this to work at all.

    Reply
  15. Cacao says:
    July 9, 2009 at 12:30 pm

    Hi, this is great. But what if i wanted to embed the fonts so i can use the swf anywhere? Is it posible?

    Reply
  16. Andy says:
    July 27, 2009 at 5:58 pm

    Thas is cool , good tutorial

    Reply
  17. Hollis says:
    July 29, 2009 at 10:38 pm

    Very cool tutorial, but if i want only my embed fonts in the picker

    Reply
  18. Georgi says:
    July 31, 2009 at 4:32 am

    Great tut Carloz !

    Reply
  19. Hollis says:
    July 31, 2009 at 9:52 am

    I find how to show only my embedded fonts instead of system fonts, all you need to do is replace line 52-62 with

    var allFonts:Array = Font.enumerateFonts(true);
    allFonts.sortOn(“fontName”, Array.CASEINSENSITIVE);

    var embeddedFonts:Array = Font.enumerateFonts(false);
    embeddedFonts.sortOn(“fontName”, Array.CASEINSENSITIVE);

    for (var i:int = 0; i < embeddedFonts.length; i++)
    {
    fontNames.push(embeddedFonts[i].fontName);
    }

    Reply
  20. david says:
    September 1, 2009 at 3:07 am

    Can someone help me please on how to get this to work with embedded fonts

    please

    Reply
  21. Hollis roberts says:
    September 14, 2009 at 5:24 pm

    How i get my embed font to work, i embed all the fonts that i want 1st direct into the library also selecting export for actionscript and then I replace lines 52-62
    systemFonts = Font.enumerateFonts(true);
    systemFonts.sortOn(“fontName”);

    /* Convert the Fonts Objects to Strings */

    for (var i:int = 0; i < systemFonts.length; i++)
    {
    fontNames.push(systemFonts[i].fontName);
    }

    With this
    var allFonts:Array = Font.enumerateFonts(true);
    allFonts.sortOn(”fontName”, Array.CASEINSENSITIVE);
    var embeddedFonts:Array = Font.enumerateFonts(false);
    embeddedFonts.sortOn(”fontName”, Array.CASEINSENSITIVE);
    for (var i:int = 0; i < embeddedFonts.length; i++)
    {
    fontNames.push(embeddedFonts[i].fontName);
    }

    Reply
  22. Tyler says:
    March 19, 2010 at 8:47 am

    Since no one has answered the error problem yet, I will. The problem is that the tutorial tells you to give the List Component and Instance Name of ‘fontList’ and the code in Step 12 calls for something with an Instance Name of ‘fontsList’. There are two ways to fix this. You can either change the Instance Name of the Lis Component to ‘fontsList’ or you can change the code in Step 12 to call for ‘fontList’. Either one will work. BTW, GREAT FIRGGIN’ TUTORIAL CARLOS!! I have been waiting for something like this for a very long time. THANKS!

    Reply
  23. Simo says:
    July 16, 2010 at 12:08 am

    YOU ARE MY HERO!!

    Reply
  24. Simo says:
    July 16, 2010 at 2:17 am

    …just wondering…
    How to display only certain fonts embedding them in the project library and not all system fonts?

    Thanks!

    Reply
  25. Simo says:
    July 16, 2010 at 2:33 am

    Sorry!! I found it!
    Jim, i know i’m late maybe you already figured it out… the problem with the sintax error
    is due to code copying and pasting. As you paste it retype the two instances of “fontName” with quotation marks included (the real problem are those pasted quotation marks).

    Thank you Hollis for your precious hint and BIG BIG “THANK YOU!” to the author of this tutorial, Diego AS is right… do you actually know HOW WONDERFUL this is!??!

    =)

    Reply
  26. Alex says:
    August 13, 2010 at 11:52 am

    In Flash CS5 don’t work…

    Reply
  27. Alex says:
    August 14, 2010 at 4:00 am

    Why if i pubblish the source with fl cs5 it don’t work, instead if I pubblish it with Fl Cs3 it works?

    Reply
  28. Alex says:
    August 14, 2010 at 6:37 am

    Now it work also in Flash CS5 :

    package
    {

    import flashx.textLayout.formats.TextLayoutFormat;
    import fl.text.TLFTextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFieldType;
    import flash.text.AntiAliasType;

    import flash.display.Sprite;
    import flash.text.TextFormat;
    import fl.transitions.Tween;
    import fl.transitions.easing.Elastic;
    import flash.text.Font;
    import flash.text.engine.*;
    import fl.data.DataProvider;
    import flash.events.MouseEvent;
    import flash.events.Event;
    import fl.events.ListEvent;
    import fl.events.ColorPickerEvent;
    import flash.geom.ColorTransform;

    public class Main extends Sprite
    {
    /* Variables */

    private var systemFonts:Array = new Array();
    private var fontNames:Array = new Array();
    private var tween:Tween;

    private var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
    private var tlfTxt:TLFTextField = new TLFTextField();

    private var fmt:TextFormat = new TextFormat();
    public function Main()
    {
    showColorPicker(false);
    loadFonts();
    addListeners();
    testo();
    }

    /* Show or hide color picker (Text and Components) */

    private function testo():void
    {

    fmt.color = 0×000000;
    fmt.font = “Arial”;
    fmt.size = 50;

    tlfTxt.border = false;
    tlfTxt.multiline = false;
    tlfTxt.type = TextFieldType.INPUT;
    tlfTxt.antiAliasType = AntiAliasType.ADVANCED;
    tlfTxt.text = “FlashTuts+”;
    tlfTxt.setTextFormat(fmt);

    tlfTxt.wordWrap = false;
    tlfTxt.width = 300;
    tlfTxt.autoSize = TextFieldAutoSize.CENTER;
    tlfTxt.x = 150;
    tlfTxt.y = 130;
    addChild(tlfTxt);

    }

    private function showColorPicker(val:Boolean):void
    {
    bgColorText.visible = val;
    fontColorText.visible = val;
    bgColorPicker.visible = val;
    fontColorPicker.visible = val;
    }

    /* Load local fonts */

    private function loadFonts():void
    {
    systemFonts = Font.enumerateFonts(true);
    systemFonts.sortOn(“fontName”);

    /* Convert the Fonts Objects to Strings */

    for (var i:int = 0; i < systemFonts.length; i++)
    {
    fontNames.push(systemFonts[i].fontName);
    }

    /* Set List data */

    fontsMenu.fontsList.dataProvider = new DataProvider(fontNames);
    }

    /* Info button actions */

    private function showFonts(e:MouseEvent):void
    {
    tween = new Tween(fontsMenu,"x",Elastic.easeOut, – fontsMenu.width,stage.stageWidth / 2,1,true);
    //tween = new Tween(txt,"y",Elastic.easeOut,txt.y,txt.y + 85,1,true);
    e.target.visible = false;
    tween = new Tween(tlfTxt,"y",Elastic.easeOut,tlfTxt.y,tlfTxt.y + 85,1,true);

    showColorPicker(true);
    }

    /* Choose actions */

    private function onChange(e:Event):void
    {
    fmt.font = new String(e.target.selectedItem.data);
    fmt.color = "0x" + fontColorPicker.hexValue;
    tlfTxt.setTextFormat(fmt);
    //txt.setTextFormat(fmt);
    //trace(fmt.color);

    }

    private function choosed(e:ListEvent):void
    {
    infoButton.visible = true;

    tween = new Tween(fontsMenu,"x",Elastic.easeOut,stage.stageWidth / 2,stage.stageWidth + fontsMenu.width,2,true);
    //tween = new Tween(txt,"y",Elastic.easeOut,txt.y,txt.y – 85,1,true);
    tween = new Tween(tlfTxt,"y",Elastic.easeOut,tlfTxt.y,tlfTxt.y – 85,1,true);
    showColorPicker(false);
    }

    /* Cancel function */

    private function cancel(e:MouseEvent):void
    {
    infoButton.visible = true;

    tween = new Tween(fontsMenu,"x",Elastic.easeOut,stage.stageWidth / 2,stage.stageWidth + fontsMenu.width,2,true);
    //tween = new Tween(txt,"y",Elastic.easeOut,txt.y,txt.y – 85,1,true);
    tween = new Tween(tlfTxt,"y",Elastic.easeOut,tlfTxt.y,tlfTxt.y – 85,1,true);
    showColorPicker(false);
    }

    /* Handle color picker */

    private function changeFontColor(e:ColorPickerEvent):void
    {

    fmt.color = "0x" + fontColorPicker.hexValue;
    //txt.setTextFormat(fmt);
    tlfTxt.setTextFormat(fmt);
    }

    private function changeBgColor(e:ColorPickerEvent):void
    {
    var colorTransform:ColorTransform = new ColorTransform();
    colorTransform.color = int("0x" + bgColorPicker.hexValue);
    bg.transform.colorTransform = colorTransform;
    }

    private function addListeners():void
    {
    infoButton.addEventListener(MouseEvent.MOUSE_UP, showFonts);
    fontsMenu.fontsList.addEventListener(Event.CHANGE, onChange);
    fontsMenu.fontsList.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, choosed);
    fontColorPicker.addEventListener(ColorPickerEvent.CHANGE, changeFontColor);
    bgColorPicker.addEventListener(ColorPickerEvent.CHANGE, changeBgColor);
    fontsMenu.closeBtn.addEventListener(MouseEvent.MOUSE_UP, cancel);

    }
    }
    }

    Reply
  29. nite says:
    July 4, 2011 at 4:53 am

    thanks alex

    Reply
  30. andrew says:
    August 23, 2011 at 7:12 am

    I know to populate a combo box with all the device fonts.

    I want to be able to use those device fonts.

    fonts = Font.enumerateFonts(true).sortOn(“fontName”);

    When I make the selection.

    var font:Font = fonts[event.target.selectedIndex];
    text_txt.embedFonts = true;
    tf.font = font.fontName;
    text_txt.setTextFormat(tf);

    It’s requiring that the fonts be embedded, anyone know how to embed any/all device fonts at runtime,

    without having to add them one by one into the library.

    Reply
    • Andrew says:
      August 23, 2011 at 7:45 am

      Figured it out.

      To use the font you select is.

      private function handleSelection(event:Event):void
      {
      var ffont:Font = event.target.selectedItem.data;
      tf.font = ffont.fontName;
      text_txt.setTextFormat(tf);
      }

      public function getDeviceFonts()
      {
      fonts = Font.enumerateFonts(true);
      fonts.sortOn(“fontName”);
      var fonts_array:Array = new Array();

      for (var i:int = 0; i < fonts.length; i++)
      {
      combo.addItem({label:fonts[i].fontName, data:fonts[i]});

      }

      }

      Reply

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.