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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers