Develop a Useful Font Picker App with 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 "fontList", 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:

view plaincopy to clipboardprint?

1. package
2. {
3. 
   
4. import flash.display.Sprite;
5. import flash.text.TextFormat;
6. import fl.transitions.Tween;
7. import fl.transitions.easing.Elastic;
8. import flash.text.Font;
9. import fl.data.DataProvider;
10. import flash.events.MouseEvent;
11. import flash.events.Event;
12. import fl.events.ListEvent;
13. import fl.events.ColorPickerEvent;
14. import flash.geom.ColorTransform;

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

view plaincopy to clipboardprint?

1. public class Main extends Sprite
2. {

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

view plaincopy to clipboardprint?

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

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

view plaincopy to clipboardprint?

1. public function Main()
2. {
3. showColorPicker(false);
4. loadFonts();
5. addListeners();
6. }

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

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

Step 13: Hide Elements

view plaincopy to clipboardprint?

1. private function showColorPicker(val:Boolean):void
2. {
3. bgColorText.visible = val;
4. fontColorText.visible = val;
5. bgColorPicker.visible = val;
6. fontColorPicker.visible = val;
7. }

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

view plaincopy to clipboardprint?

1. private function loadFonts():void
2. {
3. systemFonts = Font.enumerateFonts(true); //Returna an array of the installed fonts
4. systemFonts.sortOn("fontName"); //Sorts the font by name
5. /* Convert the Fonts Objects to Strings */
6. for (var i:int = 0; i <>
7. {
8. fontNames.push(systemFonts[i].fontName);
9. }
10. 
    
11. /* Set List data */
12. fontsMenu.fontsList.dataProvider = new DataProvider(fontNames);
13. }

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 < dataprovider =" new">
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.
view plaincopy to clipboardprint?
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  
}  
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.
view plaincopy to clipboardprint?
private function onChange(e:Event):void  
{  
    fmt.font = new String(e.target.selectedItem.data);  
    txt.setTextFormat(fmt);  
}  
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.
view plaincopy to clipboardprint?
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);  
}  
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.
view plaincopy to clipboardprint?
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;  
}  
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.
view plaincopy to clipboardprint?
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);  
}  
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!
source from : flash tuts+