1. Code
  2. ActionScript

Develop a Useful Font Picker App with ActionScript 3.0


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 in your classes folder.

Step 9: Importing the Necessary Classes

Create a new ActionScript file and import the necessary classes:

Step 10: Extending the Class

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

These are all the variables we'll use.

Step 12: Constructor

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

Step 13: Hide Elements

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

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.

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.

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.

Step 18: Color Picker Actions

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

Step 19: Adding the Listeners

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

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!


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!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.